add missing component to sync ui

fix brave/brave-browser#4650 should match spec in brave-ui https://brave.github.io/brave-ui missing components can be found in https://github.com/brave/brave-ui/blob/master/stories/features/sync/enabledContent.tsx#L201 https://github.com/brave/brave-ui/blob/master/stories/features/sync/disabledContent.tsx#L75
brave · Jun 12, 2019 · 4a530d7 · 4a530d7
1 parent c90dbb4
commit 4a530d7
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 61 deletions.
diff --git a/components/brave_sync/ui/components/disabledContent.tsx b/components/brave_sync/ui/components/disabledContent.tsx
@@ -15,6 +15,7 @@ import {
   TableGrid,
   Paragraph,
   SyncCard,
+  SyncCardContent,
   DisabledContent
 } from 'brave-ui/features/sync'
 
@@ -76,27 +77,29 @@ export default class SyncDisabledContent extends React.PureComponent<Props, Stat
               : 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')}
-                  />
-                  <Button
-                    level='secondary'
-                    type='accent'
-                    onClick={this.onClickEnterSyncChainCodeButton}
-                    text={getLocale('enterSyncChainCode')}
-                  />
-                </DisabledContentButtonGrid>
-              </div>
-            </TableGrid>
+            <SyncCardContent>
+              <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')}
+                    />
+                    <Button
+                      level='secondary'
+                      type='accent'
+                      onClick={this.onClickEnterSyncChainCodeButton}
+                      text={getLocale('enterSyncChainCode')}
+                    />
+                  </DisabledContentButtonGrid>
+                </div>
+              </TableGrid>
+            </SyncCardContent>
           </SyncCard>
         </Main>
       </DisabledContent>

diff --git a/components/brave_sync/ui/components/enabledContent.tsx b/components/brave_sync/ui/components/enabledContent.tsx
@@ -24,6 +24,7 @@ import {
   TableGrid,
   TableButtonGrid,
   EnabledContent,
+  SyncCardContent,
   SyncCard
 } from 'brave-ui/features/sync'
 
@@ -257,46 +258,48 @@ export default class SyncEnabledContent extends React.PureComponent<Props, State
               : null
           }
           <SyncCard>
-            <Title level={2}>{getLocale('braveSync')}</Title>
-            <Paragraph>{getLocale('syncChainDevices')}</Paragraph>
-            <SectionBlock>
-              <TableGrid isDeviceTable={true}>
-                <Table header={this.devicesHeader} rows={this.getDevicesRows(syncData.devices)}>
-                  Device list is empty
-                </Table>
-                <TableButtonGrid>
-                  <br />
-                  <Button
-                    level='secondary'
-                    type='accent'
-                    size='medium'
-                    text={getLocale('viewSyncCode')}
-                    onClick={this.onClickViewSyncCodeButton}
-                  />
-                  <Button
-                    level='primary'
-                    type='accent'
-                    size='medium'
-                    text={getLocale('addDevice')}
-                    onClick={this.onClickAddDeviceButton}
-                  />
-                </TableButtonGrid>
-              </TableGrid>
-            </SectionBlock>
-            <Title level={2}>{getLocale('settingsTitle')}</Title>
-            <Paragraph>{getLocale('settingsDescription')}</Paragraph>
-            <SectionBlock>
-              <Table header={this.settingsHeader} rows={this.settingsRows} />
-            </SectionBlock>
-            <SectionBlock>
-              <Button
-                level='primary'
-                type='accent'
-                size='medium'
-                text={getLocale('leaveSyncChain')}
-                onClick={this.onClickResetSyncButton}
-              />
-            </SectionBlock>
+            <SyncCardContent>
+              <Title level={2}>{getLocale('braveSync')}</Title>
+              <Paragraph>{getLocale('syncChainDevices')}</Paragraph>
+              <SectionBlock>
+                <TableGrid isDeviceTable={true}>
+                  <Table header={this.devicesHeader} rows={this.getDevicesRows(syncData.devices)}>
+                    Device list is empty
+                  </Table>
+                  <TableButtonGrid>
+                    <br />
+                    <Button
+                      level='secondary'
+                      type='accent'
+                      size='medium'
+                      text={getLocale('viewSyncCode')}
+                      onClick={this.onClickViewSyncCodeButton}
+                    />
+                    <Button
+                      level='primary'
+                      type='accent'
+                      size='medium'
+                      text={getLocale('addDevice')}
+                      onClick={this.onClickAddDeviceButton}
+                    />
+                  </TableButtonGrid>
+                </TableGrid>
+              </SectionBlock>
+              <Title level={2}>{getLocale('settingsTitle')}</Title>
+              <Paragraph>{getLocale('settingsDescription')}</Paragraph>
+              <SectionBlock>
+                <Table header={this.settingsHeader} rows={this.settingsRows} />
+              </SectionBlock>
+              <SectionBlock>
+                <Button
+                  level='primary'
+                  type='accent'
+                  size='medium'
+                  text={getLocale('leaveSyncChain')}
+                  onClick={this.onClickResetSyncButton}
+                />
+              </SectionBlock>
+            </SyncCardContent>
           </SyncCard>
         </Main>
       </EnabledContent>