m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

style: update Desktop App settings styles (#20676)

Browse Source
This commit is contained in:
Ariella Vu 2023-08-31 06:50:21 -07:00 committed by GitHub
parent ebf2156573
commit c15226325e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 41 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/_locales/en/messages.json generated
View File

@ -1159,6 +1159,9 @@
"message": "Description from $1", "message": "Description from $1",
"description": "$1 represents the name of the snap" "description": "$1 represents the name of the snap"
}, },
"desktopApp": {
"message": "Desktop App"
},
"desktopConnectionCriticalErrorDescription": { "desktopConnectionCriticalErrorDescription": {
"message": "This error could be intermittent, so try restarting the extension or disable MetaMask Desktop." "message": "This error could be intermittent, so try restarting the extension or disable MetaMask Desktop."
}, },

19
ui/pages/settings/experimental-tab/__snapshots__/experimental-tab.test.js.snap
View File

@ -197,19 +197,22 @@ exports[`ExperimentalTab with desktop enabled renders ExperimentalTab component
</div> </div>
</div> </div>
</div> </div>
<h4
class="mm-box mm-text mm-text--heading-sm mm-box--margin-bottom-2 mm-box--color-text-alternative"
>
Desktop App
</h4>
<div <div
class="mm-box settings-page__content-row mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between" class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--flex-wrap-wrap mm-box--justify-content-space-between mm-box--align-items-center"
data-testid="advanced-setting-desktop-pairing" data-testid="advanced-setting-desktop-pairing"
> >
<div <p
class="settings-page__content-item" class="mm-box mm-text mm-text--body-md mm-box--margin-top-3 mm-box--padding-right-2 mm-box--color-text-default"
> >
<span> Click to run all background processes in the desktop app.
Click to run all background processes in the desktop app. </p>
</span>
</div>
<div <div
class="settings-page__content-item-col" class="mm-box settings-page__content-item-col mm-box--padding-top-3"
> >
<button <button
class="button btn--rounded btn-primary btn--large" class="button btn--rounded btn-primary btn--large"

43
ui/pages/settings/experimental-tab/experimental-tab.component.js
View File

@ -13,8 +13,10 @@ import {
TextVariant, TextVariant,
FontWeight, FontWeight,
///: BEGIN:ONLY_INCLUDE_IN(desktop) ///: BEGIN:ONLY_INCLUDE_IN(desktop)
AlignItems,
Display, Display,
FlexDirection, FlexDirection,
FlexWrap,
JustifyContent, JustifyContent,
///: END:ONLY_INCLUDE_IN ///: END:ONLY_INCLUDE_IN
} from '../../../helpers/constants/design-system'; } from '../../../helpers/constants/design-system';
@ -245,22 +247,31 @@ export default class ExperimentalTab extends PureComponent {
const { t } = this.context; const { t } = this.context;
return ( return (
<Box <>
ref={this.settingsRefs[6]} <Text
className="settings-page__content-row" variant={TextVariant.headingSm}
data-testid="advanced-setting-desktop-pairing" color={TextColor.textAlternative}
display={Display.Flex} marginBottom={2}
flexDirection={FlexDirection.Row} >
justifyContent={JustifyContent.spaceBetween} {t('desktopApp')}
> </Text>
<div className="settings-page__content-item"> <Box
<span>{t('desktopEnableButtonDescription')}</span> ref={this.settingsRefs[6]}
</div> data-testid="advanced-setting-desktop-pairing"
display={Display.Flex}
<div className="settings-page__content-item-col"> alignItems={AlignItems.center}
<DesktopEnableButton /> flexDirection={FlexDirection.Row}
</div> flexWrap={FlexWrap.Wrap}
</Box> justifyContent={JustifyContent.spaceBetween}
>
<Text marginTop={3} paddingRight={2}>
{t('desktopEnableButtonDescription')}
</Text>
<Box className="settings-page__content-item-col" paddingTop={3}>
<DesktopEnableButton />
</Box>
</Box>
</>
); );
} }
///: END:ONLY_INCLUDE_IN ///: END:ONLY_INCLUDE_IN