fix multiple sync issues

browser/ui/webui/brave_webui_source.cc

@@ -439,22 +439,27 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
       }
     }, {
       std::string("sync"), {
-        { "done", IDS_BRAVE_SYNC_SHARED_DONE_BUTTON },
+        // Shared strings
         { "remove", IDS_BRAVE_SYNC_SHARED_REMOVE_PARTIAL },
         { "copied", IDS_BRAVE_SYNC_SHARED_COPIED_TEXT },
         { "wordCount",  IDS_BRAVE_SYNC_SHARED_WORD_COUNT_TEXT },
         { "ok", IDS_BRAVE_SYNC_SHARED_OK_BUTTON },
         { "cancel", IDS_BRAVE_SYNC_SHARED_CANCEL_BUTTON },
+        { "cancelDeviceSyncing", IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_TITLE },
+        { "cancelDeviceSyncingButton", IDS_BRAVE_SYNC_SHARED_CANCEL_SYNCING_BUTTON },
         { "thisSyncChain", IDS_BRAVE_SYNC_SHARED_FROM_THIS_CHAIN_PARTIAL },
+        { "lookingForDevice", IDS_BRAVE_SYNC_SCAN_CODE_LOOKING_FOR_DEVICE_BUTTON },
+        { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },
         // Enabled Content
         { "braveSync", IDS_BRAVE_SYNC_ENABLED_BRAVE_TITLE },
         { "syncChainDevices", IDS_BRAVE_SYNC_ENABLED_DEVICES_CHAIN_TITLE },
         { "deviceName", IDS_BRAVE_SYNC_ENABLED_TABLE_DEVICE_NAME_TITLE },
         { "thisDevice", IDS_BRAVE_SYNC_ENABLED_TABLE_THIS_DEVICE_TEXT },
         { "addedOn", IDS_BRAVE_SYNC_ENABLED_TABLE_ADDED_ON_TITLE },
         { "addDevice", IDS_BRAVE_SYNC_ENABLED_ADD_DEVICE_BUTTON },
-        { "viewSyncCode", IDS_BRAVE_SYNC_ENABLED_VIEW_CODE_BUTTON },
-        { "dataToSync", IDS_BRAVE_SYNC_ENABLED_DATA_TITLE },
+        { "settingsTitle", IDS_BRAVE_SYNC_ENABLED_SETTINGS_TITLE },
+        { "settingsDescription", IDS_BRAVE_SYNC_ENABLED_SETTINGS_DESCRIPTION },
+        { "settings", IDS_BRAVE_SYNC_ENABLED_TABLE_SETTINGS },
         { "bookmarks", IDS_BRAVE_SYNC_ENABLED_BOOKMARKS_LABEL },
         { "savedSiteSettings", IDS_BRAVE_SYNC_ENABLED_SITE_SETTINGS_LABEL },
         { "browsingHistory", IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL },
@@ -464,7 +469,6 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "syncDescription", IDS_BRAVE_SYNC_DISABLED_NEW_CHAIN_DESCRIPTION },
         { "startSyncChain", IDS_BRAVE_SYNC_DISABLED_START_NEW_CHAIN_BUTTON },
         { "enterSyncChainCode", IDS_BRAVE_SYNC_DISABLED_ENTER_CODE_BUTTON },
-        { "confirmSyncCode", IDS_BRAVE_SYNC_DISABLED_CONFIRM_CODE_BUTTON },
         // [modal] Enter Sync Code
         { "enterSyncCode", IDS_BRAVE_SYNC_ENTER_CODE_TITLE },
         { "enterSyncCodeDescription", IDS_BRAVE_SYNC_ENTER_CODE_DESCRIPTION },
@@ -481,27 +485,23 @@ void CustomizeWebUIHTMLSource(const std::string &name, content::WebUIDataSource*
         { "deleteSyncDescription", IDS_BRAVE_SYNC_RESET_REMOVAL_INSTRUCTIONS },
         { "startSyncChainHowTo", IDS_BRAVE_SYNC_RESET_START_NEW_INSTRUCTIONS },
         { "areYouSure", IDS_BRAVE_SYNC_RESET_ARE_YOU_SURE_TITLE },
-        // [modal] Add New Chain
-        { "scanThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_DESCRIPTION },
-        { "scanThisCodeHowTo", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_INSTRUCTIONS },
-        { "enterCodeWordsInstead", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_CODE_WORDS_BUTTON },
-        { "previous", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_PREVIOUS_BUTTON },
-        { "lookingForDevice", IDS_BRAVE_SYNC_NEW_CHAIN_MAIN_LOOKING_FOR_DEVICE_BUTTON },
-        // [modal] Add New Chain (Camera Option)
-        // [modal] Add New Chain (no Camera)
-        { "enterThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_DESKTOP_TITLE },
-        { "mobileEnterThisCode", IDS_BRAVE_SYNC_NEW_CHAIN_MOBILE_TITLE },
-        { "syncChainCodeHowTo", IDS_BRAVE_SYNC_NEW_CHAIN_DESCRIPTION },
-        { "useCameraInstead", IDS_BRAVE_SYNC_NEW_CHAIN_USE_CAMERA_BUTTON },
+        // [modal] Scan Code
+        { "scanThisCode", IDS_BRAVE_SYNC_SCAN_CODE_TITLE },
+        { "scanThisCodeHowToPartial1", IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_1 },
+        { "scanThisCodeHowToPartial2", IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_2 },
+        { "scanThisCodeHowToPartial3", IDS_BRAVE_SYNC_SCAN_CODE_DESCRIPTION_PARTIAL_3 },
+        // [modal] View Code
+        { "chainCode", IDS_BRAVE_SYNC_VIEW_CODE_TITLE },
+        { "chainCodeDescriptionPartial1", IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_1 },
+        { "chainCodeDescriptionPartial2", IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_2 },
+        { "chainCodeDescriptionPartial3", IDS_BRAVE_SYNC_VIEW_CODE_DESCRIPTION_PARTIAL_3 },
+        { "useCameraInstead", IDS_BRAVE_SYNC_VIEW_CODE_USE_CAMERA_BUTTON },
+        { "qrCode", IDS_BRAVE_SYNC_VIEW_CODE_QR_CODE },
         // [modal] Choose Device Type
-        { "letsSync", IDS_BRAVE_SYNC_CHOOSE_DEVICE_NEW_DEVICE_TITLE },
-        { "chooseDeviceType", IDS_BRAVE_SYNC_CHOOSE_DEVICE_CHOOSE_DEVICE_TITLE },
+        { "letsSync", IDS_BRAVE_SYNC_CHOOSE_DEVICE_TITLE },
+        { "chooseDeviceType", IDS_BRAVE_SYNC_CHOOSE_DEVICE_DESCRIPTION },
         { "phoneTablet", IDS_BRAVE_SYNC_CHOOSE_DEVICE_MOBILE_TITLE },
         { "computer", IDS_BRAVE_SYNC_CHOOSE_DEVICE_COMPUTER_TITLE },
-        // [modal] View Sync Code
-        { "qrCode", IDS_BRAVE_SYNC_VIEW_CODE_QR_CODE_TITLE },
-        { "wordCode", IDS_BRAVE_SYNC_VIEW_CODE_WORD_CODE_TITLE },
-        { "privateKey", IDS_BRAVE_SYNC_VIEW_CODE_PRIVATE_KEY_PHRASE },
         // errors
         { "errorWrongCodeTitle", IDS_BRAVE_SYNC_ERROR_WRONG_CODE_TITLE },
         { "errorWrongCodeDescription", IDS_BRAVE_SYNC_ERROR_WRONG_CODE_DESCRIPTION },

components/brave_sync/ui/BUILD.gn

@@ -3,8 +3,8 @@ import("//brave/components/common/typescript.gni")
 transpile_web_ui("ui") {
   inputs = [
     "actions/sync_actions.ts",
-    "components/modals/addNewChainCameraOption.tsx",
-    "components/modals/addNewChainNoCamera.tsx",
+    "components/commonDialogs/areYouSure.tsx",
+    "components/commonDialogs/cancelDeviceSyncing.tsx",
     "components/modals/deviceType.tsx",
     "components/modals/enterSyncCode.tsx",
     "components/modals/removeDevice.tsx",

components/brave_sync/ui/actions/sync_actions.ts

@@ -115,8 +115,8 @@ export const onSyncSetupError = (error: Sync.SetupErrorType) => {
 /**
  * Reset the Sync Error
  */
-export const resetSyncSetupError = () => {
-  return action(types.SYNC_RESET_SETUP_ERROR)
+export const clearSyncSetupError = () => {
+  return action(types.SYNC_CLEAR_SETUP_ERROR)
 }
 
 /**

components/brave_sync/ui/brave_sync.html

@@ -22,7 +22,8 @@
     <script src="/brave_sync.bundle.js"></script>
     <script src="/strings.js"></script>
     <style>
-      #root { height: 100%; }
+      html { background-color: #efeff0; }
+      #syncPage { height: -webkit-fill-available; }
     </style>
   </head>
   <body>

components/brave_sync/ui/components/commonDialogs/areYouSure.tsx

@@ -0,0 +1,35 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onClickOk: () => void
+  onClickCancel: () => void
+}
+
+export default class AreYouSure extends React.PureComponent<Props, {}> {
+  render () {
+    const { onClickOk, onClickCancel } = this.props
+    return (
+      <AlertBox
+        okString={getLocale('ok')}
+        onClickOk={onClickOk}
+        cancelString={getLocale('cancel')}
+        onClickCancel={onClickCancel}
+      >
+        <Title level={1}>{getLocale('areYouSure')}</Title>
+      </AlertBox>
+    )
+  }
+}

components/brave_sync/ui/components/commonDialogs/cancelDeviceSyncing.tsx

@@ -0,0 +1,36 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this file,
+ * You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+import * as React from 'react'
+
+// Components
+import { AlertBox } from 'brave-ui'
+
+// Feature-specific components
+import { Title, Paragraph } from 'brave-ui/features/sync'
+
+// Utils
+import { getLocale } from '../../../../common/locale'
+
+interface Props {
+  onClickOk: () => void
+  onClickCancel: () => void
+}
+
+export default class AreYouSure extends React.PureComponent<Props, {}> {
+  render () {
+    const { onClickOk, onClickCancel } = this.props
+    return (
+      <AlertBox
+        okString={getLocale('cancelDeviceSyncingButton')}
+        onClickOk={onClickOk}
+        cancelString={getLocale('cancel')}
+        onClickCancel={onClickCancel}
+      >
+        <Title level={1}>{getLocale('areYouSure')}</Title>
+        <Paragraph>{getLocale('cancelDeviceSyncing')}</Paragraph>
+      </AlertBox>
+    )
+  }
+}

components/brave_sync/ui/components/disabledContent.tsx

@@ -11,10 +11,11 @@ import { Button } from 'brave-ui'
 import {
   Main,
   Title,
-  SectionBlock,
   DisabledContentButtonGrid,
   TableGrid,
-  Paragraph
+  Paragraph,
+  SyncCard,
+  DisabledContent
 } from 'brave-ui/features/sync'
 
 import { SyncStartIcon } from 'brave-ui/features/sync/images'
@@ -62,45 +63,43 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
     }
 
     return (
-      <Main>
-        {
-          newToSync
-            ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
-            : null
-        }
-        {
-          existingSyncCode
-            ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
-            : null
-        }
-        <TableGrid>
-          <SyncStartIcon />
-          <div>
-            <Title level={2}>{getLocale('syncTitle')}</Title>
-            <Paragraph>{getLocale('syncDescription')}</Paragraph>
-            <SectionBlock>
-              <DisabledContentButtonGrid>
-                <div>
+      <DisabledContent>
+        <Main>
+          {
+            newToSync
+              ? <DeviceTypeModal syncData={syncData} actions={actions} onClose={this.onClickNewSyncChainButton} />
+              : null
+          }
+          {
+            existingSyncCode
+              ? <EnterSyncCodeModal syncData={syncData} actions={actions} onClose={this.onClickEnterSyncChainCodeButton} />
+              : null
+          }
+          <SyncCard>
+            <TableGrid>
+              <SyncStartIcon />
+              <div>
+                <Title level={2}>{getLocale('syncTitle')}</Title>
+                <Paragraph>{getLocale('syncDescription')}</Paragraph>
+                <DisabledContentButtonGrid>
                   <Button
                     level='primary'
                     type='accent'
                     onClick={this.onClickNewSyncChainButton}
                     text={getLocale('startSyncChain')}
                   />
-                </div>
-                <div>
                   <Button
                     level='secondary'
                     type='accent'
                     onClick={this.onClickEnterSyncChainCodeButton}
                     text={getLocale('enterSyncChainCode')}
                   />
-                </div>
-              </DisabledContentButtonGrid>
-            </SectionBlock>
-          </div>
-        </TableGrid>
-      </Main>
+                </DisabledContentButtonGrid>
+              </div>
+            </TableGrid>
+          </SyncCard>
+        </Main>
+      </DisabledContent>
     )
   }
 }