From 2e3d9cb609fb8729904e4620ad8ca5874cced3a0 Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Mon, 23 Aug 2021 14:50:25 +0800
Subject: [PATCH] Update 'SyncToggle' to the new Settings style.

---
 ui/component/settingAccount/view.jsx |  4 +---
 ui/component/syncToggle/view.jsx     | 10 +++++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/ui/component/settingAccount/view.jsx b/ui/component/settingAccount/view.jsx
index 2e7e0494b..bca8861b1 100644
--- a/ui/component/settingAccount/view.jsx
+++ b/ui/component/settingAccount/view.jsx
@@ -58,9 +58,7 @@ export default function SettingAccount(props: Props) {
             )}
 
             {/* @if TARGET='app' */}
-            <div className="card__main-actions">
-              <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
-            </div>
+            <SyncToggle disabled={walletEncrypted && !storedPassword && storedPassword !== ''} />
             {/* @endif */}
 
             {/* @if TARGET='web' */}
diff --git a/ui/component/syncToggle/view.jsx b/ui/component/syncToggle/view.jsx
index e6a702947..c795ed1b7 100644
--- a/ui/component/syncToggle/view.jsx
+++ b/ui/component/syncToggle/view.jsx
@@ -2,6 +2,7 @@
 import * as MODALS from 'constants/modal_types';
 import React from 'react';
 import Button from 'component/button';
+import SettingsRow from 'component/settingsRow';
 import { withRouter } from 'react-router';
 import { FormField } from 'component/common/form';
 
@@ -20,11 +21,14 @@ function SyncToggle(props: Props) {
   const { verifiedEmail, openModal, syncEnabled, disabled } = props;
 
   return (
-    <div>
+    <SettingsRow
+      title={__('Sync')}
+      subtitle={disabled || !verifiedEmail ? '' : __('Sync your balance and preferences across devices.')}
+    >
       <FormField
         type="checkbox"
         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}
         onChange={() => openModal(MODALS.SYNC_ENABLE, { mode: syncEnabled ? 'disable' : 'enable' })}
         disabled={disabled || !verifiedEmail}
@@ -40,7 +44,7 @@ function SyncToggle(props: Props) {
           <Button requiresAuth button="primary" label={__('Add Email')} />
         </div>
       )}
-    </div>
+    </SettingsRow>
   );
 }