diff --git a/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap b/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap index 03a447aa6..605740c97 100644 --- a/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap +++ b/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 { diff --git a/src/components/buttonsIndicators/button/style.ts b/src/components/buttonsIndicators/button/style.ts index 7323243d6..15033b893 100644 --- a/src/components/buttonsIndicators/button/style.ts +++ b/src/components/buttonsIndicators/button/style.ts @@ -84,7 +84,7 @@ const StyledButton = styled('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); } diff --git a/src/components/formControls/textareaClipboard/index.tsx b/src/components/formControls/textareaClipboard/index.tsx index 424eba87a..1d569a71c 100644 --- a/src/components/formControls/textareaClipboard/index.tsx +++ b/src/components/formControls/textareaClipboard/index.tsx @@ -93,17 +93,21 @@ export default class TextAreaClipboard extends React.PureComponent /> {wordCountString} {this.wordCount} - - - {copiedString} - - - - - + { + copiedString !== undefined + ? + + {copiedString} + + + + + + : null + } ) diff --git a/src/components/popupModals/alertBox/style.ts b/src/components/popupModals/alertBox/style.ts index 7fdf0be36..960724bb2 100644 --- a/src/components/popupModals/alertBox/style.ts +++ b/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; diff --git a/src/components/popupModals/modal/__snapshots__/spec.tsx.snap b/src/components/popupModals/modal/__snapshots__/spec.tsx.snap index 410091dfd..2be98b745 100644 --- a/src/components/popupModals/modal/__snapshots__/spec.tsx.snap +++ b/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); } diff --git a/src/components/popupModals/modal/style.ts b/src/components/popupModals/modal/style.ts index 468fc280f..7c16bd9eb 100644 --- a/src/components/popupModals/modal/style.ts +++ b/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); ` diff --git a/src/features/rewards/modalActivity/__snapshots__/spec.tsx.snap b/src/features/rewards/modalActivity/__snapshots__/spec.tsx.snap index 854f475a1..58a685d22 100644 --- a/src/features/rewards/modalActivity/__snapshots__/spec.tsx.snap +++ b/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); } diff --git a/src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap b/src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap index c8e4d97a9..25436d1e1 100644 --- a/src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap +++ b/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); } diff --git a/src/features/rewards/modalBackupRestore/__snapshots__/spec.tsx.snap b/src/features/rewards/modalBackupRestore/__snapshots__/spec.tsx.snap index 6949d1fd7..554f9b4dd 100644 --- a/src/features/rewards/modalBackupRestore/__snapshots__/spec.tsx.snap +++ b/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); } diff --git a/src/features/rewards/modalContribute/__snapshots__/spec.tsx.snap b/src/features/rewards/modalContribute/__snapshots__/spec.tsx.snap index 7ef7af16d..21e59195d 100644 --- a/src/features/rewards/modalContribute/__snapshots__/spec.tsx.snap +++ b/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); } diff --git a/src/features/rewards/modalDonation/__snapshots__/spec.tsx.snap b/src/features/rewards/modalDonation/__snapshots__/spec.tsx.snap index 896a35034..a4be371f3 100644 --- a/src/features/rewards/modalDonation/__snapshots__/spec.tsx.snap +++ b/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); } diff --git a/src/features/sync/grid/index.ts b/src/features/sync/grid/index.ts index 6c01ead14..45f537f74 100644 --- a/src/features/sync/grid/index.ts +++ b/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('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('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; ` diff --git a/src/features/sync/images/add_icon.svg b/src/features/sync/images/add_icon.svg new file mode 100644 index 000000000..cedf5ac78 --- /dev/null +++ b/src/features/sync/images/add_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/sync/images/default_icon.svg b/src/features/sync/images/default_icon.svg new file mode 100644 index 000000000..6ecc798af --- /dev/null +++ b/src/features/sync/images/default_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/sync/images/desktop_icon.svg b/src/features/sync/images/desktop_icon.svg new file mode 100644 index 000000000..f1bf22b40 --- /dev/null +++ b/src/features/sync/images/desktop_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/sync/images/index.ts b/src/features/sync/images/index.ts new file mode 100644 index 000000000..6cc7786ce --- /dev/null +++ b/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('img')` + max-width: 100%; + display: block; + width: ${p => p.size === 'normal' ? '180px' : '140px'}; +` diff --git a/src/features/sync/images/mobile_icon.svg b/src/features/sync/images/mobile_icon.svg new file mode 100644 index 000000000..18d4c52d6 --- /dev/null +++ b/src/features/sync/images/mobile_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/sync/images/mobile_picture.png b/src/features/sync/images/mobile_picture.png new file mode 100644 index 000000000..bb776e7ef Binary files /dev/null and b/src/features/sync/images/mobile_picture.png differ diff --git a/src/features/sync/images/remove_icon.svg b/src/features/sync/images/remove_icon.svg new file mode 100644 index 000000000..ff07652ed --- /dev/null +++ b/src/features/sync/images/remove_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/sync/images/start_icon.svg b/src/features/sync/images/start_icon.svg new file mode 100644 index 000000000..6d0d1149b --- /dev/null +++ b/src/features/sync/images/start_icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/features/sync/index.ts b/src/features/sync/index.ts index 346471b66..a8f162800 100644 --- a/src/features/sync/index.ts +++ b/src/features/sync/index.ts @@ -2,41 +2,29 @@ * 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 { 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 { Title, SubTitle, Paragraph, SwitchLabel } from './text' +export { Main, TableRowId, TableRowDevice, TableRowRemove, TableRowRemoveButton } from './misc' export { - Main, - QRCode, SectionBlock, - Grid, - FlexColumn, - Title, - SubTitle, - Paragraph, - EmphasisText, - SecondaryText, - Label, - Link, - SwitchLabel, - List, - ListOrdered, - ListBullet, - TableRowId, - TableRowDevice, - TableRowRemove, - TableRowRemoveButton -} + SettingsToggleGrid, + EnabledContentButtonGrid, + DisabledContentButtonGrid, + TableGrid, + TableButtonGrid +} from './grid' +export { + ModalHeader, + ModalTitle, + ModalSubTitle, + ModalContent, + TwoColumnButtonGrid, + OneColumnButtonGrid, + DeviceGrid, + DeviceContainer, + ViewSyncCodeGrid, + ScanGrid, + QRCodeContainer, + ThreeColumnButtonGrid, + ThreeColumnButtonGridCol1, + ThreeColumnButtonGridCol2 +} from './modal' diff --git a/src/features/sync/misc/index.ts b/src/features/sync/misc/index.ts index 82028e07d..364af10ca 100644 --- a/src/features/sync/misc/index.ts +++ b/src/features/sync/misc/index.ts @@ -7,16 +7,11 @@ 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: 840px; + max-width: 980px; 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; @@ -24,7 +19,7 @@ export const TableRowId = styled<{}, 'span'>('span')` ` export const TableRowDevice = styled<{}, 'span'>('span')` - max-width: 15ch; + max-width: 30ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/features/sync/modal/index.ts b/src/features/sync/modal/index.ts new file mode 100644 index 000000000..7a4450606 --- /dev/null +++ b/src/features/sync/modal/index.ts @@ -0,0 +1,115 @@ +/* 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 Heading from '../../../components/text/heading' + +export const ModalHeader = styled<{}, 'header'>('header')` + display: grid; + grid-template-columns: auto 1fr; + grid-gap: 32px; + margin-bottom: 8px; +` + +export const ModalTitle = styled(Heading)` + font-weight: 500; + font-size: 24px; + margin: 0 0 4px; + line-height: 1.6; +` + +interface ModalSubTitleProps { + highlight?: boolean +} + +export const ModalSubTitle = styled('span')` + display: block; + font-size: 18px; + line-height: 1.6; + color: ${p => p.highlight && '#ff0000'} +` + +export const ModalContent = styled<{}, 'div'>('div')` + margin-left: 0px; +` + +export const OneColumnButtonGrid = styled<{}, 'div'>('div')` + display: flex; + justify-content: flex-end; +` + +export const TwoColumnButtonGrid = styled<{}, 'footer'>('footer')` + display: grid; + align-items: center; + grid-template-columns: 1fr auto; + grid-gap: 20px; + margin-top: 20px; +` + +export const ThreeColumnButtonGrid = styled<{}, 'div'>('div')` + display: grid; + grid-template-columns: 1fr 1fr; + grid-gap: 30px; + margin-top: 30px; +` + +export const ThreeColumnButtonGridCol1 = styled<{}, 'div'>('div')` + display: grid; + align-items: center; + grid-template-columns: auto; +` + +export const ThreeColumnButtonGridCol2 = styled<{}, 'div'>('div')` + display: grid; + align-items: center; + grid-template-columns: auto auto; + grid-gap: 15px; +` + +export const DeviceGrid = styled<{}, 'div'>('div')` + display: grid; + height: 100%; + grid-template-columns: auto auto; + grid-template-rows: 1fr; + grid-gap: 30px; + margin: 30px auto 0; + width: 400px; +` + +export const DeviceContainer = styled<{}, 'div'>('div')` + display: flex; + flex-direction: column; + align-items: center; +` + +export const ScanGrid = styled<{}, 'div'>('div')` + display: grid; + height: 100%; + grid-template-columns: auto auto; + grid-template-rows: 1fr; + margin: 25px auto; + max-width: 550px; +` + +export const QRCodeContainer = styled<{}, 'div'>('div')` + display: flex; + flex-direction: column; + align-items: center; + width: 120px; + img { + max-width: 100%; + } +` + +export const ViewSyncCodeGrid = styled<{}, 'div'>('div')` + display: grid; + height: 100%; + grid-template-columns: 2fr 1fr; + grid-template-rows: 1fr; + grid-gap: 16px; + margin: 0 0 25px; + img { + max-width: 80%; + } +` diff --git a/src/features/sync/text/index.ts b/src/features/sync/text/index.ts index b493faf74..81bf9434c 100644 --- a/src/features/sync/text/index.ts +++ b/src/features/sync/text/index.ts @@ -7,14 +7,15 @@ import Heading from '../../../components/text/heading' export const Title = styled(Heading)` font-weight: 500; - font-size: 26px; - margin: 0 0 20px 0; + font-size: 24px; + margin: 0 0 4px 0; + line-height: 1.6; ` export const SubTitle = styled(Heading)` font-weight: 500; font-size: 20px; - margin: 30px 0 10px 0; + margin: 16px 0 12px 0; ` export const Paragraph = styled<{}, 'p'>('p')` @@ -22,56 +23,15 @@ export const Paragraph = styled<{}, 'p'>('p')` font-weight: 300; line-height: 1.75; margin: 0; - font-family: 'Muli', sans-serif; - padding: 0 0 10px 0 -` - -export const EmphasisText = styled(Paragraph.withComponent('em'))` - display: block; - font-weight: 400; - margin: 0px 0 10px; - font-style: normal; -` - -export const SecondaryText = styled(EmphasisText)` - color: #7C7D8C; - margin: 0px 0 20px; -` - -export const Link = styled<{}, 'a'>('a')` - color: ${p => p.theme.color.brandBrave}; - font-weight: bold; - margin: 0 10px; - text-decoration: none; - display: inline; + font-family: ${p => p.theme.fontFamily.body}; + padding: 0 0 12px 0; ` -export const Label = styled<{}, 'label'>('label')` +export const SwitchLabel = styled<{}, 'label'>('label')` font-family: ${p => p.theme.fontFamily.body}; color: ${p => p.theme.color.defaultControlActive}; - margin: 0; font-size: 14px; font-weight: 400; letter-spacing: normal; -` - -export const SwitchLabel = styled(Label)` - margin: 0 10px; -` - -export const List = styled<{}, 'ul'>('ul')` - font-size: 16px; - font-weight: 300; - margin: 20px 0; - padding: 0 0 0 20px; - list-style-type: decimal; -` - -export const ListOrdered = List.withComponent('ol') - -export const ListBullet = styled(Paragraph.withComponent('li'))` - - .syncButton { - margin: 15px 0 - } + margin: 0 12px; ` diff --git a/stories/components/popupsModal.tsx b/stories/components/popupsModal.tsx index b034a3f30..9938f79f1 100644 --- a/stories/components/popupsModal.tsx +++ b/stories/components/popupsModal.tsx @@ -12,7 +12,7 @@ import * as React from 'react' import { withState } from '@dump247/storybook-state' // Components -import { Modal } from '../../src/components' +import { Modal, AlertBox } from '../../src/components' storiesOf('Components/Popups and Modals', module) .addDecorator(withKnobs) @@ -38,3 +38,10 @@ storiesOf('Components/Popups and Modals', module) ) })) + .add('AlertBox', () => { + return ( + + Content here + + ) + }) diff --git a/stories/features/sync/disabledContent.tsx b/stories/features/sync/disabledContent.tsx index 2b3157207..687f716b9 100644 --- a/stories/features/sync/disabledContent.tsx +++ b/stories/features/sync/disabledContent.tsx @@ -8,21 +8,32 @@ import * as React from 'react' import Button from '../../../src/components/buttonsIndicators/button' // Component-specific components -import { Grid } from '../../../src/features/sync' +import { + Main, + Title, + SectionBlock, + DisabledContentButtonGrid, + TableGrid, + Paragraph +} from '../../../src/features/sync' // Modals -import NewToSyncModal from './modals/newToSync' -import ExistingSyncCodeModal from './modals/existingSyncCode' +import DeviceType from './modals/deviceType' +import EnterSyncCode from './modals/enterSyncCode' + +// Images +import { SyncStartIcon } from '../../../src/features/sync/images' // Utils -import locale from './page/fakeLocale' +import { getLocale } from './page/fakeLocale' +import data from './page/fakeData' -interface SyncDisabledContentState { +interface State { newToSync: boolean existingSyncCode: boolean } -class SyncDisabledContent extends React.PureComponent<{}, SyncDisabledContentState> { +export default class SyncDisabledContent extends React.PureComponent<{}, State> { constructor (props: {}) { super(props) this.state = { @@ -31,48 +42,60 @@ class SyncDisabledContent extends React.PureComponent<{}, SyncDisabledContentSta } } - newToSyncModal = () => { + get mainDeviceName () { + return data.device1.name + } + + onClickNewSyncChainButton = () => { this.setState({ newToSync: !this.state.newToSync }) } - existingSyncCodeModal = () => { + onClickEnterSyncChainCodeButton = () => { this.setState({ existingSyncCode: !this.state.existingSyncCode }) } render () { + const { newToSync, existingSyncCode } = this.state return ( - +
{ - this.state.newToSync - ? + newToSync + ? : null } { - this.state.existingSyncCode - ? + existingSyncCode + ? : null } -
-
-
-
- + + +
+ {getLocale('syncTitle')} + {getLocale('syncDescription')} + + +
+
+
+
+ + +
+ +
) } } - -export default SyncDisabledContent diff --git a/stories/features/sync/enabledContent.tsx b/stories/features/sync/enabledContent.tsx index ad0a16ecb..ec2fc1975 100644 --- a/stories/features/sync/enabledContent.tsx +++ b/stories/features/sync/enabledContent.tsx @@ -5,58 +5,73 @@ import * as React from 'react' // Components -import Card from '../../../src/components/layout/card' import Toggle from '../../../src/components/formControls/toggle' import Button from '../../../src/components/buttonsIndicators/button' import Table, { Cell, Row } from '../../../src/components/dataTables/table' // Feature-specific components import { - Grid, - FlexColumn, + Main, + Title, + SettingsToggleGrid, SwitchLabel, - Label, - Paragraph, SectionBlock, SubTitle, - TableRowId, TableRowDevice, TableRowRemove, - TableRowRemoveButton + TableRowRemoveButton, + TableGrid, + TableButtonGrid } from '../../../src/features/sync' // Modals -import SyncANewDeviceModal from './modals/syncNewDevice' +import RemoveMainDevice from './modals/removeMainDevice' +import RemoveOtherDevice from './modals/removeOtherDevice' +import ViewSyncCodeModal from './modals/viewSyncCode' +import DeviceTypeModal from './modals/deviceType' import ResetSyncModal from './modals/resetSync' // Utils -import locale from './page/fakeLocale' +import { getLocale } from './page/fakeLocale' import data from './page/fakeData' -interface SyncEnabledContentState { - syncANewDevice: boolean +interface State { + removeOtherDevice: boolean + removeMainDevice: boolean + viewSyncCode: boolean + addDevice: boolean resetSync: boolean } -class SyncEnabledContent extends React.PureComponent<{}, SyncEnabledContentState> { +export default class SyncEnabledContent extends React.PureComponent<{}, State> { constructor (props: {}) { super(props) this.state = { - syncANewDevice: false, + removeOtherDevice: false, + removeMainDevice: false, + viewSyncCode: false, + addDevice: false, resetSync: false } } + get mainDeviceName () { + return data.device1.name + } + + get otherDeviceName () { + return data.device2.name + } + get rows (): Row[] { return [ { content: [ - { content: {data.device1.id} }, - { content: {data.device1.name} }, + { content: {data.device1.name} (main device) }, { content: data.device1.lastActive }, { content: ( - + × ) @@ -65,12 +80,11 @@ class SyncEnabledContent extends React.PureComponent<{}, SyncEnabledContentState }, { content: [ - { content: {data.device2.id} }, { content: {data.device2.name} }, { content: data.device2.lastActive }, { content: ( - + × ) @@ -82,88 +96,111 @@ class SyncEnabledContent extends React.PureComponent<{}, SyncEnabledContentState get header (): Cell[] { return [ - { content: {locale.id} }, - { content: {locale.deviceName} }, - { content: locale.lastActive }, - { content: {locale.removeDevice} } + { content: {getLocale('deviceName')} }, + { content: getLocale('addedOn') }, + { content: {getLocale('remove')} } ] } - syncANewDevice = () => { - this.setState({ syncANewDevice: !this.state.syncANewDevice }) + onClickRemoveOtherDeviceButton = () => { + this.setState({ removeOtherDevice: !this.state.removeOtherDevice }) } - resetSync = () => { + onClickRemoveMainDeviceButton = () => { + this.setState({ removeMainDevice: !this.state.removeMainDevice }) + } + + onClickViewSyncCodeButton = () => { + this.setState({ viewSyncCode: !this.state.viewSyncCode }) + } + + onClickAddDeviceButton = () => { + this.setState({ addDevice: !this.state.addDevice }) + } + + onClickResetSyncButton = () => { this.setState({ resetSync: !this.state.resetSync }) } render () { + const { removeOtherDevice, removeMainDevice, viewSyncCode, addDevice, resetSync } = this.state return ( - <> +
+ { + removeOtherDevice + ? + : null + } { - this.state.syncANewDevice - ? + removeMainDevice + ? : null } { - this.state.resetSync - ? + viewSyncCode + ? : null } - - - - - {locale.syncThisDevice} - - - - MacOS without the ESC key - - - + { + addDevice + ? + : null + } + { + resetSync + ? + : null + } + {getLocale('braveSync')} - {locale.devices} - -
+ +