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'};
+`