Update UI to match latest Chrome styles (#90)

anthonyec · Jun 16, 2024 · 0287bab · 0287bab
1 parent 98bc91d
commit 0287bab
Show file tree

Hide file tree

Showing 14 changed files with 115 additions and 65 deletions.
diff --git a/src/popup/app.css b/src/popup/app.css
@@ -8,7 +8,7 @@
   --item-selected-background: #EAEBEB;
 
   --item-padding: 10px 15px;
-  --item-padding-left-right: 15px;
+  --item-padding-left-right: 20px;
 
   --button-normal-background: #FFFFFF;
   --button-hover-background: #FAFAFA;
@@ -28,6 +28,7 @@
   --button-danger-color: #C5392A;
 
   --input-normal-background: #FFFFFF;
+  --input-hover-background: #F2F2F2;
   --input-normal-color: #2A2B2E;
   --input-normal-border-color: #B1B1B1;
   --input-placeholder-color: #757575;
@@ -40,10 +41,10 @@
   --list-heading-color: #5F6368;
   --list-heading-border-color: #DADCE0;
 
-  --toast-background: #323232;
-  --toast-color: #FFFFFF;
+  --toast-background: #303030;
+  --toast-color: #F2F2F2;
   --toast-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.28);
-  --toast-action-color: #8DB8FE;
+  --toast-action-color: #A8C7FA;
   --toast-action-active-background: #363B46;
   --toast-action-focus-border-color: #2088FF;
   --toast-action-focus-box-shadow: 0 0 0 1px rgba(32, 136, 255, 1);
@@ -52,18 +53,32 @@
   --context-menu-background: #FFFFFF;
   --context-menu-item-hover-background: var(--item-selected-background);
   --context-menu-item-color: var(--global-color);
+
+  --scrollbar-thumb-color: #5F6369;
+  --scrollbar-track-color: #FFFFFF;
+
+  --toggle-track-normal-background: #E1E3E1;
+  --toggle-track-checked-background: #0A57D0;
+
+  --toggle-track-normal-border-color: #757775;
+  --toggle-track-checked-border-color: #0A57D0;
+
+  --toggle-knob-normal-background: #757775;
+  --toggle-knob-hover-background: #C8D7F0;
+  --toggle-knob-checked-background: #FFFFFF;
 }
 
 @media(prefers-color-scheme: dark) {
   :root {
-    --global-background: #292A2D;
+    --global-background: #1F1F1F;
     --global-color: #E1E1E1;
-    --global-focus-box-shadow: 0 0 0 1px rgba(32, 136, 255, 1);
+    --global-focus-border-color: #729CEF;
+    --global-focus-box-shadow: 0 0 0 1px #729CEF;
 
-    --item-hover-background: #38393C;
-    --item-selected-background: #4C4E52;
+    --item-hover-background: #2F2F2F;
+    --item-selected-background: #363636;
 
-    --button-normal-background: #292A2D;
+    --button-normal-background: #1F1F1F;
     --button-hover-background: #303339;
     --button-active-background: #363B46;
 
@@ -76,26 +91,42 @@
     --button-active-color: #85AAE9;
     --button-danger-color: #F28B82;
 
-    --input-normal-background: #1D1D1F;
+    --input-normal-background: #1F1F1F;
+    --input-hover-background: #363636;
     --input-normal-color: #E1E1E1;
     --input-normal-border-color: #5F6368;
     --input-placeholder-color: #919191;
 
-    --icon-normal-fill: #9AA0A7;
+    --icon-normal-fill: #C7C7C7;
 
     --toolbar-border-color: #393D40;
 
     --list-heading-background: var(--global-background);
     --list-heading-color: #9AA0A6;
-    --list-heading-border-color: #3C4043;
+    --list-heading-border-color: #363636;
 
-    --toast-background: #303134;
-    --toast-color: #E8EAED;
+    --toast-background: #FFFFFF;
+    --toast-color: #1F1F1F;
+    --toast-action-color: #0A57D0;
+    --toast-action-active-background: transparent;
 
     --context-menu-shadow: rgba(0, 0, 0, .3) 0 1px 2px 0, rgba(0, 0, 0, .15) 0 3px 6px 2px;
-    --context-menu-background: #303134;
+    --context-menu-background: #262626;
     --context-menu-item-hover-background: var(--item-selected-background);
     --context-menu-item-color: var(--global-color);
+
+    --scrollbar-thumb-color: #C7C7C7;
+    --scrollbar-track-color: #1F1F1F;
+
+    --toggle-track-normal-background: #454746;
+    --toggle-track-checked-background: #A8C7FA;
+
+    --toggle-track-normal-border-color: #8F918F;
+    --toggle-track-checked-border-color: #A8C7FA;
+
+    --toggle-knob-normal-background: #8F918F;
+    --toggle-knob-hover-background: #2755AA;
+    --toggle-knob-checked-background: #062E6F;
   }
 }
 

