UX Multichain: updated ui for settings page (#19167)

* updated ui for settings page

* lint fix

* resolved errors

* fixed search bar css

* fixed css

* lint fix

* fixed tests

* fixed indentation

* updated settings aria label

app/_locales/de/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Suchergebnisse"
   },
-  "searchSettings": {
-    "message": "In Einstellungen suchen"
-  },
   "searchTokens": {
     "message": "Token suchen"
   },

app/_locales/el/messages.json

@@ -3047,12 +3047,6 @@
   "searchAccounts": {
     "message": "Αναζήτηση Λογαριασμών"
   },
-  "searchResults": {
-    "message": "Αποτελέσματα Αναζήτησης"
-  },
-  "searchSettings": {
-    "message": "Αναζήτηση στις Ρυθμίσεις"
-  },
   "searchTokens": {
     "message": "Αναζήτηση Tokens"
   },

app/_locales/en/messages.json

@@ -3522,9 +3522,6 @@
   "searchResults": {
     "message": "Search results"
   },
-  "searchSettings": {
-    "message": "Search in Settings"
-  },
   "searchTokens": {
     "message": "Search tokens"
   },

app/_locales/es/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Resultados de la búsqueda"
   },
-  "searchSettings": {
-    "message": "Buscar en Configuración"
-  },
   "searchTokens": {
     "message": "Buscar tokens"
   },

app/_locales/fr/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Résultats de la recherche"
   },
-  "searchSettings": {
-    "message": "Rechercher dans les paramètres"
-  },
   "searchTokens": {
     "message": "Rechercher des jetons"
   },

app/_locales/hi/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "खोज परिणाम"
   },
-  "searchSettings": {
-    "message": "सेटिंग्स में खोजें"
-  },
   "searchTokens": {
     "message": "टोकन खोजें"
   },

app/_locales/id/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Cari hasil"
   },
-  "searchSettings": {
-    "message": "Cari di Pengaturan"
-  },
   "searchTokens": {
     "message": "Cari token"
   },

app/_locales/ja/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "検索結果"
   },
-  "searchSettings": {
-    "message": "設定で検索"
-  },
   "searchTokens": {
     "message": "トークンを検索"
   },

app/_locales/ko/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "검색 결과"
   },
-  "searchSettings": {
-    "message": "설정에서 찾기"
-  },
   "searchTokens": {
     "message": "토큰 검색"
   },

app/_locales/pt/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Resultados da busca"
   },
-  "searchSettings": {
-    "message": "Buscar nas configurações"
-  },
   "searchTokens": {
     "message": "Buscar tokens"
   },

app/_locales/ru/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Результаты поиска"
   },
-  "searchSettings": {
-    "message": "Поиск в настройках"
-  },
   "searchTokens": {
     "message": "Поиск токенов"
   },

app/_locales/tl/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Mga Resulta ng Paghahanap"
   },
-  "searchSettings": {
-    "message": "Maghanap sa mga Setting"
-  },
   "searchTokens": {
     "message": "Maghanap ng Mga Token"
   },

app/_locales/tr/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Arama sonuçları"
   },
-  "searchSettings": {
-    "message": "Ayarlarda ara"
-  },
   "searchTokens": {
     "message": "Token ara"
   },

app/_locales/vi/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "Kết quả tìm kiếm"
   },
-  "searchSettings": {
-    "message": "Tìm kiếm trong phần Cài đặt"
-  },
   "searchTokens": {
     "message": "Tìm kiếm token"
   },

app/_locales/zh_CN/messages.json

@@ -3050,9 +3050,6 @@
   "searchResults": {
     "message": "搜索结果"
   },
-  "searchSettings": {
-    "message": "在设置中搜索"
-  },
   "searchTokens": {
     "message": "搜索代币"
   },

ui/components/app/tab-bar/index.scss

@@ -13,30 +13,26 @@
     min-width: 0;
     flex: 0 0 auto;
     box-sizing: border-box;
-    opacity: 0.5;
     transition: opacity 200ms ease-in-out;
     background-color: unset;
     text-align: start;
-
+    position: relative;
-    @include screen-sm-min {
-      &:hover {
-        opacity: 0.4;
-      }
-
-      &:active {
-        opacity: 0.6;
-      }
-    }
 
     @include screen-sm-max {
       @include H4;
 
-      border-bottom: 1px solid var(--color-border-muted);
       opacity: 1;
     }
 
+    &__selected-indicator {
+      width: 4px;
+      height: calc(100% - 8px);
+      position: absolute;
+      top: 4px;
+      left: 4px;
+    }
+
     &__content {
-      padding: 12px 18px;
       display: flex;
       align-items: center;
       position: relative;
@@ -67,7 +63,6 @@
         justify-content: center;
         margin-inline-end: 16px;
         flex: 0 0 18px;
-        color: var(--color-icon-alternative);
       }
     }
 
@@ -87,6 +82,10 @@
 
     &--active {
       opacity: 1 !important;
+
+      @include screen-sm-min {
+        background-color: var(--color-primary-muted);
+      }
     }
   }
 

