Merge pull request #314 from brave/revert-sync-master

Revert sync

src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`Button tests basic tests matches the snapshot 1`] = `
   border-radius: 20px;
   width: auto;
   min-width: 104px;
-  padding: 11px 15px;
+  padding: 11px 10px;
 }
 
 .c1:hover:enabled {

src/components/buttonsIndicators/button/style.ts

@@ -84,7 +84,7 @@ const StyledButton = styled<Props, 'button'>('button')`
   border-radius: ${largeMediumSmall('24px', '20px', '16px', '28px')};
   width: ${p => p.size === 'call-to-action' ? '100%' : 'auto'};
   min-width: ${largeMediumSmall('116px', '104px', '88px', '235px')};
-  padding: ${largeMediumSmall('14px 15px', '11px 15px', '7px 10px', '19px 15px')};
+  padding: ${largeMediumSmall('14px 15px', '11px 10px', '7px 10px', '19px 15px')};
   :hover:enabled {
     --button-state-color: var(--button-main-color-hover);
   }

src/features/rewards/modalBackupRestore/__snapshots__/spec.tsx.snap

@@ -38,7 +38,7 @@ exports[`ModalBackupRestore tests basic tests matches the snapshot 1`] = `
   border-radius: 20px;
   width: auto;
   min-width: 104px;
-  padding: 11px 15px;
+  padding: 11px 10px;
 }
 
 .c26:hover:enabled {

src/features/sync/grid/index.ts

@@ -8,39 +8,31 @@ export const SectionBlock = styled<{}, 'section'>('section')`
   margin: 10px 0 40px;
 `
 
-export const EnabledContentButtonGrid = styled<{}, 'footer'>('footer')`
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  grid-gap: 5px;
-  margin: 10px 5px 0;
-`
+interface GridProps {
+  columns?: string
+  rows?: string
+  gap?: string
+}
 
-export const SettingsToggleGrid = styled<{}, 'footer'>('footer')`
+export const Grid = styled<GridProps, 'footer'>('footer')`
   display: grid;
-  grid-template-columns: auto 1fr;
-  grid-template-rows: 1fr 1fr 1fr;
-  grid-gap: 5px;
-  align-items: center;
-  margin: 15px 0 0;
-`
-
-export const DisabledContentButtonGrid = styled<{}, 'footer'>('footer')`
-  display: grid;
-  grid-template-columns: auto 1fr;
+  height: 100%;
+  grid-template-columns: ${p => p.columns || '1fr'};
+  grid-template-rows: ${p => p.rows || '1fr'};
   grid-template-rows: 1fr;
-  grid-gap: 10px;
-  margin: 20px 0;
+  grid-gap: ${p => p.gap || '15px'};
+  margin: 10px 5px 0;
 `
 
-export const TableGrid = styled<{}, 'div'>('div')`
-  display: grid;
-  grid-template-columns: auto auto;
-  grid-gap: 20px;
-`
+interface FlexColumnProps {
+  items?: string
+  direction?: string
+  content?: string
+}
 
-export const TableButtonGrid = styled<{}, 'div'>('div')`
-  display: grid;
-  grid-template-rows: 40px 40px;
-  grid-gap: 15px;
+export const FlexColumn = styled<FlexColumnProps, 'div'>('div')`
+  display: flex;
+  align-items: ${p => p.items};
+  flex-direction: ${p => p.direction};
+  justify-content: ${p => p.content};
 `

src/features/sync/index.ts

@@ -2,29 +2,41 @@
  * 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/. */
 
-export { Title, SubTitle, Paragraph, SwitchLabel } from './text'
-export { Main, TableRowId, TableRowDevice, TableRowRemove, TableRowRemoveButton } from './misc'
+import { Main, QRCode, TableRowId, TableRowDevice, TableRowRemove, TableRowRemoveButton } from './misc'
+import { SectionBlock, Grid, FlexColumn } from './grid'
+import {
+  Title,
+  SubTitle,
+  Paragraph,
+  EmphasisText,
+  SecondaryText,
+  Label,
+  Link,
+  SwitchLabel,
+  List,
+  ListOrdered,
+  ListBullet
+} from './text'
+
 export {
+  Main,
+  QRCode,
   SectionBlock,
-  SettingsToggleGrid,
-  EnabledContentButtonGrid,
-  DisabledContentButtonGrid,
-  TableGrid,
-  TableButtonGrid
-} from './grid'
-export {
-  ModalHeader,
-  ModalTitle,
-  ModalSubTitle,
-  ModalContent,
-  TwoColumnButtonGrid,
-  OneColumnButtonGrid,
-  DeviceGrid,
-  DeviceContainer,
-  ViewSyncCodeGrid,
-  ScanGrid,
-  QRCodeContainer,
-  ThreeColumnButtonGrid,
-  ThreeColumnButtonGridCol1,
-  ThreeColumnButtonGridCol2
-} from './modal'
+  Grid,
+  FlexColumn,
+  Title,
+  SubTitle,
+  Paragraph,
+  EmphasisText,
+  SecondaryText,
+  Label,
+  Link,
+  SwitchLabel,
+  List,
+  ListOrdered,
+  ListBullet,
+  TableRowId,
+  TableRowDevice,
+  TableRowRemove,
+  TableRowRemoveButton
+}

src/features/sync/misc/index.ts

@@ -7,19 +7,24 @@ import styled from '../../../theme'
 export const Main = styled<{}, 'main'>('main')`
   font-family: ${p => p.theme.fontFamily.body};
   color: ${p => p.theme.color.defaultControl};
-  max-width: 980px;
+  max-width: 840px;
   padding: 40px;
   margin: auto;
 `
 
+export const QRCode = styled<{}, 'img'>('img')`
+  display: block;
+  max-width: 180px;
+`
+
 export const TableRowId = styled<{}, 'span'>('span')`
   width: 5ch;
   text-align: center;
   display: block;
 `
 
 export const TableRowDevice = styled<{}, 'span'>('span')`
-  max-width: 30ch;
+  max-width: 15ch;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;