koba04 · koba04 · Jun 21, 2022 · Jun 4, 2022 · Jun 20, 2022
diff --git a/packages/swr-devtools-panel/src/components/CacheKey.tsx b/packages/swr-devtools-panel/src/components/CacheKey.tsx
@@ -16,18 +16,35 @@ export const CacheKey = ({
 }) => {
   return (
     <CacheText>
-      {devToolsCacheData.isInfinite && <InfiniteLabel />}
-      {devToolsCacheData.error && <ErrorLabel />}
-      {devToolsCacheData.isLoading && <LoadingLabel />}
-      {devToolsCacheData.isValidating && <ValidationgLabel />}
-      {devToolsCacheData.isInfinite
-        ? devToolsCacheData.infiniteKey
-        : devToolsCacheData.key}
+      <div>
+        {devToolsCacheData.isInfinite
+          ? devToolsCacheData.infiniteKey
+          : devToolsCacheData.key}
+      </div>
+      <Labels>
+        {devToolsCacheData.isInfinite && <InfiniteLabel />}
+        {devToolsCacheData.error && <ErrorLabel />}
+        {devToolsCacheData.isLoading && <LoadingLabel />}
+        {devToolsCacheData.isValidating && <ValidationgLabel />}
+      </Labels>
     </CacheText>
   );
 };
 
-const CacheText = styled.span`
-  display: inline-block;
-  padding: 0.3rem;
+const CacheText = styled.div`
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-right: auto;
+  flex: 1;
+  padding-left: 8px;
+  min-height: 2em;
+`;
+
+const Labels = styled.div`
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  margin-left: 8px;
+  margin-right: 4px;
 `;
diff --git a/packages/swr-devtools-panel/src/components/NetworkPanel.tsx b/packages/swr-devtools-panel/src/components/NetworkPanel.tsx
@@ -290,6 +290,7 @@ export const NetworkPanel = ({
 };
 
 const PanelWrapper = styled.section`
+  box-sizing: border-box;
   display: flex;
   justify-content: space-around;
   padding: 0;

diff --git a/packages/swr-devtools-panel/src/components/Panel.tsx b/packages/swr-devtools-panel/src/components/Panel.tsx
@@ -58,14 +58,14 @@ export const Panel = ({
                 <CacheItemButton
                   onClick={() => onSelectItem(devToolsCacheData)}
                 >
-                  <CacheKey devToolsCacheData={devToolsCacheData} /> (
-                  {devToolsCacheData.timestampString})
+                  <CacheKey devToolsCacheData={devToolsCacheData} />
+                  <Timestamp>{devToolsCacheData.timestampString}</Timestamp>
                 </CacheItemButton>
               </CacheItem>
             ))}
         </CacheItems>
       </PanelItem>
