mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-22 17:33:23 +01:00
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
This commit is contained in:
parent
415798876c
commit
9db971768b
3
app/_locales/de/messages.json
generated
3
app/_locales/de/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Suchergebnisse"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "In Einstellungen suchen"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Token suchen"
|
||||
},
|
||||
|
6
app/_locales/el/messages.json
generated
6
app/_locales/el/messages.json
generated
@ -3047,12 +3047,6 @@
|
||||
"searchAccounts": {
|
||||
"message": "Αναζήτηση Λογαριασμών"
|
||||
},
|
||||
"searchResults": {
|
||||
"message": "Αποτελέσματα Αναζήτησης"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Αναζήτηση στις Ρυθμίσεις"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Αναζήτηση Tokens"
|
||||
},
|
||||
|
3
app/_locales/en/messages.json
generated
3
app/_locales/en/messages.json
generated
@ -3522,9 +3522,6 @@
|
||||
"searchResults": {
|
||||
"message": "Search results"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Search in Settings"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Search tokens"
|
||||
},
|
||||
|
3
app/_locales/es/messages.json
generated
3
app/_locales/es/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Resultados de la búsqueda"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Buscar en Configuración"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Buscar tokens"
|
||||
},
|
||||
|
3
app/_locales/fr/messages.json
generated
3
app/_locales/fr/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Résultats de la recherche"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Rechercher dans les paramètres"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Rechercher des jetons"
|
||||
},
|
||||
|
3
app/_locales/hi/messages.json
generated
3
app/_locales/hi/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "खोज परिणाम"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "सेटिंग्स में खोजें"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "टोकन खोजें"
|
||||
},
|
||||
|
3
app/_locales/id/messages.json
generated
3
app/_locales/id/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Cari hasil"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Cari di Pengaturan"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Cari token"
|
||||
},
|
||||
|
3
app/_locales/ja/messages.json
generated
3
app/_locales/ja/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "検索結果"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "設定で検索"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "トークンを検索"
|
||||
},
|
||||
|
3
app/_locales/ko/messages.json
generated
3
app/_locales/ko/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "검색 결과"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "설정에서 찾기"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "토큰 검색"
|
||||
},
|
||||
|
3
app/_locales/pt/messages.json
generated
3
app/_locales/pt/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Resultados da busca"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Buscar nas configurações"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Buscar tokens"
|
||||
},
|
||||
|
3
app/_locales/ru/messages.json
generated
3
app/_locales/ru/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Результаты поиска"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Поиск в настройках"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Поиск токенов"
|
||||
},
|
||||
|
3
app/_locales/tl/messages.json
generated
3
app/_locales/tl/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Mga Resulta ng Paghahanap"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Maghanap sa mga Setting"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Maghanap ng Mga Token"
|
||||
},
|
||||
|
3
app/_locales/tr/messages.json
generated
3
app/_locales/tr/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "Arama sonuçları"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "Ayarlarda ara"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "Token ara"
|
||||
},
|
||||
|
3
app/_locales/vi/messages.json
generated
3
app/_locales/vi/messages.json
generated
@ -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"
|
||||
},
|
||||
|
3
app/_locales/zh_CN/messages.json
generated
3
app/_locales/zh_CN/messages.json
generated
@ -3050,9 +3050,6 @@
|
||||
"searchResults": {
|
||||
"message": "搜索结果"
|
||||
},
|
||||
"searchSettings": {
|
||||
"message": "在设置中搜索"
|
||||
},
|
||||
"searchTokens": {
|
||||
"message": "搜索代币"
|
||||
},
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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)}
|
||||
|
@ -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 {
|
||||
<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__search"
|
||||
display={[DISPLAY.BLOCK]}
|
||||
>
|
||||
<SettingsSearch
|
||||
onSearch={({ searchQuery = '', results = [] }) => {
|
||||
this.setState({
|
||||
isSearchList: searchQuery !== '',
|
||||
searchResults: results,
|
||||
searchText: searchQuery,
|
||||
});
|
||||
}}
|
||||
settingsRoutesList={getSettingsRoutes()}
|
||||
/>
|
||||
{isSearchList && searchText.length >= 3 && (
|
||||
<SettingsSearchList
|
||||
results={searchResults}
|
||||
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);
|
||||
@ -139,27 +173,9 @@ class SettingsPage extends PureComponent {
|
||||
history.push(mostRecentOverviewPage);
|
||||
}
|
||||
}}
|
||||
marginLeft="auto"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__header__search">
|
||||
<SettingsSearch
|
||||
onSearch={({ searchQuery = '', results = [] }) => {
|
||||
this.setState({
|
||||
isSearchList: searchQuery !== '',
|
||||
searchResults: results,
|
||||
searchText: searchQuery,
|
||||
});
|
||||
}}
|
||||
settingsRoutesList={getSettingsRoutes()}
|
||||
/>
|
||||
{isSearchList && searchText.length >= 3 && (
|
||||
<SettingsSearchList
|
||||
results={searchResults}
|
||||
onClickSetting={(setting) => this.handleClickSetting(setting)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="settings-page__content">
|
||||
@ -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">
|
||||
<div
|
||||
<Box
|
||||
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,
|
||||
},
|
||||
{
|
||||
|
@ -40,6 +40,6 @@ describe('SettingsPage', () => {
|
||||
'/settings',
|
||||
);
|
||||
|
||||
expect(queryByPlaceholderText('Search in Settings')).toBeInTheDocument();
|
||||
expect(queryByPlaceholderText('Search')).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user