Merge pull request #338 from brave/sync-spec-59

Merge pull request #332 from brave/sync-spec

src/components/popupModals/alertBox/index.tsx

@@ -3,7 +3,7 @@
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import * as React from 'react'
-import { StyledDialog, StyledFooter, StyledCancelContainer } from './style'
+import { StyledDialogWrapper, StyledDialog, StyledFooter, StyledCancelContainer } from './style'
 import Button from '../../buttonsIndicators/button'
 
 export interface Props {
@@ -24,6 +24,7 @@ export default class AlertBox extends React.PureComponent<Props, {}> {
  const { testId, children, ...buttonProps } = this.props
  const { colorType, onClickCancel, cancelString, onClickOk, okString } = buttonProps
  return (
+ <StyledDialogWrapper>
  <StyledDialog data-test-id={testId}>
  <div>{children}</div>
  <StyledFooter>
@@ -37,6 +38,7 @@ export default class AlertBox extends React.PureComponent<Props, {}> {
  <Button type={colorType} onClick={onClickOk} text={okString} />
  </StyledFooter>
  </StyledDialog>
+ </StyledDialogWrapper>
  )
  }
 }

src/components/popupModals/alertBox/style.ts

@@ -4,16 +4,18 @@
 
 import styled from 'styled-components'
 
-export const StyledDialog = styled<{}, 'div'>('div')`
+export const StyledDialogWrapper = styled<{}, 'div'>('div')`
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
+ display: flex;
+`
+
+export const StyledDialog = styled<{}, 'div'>('div')`
  width: 470px;
- height: 200px;
- overflow: hidden;
  margin: auto;
  padding: 30px 20px 10px;
  max-height: calc(100vh - 100px);

src/components/popupModals/modal/index.tsx

@@ -13,12 +13,14 @@ export interface Props {
  onClose?: () => void
  size?: 'small' | 'normal'
  testId?: string
+ displayCloseButton?: boolean
 }
 
 export default class Modal extends React.PureComponent<Props, {}> {
  static defaultProps = {
  size: 'normal',
- id: 'modal'
+ id: 'modal',
+ displayCloseButton: true
  }
 
  outsideClose = () => {
@@ -32,14 +34,16 @@ export default class Modal extends React.PureComponent<Props, {}> {
  }
 
  render () {
- const { id, onClose, children, size, testId } = this.props
+ const { id, onClose, displayCloseButton, children, size, testId } = this.props
 
  return (
  <StyledWrapper id={id} onClick={this.outsideClose} data-test-id={testId}>
  <StyledDialog size={size}>
- <StyledClose onClick={onClose}>
- <CloseStrokeIcon />
- </StyledClose>
+ {
+ displayCloseButton
+ ? <StyledClose onClick={onClose}><CloseStrokeIcon /></StyledClose>
+ : null
+ }
  <StyledContent>
  {children}
  </StyledContent>

src/features/sync/grid/index.ts

@@ -5,7 +5,7 @@
 import styled from '../../../theme'
 
 export const SectionBlock = styled<{}, 'section'>('section')`
- margin: 10px 0 40px;
+ margin: 15px 0 40px;
 `
 
 export const EnabledContentButtonGrid = styled<{}, 'footer'>('footer')`
@@ -27,20 +27,27 @@ export const SettingsToggleGrid = styled<{}, 'footer'>('footer')`
 
 export const DisabledContentButtonGrid = styled<{}, 'footer'>('footer')`
  display: grid;
- grid-template-columns: auto 1fr;
+ grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  grid-gap: 10px;
- margin: 20px 0;
+ margin: 15px 0 0;
 `
 
-export const TableGrid = styled<{}, 'div'>('div')`
+interface TableGridProps {
+ isDeviceTable?: boolean
+}
+
+export const TableGrid = styled<TableGridProps, 'div'>('div')`
+ align-items: center;
  display: grid;
- grid-template-columns: auto auto;
- grid-gap: 20px;
+ grid-template-columns: ${p => p.isDeviceTable ? '1fr' : '200px auto'};
+ grid-template-rows: auto;
+ grid-gap: ${p => p.isDeviceTable ? '0' : '50px'};
 `
 
 export const TableButtonGrid = styled<{}, 'div'>('div')`
  display: grid;
- grid-template-rows: 40px 40px;
+ grid-template-rows: auto;
  grid-gap: 15px;
+ grid-template-columns: 2fr 1fr 1fr;
 `

src/features/sync/images/index.ts

@@ -8,17 +8,17 @@ 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'
+import DesktopImageUrl from './sync_computer.svg'
+import MobileImageUrl from './sync_devices.svg'
+import MobileHandImageUrl from './sync_hand.svg'
 
 const iconStyles = `
  margin-top: 3px;
  height: 60px;
 `
 
 const deviceStyles = `
- margin-bottom: 20px;
+ margin-bottom: 10px;
  height: 100px;
 `
 
@@ -32,6 +32,7 @@ export const SyncDesktopIcon = styled<{}, 'img'>('img').attrs({ src: DesktopImag
 export const SyncMobileIcon = styled<{}, 'img'>('img').attrs({ src: MobileImageUrl })`${deviceStyles}`
 export const SyncMobilePicture = styled<{}, 'img'>('img').attrs({ src: MobileHandImageUrl })`
  max-width: 100%;
+ height: 150px;
  display: block;
 `
 
@@ -40,7 +41,9 @@ interface QRCodeProps {
 }
 
 export const QRCode = styled<QRCodeProps, 'img'>('img')`
- max-width: 100%;
  display: block;
- width: ${p => p.size === 'normal' ? '180px' : '140px'};
+ width: 200px;
+ padding: 30px;
+ border: 1px solid #C8C8D5;
+ max-width: 100%;
 `