diff --git a/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap b/src/components/buttonsIndicators/button/__snapshots__/spec.tsx.snap index 605740c97..03a447aa6 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 15px; + padding: 11px 10px; } .c1:hover:enabled { diff --git a/src/components/buttonsIndicators/button/style.ts b/src/components/buttonsIndicators/button/style.ts index 15033b893..7323243d6 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 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); } diff --git a/src/features/rewards/modalBackupRestore/__snapshots__/spec.tsx.snap b/src/features/rewards/modalBackupRestore/__snapshots__/spec.tsx.snap index 78d668463..6949d1fd7 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 15px; + padding: 11px 10px; } .c26:hover:enabled { diff --git a/src/features/sync/grid/index.ts b/src/features/sync/grid/index.ts index 45f537f74..6c01ead14 100644 --- a/src/features/sync/grid/index.ts +++ b/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('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('div')` + display: flex; + align-items: ${p => p.items}; + flex-direction: ${p => p.direction}; + justify-content: ${p => p.content}; ` diff --git a/src/features/sync/images/add_icon.svg b/src/features/sync/images/add_icon.svg deleted file mode 100644 index cedf5ac78..000000000 --- a/src/features/sync/images/add_icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/sync/images/default_icon.svg b/src/features/sync/images/default_icon.svg deleted file mode 100644 index 6ecc798af..000000000 --- a/src/features/sync/images/default_icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/sync/images/desktop_icon.svg b/src/features/sync/images/desktop_icon.svg deleted file mode 100644 index f1bf22b40..000000000 --- a/src/features/sync/images/desktop_icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/sync/images/index.ts b/src/features/sync/images/index.ts deleted file mode 100644 index 6cc7786ce..000000000 --- a/src/features/sync/images/index.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* 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 deleted file mode 100644 index 18d4c52d6..000000000 --- a/src/features/sync/images/mobile_icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/sync/images/mobile_picture.png b/src/features/sync/images/mobile_picture.png deleted file mode 100644 index bb776e7ef..000000000 Binary files a/src/features/sync/images/mobile_picture.png and /dev/null differ diff --git a/src/features/sync/images/remove_icon.svg b/src/features/sync/images/remove_icon.svg deleted file mode 100644 index ff07652ed..000000000 --- a/src/features/sync/images/remove_icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/sync/images/start_icon.svg b/src/features/sync/images/start_icon.svg deleted file mode 100644 index 58d8be6b6..000000000 --- a/src/features/sync/images/start_icon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/features/sync/index.ts b/src/features/sync/index.ts index a8f162800..346471b66 100644 --- a/src/features/sync/index.ts +++ b/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 +} diff --git a/src/features/sync/misc/index.ts b/src/features/sync/misc/index.ts index 364af10ca..82028e07d 100644 --- a/src/features/sync/misc/index.ts +++ b/src/features/sync/misc/index.ts @@ -7,11 +7,16 @@ 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; @@ -19,7 +24,7 @@ export const TableRowId = styled<{}, 'span'>('span')` ` export const TableRowDevice = styled<{}, 'span'>('span')` - max-width: 30ch; + max-width: 15ch; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; diff --git a/src/features/sync/modal/index.ts b/src/features/sync/modal/index.ts deleted file mode 100644 index 488b7fd30..000000000 --- a/src/features/sync/modal/index.ts +++ /dev/null @@ -1,112 +0,0 @@ -/* 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: 30px; - margin-bottom: 20px; -` - -export const ModalTitle = styled(Heading)` - font-weight: 500; - font-size: 26px; - margin: 0 0 10px; - line-height: 1.3; -` - -interface ModalSubTitleProps { - highlight?: boolean -} - -export const ModalSubTitle = styled('span')` - display: block; - font-size: 18px; - line-height: 1.2; - color: ${p => p.highlight && '#ff0000'} -` - -export const ModalContent = styled<{}, 'div'>('div')` - margin-left: 90px; -` - -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: flex-end; - width: 180px; - img { - max-width: 100%; - } -` - -export const ViewSyncCodeGrid = styled<{}, 'div'>('div')` - display: grid; - height: 100%; - grid-template-columns: auto 1fr; - grid-template-rows: 1fr; - grid-gap: 20px; - margin: 0 0 25px; -` diff --git a/src/features/sync/text/index.ts b/src/features/sync/text/index.ts index 9914e9e8d..b493faf74 100644 --- a/src/features/sync/text/index.ts +++ b/src/features/sync/text/index.ts @@ -14,7 +14,7 @@ export const Title = styled(Heading)` export const SubTitle = styled(Heading)` font-weight: 500; font-size: 20px; - margin: 20px 0 10px 0; + margin: 30px 0 10px 0; ` export const Paragraph = styled<{}, 'p'>('p')` @@ -26,11 +26,52 @@ export const Paragraph = styled<{}, 'p'>('p')` padding: 0 0 10px 0 ` -export const SwitchLabel = styled<{}, 'label'>('label')` +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; +` + +export const Label = 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 + } +` diff --git a/stories/components/popupsModal.tsx b/stories/components/popupsModal.tsx index 9938f79f1..b034a3f30 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, AlertBox } from '../../src/components' +import { Modal } from '../../src/components' storiesOf('Components/Popups and Modals', module) .addDecorator(withKnobs) @@ -38,10 +38,3 @@ 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 687f716b9..2b3157207 100644 --- a/stories/features/sync/disabledContent.tsx +++ b/stories/features/sync/disabledContent.tsx @@ -8,32 +8,21 @@ import * as React from 'react' import Button from '../../../src/components/buttonsIndicators/button' // Component-specific components -import { - Main, - Title, - SectionBlock, - DisabledContentButtonGrid, - TableGrid, - Paragraph -} from '../../../src/features/sync' +import { Grid } from '../../../src/features/sync' // Modals -import DeviceType from './modals/deviceType' -import EnterSyncCode from './modals/enterSyncCode' - -// Images -import { SyncStartIcon } from '../../../src/features/sync/images' +import NewToSyncModal from './modals/newToSync' +import ExistingSyncCodeModal from './modals/existingSyncCode' // Utils -import { getLocale } from './page/fakeLocale' -import data from './page/fakeData' +import locale from './page/fakeLocale' -interface State { +interface SyncDisabledContentState { newToSync: boolean existingSyncCode: boolean } -export default class SyncDisabledContent extends React.PureComponent<{}, State> { +class SyncDisabledContent extends React.PureComponent<{}, SyncDisabledContentState> { constructor (props: {}) { super(props) this.state = { @@ -42,60 +31,48 @@ export default class SyncDisabledContent extends React.PureComponent<{}, State> } } - get mainDeviceName () { - return data.device1.name - } - - onClickNewSyncChainButton = () => { + newToSyncModal = () => { this.setState({ newToSync: !this.state.newToSync }) } - onClickEnterSyncChainCodeButton = () => { + existingSyncCodeModal = () => { this.setState({ existingSyncCode: !this.state.existingSyncCode }) } render () { - const { newToSync, existingSyncCode } = this.state return ( -
+ { - newToSync - ? + this.state.newToSync + ? : null } { - existingSyncCode - ? + this.state.existingSyncCode + ? : null } - - -
- {getLocale('syncTitle')} - {getLocale('syncDescription')} - - -
-
-
-
- - -
- -
+
+
+
+
+ ) } } + +export default SyncDisabledContent diff --git a/stories/features/sync/enabledContent.tsx b/stories/features/sync/enabledContent.tsx index ec2fc1975..ad0a16ecb 100644 --- a/stories/features/sync/enabledContent.tsx +++ b/stories/features/sync/enabledContent.tsx @@ -5,73 +5,58 @@ 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 { - Main, - Title, - SettingsToggleGrid, + Grid, + FlexColumn, SwitchLabel, + Label, + Paragraph, SectionBlock, SubTitle, + TableRowId, TableRowDevice, TableRowRemove, - TableRowRemoveButton, - TableGrid, - TableButtonGrid + TableRowRemoveButton } from '../../../src/features/sync' // Modals -import RemoveMainDevice from './modals/removeMainDevice' -import RemoveOtherDevice from './modals/removeOtherDevice' -import ViewSyncCodeModal from './modals/viewSyncCode' -import DeviceTypeModal from './modals/deviceType' +import SyncANewDeviceModal from './modals/syncNewDevice' import ResetSyncModal from './modals/resetSync' // Utils -import { getLocale } from './page/fakeLocale' +import locale from './page/fakeLocale' import data from './page/fakeData' -interface State { - removeOtherDevice: boolean - removeMainDevice: boolean - viewSyncCode: boolean - addDevice: boolean +interface SyncEnabledContentState { + syncANewDevice: boolean resetSync: boolean } -export default class SyncEnabledContent extends React.PureComponent<{}, State> { +class SyncEnabledContent extends React.PureComponent<{}, SyncEnabledContentState> { constructor (props: {}) { super(props) this.state = { - removeOtherDevice: false, - removeMainDevice: false, - viewSyncCode: false, - addDevice: false, + syncANewDevice: false, resetSync: false } } - get mainDeviceName () { - return data.device1.name - } - - get otherDeviceName () { - return data.device2.name - } - get rows (): Row[] { return [ { content: [ - { content: {data.device1.name} (main device) }, + { content: {data.device1.id} }, + { content: {data.device1.name} }, { content: data.device1.lastActive }, { content: ( - + × ) @@ -80,11 +65,12 @@ export default class SyncEnabledContent extends React.PureComponent<{}, State> { }, { content: [ + { content: {data.device2.id} }, { content: {data.device2.name} }, { content: data.device2.lastActive }, { content: ( - + × ) @@ -96,111 +82,88 @@ export default class SyncEnabledContent extends React.PureComponent<{}, State> { get header (): Cell[] { return [ - { content: {getLocale('deviceName')} }, - { content: getLocale('addedOn') }, - { content: {getLocale('remove')} } + { content: {locale.id} }, + { content: {locale.deviceName} }, + { content: locale.lastActive }, + { content: {locale.removeDevice} } ] } - onClickRemoveOtherDeviceButton = () => { - this.setState({ removeOtherDevice: !this.state.removeOtherDevice }) + syncANewDevice = () => { + this.setState({ syncANewDevice: !this.state.syncANewDevice }) } - onClickRemoveMainDeviceButton = () => { - this.setState({ removeMainDevice: !this.state.removeMainDevice }) - } - - onClickViewSyncCodeButton = () => { - this.setState({ viewSyncCode: !this.state.viewSyncCode }) - } - - onClickAddDeviceButton = () => { - this.setState({ addDevice: !this.state.addDevice }) - } - - onClickResetSyncButton = () => { + resetSync = () => { this.setState({ resetSync: !this.state.resetSync }) } render () { - const { removeOtherDevice, removeMainDevice, viewSyncCode, addDevice, resetSync } = this.state return ( -
- { - removeOtherDevice - ? - : null - } + <> { - removeMainDevice - ? + this.state.syncANewDevice + ? : null } { - viewSyncCode - ? + this.state.resetSync + ? : null } - { - addDevice - ? - : null - } - { - resetSync - ? - : null - } - {getLocale('braveSync')} + + + + + {locale.syncThisDevice} + + + + MacOS without the ESC key + + + - {getLocale('syncChainDevices')} - - - -
+