update spec of sync disabled view

fix brave/brave-browser#2675
brave · Jan 1, 2019 · 3f9ba6d · 3f9ba6d
1 parent e963788
commit 3f9ba6d
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 34 deletions.
diff --git a/components/brave_sync/ui/brave_sync.html b/components/brave_sync/ui/brave_sync.html
@@ -22,7 +22,7 @@
     <script src="/brave_sync.bundle.js"></script>
     <script src="/strings.js"></script>
     <style>
-      #root { height: 100%; }
+      html, body, #root { height: 100vh; }
     </style>
   </head>
   <body>

diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/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>
     )
   }
 }
diff --git a/components/resources/brave_components_strings.grd b/components/resources/brave_components_strings.grd
@@ -471,10 +471,10 @@
       <message name="IDS_BRAVE_SYNC_ENABLED_HISTORY_LABEL" desc="The Sync label for the `browsing history` toggle">Browsing History</message>
       <message name="IDS_BRAVE_SYNC_ENABLED_LEAVE_CHAIN_BUTTON" desc="The Sync button that opens a modal to leave the current sync chain">Leave Sync Chain</message>
       <!-- WebUI brave sync resources: Disabled Content -->
-      <message name="IDS_BRAVE_SYNC_DISABLED_DESCRIPTION" desc="The Sync phrase explaining what sync can do. Appears when sync is disabled.">Brave Sync allows you to sync bookmarks data privately between your Brave Browsers on your various devices.</message>
-      <message name="IDS_BRAVE_SYNC_DISABLED_NEW_CHAIN_DESCRIPTION" desc="The Sync phrase explaining what happens when you start a new sync chain. Appears when sync is disabled.">When you start a new sync chain, a new sync code is created. You will use this same code across your devices to link them together.</message>
-      <message name="IDS_BRAVE_SYNC_DISABLED_START_NEW_CHAIN_BUTTON" desc="The Sync button that triggers a modal to start a new sync chian">Start a new sync chain</message>
-      <message name="IDS_BRAVE_SYNC_DISABLED_ENTER_CODE_BUTTON" desc="The Sync button that triggers a modal asking for the sync chain code passphrase">Enter a sync chain code</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_DESCRIPTION" desc="The Brave Sync title.">Brave Sync Setup</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_NEW_CHAIN_DESCRIPTION" desc="The Sync phrase explaining what happens when you start a new sync chain. Appears when sync is disabled.">To start, you will need Brave installed on all the devices you plan to sync. To chain them together, start a sync chain that you will use to securely link all of your devices together.</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_START_NEW_CHAIN_BUTTON" desc="The Sync button that triggers a modal to start a new sync chian">Start a New Sync Chain</message>
+      <message name="IDS_BRAVE_SYNC_DISABLED_ENTER_CODE_BUTTON" desc="The Sync button that triggers a modal asking for the sync chain code passphrase">I Have a Sync Code</message>
       <message name="IDS_BRAVE_SYNC_DISABLED_CONFIRM_CODE_BUTTON" desc="The Sync button to confirm the Sync code that was inputed by the user">Confirm Sync Code</message>
       <!-- WebUI brave sync resources: [modal] Enter Sync Code -->
       <message name="IDS_BRAVE_SYNC_ENTER_CODE_TITLE" desc="The Sync modal title for `enter sync code`">Enter a sync code</message>