-      <Hr />
+      <VerticalDivider />
       <PanelItem>
         {selectedDevToolsCacheData && (
           <CacheData devToolsCacheData={selectedDevToolsCacheData} />
@@ -76,6 +76,7 @@ export const Panel = ({
 };
 
 const PanelWrapper = styled.section`
+  box-sizing: border-box;
   display: flex;
   justify-content: space-around;
   padding: 0;
@@ -85,7 +86,7 @@ const PanelWrapper = styled.section`
 
 const PanelItem = styled.div`
   flex: 1;
-  overflow: scroll;
+  overflow: auto;
 `;
 
 const CacheItems = styled.ul`
@@ -121,6 +122,11 @@ const CacheItemButton = styled.button`
   text-align: left;
 `;
 
-const Hr = styled.hr`
-  border-color: var(--swr-devtools-border-color);
+const VerticalDivider = styled.div`
+  background-color: var(--swr-devtools-border-color);
+  width: 1px;
+`;
+
+const Timestamp = styled.span`
+  margin-right: 8px;
 `;
diff --git a/packages/swr-devtools-panel/src/components/SWRDevToolPanel.tsx b/packages/swr-devtools-panel/src/components/SWRDevToolPanel.tsx
@@ -54,7 +54,7 @@ const GlobalStyle = createGlobalStyle`
     @media (prefers-color-scheme: dark) {
       --swr-devtools-text-color: #FFF;
       --swr-devtools-bg-color: #292a2d;
-      --swr-devtools-hover-bg-color: #6d6a66;
+      --swr-devtools-hover-bg-color: #37383b;
       --swr-devtools-border-color: #555454;
       --swr-devtools-selected-bg-color: #524f4d;
       --swr-devtools-selected-border-color: #bbb;
@@ -81,7 +81,15 @@ export const SWRDevToolPanel = ({ cache, events }: Props) => {
     <DevToolWindow>
       <GlobalStyle />
       <Header>
-        <HeaderTitle>SWR</HeaderTitle>
+        <HeaderLogoWrapper>
+          <svg height="12" viewBox="0 0 291 69" fill="none">
+            <path
+              d="M0 36.53c.07 17.6 14.4 32.01 32.01 32.01a32.05 32.05 0 0032.01-32V32a13.2 13.2 0 0123.4-8.31h20.7A32.07 32.07 0 0077.2 0a32.05 32.05 0 00-32 32.01v4.52A13.2 13.2 0 0132 49.71a13.2 13.2 0 01-13.18-13.18 3.77 3.77 0 00-3.77-3.77H3.76A3.77 3.77 0 000 36.53zM122.49 68.54a32.14 32.14 0 01-30.89-23.7h20.67a13.16 13.16 0 0023.4-8.3V32A32.05 32.05 0 01167.68 0c17.43 0 31.64 14 32 31.33l.1 5.2a13.2 13.2 0 0023.4 8.31h20.7a32.07 32.07 0 01-30.91 23.7c-17.61 0-31.94-14.42-32.01-32l-.1-4.7v-.2a13.2 13.2 0 00-13.18-12.81 13.2 13.2 0 00-13.18 13.18v4.52a32.05 32.05 0 01-32.01 32.01zM247.94 23.7a13.16 13.16 0 0123.4 8.31 3.77 3.77 0 003.77 3.77h11.3a3.77 3.77 0 003.76-3.77A32.05 32.05 0 00258.16 0a32.07 32.07 0 00-30.92 23.7h20.7z"
+              fill="currentColor"
+            />
+          </svg>
+          <HeaderTitle>SWR</HeaderTitle>
+        </HeaderLogoWrapper>
         <Tab
           panels={panels}
           current={activePanel}
@@ -114,6 +122,7 @@ export const SWRDevToolPanel = ({ cache, events }: Props) => {
 };
 
 const DevToolWindow = styled.div`
+  box-sizing: border-box;
   width: 100%;
   height: 100%;
   display: flex;
@@ -131,16 +140,23 @@ const Header = styled.header`
   color: var(--swr-devtools-text-color);
 `;
 
+const HeaderLogoWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding-left: 8px;
+  padding-right: 16px;
+`;
+
 const HeaderTitle = styled.h3`
   margin: 0;
-  padding: 0.2rem 1rem;
-  align-self: center;
+  user-select: none;
 `;
 
 const PanelWrapper = styled.div`
   position: relative;
-  height: calc(100% - 40px);
   width: 100%;
+  height: calc(100% - 36px);
 `;
 
 const NoteText = styled.p`

diff --git a/packages/swr-devtools-panel/src/components/SearchInput.tsx b/packages/swr-devtools-panel/src/components/SearchInput.tsx
@@ -9,14 +9,14 @@ type Props = {
 
 export const SearchInput = (props: Props) => (
   <SearchArea>
-    <SearchIcon />
     <Input
       type="text"
       value={props.value}
       onChange={(e) => props.onChange(e.currentTarget.value)}
       aria-label="Search"
-      placeholder="Input a search query"
+      placeholder="Search keys"
     />
+    <SearchIcon />
   </SearchArea>
 );
 
@@ -26,20 +26,26 @@ const SearchArea = styled.label`
   width: 100%;
   display: flex;
   align-items: center;
-  gap: 8px;
   height: 2rem;
   margin: 0;
   padding: 0;
   border-bottom: solid 1px var(--swr-devtools-border-color);
+  background-color: var(--swr-devtools-bg-color);
+  &:focus-within,
+  &:hover {
+    background-color: var(--swr-devtools-hover-bg-color);
+  }
 `;
 
 const Input = styled.input`
   width: 100%;
   height: 100%;
-  background-color: var(--swr-devtools-bg-color);
   border: solid 1px var(--swr-devtools-border-color);
+  background: none;
   border: 0;
   margin: 0;
   padding: 0;
+  padding-left: 8px;
   color: var(--swr-devtools-text-color);
+  outline: none;
 `;
diff --git a/packages/swr-devtools-panel/src/components/StatusLabel.tsx b/packages/swr-devtools-panel/src/components/StatusLabel.tsx
@@ -1,19 +1,53 @@
 import React from "react";
+import styled from "styled-components";
 
 export const ErrorLabel = ({ children }: { children?: string }) => (
-  <span aria-label="error">❌&nbsp;{children}</span>
+  <Label>
+    {children && <span aria-label="error">{children}</span>}
+    <Icon>❌</Icon>
+  </Label>
 );
 
 export const LoadingLabel = ({ children }: { children?: string }) => (
-  <span aria-label="loading">⏳&nbsp;{children}</span>
+  <Label>
+    {children && <span aria-label="loading">{children}</span>}
+    <Icon>⏳</Icon>
+  </Label>
 );
 
 export const ValidationgLabel = ({ children }: { children?: string }) => (
-  <span aria-label="validating">⚠️&nbsp;{children}</span>
+  <Label>
+    {children && <span aria-label="validating">{children}</span>}
+    <Icon>⚠️</Icon>
+  </Label>
 );
 
 export const InfiniteLabel = ({ children }: { children?: string }) => (
-  <span aria-label="infinite">
-    <span style={{ backgroundColor: "white" }}>♾️</span>&nbsp;{children}
-  </span>
+  <Label>
+    {children && <span aria-label="infinite">{children}</span>}
+    <Icon>
+      <span
+        style={{
+          backgroundColor: "rgba(255, 255, 255, .8)",
+          borderRadius: 4,
+          padding: 2,
+        }}
+      >
+        ♾️
+      </span>
+    </Icon>
+  </Label>
 );
+
+const Label = styled.label`
+  display: inline-flex;
+  align-items: center;
+`;
+
+const Icon = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75em;
+  line-height: 0;
+`;
diff --git a/packages/swr-devtools-panel/src/components/Tab.tsx b/packages/swr-devtools-panel/src/components/Tab.tsx
@@ -48,6 +48,7 @@ const TabButton = styled.button.attrs({ type: "button" })<{
         ? "var(--swr-devtools-selected-bg-color)"
         : "var(--swr-devtools-hover-bg-color)"};
   }
+  user-select: none;
 `;
 
 const TabGroup = styled.ul`

diff --git a/packages/swr-devtools-panel/src/components/icons/SearchIcon.tsx b/packages/swr-devtools-panel/src/components/icons/SearchIcon.tsx
@@ -7,8 +7,8 @@ export const SearchIcon = () => (
       xmlns="http://www.w3.org/2000/svg"
       x="0px"
       y="0px"
-      width="24"
-      height="24"
+      width="16"
+      height="16"
       viewBox="0 0 16 16"
       style={{ fill: "var(--swr-devtools-text-color)" }}
     >
@@ -18,5 +18,9 @@ export const SearchIcon = () => (
 );
 
 const IconWrapper = styled.span`
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  right: 8px;
 `;