diff --git a/src/popup/components/button/button.css b/src/popup/components/button/button.css
@@ -8,14 +8,15 @@
 
   border-width: 1px;
   border-style: solid;
-  border-radius: 3px;
+  border-radius: 100px;
 
   padding-left: var(--button-padding-left-right);
   padding-right: var(--button-padding-left-right);
   font-size: var(--button-font-size);
-  height: 34px;
+  height: 36px;
   font-weight: 500;
   min-width: 76px;
+  transition: background 100ms ease;
 }
 
 .button:hover {

diff --git a/src/popup/components/icon_button/icon_button.css b/src/popup/components/icon_button/icon_button.css
@@ -36,7 +36,7 @@
 
 .icon-button:focus {
   border-color: var(--global-focus-border-color);
-  box-shadow: var(--global-focus-box-shadow);
+  box-shadow: var(--global-focus-box-shadow), 0 0 0 1px var(--button-normal-background) inset;
   outline: 0;
 }
 

diff --git a/src/popup/components/list/index.jsx b/src/popup/components/list/index.jsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState
+} from 'react';
 
 import { clamp } from '../../lib/clamp';
 import ItemActions from '../item_actions';
@@ -59,6 +65,8 @@ const List = React.forwardRef(
     },
     ref
   ) => {
+    const listClassName = groups.length > 0 ? 'list list--with-groups' : 'list';
+
     const [selectedItemIndex, setSelectedItemIndex] =
       useState(initialSelectedItem);
     const [hoveredItemIndex, setHoveredItemIndex] = useState(-1);
@@ -165,11 +173,11 @@ const List = React.forwardRef(
       const isSelected = index === selectedItemIndex;
       const isHovered = index === hoveredItemIndex;
 
-      const listClassNameWithGroup =
+      const listItemClassNameWithGroup =
         groups.length !== 0 ? 'list__item--group' : '';
       const className = isSelected
-        ? `list__item list__item--selected ${listClassNameWithGroup}`
-        : `list__item ${listClassNameWithGroup}`;
+        ? `list__item list__item--selected ${listItemClassNameWithGroup}`
+        : `list__item ${listItemClassNameWithGroup}`;
 
       // If the selected item is under a heading, use the heading as the
       // element ref for the scroll view to scroll to. This keeps headings
@@ -216,7 +224,7 @@ const List = React.forwardRef(
       );
     });
 
-    return <div className="list">{renderedItems}</div>;
+    return <div className={listClassName}>{renderedItems}</div>;
   }
 );
 

