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

style: update Desktop App settings styles (#20676)

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

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."
}, },

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.
</span> </p>
</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"

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 (
<>
<Text
variant={TextVariant.headingSm}
color={TextColor.textAlternative}
marginBottom={2}
>
{t('desktopApp')}
</Text>
<Box <Box
ref={this.settingsRefs[6]} ref={this.settingsRefs[6]}
className="settings-page__content-row"
data-testid="advanced-setting-desktop-pairing" data-testid="advanced-setting-desktop-pairing"
display={Display.Flex} display={Display.Flex}
alignItems={AlignItems.center}
flexDirection={FlexDirection.Row} flexDirection={FlexDirection.Row}
flexWrap={FlexWrap.Wrap}
justifyContent={JustifyContent.spaceBetween} justifyContent={JustifyContent.spaceBetween}
> >
<div className="settings-page__content-item"> <Text marginTop={3} paddingRight={2}>
<span>{t('desktopEnableButtonDescription')}</span> {t('desktopEnableButtonDescription')}
</div> </Text>
<Box className="settings-page__content-item-col" paddingTop={3}>
<div className="settings-page__content-item-col">
<DesktopEnableButton /> <DesktopEnableButton />
</div>
</Box> </Box>
</Box>
</>
); );
} }
///: END:ONLY_INCLUDE_IN ///: END:ONLY_INCLUDE_IN