Merge pull request #318 from brave/sync

Sync v2 final tweaks

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 10px;
+ padding: 11px 15px;
 }
 
 .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 10px', '7px 10px', '19px 15px')};
+ padding: ${largeMediumSmall('14px 15px', '11px 15px', '7px 10px', '19px 15px')};
  :hover:enabled {
  --button-state-color: var(--button-main-color-hover);
  }

src/components/formControls/textareaClipboard/index.tsx

@@ -93,17 +93,21 @@ export default class TextAreaClipboard extends React.PureComponent<Props, State>
  />
  <StyledFooter>
  {wordCountString} {this.wordCount}
- <StyledCopyToClipboard>
- <StyledText
- visible={copiedStringVisible}
- onAnimationEnd={this.onAnimationEnd}
- >
- {copiedString}
- </StyledText>
- <StyledClipboardButton onClick={this.onCopyToClipboard}>
- <ClipboardIcon />
- </StyledClipboardButton>
- </StyledCopyToClipboard>
+ {
+ copiedString !== undefined
+ ? <StyledCopyToClipboard>
+ <StyledText
+ visible={copiedStringVisible}
+ onAnimationEnd={this.onAnimationEnd}
+ >
+ {copiedString}
+ </StyledText>
+ <StyledClipboardButton onClick={this.onCopyToClipboard}>
+ <ClipboardIcon />
+ </StyledClipboardButton>
+ </StyledCopyToClipboard>
+ : null
+ }
  </StyledFooter>
  </StyledWrapper>
  )

src/components/popupModals/alertBox/style.ts

@@ -10,6 +10,7 @@ export const StyledDialog = styled<{}, 'div'>('div')`
  left: 0;
  right: 0;
  bottom: 0;
+ z-index: 999999;
  width: 470px;
  height: 200px;
  overflow: hidden;

src/components/popupModals/modal/__snapshots__/spec.tsx.snap

@@ -33,7 +33,7 @@ exports[`Modal tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/components/popupModals/modal/style.ts

@@ -37,7 +37,7 @@ export const StyledClose = styled<{}, 'div'>('div')`
 `
 
 export const StyledContent = styled<{}, 'div'>('div')`
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 `

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

@@ -252,7 +252,7 @@ exports[`ModalActivity tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

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

@@ -87,7 +87,7 @@ exports[`ModalAddFunds tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

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 10px;
+ padding: 11px 15px;
 }
 
 .c26:hover:enabled {
@@ -202,7 +202,7 @@ exports[`ModalBackupRestore tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

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

@@ -55,7 +55,7 @@ exports[`ModalContribute tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

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

@@ -45,7 +45,7 @@ exports[`ModalDonation tests basic tests matches the snapshot 1`] = `
 }
 
 .c4 {
- padding: 61px 50px;
+ padding: 48px 48px;
  overflow-y: auto;
  max-height: calc(100vh - 100px);
 }

src/features/sync/grid/index.ts

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

src/features/sync/images/index.ts

@@ -0,0 +1,46 @@
+/* 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 styled from '../../../theme'
+
+import StartImageUrl from './start_icon.svg'
+import DefaultImageUrl from './default_icon.svg'
+import AddImageUrl from './add_icon.svg'
+import RemoveImageUrl from './remove_icon.svg'
+import DesktopImageUrl from './desktop_icon.svg'
+import MobileImageUrl from './mobile_icon.svg'
+import MobileHandImageUrl from './mobile_picture.png'
+
+const iconStyles = `
+ margin-top: 3px;
+ height: 60px;
+`
+
+const deviceStyles = `
+ margin-bottom: 20px;
+ height: 100px;
+`
+
+export const SyncStartIcon = styled<{}, 'img'>('img').attrs({ src: StartImageUrl })`
+ max-width: 100%;
+`
+export const SyncDefaultIcon = styled<{}, 'img'>('img').attrs({ src: DefaultImageUrl })`${iconStyles}`
+export const SyncAddIcon = styled<{}, 'img'>('img').attrs({ src: AddImageUrl })`${iconStyles}`
+export const SyncRemoveIcon = styled<{}, 'img'>('img').attrs({ src: RemoveImageUrl })`${iconStyles}`
+export const SyncDesktopIcon = styled<{}, 'img'>('img').attrs({ src: DesktopImageUrl })`${deviceStyles}`
+export const SyncMobileIcon = styled<{}, 'img'>('img').attrs({ src: MobileImageUrl })`${deviceStyles}`
+export const SyncMobilePicture = styled<{}, 'img'>('img').attrs({ src: MobileHandImageUrl })`
+ max-width: 100%;
+ display: block;
+`
+
+interface QRCodeProps {
+ size: 'normal' | 'small'
+}
+
+export const QRCode = styled<QRCodeProps, 'img'>('img')`
+ max-width: 100%;
+ display: block;
+ width: ${p => p.size === 'normal' ? '180px' : '140px'};
+`