diff --git a/src/popup/components/list/list.css b/src/popup/components/list/list.css
@@ -1,4 +1,10 @@
-.list {}
+.list {
+  padding: 8px 0;
+}
+
+.list--with-groups {
+  padding: 0;
+}
 
 .list__heading {
   background: var(--list-heading-background);
@@ -11,13 +17,14 @@
 }
 
 .list__heading:first-child {
+  border-top: 0;
   margin-top: 0;
 }
 
 .list__item {
   padding-left: var(--item-padding-left-right);
   padding-right: var(--item-padding-left-right);
-  height: 34px;
+  height: 40px;
   font-size: 12px;
   line-height: 20px;
   user-select: none;

diff --git a/src/popup/components/scroll_view/scroll_view.css b/src/popup/components/scroll_view/scroll_view.css
@@ -1,7 +1,9 @@
 .scroll-view {
-  padding: 0 0 8px;
-  max-height: 400px;
+  max-height: 450px;
   overflow-y: scroll;
+
+  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
+  scrollbar-width: thin;
 }
 
 .scroll-view--disabled {

diff --git a/src/popup/components/search_field/index.jsx b/src/popup/components/search_field/index.jsx
@@ -18,12 +18,8 @@ function SearchField(
   },
   ref
 ) {
-  const className = showBorder
-    ? 'search-field search-field--with-border'
-    : 'search-field';
-
   return (
-    <div className={className}>
+    <div className="search-field">
       <input
         className="search-field__input"
         type="text"
@@ -39,7 +35,7 @@ function SearchField(
         autoCapitalize="off"
         spellCheck="false"
       />
-      <IconButton onClick={onAddClick} disabled={disabled}>
+      <IconButton className="search-field__add-button" onClick={onAddClick}>
         <Icon name="plus" />
       </IconButton>
     </div>

diff --git a/src/popup/components/search_field/search_field.css b/src/popup/components/search_field/search_field.css
@@ -1,27 +1,25 @@
 .search-field {
+  box-shadow: 0 1px 0 0 var(--list-heading-border-color);
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
   padding: 8px;
   position: relative;
   z-index: 2;
 }
 
-.search-field--with-border {
-  box-shadow: 0 1px 0 0 var(--list-heading-border-color);
-}
-
 .search-field__input {
   background-color: var(--input-normal-background);
   color: var(--input-normal-color);
   border-color: var(--input-normal-border-color);
   font-size: var(--button-font-size);
   border-width: 1px;
   border-style: solid;
-  border-radius: 3px;
+  border-radius: 8px;
   font-family: inherit;
   width: 100%;
-  padding: 10px 8px;
+  height: 40px;
+  padding: 0 11px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   outline: none;
 }
@@ -36,13 +34,13 @@
 }
 
 .search-field__add-button {
-  width: 50px;
-  height: 37px;
-  min-width: 8px;
-  padding-left: 0;
-  padding-right: 0;
+  background-color: var(--button-normal-color);
+}
+
+.search-field__add-button:focus {
+  background-color: var(--button-normal-color);
 }
 
-.search-field__add-button .icon svg {
-  margin: 0
+.search-field__add-button svg {
+  color: var(--global-background);
 }
diff --git a/src/popup/components/text_field/text_field.css b/src/popup/components/text_field/text_field.css
@@ -11,13 +11,18 @@
 
   border-width: 1px;
   border-style: solid;
-  border-radius: 3px;
+  border-radius: 8px;
   font-family: inherit;
   width: 100%;
-  padding: 0 8px;
-  height: 32px;
+  padding: 0 12px;
+  height: 36px;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   outline: none;
+  transition: background 100ms ease;
+}
+
+.text-field__input:not(:focus):hover {
+  background-color: var(--input-hover-background);
 }
 
 .text-field__input:focus {

diff --git a/src/popup/components/titlebar/index.jsx b/src/popup/components/titlebar/index.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useRef } from 'react';
 
-import Button from '../../components/button';
 import Icon from '../../components/icon';
 import IconButton from '../icon_button';
 
@@ -11,7 +10,7 @@ export default function Titlebar({ title = '', onBackClick = () => {} }) {
 
   useEffect(() => {
     if (backButtonRef.current) {
-      backButtonRef.current.focus();
+      // backButtonRef.current.focus();
     }
   }, []);
 

diff --git a/src/popup/components/titlebar/titlebar.css b/src/popup/components/titlebar/titlebar.css
@@ -1,8 +1,8 @@
 .titlebar {
-  height: 53px;
+  height: 65px;
   display: flex;
   align-items: center;
-  padding: 0 18px;
+  padding: 0 22px;
   gap: 8px;
 }
 
@@ -15,7 +15,6 @@
 }
 
 .titlebar__title {
-  font-size: 15px;
+  font-size: 16px;
   font-weight: 500;
-  letter-spacing: -0.2;
 }