From 9db971768b6b5671eae7edb76ab17854f3af99f7 Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Tue, 23 May 2023 23:59:00 +0530 Subject: [PATCH] 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 | 3 - app/_locales/el/messages.json | 6 -- app/_locales/en/messages.json | 3 - app/_locales/es/messages.json | 3 - app/_locales/fr/messages.json | 3 - app/_locales/hi/messages.json | 3 - app/_locales/id/messages.json | 3 - app/_locales/ja/messages.json | 3 - app/_locales/ko/messages.json | 3 - app/_locales/pt/messages.json | 3 - app/_locales/ru/messages.json | 3 - app/_locales/tl/messages.json | 3 - app/_locales/tr/messages.json | 3 - app/_locales/vi/messages.json | 3 - app/_locales/zh_CN/messages.json | 3 - ui/components/app/tab-bar/index.scss | 27 +++--- ui/components/app/tab-bar/tab-bar.js | 23 ++++- ui/pages/settings/index.scss | 81 +++++++----------- .../settings-search/settings-search.js | 2 +- ui/pages/settings/settings.component.js | 85 ++++++++++++------- ui/pages/settings/settings.test.js | 2 +- 21 files changed, 123 insertions(+), 145 deletions(-) diff --git a/app/_locales/de/messages.json b/app/_locales/de/messages.json index 15d67d646..c3c58bdc7 100644 --- a/app/_locales/de/messages.json +++ b/app/_locales/de/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "Suchergebnisse" }, - "searchSettings": { - "message": "In Einstellungen suchen" - }, "searchTokens": { "message": "Token suchen" }, diff --git a/app/_locales/el/messages.json b/app/_locales/el/messages.json index 39f1de4cb..6d41d178e 100644 --- a/app/_locales/el/messages.json +++ b/app/_locales/el/messages.json @@ -3047,12 +3047,6 @@ "searchAccounts": { "message": "Αναζήτηση Λογαριασμών" }, - "searchResults": { - "message": "Αποτελέσματα Αναζήτησης" - }, - "searchSettings": { - "message": "Αναζήτηση στις Ρυθμίσεις" - }, "searchTokens": { "message": "Αναζήτηση Tokens" }, diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 48542dae9..0bd3343b2 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -3522,9 +3522,6 @@ "searchResults": { "message": "Search results" }, - "searchSettings": { - "message": "Search in Settings" - }, "searchTokens": { "message": "Search tokens" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index d295446a9..76e80229e 100644 --- a/app/_locales/es/messages.json +++ b/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" }, diff --git a/app/_locales/fr/messages.json b/app/_locales/fr/messages.json index 3d13ba29f..2253c5136 100644 --- a/app/_locales/fr/messages.json +++ b/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" }, diff --git a/app/_locales/hi/messages.json b/app/_locales/hi/messages.json index d8296323e..b021f21e2 100644 --- a/app/_locales/hi/messages.json +++ b/app/_locales/hi/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "खोज परिणाम" }, - "searchSettings": { - "message": "सेटिंग्स में खोजें" - }, "searchTokens": { "message": "टोकन खोजें" }, diff --git a/app/_locales/id/messages.json b/app/_locales/id/messages.json index 89d95b084..886ce35cb 100644 --- a/app/_locales/id/messages.json +++ b/app/_locales/id/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "Cari hasil" }, - "searchSettings": { - "message": "Cari di Pengaturan" - }, "searchTokens": { "message": "Cari token" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index c8239d428..5b8f50675 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "検索結果" }, - "searchSettings": { - "message": "設定で検索" - }, "searchTokens": { "message": "トークンを検索" }, diff --git a/app/_locales/ko/messages.json b/app/_locales/ko/messages.json index a3ba4ac66..3a19f0cda 100644 --- a/app/_locales/ko/messages.json +++ b/app/_locales/ko/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "검색 결과" }, - "searchSettings": { - "message": "설정에서 찾기" - }, "searchTokens": { "message": "토큰 검색" }, diff --git a/app/_locales/pt/messages.json b/app/_locales/pt/messages.json index 9d8b72031..fc1c796f4 100644 --- a/app/_locales/pt/messages.json +++ b/app/_locales/pt/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "Resultados da busca" }, - "searchSettings": { - "message": "Buscar nas configurações" - }, "searchTokens": { "message": "Buscar tokens" }, diff --git a/app/_locales/ru/messages.json b/app/_locales/ru/messages.json index a10f43afd..9822a651a 100644 --- a/app/_locales/ru/messages.json +++ b/app/_locales/ru/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "Результаты поиска" }, - "searchSettings": { - "message": "Поиск в настройках" - }, "searchTokens": { "message": "Поиск токенов" }, diff --git a/app/_locales/tl/messages.json b/app/_locales/tl/messages.json index b70460686..6d81eb3b9 100644 --- a/app/_locales/tl/messages.json +++ b/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" }, diff --git a/app/_locales/tr/messages.json b/app/_locales/tr/messages.json index 6fb5b1b72..2f958ef4e 100644 --- a/app/_locales/tr/messages.json +++ b/app/_locales/tr/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "Arama sonuçları" }, - "searchSettings": { - "message": "Ayarlarda ara" - }, "searchTokens": { "message": "Token ara" }, diff --git a/app/_locales/vi/messages.json b/app/_locales/vi/messages.json index 0283a434a..d8f535ee0 100644 --- a/app/_locales/vi/messages.json +++ b/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" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 348cdbf78..10d9f01ad 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -3050,9 +3050,6 @@ "searchResults": { "message": "搜索结果" }, - "searchSettings": { - "message": "在设置中搜索" - }, "searchTokens": { "message": "搜索代币" }, diff --git a/ui/components/app/tab-bar/index.scss b/ui/components/app/tab-bar/index.scss index ce2d01d98..67c9e08d9 100644 --- a/ui/components/app/tab-bar/index.scss +++ b/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; - - @include screen-sm-min { - &:hover { - opacity: 0.4; - } - - &:active { - opacity: 0.6; - } - } + position: relative; @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); + } } } diff --git a/ui/components/app/tab-bar/tab-bar.js b/ui/components/app/tab-bar/tab-bar.js index 9c3c42a90..b686a1274 100644 --- a/ui/components/app/tab-bar/tab-bar.js +++ b/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 (
{tabs.map(({ key, content, icon }) => ( - + ))}
); diff --git a/ui/pages/settings/index.scss b/ui/pages/settings/index.scss index 31c48c96d..1f0b3da42 100644 --- a/ui/pages/settings/index.scss +++ b/ui/pages/settings/index.scss @@ -23,34 +23,42 @@ } &__header { - padding: 8px 24px 8px 24px; - position: relative; - - @include screen-sm-max { - background: var(--color-background-alternative); - } + padding: 20px 16px 20px 16px; &__title-container { - display: flex; - flex-flow: row nowrap; + display: grid; align-items: center; - flex: 0 0 auto; + grid-template-columns: 197px 1fr 1fr; - &__close-button { - margin-left: auto; - } + @include screen-sm-max { + 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 { - content: '\00D7'; - font-size: 40px; - color: var(--color-icon-default); - cursor: pointer; + &__back-button { + grid-area: back; + } + + &__title { + grid-area: title; + } + + &__close-button { + grid-area: close; + } + + &__search { + grid-area: search; + } } &__title { - @include H3; - - flex: 1 0 auto; + @include screen-sm-min { + width: 197px; + } @include screen-sm-max { text-overflow: ellipsis; @@ -62,20 +70,7 @@ } &__search { - @include screen-sm-max { - position: relative; - } - - @include screen-sm-min { - position: absolute; - right: 57px; - top: 10px; - width: 300px; - } - - @include screen-md-min { - width: 400px; - } + width: 330px; &__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; } } diff --git a/ui/pages/settings/settings-search/settings-search.js b/ui/pages/settings/settings-search/settings-search.js index 3751a11b9..415f64dde 100644 --- a/ui/pages/settings/settings-search/settings-search.js +++ b/ui/pages/settings/settings-search/settings-search.js @@ -95,7 +95,7 @@ export default function SettingsSearch({ return ( handleSearch(e.target.value)} diff --git a/ui/pages/settings/settings.component.js b/ui/pages/settings/settings.component.js index 788110616..a8c386ad2 100644 --- a/ui/pages/settings/settings.component.js +++ b/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 { Color, DISPLAY } from '../../helpers/constants/design-system'; +import { + 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,16 +134,38 @@ class SettingsPage extends PureComponent { history.push(backRoute)} display={[DISPLAY.FLEX, DISPLAY.NONE]} /> )} - {this.renderTitle()} -
+ { + this.setState({ + isSearchList: searchQuery !== '', + searchResults: results, + searchText: searchQuery, + }); + }} + settingsRoutesList={getSettingsRoutes()} + /> + {isSearchList && searchText.length >= 3 && ( + this.handleClickSetting(setting)} + /> + )} + + { if (addNewNetwork) { history.push(NETWORKS_ROUTE); @@ -139,27 +173,9 @@ class SettingsPage extends PureComponent { history.push(mostRecentOverviewPage); } }} + marginLeft="auto" />
- -
- { - this.setState({ - isSearchList: searchQuery !== '', - searchResults: results, - searchText: searchQuery, - }); - }} - settingsRoutesList={getSettingsRoutes()} - /> - {isSearchList && searchText.length >= 3 && ( - this.handleClickSetting(setting)} - /> - )} -
@@ -192,7 +208,7 @@ class SettingsPage extends PureComponent { return (
- {titleText} + {titleText}
); } @@ -225,17 +241,24 @@ class SettingsPage extends PureComponent { return ( !currentPath.startsWith(NETWORKS_ROUTE) && ( -
-
+ initialBreadCrumbRoute && history.push(initialBreadCrumbRoute) } > {subheaderText} -
+ {breadCrumbTextKey && (
{' > '} @@ -248,7 +271,7 @@ class SettingsPage extends PureComponent { {addressName}
)} -
+ ) ); } @@ -293,12 +316,12 @@ class SettingsPage extends PureComponent { }, { content: t('networks'), - icon: , + icon: , key: NETWORKS_ROUTE, }, { content: t('experimental'), - icon: , + icon: , key: EXPERIMENTAL_ROUTE, }, { diff --git a/ui/pages/settings/settings.test.js b/ui/pages/settings/settings.test.js index b7437fbeb..238b50f3c 100644 --- a/ui/pages/settings/settings.test.js +++ b/ui/pages/settings/settings.test.js @@ -40,6 +40,6 @@ describe('SettingsPage', () => { '/settings', ); - expect(queryByPlaceholderText('Search in Settings')).toBeInTheDocument(); + expect(queryByPlaceholderText('Search')).toBeInTheDocument(); }); });