Update 'SyncToggle' to the new Settings style.

This commit is contained in:
infinite-persistence 2021-08-23 14:50:25 +08:00
parent 3057f70c1c
commit 2e3d9cb609
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
2 changed files with 8 additions and 6 deletions

View file

@ -58,9 +58,7 @@ export default function SettingAccount(props: Props) {
)} )}
{/* @if TARGET='app' */} {/* @if TARGET='app' */}
<div className="card__main-actions"> <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
<SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
</div>
{/* @endif */} {/* @endif */}
{/* @if TARGET='web' */} {/* @if TARGET='web' */}

View file

@ -2,6 +2,7 @@
import * as MODALS from 'constants/modal_types'; import * as MODALS from 'constants/modal_types';
import React from 'react'; import React from 'react';
import Button from 'component/button'; import Button from 'component/button';
import SettingsRow from 'component/settingsRow';
import { withRouter } from 'react-router'; import { withRouter } from 'react-router';
import { FormField } from 'component/common/form'; import { FormField } from 'component/common/form';
@ -20,11 +21,14 @@ function SyncToggle(props: Props) {
const { verifiedEmail, openModal, syncEnabled, disabled } = props; const { verifiedEmail, openModal, syncEnabled, disabled } = props;
return ( return (
<div> <SettingsRow
title={__('Sync')}
subtitle={disabled || !verifiedEmail ? '' : __('Sync your balance and preferences across devices.')}
>
<FormField <FormField
type="checkbox" type="checkbox"
name="sync_toggle" name="sync_toggle"
label={__('Sync your balance and preferences across devices.')} label={disabled || !verifiedEmail ? __('Sync your balance and preferences across devices.') : undefined}
checked={syncEnabled && verifiedEmail} checked={syncEnabled && verifiedEmail}
onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })} onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })}
disabled={disabled || !verifiedEmail} disabled={disabled || !verifiedEmail}
@ -40,7 +44,7 @@ function SyncToggle(props: Props) {
<Button requiresAuth button="primary" label={__('Add Email')} /> <Button requiresAuth button="primary" label={__('Add Email')} />
</div> </div>
)} )}
</div> </SettingsRow>
); );
} }