ui/components/app/tab-bar/tab-bar.js

@@ -3,6 +3,12 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 import { Icon, IconName, IconSize } from '../../component-library';
+import Box from '../../ui/box';
+import {
+  BorderRadius,
+  Color,
+  DISPLAY,
+} from '../../../helpers/constants/design-system';
 
 const TabBar = (props) => {
   const { tabs = [], onSelect, isActive } = props;
@@ -10,13 +16,26 @@ const TabBar = (props) => {
   return (
     <div className="tab-bar">
       {tabs.map(({ key, content, icon }) => (
-        <button
+        <Box
+          as="button"
           key={key}
+          paddingTop={5}
+          paddingBottom={5}
+          paddingLeft={4}
+          paddingRight={4}
           className={classnames('tab-bar__tab pointer', {
             'tab-bar__tab--active': isActive(key, content),
           })}
           onClick={() => onSelect(key)}
         >
+          {isActive(key, content) && (
+            <Box
+              className="tab-bar__tab__selected-indicator"
+              borderRadius={BorderRadius.pill}
+              backgroundColor={Color.primaryDefault}
+              display={[DISPLAY.NONE, DISPLAY.BLOCK]}
+            />
+          )}
           <div className="tab-bar__tab__content">
             <div className="tab-bar__tab__content__icon">{icon}</div>
             <div className="tab-bar__tab__content__title">{content}</div>
@@ -26,7 +45,7 @@ const TabBar = (props) => {
             size={IconSize.Sm}
             className="tab-bar__tab__caret"
           />
-        </button>
+        </Box>
       ))}
     </div>
   );

ui/pages/settings/index.scss

@@ -23,34 +23,42 @@
   }
 
   &__header {
-    padding: 8px 24px 8px 24px;
+    padding: 20px 16px 20px 16px;
-    position: relative;
-
-    @include screen-sm-max {
-      background: var(--color-background-alternative);
-    }
 
     &__title-container {
-      display: flex;
+      display: grid;
-      flex-flow: row nowrap;
       align-items: center;
-      flex: 0 0 auto;
+      grid-template-columns: 197px 1fr 1fr;
 
-      &__close-button {
+      @include screen-sm-max {
-        margin-left: auto;
+        grid-template-rows: 1fr 1fr;
-      }
+        grid-template-columns: 1fr 1fr 1fr;
+        gap: 20px;
+        grid-template-areas:
+          'back title close'
+          'search search search';
 
-      &__close-button::after {
+        &__back-button {
-        content: '\00D7';
+          grid-area: back;
-        font-size: 40px;
-        color: var(--color-icon-default);
-        cursor: pointer;
         }
 
         &__title {
-        @include H3;
+          grid-area: title;
+        }
 
-        flex: 1 0 auto;
+        &__close-button {
+          grid-area: close;
+        }
+
+        &__search {
+          grid-area: search;
+        }
+      }
+
+      &__title {
+        @include screen-sm-min {
+          width: 197px;
+        }
 
         @include screen-sm-max {
           text-overflow: ellipsis;
@@ -62,20 +70,7 @@
     }
 
     &__search {
-      @include screen-sm-max {
+      width: 330px;
-        position: relative;
-      }
-
-      @include screen-sm-min {
-        position: absolute;
-        right: 57px;
-        top: 10px;
-        width: 300px;
-      }
-
-      @include screen-md-min {
-        width: 400px;
-      }
 
       &__list {
         background: var(--color-background-default);
@@ -83,7 +78,7 @@
         box-shadow: var(--shadow-size-sm) var(--color-shadow-default);
         border-radius: 6px;
         position: absolute;
-        width: 100%;
+        width: 330px;
         z-index: 10;
 
         > div {
@@ -144,16 +139,6 @@
 
   &__subheader,
   &__subheader--link {
-    @include H4;
-
-    padding: 16px 4px;
-    border-bottom: 1px solid var(--color-border-muted);
-    margin-right: 24px;
-    height: 72px;
-    align-items: center;
-    display: flex;
-    flex-flow: row nowrap;
-
     @include screen-sm-max {
       display: none;
     }
@@ -225,11 +210,11 @@
   }
 
   &__content {
+    margin-top: 8px;
     display: flex;
     flex-flow: row nowrap;
     height: 100%;
     overflow: auto;
-    border-top: 1px solid var(--color-border-muted);
 
     &__tabs {
       display: flex;
@@ -239,7 +224,6 @@
       @include screen-sm-min {
         flex: 0 0 40%;
         max-width: 197px;
-        padding-top: 13px;
       }
 
       .tab-bar__tab {
@@ -380,7 +364,8 @@
       width: 100%;
     }
 
-    .eth-sign-toggle .toggle-button__status { // for eth_sign we need to override the uppercase property of toggle button text
+    .eth-sign-toggle .toggle-button__status {
+      // for eth_sign we need to override the uppercase property of toggle button text
       text-transform: capitalize;
     }
   }

ui/pages/settings/settings-search/settings-search.js

@@ -95,7 +95,7 @@ export default function SettingsSearch({
   return (
     <TextField
       id="search-settings"
-      placeholder={t('searchSettings')}
+      placeholder={t('search')}
       type="text"
       value={searchQuery}
       onChange={(e) => handleSearch(e.target.value)}

ui/pages/settings/settings.component.js

@@ -27,8 +27,20 @@ import {
 
 import { getSettingsRoutes } from '../../helpers/utils/settings-search';
 import AddNetwork from '../../components/app/add-network/add-network';
-import { ButtonIcon, Icon, IconName } from '../../components/component-library';
+import {
-import { Color, DISPLAY } from '../../helpers/constants/design-system';
+  ButtonIcon,
+  Icon,
+  IconName,
+  Text,
+} from '../../components/component-library';
+import {
+  AlignItems,
+  Color,
+  DISPLAY,
+  FLEX_DIRECTION,
+  TextVariant,
+} from '../../helpers/constants/design-system';
+import Box from '../../components/ui/box';
 import SettingsTab from './settings-tab';
 import AlertsTab from './alerts-tab';
 import NetworksTab from './networks-tab';
@@ -122,27 +134,17 @@ class SettingsPage extends PureComponent {
               <ButtonIcon
                 ariaLabel={t('back')}
                 iconName={IconName.ArrowLeft}
-                className="settings-page__back-button"
+                className="settings-page__header__title-container__back-button"
                 color={Color.iconDefault}
                 onClick={() => history.push(backRoute)}
                 display={[DISPLAY.FLEX, DISPLAY.NONE]}
               />
             )}
-
             {this.renderTitle()}
-            <div
+            <Box
-              className="settings-page__header__title-container__close-button"
+              className="settings-page__header__title-container__search"
-              onClick={() => {
+              display={[DISPLAY.BLOCK]}
-                if (addNewNetwork) {
+            >
-                  history.push(NETWORKS_ROUTE);
-                } else {
-                  history.push(mostRecentOverviewPage);
-                }
-              }}
-            />
-          </div>
-
-          <div className="settings-page__header__search">
               <SettingsSearch
                 onSearch={({ searchQuery = '', results = [] }) => {
                   this.setState({
@@ -159,6 +161,20 @@ class SettingsPage extends PureComponent {
                   onClickSetting={(setting) => this.handleClickSetting(setting)}
                 />
               )}
+            </Box>
+            <ButtonIcon
+              className="settings-page__header__title-container__close-button"
+              iconName={IconName.Close}
+              ariaLabel={t('close')}
+              onClick={() => {
+                if (addNewNetwork) {
+                  history.push(NETWORKS_ROUTE);
+                } else {
+                  history.push(mostRecentOverviewPage);
+                }
+              }}
+              marginLeft="auto"
+            />
           </div>
         </div>
 
@@ -192,7 +208,7 @@ class SettingsPage extends PureComponent {
 
     return (
       <div className="settings-page__header__title-container__title">
-        {titleText}
+        <Text variant={TextVariant.headingMd}>{titleText}</Text>
       </div>
     );
   }
@@ -225,17 +241,24 @@ class SettingsPage extends PureComponent {
 
     return (
       !currentPath.startsWith(NETWORKS_ROUTE) && (
-        <div className="settings-page__subheader">
+        <Box
-          <div
+          className="settings-page__subheader"
+          padding={4}
+          display={DISPLAY.FLEX}
+          flexDirection={FLEX_DIRECTION.ROW}
+          alignItems={AlignItems.center}
+        >
+          <Text
             className={classnames({
               'settings-page__subheader--link': initialBreadCrumbRoute,
             })}
+            variant={TextVariant.headingSm}
             onClick={() =>
               initialBreadCrumbRoute && history.push(initialBreadCrumbRoute)
             }
           >
             {subheaderText}
-          </div>
+          </Text>
           {breadCrumbTextKey && (
             <div className="settings-page__subheader--break">
               <span>{' > '}</span>
@@ -248,7 +271,7 @@ class SettingsPage extends PureComponent {
               {addressName}
             </div>
           )}
-        </div>
+        </Box>
       )
     );
   }
@@ -293,12 +316,12 @@ class SettingsPage extends PureComponent {
       },
       {
         content: t('networks'),
-        icon: <i className="fa fa-plug" />,
+        icon: <Icon name={IconName.Plug} />,
         key: NETWORKS_ROUTE,
       },
       {
         content: t('experimental'),
-        icon: <i className="fa fa-flask" />,
+        icon: <Icon name={IconName.Flask} />,
         key: EXPERIMENTAL_ROUTE,
       },
       {

ui/pages/settings/settings.test.js

@@ -40,6 +40,6 @@ describe('SettingsPage', () => {
       '/settings',
     );
 
-    expect(queryByPlaceholderText('Search in Settings')).toBeInTheDocument();
+    expect(queryByPlaceholderText('Search')).toBeInTheDocument();
   });
 });