From f1634d0af139c5ba0502230d49285549f8ea63d7 Mon Sep 17 00:00:00 2001 From: NejcZdovc Date: Tue, 24 Jul 2018 14:43:41 +0200 Subject: [PATCH 001/342] Rewards: Imported from brave-ui: Changes structure of the project --- .../alert/__snapshots__/spec.tsx.snap | 93 +++ .../ui/components/alert/assets/close.tsx | 15 + .../ui/components/alert/assets/error.tsx | 17 + .../ui/components/alert/assets/success.tsx | 17 + .../resources/ui/components/alert/index.tsx | 56 ++ .../resources/ui/components/alert/spec.tsx | 23 + .../resources/ui/components/alert/style.ts | 51 ++ .../amount/__snapshots__/spec.tsx.snap | 108 +++ .../ui/components/amount/assets/logo.tsx | 20 + .../resources/ui/components/amount/index.tsx | 38 ++ .../resources/ui/components/amount/spec.tsx | 23 + .../resources/ui/components/amount/style.ts | 44 ++ .../box/__snapshots__/spec.tsx.snap | 234 +++++++ .../ui/components/box/assets/close.tsx | 15 + .../ui/components/box/assets/settings.tsx | 19 + .../resources/ui/components/box/index.tsx | 128 ++++ .../resources/ui/components/box/spec.tsx | 23 + .../resources/ui/components/box/style.ts | 113 ++++ .../__snapshots__/spec.tsx.snap | 38 ++ .../contributeTable/assets/close.tsx | 15 + .../ui/components/contributeTable/index.tsx | 139 ++++ .../ui/components/contributeTable/spec.tsx | 23 + .../ui/components/contributeTable/style.ts | 41 ++ .../__snapshots__/spec.tsx.snap | 14 + .../ui/components/controlWrapper/index.tsx | 31 + .../ui/components/controlWrapper/spec.tsx | 23 + .../ui/components/controlWrapper/style.ts | 23 + .../__snapshots__/spec.tsx.snap | 137 ++++ .../ui/components/disabledContent/index.tsx | 41 ++ .../ui/components/disabledContent/spec.tsx | 23 + .../ui/components/disabledContent/style.ts | 38 ++ .../donate/__snapshots__/spec.tsx.snap | 77 +++ .../ui/components/donate/assets/sadFace.tsx | 18 + .../ui/components/donate/assets/send.tsx | 15 + .../resources/ui/components/donate/index.tsx | 147 ++++ .../resources/ui/components/donate/spec.tsx | 23 + .../resources/ui/components/donate/style.ts | 75 +++ .../donationTable/__snapshots__/spec.tsx.snap | 85 +++ .../components/donationTable/assets/close.tsx | 15 + .../donationTable/assets/monthly.tsx | 15 + .../ui/components/donationTable/index.tsx | 181 +++++ .../ui/components/donationTable/spec.tsx | 23 + .../ui/components/donationTable/style.ts | 51 ++ .../resources/ui/components/index.ts | 53 ++ .../list/__snapshots__/spec.tsx.snap | 75 +++ .../resources/ui/components/list/index.tsx | 28 + .../resources/ui/components/list/spec.tsx | 23 + .../resources/ui/components/list/style.ts | 44 ++ .../listToken/__snapshots__/spec.tsx.snap | 103 +++ .../ui/components/listToken/index.tsx | 53 ++ .../ui/components/listToken/spec.tsx | 23 + .../ui/components/listToken/style.ts | 36 + .../mainToggle/__snapshots__/spec.tsx.snap | 240 +++++++ .../ui/components/mainToggle/assets/bat.tsx | 18 + .../ui/components/mainToggle/index.tsx | 61 ++ .../ui/components/mainToggle/spec.tsx | 23 + .../ui/components/mainToggle/style.ts | 71 ++ .../__snapshots__/spec.tsx.snap | 357 ++++++++++ .../components/modalBackupRestore/index.tsx | 136 ++++ .../ui/components/modalBackupRestore/spec.tsx | 35 + .../ui/components/modalBackupRestore/style.ts | 45 ++ .../__snapshots__/spec.tsx.snap | 170 +++++ .../ui/components/modalContribute/index.tsx | 47 ++ .../ui/components/modalContribute/spec.tsx | 23 + .../ui/components/modalContribute/style.ts | 27 + .../panel/__snapshots__/spec.tsx.snap | 218 ++++++ .../ui/components/panel/assets/arrowDown.tsx | 16 + .../ui/components/panel/assets/arrowUp.tsx | 16 + .../ui/components/panel/assets/gear.tsx | 24 + .../ui/components/panel/assets/panel.tsx | 25 + .../ui/components/panel/assets/uphold.tsx | 18 + .../components/panel/assets/upholdColor.tsx | 19 + .../resources/ui/components/panel/index.tsx | 167 +++++ .../resources/ui/components/panel/spec.tsx | 23 + .../resources/ui/components/panel/style.ts | 135 ++++ .../panelEmpty/__snapshots__/spec.tsx.snap | 226 +++++++ .../ui/components/panelEmpty/assets/coins.tsx | 147 ++++ .../ui/components/panelEmpty/index.tsx | 30 + .../ui/components/panelEmpty/spec.tsx | 23 + .../ui/components/panelEmpty/style.ts | 35 + .../panelOff/__snapshots__/spec.tsx.snap | 45 ++ .../ui/components/panelOff/index.tsx | 22 + .../resources/ui/components/panelOff/spec.tsx | 23 + .../resources/ui/components/panelOff/style.ts | 28 + .../panelSummary/__snapshots__/spec.tsx.snap | 628 ++++++++++++++++++ .../panelSummary/assets/activity.tsx | 15 + .../components/panelSummary/assets/coins.tsx | 28 + .../ui/components/panelSummary/index.tsx | 126 ++++ .../ui/components/panelSummary/spec.tsx | 44 ++ .../ui/components/panelSummary/style.ts | 100 +++ .../profile/__snapshots__/spec.tsx.snap | 100 +++ .../ui/components/profile/assets/verified.tsx | 27 + .../resources/ui/components/profile/index.tsx | 86 +++ .../resources/ui/components/profile/spec.tsx | 23 + .../resources/ui/components/profile/style.ts | 112 ++++ .../settingsPage/__snapshots__/spec.tsx.snap | 32 + .../ui/components/settingsPage/index.tsx | 27 + .../ui/components/settingsPage/spec.tsx | 23 + .../ui/components/settingsPage/style.ts | 22 + .../siteBanner/__snapshots__/spec.tsx.snap | 442 ++++++++++++ .../components/siteBanner/assets/bg_bats.svg | 1 + .../siteBanner/assets/bg_hearts.svg | 1 + .../ui/components/siteBanner/assets/close.tsx | 15 + .../components/siteBanner/assets/monthly.tsx | 15 + .../components/siteBanner/assets/twitch.tsx | 15 + .../components/siteBanner/assets/twitter.tsx | 15 + .../components/siteBanner/assets/youtube.tsx | 17 + .../ui/components/siteBanner/index.tsx | 232 +++++++ .../ui/components/siteBanner/spec.tsx | 23 + .../ui/components/siteBanner/style.ts | 194 ++++++ .../tip/__snapshots__/spec.tsx.snap | 208 ++++++ .../ui/components/tip/assets/close.tsx | 15 + .../resources/ui/components/tip/index.tsx | 85 +++ .../resources/ui/components/tip/spec.tsx | 23 + .../resources/ui/components/tip/style.ts | 46 ++ .../tokens/__snapshots__/spec.tsx.snap | 36 + .../resources/ui/components/tokens/index.tsx | 55 ++ .../resources/ui/components/tokens/spec.tsx | 23 + .../resources/ui/components/tokens/style.ts | 30 + .../tooltip/__snapshots__/spec.tsx.snap | 73 ++ .../resources/ui/components/tooltip/index.tsx | 82 +++ .../resources/ui/components/tooltip/spec.tsx | 23 + .../resources/ui/components/tooltip/style.ts | 159 +++++ .../resources/ui/stories/concepts.tsx | 95 +++ .../resources/ui/stories/modal.tsx | 101 +++ .../resources/ui/stories/other.tsx | 174 +++++ .../resources/ui/stories/settings/fakeData.ts | 12 + .../ui/stories/settings/fakeLocale.ts | 27 + .../resources/ui/stories/settings/index.tsx | 434 ++++++++++++ .../resources/ui/stories/settings/theme.ts | 60 ++ .../resources/ui/stories/table.tsx | 147 ++++ .../resources/ui/stories/wallet.tsx | 89 +++ 132 files changed, 9639 insertions(+) create mode 100644 components/brave_rewards/resources/ui/components/alert/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/alert/assets/close.tsx create mode 100644 components/brave_rewards/resources/ui/components/alert/assets/error.tsx create mode 100644 components/brave_rewards/resources/ui/components/alert/assets/success.tsx create mode 100644 components/brave_rewards/resources/ui/components/alert/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/alert/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/alert/style.ts create mode 100644 components/brave_rewards/resources/ui/components/amount/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/amount/assets/logo.tsx create mode 100644 components/brave_rewards/resources/ui/components/amount/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/amount/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/amount/style.ts create mode 100644 components/brave_rewards/resources/ui/components/box/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/box/assets/close.tsx create mode 100644 components/brave_rewards/resources/ui/components/box/assets/settings.tsx create mode 100644 components/brave_rewards/resources/ui/components/box/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/box/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/box/style.ts create mode 100644 components/brave_rewards/resources/ui/components/contributeTable/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/contributeTable/assets/close.tsx create mode 100644 components/brave_rewards/resources/ui/components/contributeTable/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/contributeTable/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/contributeTable/style.ts create mode 100644 components/brave_rewards/resources/ui/components/controlWrapper/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/controlWrapper/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/controlWrapper/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/controlWrapper/style.ts create mode 100644 components/brave_rewards/resources/ui/components/disabledContent/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/disabledContent/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/disabledContent/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/disabledContent/style.ts create mode 100644 components/brave_rewards/resources/ui/components/donate/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/donate/assets/sadFace.tsx create mode 100644 components/brave_rewards/resources/ui/components/donate/assets/send.tsx create mode 100644 components/brave_rewards/resources/ui/components/donate/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/donate/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/donate/style.ts create mode 100644 components/brave_rewards/resources/ui/components/donationTable/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/donationTable/assets/close.tsx create mode 100644 components/brave_rewards/resources/ui/components/donationTable/assets/monthly.tsx create mode 100644 components/brave_rewards/resources/ui/components/donationTable/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/donationTable/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/donationTable/style.ts create mode 100644 components/brave_rewards/resources/ui/components/index.ts create mode 100644 components/brave_rewards/resources/ui/components/list/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/list/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/list/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/list/style.ts create mode 100644 components/brave_rewards/resources/ui/components/listToken/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/listToken/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/listToken/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/listToken/style.ts create mode 100644 components/brave_rewards/resources/ui/components/mainToggle/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/mainToggle/assets/bat.tsx create mode 100644 components/brave_rewards/resources/ui/components/mainToggle/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/mainToggle/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/mainToggle/style.ts create mode 100644 components/brave_rewards/resources/ui/components/modalBackupRestore/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/modalBackupRestore/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/modalBackupRestore/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/modalBackupRestore/style.ts create mode 100644 components/brave_rewards/resources/ui/components/modalContribute/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/modalContribute/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/modalContribute/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/modalContribute/style.ts create mode 100644 components/brave_rewards/resources/ui/components/panel/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/panel/assets/arrowDown.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/assets/arrowUp.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/assets/gear.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/assets/panel.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/assets/uphold.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/assets/upholdColor.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/panel/style.ts create mode 100644 components/brave_rewards/resources/ui/components/panelEmpty/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/panelEmpty/assets/coins.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelEmpty/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelEmpty/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelEmpty/style.ts create mode 100644 components/brave_rewards/resources/ui/components/panelOff/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/panelOff/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelOff/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelOff/style.ts create mode 100644 components/brave_rewards/resources/ui/components/panelSummary/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/panelSummary/assets/activity.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelSummary/assets/coins.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelSummary/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelSummary/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/panelSummary/style.ts create mode 100644 components/brave_rewards/resources/ui/components/profile/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/profile/assets/verified.tsx create mode 100644 components/brave_rewards/resources/ui/components/profile/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/profile/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/profile/style.ts create mode 100644 components/brave_rewards/resources/ui/components/settingsPage/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/settingsPage/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/settingsPage/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/settingsPage/style.ts create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/assets/bg_bats.svg create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/assets/bg_hearts.svg create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/assets/close.tsx create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/assets/monthly.tsx create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/assets/twitch.tsx create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/assets/twitter.tsx create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/assets/youtube.tsx create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/siteBanner/style.ts create mode 100644 components/brave_rewards/resources/ui/components/tip/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/tip/assets/close.tsx create mode 100644 components/brave_rewards/resources/ui/components/tip/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/tip/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/tip/style.ts create mode 100644 components/brave_rewards/resources/ui/components/tokens/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/tokens/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/tokens/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/tokens/style.ts create mode 100644 components/brave_rewards/resources/ui/components/tooltip/__snapshots__/spec.tsx.snap create mode 100644 components/brave_rewards/resources/ui/components/tooltip/index.tsx create mode 100644 components/brave_rewards/resources/ui/components/tooltip/spec.tsx create mode 100644 components/brave_rewards/resources/ui/components/tooltip/style.ts create mode 100644 components/brave_rewards/resources/ui/stories/concepts.tsx create mode 100644 components/brave_rewards/resources/ui/stories/modal.tsx create mode 100644 components/brave_rewards/resources/ui/stories/other.tsx create mode 100644 components/brave_rewards/resources/ui/stories/settings/fakeData.ts create mode 100644 components/brave_rewards/resources/ui/stories/settings/fakeLocale.ts create mode 100644 components/brave_rewards/resources/ui/stories/settings/index.tsx create mode 100644 components/brave_rewards/resources/ui/stories/settings/theme.ts create mode 100644 components/brave_rewards/resources/ui/stories/table.tsx create mode 100644 components/brave_rewards/resources/ui/stories/wallet.tsx diff --git a/components/brave_rewards/resources/ui/components/alert/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/alert/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..0e37c91022cc --- /dev/null +++ b/components/brave_rewards/resources/ui/components/alert/__snapshots__/spec.tsx.snap @@ -0,0 +1,93 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Alert tests basic tests matches the snapshot 1`] = ` +.c0 { + position: relative; + top: 0; + left: 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + background-color: #fff; + box-shadow: 0 1px 0 0 #dfdfe8; + padding: 30px 38px 33px 19px; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + font-family: Poppins; +} + +.c1 { + width: 40px; + height: 40px; + -webkit-flex-basis: 40px; + -ms-flex-preferred-size: 40px; + flex-basis: 40px; +} + +.c2 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + padding-left: 11px; + font-size: 14px; + line-height: 1.57; + color: #838391; +} + +.c2 b { + font-weight: 600; + color: #4b4c5c; +} + +
+ + + + + + + + +
+
+`; diff --git a/components/brave_rewards/resources/ui/components/alert/assets/close.tsx b/components/brave_rewards/resources/ui/components/alert/assets/close.tsx new file mode 100644 index 000000000000..7aa0bb07bb1a --- /dev/null +++ b/components/brave_rewards/resources/ui/components/alert/assets/close.tsx @@ -0,0 +1,15 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + +) diff --git a/components/brave_rewards/resources/ui/components/alert/assets/error.tsx b/components/brave_rewards/resources/ui/components/alert/assets/error.tsx new file mode 100644 index 000000000000..ca246e91020a --- /dev/null +++ b/components/brave_rewards/resources/ui/components/alert/assets/error.tsx @@ -0,0 +1,17 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + + + + +) diff --git a/components/brave_rewards/resources/ui/components/alert/assets/success.tsx b/components/brave_rewards/resources/ui/components/alert/assets/success.tsx new file mode 100644 index 000000000000..f2bf2eca65d3 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/alert/assets/success.tsx @@ -0,0 +1,17 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + + + + +) diff --git a/components/brave_rewards/resources/ui/components/alert/index.tsx b/components/brave_rewards/resources/ui/components/alert/index.tsx new file mode 100644 index 000000000000..4d4770b17365 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/alert/index.tsx @@ -0,0 +1,56 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { StyledWrapper, StyledContent, StyledClose, StyledIcon } from './style' + +interface Theme { + position?: CSS.PositionProperty + top?: CSS.TopProperty<1> + left?: CSS.LeftProperty<1> +} + +export interface Props { + type: 'error' | 'success' + id?: string + children?: React.ReactNode + onClose?: () => void + theme?: Theme +} + +const success = require('./assets/success') +const error = require('./assets/error') +const close = require('./assets/close') + +export default class Alert extends React.PureComponent { + get icon () { + switch (this.props.type) { + case 'error': + return error + case 'success': + return success + } + + return null + } + + render () { + const { id, children, onClose, theme } = this.props + + return ( + + {this.icon} + + {children} + + { + onClose + ? {close} + : null + } + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/alert/spec.tsx b/components/brave_rewards/resources/ui/components/alert/spec.tsx new file mode 100644 index 000000000000..fbc9e202facd --- /dev/null +++ b/components/brave_rewards/resources/ui/components/alert/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import Alert, { Props } from './index' + +describe('Alert tests', () => { + const baseComponent = (props: Props) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent({type: 'success'}) + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent({type: 'success'})) + const assertion = wrapper.find('#alert').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/alert/style.ts b/components/brave_rewards/resources/ui/components/alert/style.ts new file mode 100644 index 000000000000..f98dc73b820f --- /dev/null +++ b/components/brave_rewards/resources/ui/components/alert/style.ts @@ -0,0 +1,51 @@ +/* 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 'styled-components' +import { Props } from './index' +import { setTheme } from '../../../helpers' + +export const StyledWrapper = styled.div` + position: ${(p: Props) => setTheme(p.theme, 'position') || 'relative'}; + top: ${(p: Props) => setTheme(p.theme, 'top') || 0}; + left: ${(p: Props) => setTheme(p.theme, 'left') || 0}; + display: flex; + justify-content: flex-start; + align-content: flex-start; + flex-wrap: nowrap; + background-color: #fff; + box-shadow: 0 1px 0 0 #dfdfe8; + padding: 30px 38px 33px 19px; + align-items: center; + font-family: Poppins; +` as any + +export const StyledIcon = styled.span` + width: 40px; + height: 40px; + flex-basis: 40px; +` as any + +export const StyledContent = styled.div` + flex-grow: 1; + flex-basis: 50%; + padding-left: 11px; + font-size: 14px; + line-height: 1.57; + color: #838391; + + b { + font-weight: 600; + color: #4b4c5c; + } +` as any + +export const StyledClose = styled.div` + width: 11px; + height: 11px; + position: absolute; + top: 14px; + right: 14px; + z-index: 2; +` as any diff --git a/components/brave_rewards/resources/ui/components/amount/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/amount/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..ad992a107955 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/amount/__snapshots__/spec.tsx.snap @@ -0,0 +1,108 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Amount tests basic tests matches the snapshot 1`] = ` +.c0 { + margin-bottom: 8px; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-family: Poppins; +} + +.c1 { + opacity: 1; + border-radius: 20px; + color: #fff; + border: 1px solid rgba(255,255,255,0.35); + background: transparent; + vertical-align: baseline; + padding: 7px 12px 9px; + min-width: 69px; + font-size: 13px; + font-weight: 600; + display: inline-block; + margin-right: 12px; +} + +.c3 { + font-weight: 400; +} + +.c2 { + vertical-align: text-bottom; + margin-right: 6px; +} + +.c4 { + vertical-align: baseline; + opacity: 0.4; + font-size: 10px; + color: #ffffff; + font-weight: 500; +} + +
+ + + + + + + + + + + + + 1 + + + + + MISSING: about + + 0.40 + + USD + +
+`; diff --git a/components/brave_rewards/resources/ui/components/amount/assets/logo.tsx b/components/brave_rewards/resources/ui/components/amount/assets/logo.tsx new file mode 100644 index 000000000000..976bce88df97 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/amount/assets/logo.tsx @@ -0,0 +1,20 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + + + + + + + +) diff --git a/components/brave_rewards/resources/ui/components/amount/index.tsx b/components/brave_rewards/resources/ui/components/amount/index.tsx new file mode 100644 index 000000000000..91368d353eea --- /dev/null +++ b/components/brave_rewards/resources/ui/components/amount/index.tsx @@ -0,0 +1,38 @@ +/* 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 * as React from 'react' +import { StyledWrapper, StyledAmount, StyledLogo, StyledConverted, StyledTokens } from './style' +import { getLocale } from '../../../helpers' + +export interface Props { + amount: number + converted: number + onSelect: (amount: number) => void + id?: string + selected?: boolean + type?: 'big' | 'small' + currency?: string +} + +const logo = require('./assets/logo') + +export default class Amount extends React.PureComponent { + render () { + const { id, onSelect, amount, selected, type } = this.props + const converted = this.props.converted || 0 + const currency = this.props.currency || 'USD' + + return ( + + + {logo}{amount} {type === 'big' ? 'tokens' : null} + + + {getLocale('about')} {converted.toFixed(2)} {currency} + + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/amount/spec.tsx b/components/brave_rewards/resources/ui/components/amount/spec.tsx new file mode 100644 index 000000000000..2207f511ea5a --- /dev/null +++ b/components/brave_rewards/resources/ui/components/amount/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import Amount from './index' + +describe('Amount tests', () => { + const baseComponent = (props?: object) => {}} {...props} /> + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#amount').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/amount/style.ts b/components/brave_rewards/resources/ui/components/amount/style.ts new file mode 100644 index 000000000000..b738176c7f66 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/amount/style.ts @@ -0,0 +1,44 @@ +/* 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 'styled-components' +import { Props } from './index' + +export const StyledWrapper = styled.div` + margin-bottom: 8px; + user-select: none; + font-family: Poppins; +` as any + +export const StyledAmount = styled.span` + opacity: 1; + border-radius: 20px; + color: #fff; + border: 1px solid rgba(255, 255, 255, 0.35); + background: ${(p: Props) => p.selected ? 'rgba(255, 255, 255, 0.35)' : 'transparent'}; + vertical-align: baseline; + padding: ${(p: Props) => p.type === 'big' ? '10px 16px 13px' : '7px 12px 9px'}; + min-width: ${(p: Props) => p.type === 'big' ? '118px' : '69px'}; + font-size: 13px; + font-weight: 600; + display: inline-block; + margin-right: 12px; +` as any + +export const StyledTokens = styled.span` + font-weight: 400; +` as any + +export const StyledLogo = styled.span` + vertical-align: text-bottom; + margin-right: 6px; +` as any + +export const StyledConverted = styled.span` + vertical-align: baseline; + opacity: ${(p: Props) => p.selected ? 1 : 0.4}; + font-size: ${(p: Props) => p.type === 'big' ? '12px' : '10px'}; + color: #ffffff; + font-weight: 500; +` as any diff --git a/components/brave_rewards/resources/ui/components/box/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/box/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..ad95cbab1f97 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/box/__snapshots__/spec.tsx.snap @@ -0,0 +1,234 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Box tests basic tests matches the snapshot 1`] = ` +.c0 { + width: 100%; + position: relative; + height: auto; + border-radius: 6px; + background-color: #fff; + box-shadow: 0 0 8px 0 rgba(99,105,110,0.12); + padding: 30px 36px; + margin-bottom: 28px; + font-family: Poppins; +} + +.c1 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 200%; +} + +.c2 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + height: auto; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + overflow: hidden; +} + +.c3 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; +} + +.c5 { + -webkit-flex-basis: 40px; + -ms-flex-preferred-size: 40px; + flex-basis: 40px; +} + +.c4 { + height: 36px; + font-size: 22px; + font-weight: 600; + line-height: 1.27; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + color: #4b4c5c; +} + +.c6 { + width: 100%; + display: block; +} + +.c7 { + width: 100%; + padding-right: 20px; + font-family: Muli; + font-size: 14px; + line-height: 1.29; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + color: #a4aeb8; +} + +.c12 { + width: 20px; + float: none; + margin-top: 8px; +} + +.c8 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + margin-top: 25px; +} + +.c9 { + background: #fff; + overflow: hidden; + height: 0; + -webkit-flex-basis: 0; + -ms-flex-preferred-size: 0; + flex-basis: 0; +} + +.c10 { + display: none; + position: absolute; + right: 35px; + top: 35px; + width: 13px; + height: 13px; +} + +.c11 { + text-align: center; + margin-bottom: 15px; +} + +.c13 { + font-size: 16px; + font-weight: 600; + line-height: 1.75; + color: #4b4c5c; + position: relative; + top: -4px; + display: inline-block; + margin-left: 20px; +} + +
+
+
+
+
+ test +
+
+
+
+
+
+
+
+
+
+
+
+ + + +
+
+ + + + + + + test + + MISSING: settings + +
+
+
+
+`; diff --git a/components/brave_rewards/resources/ui/components/box/assets/close.tsx b/components/brave_rewards/resources/ui/components/box/assets/close.tsx new file mode 100644 index 000000000000..7aa0bb07bb1a --- /dev/null +++ b/components/brave_rewards/resources/ui/components/box/assets/close.tsx @@ -0,0 +1,15 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + +) diff --git a/components/brave_rewards/resources/ui/components/box/assets/settings.tsx b/components/brave_rewards/resources/ui/components/box/assets/settings.tsx new file mode 100644 index 000000000000..7a336f75186b --- /dev/null +++ b/components/brave_rewards/resources/ui/components/box/assets/settings.tsx @@ -0,0 +1,19 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + +) diff --git a/components/brave_rewards/resources/ui/components/box/index.tsx b/components/brave_rewards/resources/ui/components/box/index.tsx new file mode 100644 index 000000000000..f4995c7b7b83 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/box/index.tsx @@ -0,0 +1,128 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { StyledWrapper, + StyledLeft, + StyledRight, + StyledDescription, + StyledSettingsIcon, + StyledContent, + StyledTitle, + StyledBreak, + StyledSettingsWrapper, + StyledSettingsClose, + StyledSettingsTitle, + StyledSettingsText, + StyledContentWrapper, + StyledFlip +} from './style' +import Toggle from '../../../components/formControls/toggle/index' +import { getLocale } from '../../../helpers' + +const close = require('./assets/close') +const settings = require('./assets/settings') + +export interface Theme { + titleColor: CSS.Color +} + +export interface Props { + title: string + id?: string + theme?: Theme + description?: string + toggle?: boolean + checked?: boolean + onToggle?: () => void + settingsChild?: React.ReactNode + disabledContent?: React.ReactNode + children?: React.ReactNode +} + +interface State { + settingsOpened: boolean +} + +/* + TODO + - add fade effect + */ +export default class Box extends React.PureComponent { + constructor (props: Props) { + super(props) + this.state = { + settingsOpened: false + } + } + + settingsClick = () => { + this.setState({ settingsOpened: !this.state.settingsOpened }) + } + + render () { + const { + id, + title, + toggle, + checked, + onToggle, + settingsChild, + disabledContent, + description, + theme, + children + } = this.props + + return ( + + + + + {title} + + + { + toggle ? + + : null + } + + + + + {description} + + + + { + settingsChild && ((toggle && checked) || !toggle) ? + {settings} + : null + } + + + { + (toggle && !checked) || (!toggle && disabledContent) + ? disabledContent + : children + } + + + + + {close} + + + {settings} + {title} {getLocale('settings')} + + {settingsChild} + + + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/box/spec.tsx b/components/brave_rewards/resources/ui/components/box/spec.tsx new file mode 100644 index 000000000000..723b04619918 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/box/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import Box from './index' + +describe('Box tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#box').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/box/style.ts b/components/brave_rewards/resources/ui/components/box/style.ts new file mode 100644 index 000000000000..c625c7cc8d3b --- /dev/null +++ b/components/brave_rewards/resources/ui/components/box/style.ts @@ -0,0 +1,113 @@ +/* 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 'styled-components' +import { setTheme } from '../../../helpers' +import { Props } from './index' + +export const StyledWrapper = styled.div` + width: 100%; + position: relative; + height: auto; + border-radius: 6px; + background-color: #fff; + box-shadow: 0 0 8px 0 rgba(99, 105, 110, 0.12); + padding: 30px 36px; + margin-bottom: 28px; + font-family: Poppins; +` as any + +export const StyledFlip = styled.div` + display: flex; + width: 200%; +` as any + +export const StyledContentWrapper = styled.div` + display: flex; + height: ${(p: {open: boolean}) => p.open ? 'auto' : '0'}; + flex-basis: ${(p: {open: boolean}) => p.open ? '50%' : '0'}; + flex-wrap: wrap; + overflow: hidden; +` as any + +export const StyledLeft = styled.div` + flex-grow: 1; + flex-shrink: 1; + flex-basis: 50%; +` as any + +export const StyledRight = styled.div` + flex-basis: 40px; +` as any + +export const StyledTitle = styled.div` + height: 36px; + font-size: 22px; + font-weight: 600; + line-height: 1.27; + letter-spacing: normal; + color: ${(p: Props) => { + if (p.checked === false) return '#838391' + return setTheme(p.theme, 'titleColor') || '#4b4c5c' + }} +` as any + +export const StyledBreak = styled.div` + width: 100%; + display: block; +` as any + +export const StyledDescription = styled.div` + width: 100%; + padding-right: 20px; + font-family: Muli; + font-size: 14px; + line-height: 1.29; + letter-spacing: normal; + color: #a4aeb8; +` as any + +export const StyledSettingsIcon = styled.span` + width: 20px; + float: ${(p: {float: string}) => p.float ? p.float : 'none'}; + margin-top: 8px; +` as any + +export const StyledContent = styled.div` + flex-basis: 100%; + flex-grow: 1; + margin-top: 25px; +` as any + +export const StyledSettingsWrapper = styled.div` + background: #fff; + overflow: hidden; + height: ${(p: {open: boolean}) => p.open ? 'auto' : '0'}; + flex-basis: ${(p: {open: boolean}) => p.open ? '50%' : '0'}; +` as any + +export const StyledSettingsClose = styled.div` + display: ${(p: {open: boolean}) => p.open ? 'block' : 'none'}; + position: absolute; + right: 35px; + top: 35px; + width: 13px; + height: 13px; +` as any + +export const StyledSettingsTitle = styled.div` + text-align: center; + margin-bottom: 15px; +` as any + +export const StyledSettingsText = styled.span` + font-size: 16px; + font-weight: 600; + line-height: 1.75; + color: #4b4c5c; + position: relative; + top: -4px; + display: inline-block; + margin-left: 20px; +` as any diff --git a/components/brave_rewards/resources/ui/components/contributeTable/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/contributeTable/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..77a2db264fc9 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/contributeTable/__snapshots__/spec.tsx.snap @@ -0,0 +1,38 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ContributeTable tests basic tests matches the snapshot 1`] = ` +.c1 { + font-family: Poppins; + font-size: 13px; + color: #4c54d2; + text-align: right; + text-transform: capitalize; +} + +.c0 { + text-align: center; + padding: 30px 0; + color: #999ea2; + font-size: 14px; +} + +
+
+
+
+
+ MISSING: seeAllSites +
+
+`; diff --git a/components/brave_rewards/resources/ui/components/contributeTable/assets/close.tsx b/components/brave_rewards/resources/ui/components/contributeTable/assets/close.tsx new file mode 100644 index 000000000000..7aa0bb07bb1a --- /dev/null +++ b/components/brave_rewards/resources/ui/components/contributeTable/assets/close.tsx @@ -0,0 +1,15 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + +) diff --git a/components/brave_rewards/resources/ui/components/contributeTable/index.tsx b/components/brave_rewards/resources/ui/components/contributeTable/index.tsx new file mode 100644 index 000000000000..f44f84946beb --- /dev/null +++ b/components/brave_rewards/resources/ui/components/contributeTable/index.tsx @@ -0,0 +1,139 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { + StyledWrapper, + StyledText, + StyledRemove, + StyledToggle, + StyledTHSite, + StyledTHOther, + StyledTHLast +} from './style' +import Table, { Row } from '../../../components/dataTables/table/index' +import Profile, { Provider } from '../profile/index' +import { getLocale } from '../../../helpers' + +interface ProfileCell { + verified: boolean + name: string + src: string + provider?: Provider +} + +export interface DetailRow { + profile: ProfileCell + attention: number + onRemove?: () => void +} + +export interface Props { + header: string[] + showRowAmount?: boolean + id?: string + children?: React.ReactNode + theme?: Theme + rows?: DetailRow[] + numSites?: number + allSites?: boolean + onShowAll?: () => void +} + +interface Theme { + headerColor?: CSS.Color +} + +const removeIcon = require('./assets/close') + +export default class ContributeTable extends React.PureComponent { + getHeader = (header: string[]) => { + if (!header) { + return + } + + let theme = {} + + if (this.props.theme && this.props.theme.headerColor) { + theme = { + border: 'none', + 'border-bottom': `1px solid ${this.props.theme.headerColor}`, + padding: '0', + color: this.props.theme.headerColor + } + } + + return header.map((item: string, i: number) => { + return { + content: i === 0 + ? {item} + : (i - 1) === header.length + ? {item} + : {item}, + theme: theme + } + }) + } + + getRows = (rows?: DetailRow[]): Row[] | undefined => { + if (!rows) { + return + } + + return rows.map((row: DetailRow): Row => { + const cell: Row = { + content: [ + { + content: ( + + ) + }, + { + content: ( + + {row.attention}% {removeIcon} + + ) + } + ] + } + + if (this.props.showRowAmount) { + const remaining = 100 - row.attention + cell.theme = { + background: `linear-gradient(90deg, #FFF ${remaining}%, #d2c6f3 ${row.attention}%)` + } + } + + return cell + }) + } + + render () { + const { id, header, children, rows, allSites, onShowAll } = this.props + const numSites = this.props.numSites || 0 + + return ( + + + { + !allSites + ? {getLocale('seeAllSites', { numSites })} + : null + } + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/contributeTable/spec.tsx b/components/brave_rewards/resources/ui/components/contributeTable/spec.tsx new file mode 100644 index 000000000000..eb877c1221b2 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/contributeTable/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import ContributeTable from './index' + +describe('ContributeTable tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#table').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/contributeTable/style.ts b/components/brave_rewards/resources/ui/components/contributeTable/style.ts new file mode 100644 index 000000000000..ccb5b22a4a0d --- /dev/null +++ b/components/brave_rewards/resources/ui/components/contributeTable/style.ts @@ -0,0 +1,41 @@ +/* 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 'styled-components' + +export const StyledWrapper = styled.div` +` as any + +export const StyledText = styled.div` + font-family: Muli; + font-size: 14px; + font-weight: bold; + line-height: 1.29; + text-align: right; + color: #686978; +` as any + +export const StyledRemove = styled.span` + margin-left: 10px; + padding-right: 7px; +` as any + +export const StyledTHSite = styled.div` +` as any + +export const StyledTHOther = styled.div` + text-align: right; +` as any + +export const StyledTHLast = styled(StyledTHOther)` + padding-right: 7px; +` as any + +export const StyledToggle = styled.div` + font-family: Poppins; + font-size: 13px; + color: #4c54d2; + text-align: right; + text-transform: capitalize; +` as any diff --git a/components/brave_rewards/resources/ui/components/controlWrapper/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/controlWrapper/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..a2f6a730c561 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/controlWrapper/__snapshots__/spec.tsx.snap @@ -0,0 +1,14 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ControlWrapper tests basic tests matches the snapshot 1`] = ` +.c0 { + max-width: 254px; + width: 100%; + margin-bottom: 12px; +} + +
+`; diff --git a/components/brave_rewards/resources/ui/components/controlWrapper/index.tsx b/components/brave_rewards/resources/ui/components/controlWrapper/index.tsx new file mode 100644 index 000000000000..10e3eb3b9e64 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/controlWrapper/index.tsx @@ -0,0 +1,31 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { StyledWrapper, StyledTitle } from './style' + +export interface Props { + id?: string + title?: React.ReactNode + children?: React.ReactNode + theme?: Theme +} + +interface Theme { + maxWidth?: CSS.MaxWidthProperty<1> +} + +export default class ControlWrapper extends React.PureComponent { + render () { + const { id, title, children, theme } = this.props + + return ( + + {title ? {title} : null} + {children} + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/controlWrapper/spec.tsx b/components/brave_rewards/resources/ui/components/controlWrapper/spec.tsx new file mode 100644 index 000000000000..d2a4bb9da502 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/controlWrapper/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import ControlWrapper from './index' + +describe('ControlWrapper tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#wrapper').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/controlWrapper/style.ts b/components/brave_rewards/resources/ui/components/controlWrapper/style.ts new file mode 100644 index 000000000000..a89aa6f333c9 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/controlWrapper/style.ts @@ -0,0 +1,23 @@ +/* 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 'styled-components' +import { Props } from './index' +import { setTheme } from '../../../helpers' + +export const StyledWrapper = styled.div` + max-width: ${(p: Props) => setTheme(p.theme, 'maxWidth') || '254px'}; + width: 100%; + margin-bottom: 12px; +` as any + +export const StyledTitle = styled.div` + width: 100%; + font-family: Poppins; + line-height: normal; + font-size: 14px; + font-weight: 500; + color: #686978; + margin-bottom: 6px; +` as any diff --git a/components/brave_rewards/resources/ui/components/disabledContent/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/disabledContent/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..4fc90da920e5 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/disabledContent/__snapshots__/spec.tsx.snap @@ -0,0 +1,137 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Disabled Content tests basic tests matches the snapshot 1`] = ` +.c3 { + font-family: Poppins; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: #4b4c5c; +} + +.c3 b, +.c3 a { + font-weight: 500; + color: #4b4c5c; +} + +.c3 h3 { + margin: 0; + display: inline-block; + padding: 0; + font-family: Poppins; + font-size: 28px; + font-weight: 500; + line-height: 0.5; + color: #ceb4e1; +} + +.c0 { + box-sizing: border-box; + display: grid; + grid-template-columns: repeat(3,1fr); + grid-gap: 32px; + padding: 0; + margin: 0; + max-width: initial; + height: initial; + color: inherit; + background-color: inherit; + font-family: inherit; + font-size: inherit; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c1 { + box-sizing: border-box; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + grid-column: span 1; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + -webkit-align-items: initial; + -webkit-box-align: initial; + -ms-flex-align: initial; + align-items: initial; + background-color: inherit; + -webkit-flex-direction: initial; + -ms-flex-direction: initial; + flex-direction: initial; + -webkit-flex-wrap: initial; + -ms-flex-wrap: initial; + flex-wrap: initial; + font-family: inherit; + font-size: inherit; + color: inherit; +} + +.c2 { + box-sizing: border-box; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + grid-column: span 2; + -webkit-box-pack: initial; + -webkit-justify-content: initial; + -ms-flex-pack: initial; + justify-content: initial; + -webkit-align-items: initial; + -webkit-box-align: initial; + -ms-flex-align: initial; + align-items: initial; + background-color: inherit; + -webkit-flex-direction: initial; + -ms-flex-direction: initial; + flex-direction: initial; + -webkit-flex-wrap: initial; + -ms-flex-wrap: initial; + flex-wrap: initial; + font-family: inherit; + font-size: inherit; + color: inherit; +} + +
+
+
+ +
+
+
+
+
+
+`; diff --git a/components/brave_rewards/resources/ui/components/disabledContent/index.tsx b/components/brave_rewards/resources/ui/components/disabledContent/index.tsx new file mode 100644 index 000000000000..f3985f4a2de5 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/disabledContent/index.tsx @@ -0,0 +1,41 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { StyledWrapper, StyledImage, StyledContent } from './style' +import { Column, Grid } from '../../../components/layout/gridList/index' + +interface Theme { + color?: CSS.Color + boldColor?: CSS.Color +} + +export interface Props { + children: React.ReactNode + id?: string + image?: string + theme?: Theme +} + +export default class DisabledContent extends React.PureComponent { + render () { + const { id, image, theme, children } = this.props + + return ( + + + + + + + + {children} + + + + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/disabledContent/spec.tsx b/components/brave_rewards/resources/ui/components/disabledContent/spec.tsx new file mode 100644 index 000000000000..248d7f6fa66e --- /dev/null +++ b/components/brave_rewards/resources/ui/components/disabledContent/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import DisabledContent from './index' + +describe('Disabled Content tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#disabled').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/disabledContent/style.ts b/components/brave_rewards/resources/ui/components/disabledContent/style.ts new file mode 100644 index 000000000000..ee426ae1a172 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/disabledContent/style.ts @@ -0,0 +1,38 @@ +/* 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 'styled-components' +import { setTheme } from '../../../helpers' +import { Props } from './index' + +export const StyledWrapper = styled.div` +` as any + +export const StyledImage = styled.img` +` as any + +export const StyledContent = styled.div` + font-family: Poppins; + font-size: 16px; + font-weight: 500; + line-height: 1.5; + color: ${(p: Props) => setTheme(p.theme, 'color') || '#4b4c5c'}; + + b, + a { + font-weight: 500; + color: ${(p: Props) => setTheme(p.theme, 'boldColor') || '#4b4c5c'}; + } + + h3 { + margin: 0; + display: inline-block; + padding: 0; + font-family: Poppins; + font-size: 28px; + font-weight: 500; + line-height: 0.5; + color: #ceb4e1; + } +` as any diff --git a/components/brave_rewards/resources/ui/components/donate/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/donate/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..96e8f7ff029e --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donate/__snapshots__/spec.tsx.snap @@ -0,0 +1,77 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Donate tests basic tests matches the snapshot 1`] = ` +.c0 { + position: relative; + font-family: Poppins; +} + +.c1 { + padding: 0; +} + +.c2 { + font-size: 16px; + font-weight: 600; + line-height: 1.75; + color: #fff; + margin-bottom: 14px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 167px; +} + +.c3 { + background: #4c54d2; + font-size: 13px; + font-weight: 600; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + color: #3e45b2; + padding: 0; + text-transform: uppercase; +} + +.c4 { + vertical-align: middle; + display: inline-block; + margin-right: 18px; +} + +
+ +`; diff --git a/components/brave_rewards/resources/ui/components/donate/assets/sadFace.tsx b/components/brave_rewards/resources/ui/components/donate/assets/sadFace.tsx new file mode 100644 index 000000000000..8d645146b813 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donate/assets/sadFace.tsx @@ -0,0 +1,18 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + + + + +) diff --git a/components/brave_rewards/resources/ui/components/donate/assets/send.tsx b/components/brave_rewards/resources/ui/components/donate/assets/send.tsx new file mode 100644 index 000000000000..fa60f955d5b0 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donate/assets/send.tsx @@ -0,0 +1,15 @@ +/* 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 * as React from 'react' + +module.exports = (color: string) => ( + + + +) diff --git a/components/brave_rewards/resources/ui/components/donate/index.tsx b/components/brave_rewards/resources/ui/components/donate/index.tsx new file mode 100644 index 000000000000..dd05eb79703f --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donate/index.tsx @@ -0,0 +1,147 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { + StyledWrapper, + StyledContent, + StyledDonationTitle, + StyledSend, + StyledIconSend, + StyledIconFace, + StyledFunds, + StyledFundsText +} from './style' + +import Amount from '../amount/index' +import { getLocale, setTheme } from '../../../helpers' + +const send = require('./assets/send') +const sadFace = require('./assets/sadFace') + +type Donation = {tokens: number, converted: number, selected?: boolean} + +export interface Props { + actionText: string + title: string + balance: number + donationAmounts: Donation[] + onDonate: (amount: number) => void + onAmountSelection?: (tokens: number) => void + id?: string + theme?: Theme + donateType?: 'big' | 'small' + children?: React.ReactNode +} + +interface State { + missingFunds: boolean + amount: number +} + +export interface Theme { + paddingSend?: CSS.PaddingProperty<1> + paddingFunds?: CSS.PaddingProperty<1> + paddingBox?: CSS.PaddingProperty<1> + sendBgColor?: CSS.Color + disabledSendColor?: CSS.Color +} + +export default class Donate extends React.PureComponent { + constructor (props: Props) { + super(props) + this.state = { + amount: this.getCurrentAmount(this.props.donationAmounts), + missingFunds: false + } + } + + componentDidUpdate (prevProps: Props) { + if ( + this.props.balance !== prevProps.balance || + this.props.donationAmounts !== prevProps.donationAmounts + ) { + this.validateAmount(this.props.balance) + } + + if (this.props.donationAmounts !== prevProps.donationAmounts) { + this.setState({ amount: this.getCurrentAmount(this.props.donationAmounts) }) + } + } + + getCurrentAmount (amounts: Donation[]) { + const amount = amounts && amounts.find((amount: Donation) => !!amount.selected) + return (amount && amount.tokens) || 0 + } + + validateDonation = () => { + if (this.validateAmount(this.props.balance)) { + return + } + + if (this.props.onDonate) { + this.props.onDonate(this.state.amount) + } + } + + validateAmount (balance: number, tokens?: number) { + if (tokens === undefined) { + tokens = this.state.amount + } + + const valid = tokens > balance + this.setState({ missingFunds: valid }) + return valid + } + + onAmountChange = (tokens: number) => { + this.setState({ amount: tokens }) + this.validateAmount(this.props.balance, tokens) + + if (this.props.onAmountSelection) { + this.props.onAmountSelection(tokens) + } + } + + render () { + const { id, donationAmounts, actionText, children, theme, title } = this.props + const disabled = this.state.amount === 0 + + const donateType = this.props.donateType ? this.props.donateType : 'big' + const sendColor = disabled ? (setTheme(theme, 'disabledSendColor') || '#3e45b2') : '#a1a8f2' + + return ( + + + {title} + { + donationAmounts && donationAmounts.map((donation: Donation) => { + return + }) + } + {children} + + + {send(sendColor)}{actionText} + + { + this.state.missingFunds + ? + {sadFace} + {getLocale('notEnoughTokens')} {getLocale('addFunds')}. + + : null + } + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/donate/spec.tsx b/components/brave_rewards/resources/ui/components/donate/spec.tsx new file mode 100644 index 000000000000..c1e1cd321957 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donate/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import Donate from './index' + +describe('Donate tests', () => { + const baseComponent = (props?: object) =>
+ + + + + + + +
+ MISSING: siteVisited + + MISSING: type + + MISSING: tokens +
+
+
+ MISSING: seeAllItems +
+
+`; diff --git a/components/brave_rewards/resources/ui/components/donationTable/assets/close.tsx b/components/brave_rewards/resources/ui/components/donationTable/assets/close.tsx new file mode 100644 index 000000000000..7aa0bb07bb1a --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donationTable/assets/close.tsx @@ -0,0 +1,15 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + +) diff --git a/components/brave_rewards/resources/ui/components/donationTable/assets/monthly.tsx b/components/brave_rewards/resources/ui/components/donationTable/assets/monthly.tsx new file mode 100644 index 000000000000..95ed2147fabe --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donationTable/assets/monthly.tsx @@ -0,0 +1,15 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + +) diff --git a/components/brave_rewards/resources/ui/components/donationTable/index.tsx b/components/brave_rewards/resources/ui/components/donationTable/index.tsx new file mode 100644 index 000000000000..fcccf68612cb --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donationTable/index.tsx @@ -0,0 +1,181 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { StyledWrapper, StyledType, StyledDate, StyledRemove, StyledRemoveIcon, StyledToggle, StyledRecurringIcon } from './style' +import Table, { Cell, Row } from '../../../components/dataTables/table/index' +import Profile, { Provider } from '../profile/index' +import Tokens from '../tokens/index' +import { getLocale } from '../../../helpers' + +interface ProfileCell { + verified: boolean + name: string + src: string + provider?: Provider +} + +type DonationType = 'donation' | 'tip' | 'recurring' + +export interface DetailRow { + profile: ProfileCell + contribute: { + tokens: number + converted: number + } + type: DonationType + text?: string | React.ReactNode + onRemove?: () => void +} + +export interface Props { + id?: string + children?: React.ReactNode + rows?: DetailRow[] + numItems?: number + allItems?: boolean + onClick?: () => void + theme?: Theme +} + +interface Theme { + headerColor?: CSS.Color +} + +const removeIcon = require('./assets/close') +const monthlyIcon = require('./assets/monthly') + +export default class DonationTable extends React.PureComponent { + getTypeContent (row: DetailRow): Cell { + switch (row.type) { + case 'recurring': + return { + content: ( + <> + {getLocale('recurring')} {monthlyIcon} + + {removeIcon} {getLocale('remove')} + + + ) + } + case 'donation': + return { + content: ( + <> + {getLocale('oneTime')} + {row.text} + + ) + } + case 'tip': + return { + content: ( + <> + {getLocale('tipOnLike')} + {row.text} + + ) + } + } + } + + getRows (rows?: DetailRow[]): Row[] | undefined { + if (!rows) { + return + } + + return rows.map((row: DetailRow): Row => { + return { + content: [ + { + content: ( + + ) + }, + this.getTypeContent(row), + { + content: ( + + ), + theme: { + 'text-align': 'right', + 'padding-right': '7px' + } + } + ] + } + }) + } + + get headers (): Cell[] { + let theme = {} + + if (this.props.theme && this.props.theme.headerColor) { + theme = { + border: 'none', + 'border-bottom': `1px solid ${this.props.theme.headerColor}`, + 'padding-top': '0', + 'padding-bottom': '0', + color: this.props.theme.headerColor + } + } + + return [ + { + content: getLocale('siteVisited'), + theme + }, + { + content: getLocale('type'), + theme + }, + { + content: getLocale('tokens'), + theme: Object.assign({ + 'text-align': 'right', + 'padding-right': '7px', + 'text-transform': 'capitalize' + }, theme) + } + ] + } + + render () { + const { id, children, rows, allItems, onClick } = this.props + const numItems = this.props.numItems || 0 + return ( + + + { + !allItems + ? + {getLocale('seeAllItems', { numItems })} + + : null + } + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/donationTable/spec.tsx b/components/brave_rewards/resources/ui/components/donationTable/spec.tsx new file mode 100644 index 000000000000..113c8cccbafd --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donationTable/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import DonationTable from './index' + +describe('DonationTable tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#table').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/donationTable/style.ts b/components/brave_rewards/resources/ui/components/donationTable/style.ts new file mode 100644 index 000000000000..afa50b2b13ee --- /dev/null +++ b/components/brave_rewards/resources/ui/components/donationTable/style.ts @@ -0,0 +1,51 @@ +/* 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 'styled-components' + +export const StyledWrapper = styled.div` +` as any + +export const StyledRemove = styled.div` + font-family: Muli; + font-size: 14px; + line-height: 1; + margin-top: 3px; + color: #d1d1db; +` as any + +export const StyledRemoveIcon = styled.span` + vertical-align: text-bottom; + width: 9px; +` as any + +export const StyledType = styled.div` + font-family: Muli; + font-size: 14px; + font-weight: 600; + line-height: 1.29; + color: #686978; +` as any + +export const StyledDate = styled.div` + font-family: Muli; + font-size: 14px; + line-height: 1; + margin-top: 3px; + color: #b8b9c4; +` as any + +export const StyledToggle = styled.div` + font-family: Poppins; + font-size: 13px; + color: #4c54d2; + text-align: right; + text-transform: capitalize; +` as any + +export const StyledRecurringIcon = styled.span` + display: inline-block; + margin-left: 3px; + vertical-align: middle; +` as any diff --git a/components/brave_rewards/resources/ui/components/index.ts b/components/brave_rewards/resources/ui/components/index.ts new file mode 100644 index 000000000000..81a16b5ce29b --- /dev/null +++ b/components/brave_rewards/resources/ui/components/index.ts @@ -0,0 +1,53 @@ +/* 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 Alert from './alert' +import DisabledContent from './disabledContent' +import MainToggle from './mainToggle' +import PanelEmpty from './panelEmpty' +import SiteBanner from './siteBanner' +import Amount from './amount' +import Donate from './donate' +import PanelOff from './panelOff' +import Tokens from './tokens' +import Box from './box' +import DonationTable from './donationTable' +import ModalBackupRestore from './modalBackupRestore' +import PanelSummary from './panelSummary' +import Tooltip from './tooltip' +import ContributeTable from './contributeTable' +import List from './list' +import ModalContribute from './modalContribute' +import Profile from './profile' +import ControlWrapper from './controlWrapper' +import ListToken from './listToken' +import Panel from './panel' +import Tip from './tip' +import SettingsPage from './settingsPage' + +export { + Alert, + DisabledContent, + MainToggle, + PanelEmpty, + SiteBanner, + Amount, + Donate, + PanelOff, + Tokens, + Box, + DonationTable, + ModalBackupRestore, + PanelSummary, + Tooltip, + ContributeTable, + List, + ModalContribute, + Profile, + ControlWrapper, + ListToken, + Panel, + Tip, + SettingsPage +} diff --git a/components/brave_rewards/resources/ui/components/list/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/list/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..73bfdd7cd86c --- /dev/null +++ b/components/brave_rewards/resources/ui/components/list/__snapshots__/spec.tsx.snap @@ -0,0 +1,75 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`List tests basic tests matches the snapshot 1`] = ` +.c0 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border-bottom: solid 1px #cfd5da; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + margin-bottom: 8px; + font-family: Poppins; +} + +.c1 { + font-size: 16px; + line-height: 1; + color: #4b4c5c; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + padding: 9px 0 15px; +} + +.c2 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -webkit-flex-basis: 50%; + -ms-flex-preferred-size: 50%; + flex-basis: 50%; + text-align: right; +} + +
+
+
+
+
+
+`; diff --git a/components/brave_rewards/resources/ui/components/list/index.tsx b/components/brave_rewards/resources/ui/components/list/index.tsx new file mode 100644 index 000000000000..40bf06614687 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/list/index.tsx @@ -0,0 +1,28 @@ +/* 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 * as React from 'react' +import { StyledWrapper, StyledTitle, StyledContent, StyledContentWrapper } from './style' + +export interface Props { + id?: string + title?: string + children?: React.ReactNode + theme?: {[key: string]: string} +} + +export default class List extends React.PureComponent { + render () { + const { id, title, children, theme } = this.props + + return ( + + {title} + + {children} + + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/list/spec.tsx b/components/brave_rewards/resources/ui/components/list/spec.tsx new file mode 100644 index 000000000000..c87512fb031d --- /dev/null +++ b/components/brave_rewards/resources/ui/components/list/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import List from './index' + +describe('List tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#list').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/list/style.ts b/components/brave_rewards/resources/ui/components/list/style.ts new file mode 100644 index 000000000000..7f4df32eb11f --- /dev/null +++ b/components/brave_rewards/resources/ui/components/list/style.ts @@ -0,0 +1,44 @@ +/* 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, { css } from 'styled-components' +import { Props } from './index' + +export const StyledWrapper = styled.div` + position: relative; + display: flex; + border-bottom: solid 1px #cfd5da; + justify-content: space-between; + align-items: baseline; + align-content: flex-start; + flex-wrap: nowrap; + margin-bottom: 8px; + font-family: Poppins; +` as any + +export const StyledTitle = styled.div` + font-size: 16px; + line-height: 1; + color: #4b4c5c; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 50%; + padding: 9px 0 15px; +` as any + +export const StyledContentWrapper = styled.div` + flex-grow: 1; + flex-shrink: 1; + flex-basis: 50%; + text-align: right; +` as any + +export const StyledContent = styled.div` + ${(p: Props) => p.theme + ? css` + ${p.theme} + ` + : '' + } +` as any diff --git a/components/brave_rewards/resources/ui/components/listToken/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/listToken/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..e114090dc646 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/listToken/__snapshots__/spec.tsx.snap @@ -0,0 +1,103 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ListToken tests basic tests matches the snapshot 1`] = ` +.c0 { + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + border-bottom: 1px solid #d0d6dc; + border-top: none; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: baseline; + -webkit-box-align: baseline; + -ms-flex-align: baseline; + align-items: baseline; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + margin-bottom: 8px; + font-family: Poppins; +} + +.c1 { + font-size: 14px; + line-height: 2.79; + color: #4b4c5c; + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -webkit-flex-basis: 60%; + -ms-flex-preferred-size: 60%; + flex-basis: 60%; +} + +.c2 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + -webkit-flex-basis: 40%; + -ms-flex-preferred-size: 40%; + flex-basis: 40%; + text-align: right; +} + +.c3 { + font-family: Poppins; + font-weight: 300; + line-height: 1.4; + color: #686978; + font-size: 14px; + display: inline-block; +} + +.c4 { + color: #686978; + font-weight: 600; +} + +
+
+
+ + + + + + + + MISSING: tokens + + + +
+
+`; diff --git a/components/brave_rewards/resources/ui/components/listToken/index.tsx b/components/brave_rewards/resources/ui/components/listToken/index.tsx new file mode 100644 index 000000000000..1e099ea03f37 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/listToken/index.tsx @@ -0,0 +1,53 @@ +/* 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 * as React from 'react' +import * as CSS from 'csstype' +import { StyledWrapper, StyledTitle, StyledContentWrapper } from './style' +import Tokens from '../tokens/index' + +export interface Props { + title: string + value: number + converted: number + id?: string + theme?: Theme + isNegative?: boolean +} + +interface Theme { + color?: CSS.Color + borderTop?: CSS.BorderTopProperty<1> + borderBottom?: CSS.BorderTopProperty<1> +} + +export default class ListToken extends React.PureComponent { + render () { + const { id, title, value, theme, converted, isNegative } = this.props + + return ( + + {title} + + + + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/listToken/spec.tsx b/components/brave_rewards/resources/ui/components/listToken/spec.tsx new file mode 100644 index 000000000000..d890857f914e --- /dev/null +++ b/components/brave_rewards/resources/ui/components/listToken/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import ListToken from './index' + +describe('ListToken tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#list').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/listToken/style.ts b/components/brave_rewards/resources/ui/components/listToken/style.ts new file mode 100644 index 000000000000..5799cf8e9911 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/listToken/style.ts @@ -0,0 +1,36 @@ +/* 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 'styled-components' +import { Props } from './index' +import { setTheme } from '../../../helpers' + +export const StyledWrapper = styled.div` + position: relative; + display: flex; + border-bottom: ${(p: Props) => setTheme(p.theme, 'borderBottom') || '1px solid #d0d6dc'}; + border-top: ${(p: Props) => setTheme(p.theme, 'borderTop') || 'none'}; + justify-content: space-between; + align-items: baseline; + align-content: flex-start; + flex-wrap: nowrap; + margin-bottom: 8px; + font-family: Poppins; +` as any + +export const StyledTitle = styled.div` + font-size: 14px; + line-height: 2.79; + color: #4b4c5c; + flex-grow: 1; + flex-shrink: 1; + flex-basis: 60%; +` as any + +export const StyledContentWrapper = styled.div` + flex-grow: 1; + flex-shrink: 1; + flex-basis: 40%; + text-align: right; +` as any diff --git a/components/brave_rewards/resources/ui/components/mainToggle/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/mainToggle/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..44d14e032a76 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/mainToggle/__snapshots__/spec.tsx.snap @@ -0,0 +1,240 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MainToggle tests basic tests matches the snapshot 1`] = ` +.c0 { + font-family: Poppins; + position: relative; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + width: 100%; + border-radius: 6px; + background-color: #dee2e6; + border: 1px solid #dbdfe3; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; + -webkit-align-content: flex-start; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + padding: 22px 34px 18px; + margin-bottom: 25px; +} + +.c1 { + -webkit-box-flex: 1; + -webkit-flex-grow: 1; + -ms-flex-positive: 1; + flex-grow: 1; + -webkit-flex-shrink: 1; + -ms-flex-negative: 1; + flex-shrink: 1; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c4 { + padding: 10px 0 0; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; +} + +.c2 { + font-size: 28px; + font-weight: 600; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + color: #4b4c5c; + margin: 4px 0 0 11px; +} + +.c3 { + font-size: 10px; + font-weight: 300; + -webkit-letter-spacing: 0.2px; + -moz-letter-spacing: 0.2px; + -ms-letter-spacing: 0.2px; + letter-spacing: 0.2px; + text-align: center; + color: #222326; + vertical-align: text-top; +} + +.c9 { + font-size: 22px; + line-height: 1.27; + color: #4b4c5c; + margin-top: 40px; +} + +.c10 { + font-family: Muli; + font-size: 16px; + font-weight: 300; + line-height: 1.75; + color: #838391; +} + +.c8 { + -webkit-flex-basis: 100%; + -ms-flex-preferred-size: 100%; + flex-basis: 100%; +} + +.c5 { + position: relative; + display: block; + width: 40px; + height: 24px; +} + +.c6 { + background: #A7ACB2; + width: 100%; + border-radius: 3px; + height: 8px; + margin-top: 8px; +} + +.c7 { + position: relative; + z-index: 2; + border-radius: 50%; + -webkit-transition: 200ms ease-out; + transition: 200ms ease-out; + background-color: #CDD1D5; + -webkit-transform: translate(0,calc(-50% - 4px)); + -ms-transform: translate(0,calc(-50% - 4px)); + transform: translate(0,calc(-50% - 4px)); + width: 24px; + height: 24px; +} + +
+
+ + + + + + + + + + + + +
+ MISSING: braveRewards + + + TM + +
+
+
+
+
+
+
+
+
+
+ MISSING: rewardsWhy +
+
+ MISSING: rewardsOffText1 + +
+ + MISSING: rewardsOffText2 + +
+
+ MISSING: rewardsOffText3 +
+
+ MISSING: rewardsOffText4 +
+
+
+`; diff --git a/components/brave_rewards/resources/ui/components/mainToggle/assets/bat.tsx b/components/brave_rewards/resources/ui/components/mainToggle/assets/bat.tsx new file mode 100644 index 000000000000..256dca21ebf7 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/mainToggle/assets/bat.tsx @@ -0,0 +1,18 @@ +/* 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 * as React from 'react' + +module.exports = ( + + + + + + + + + + +) diff --git a/components/brave_rewards/resources/ui/components/mainToggle/index.tsx b/components/brave_rewards/resources/ui/components/mainToggle/index.tsx new file mode 100644 index 000000000000..499cbed98d36 --- /dev/null +++ b/components/brave_rewards/resources/ui/components/mainToggle/index.tsx @@ -0,0 +1,61 @@ +/* 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 * as React from 'react' +import { + StyledWrapper, + StyledLogo, + StyledTitle, + StyledTM, + StyledLeft, + StyledRight, + StyleTitle, + StyleText, + StyledContent +} from './style' +import Toggle from '../../../components/formControls/toggle/index' +import { getLocale } from '../../../helpers' + +const logo = require('./assets/bat') + +export interface Props { + enabled: boolean + onToggle: () => void + id?: string +} + +export default class MainToggle extends React.PureComponent { + render () { + const { id, enabled, onToggle } = this.props + + return ( + + + {logo} + + {getLocale('braveRewards')} TM + + + + + + { + !enabled + ? + {getLocale('rewardsWhy')} + + {getLocale('rewardsOffText1')}
+ {getLocale('rewardsOffText2')} + + {getLocale('rewardsOffText3')} + + {getLocale('rewardsOffText4')} + + + : null + } + + ) + } +} diff --git a/components/brave_rewards/resources/ui/components/mainToggle/spec.tsx b/components/brave_rewards/resources/ui/components/mainToggle/spec.tsx new file mode 100644 index 000000000000..78fba0b7d39d --- /dev/null +++ b/components/brave_rewards/resources/ui/components/mainToggle/spec.tsx @@ -0,0 +1,23 @@ +/* global jest, expect, describe, it, afterEach */ +import * as React from 'react' +import { shallow } from 'enzyme' +import { create } from 'react-test-renderer' +import MainToggle from './index' + +describe('MainToggle tests', () => { + const baseComponent = (props?: object) => + + describe('basic tests', () => { + it('matches the snapshot', () => { + const component = baseComponent() + const tree = create(component).toJSON() + expect(tree).toMatchSnapshot() + }) + + it('renders the component', () => { + const wrapper = shallow(baseComponent()) + const assertion = wrapper.find('#mainToggle').length + expect(assertion).toBe(1) + }) + }) +}) diff --git a/components/brave_rewards/resources/ui/components/mainToggle/style.ts b/components/brave_rewards/resources/ui/components/mainToggle/style.ts new file mode 100644 index 000000000000..44676655893b --- /dev/null +++ b/components/brave_rewards/resources/ui/components/mainToggle/style.ts @@ -0,0 +1,71 @@ +/* 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 'styled-components' + +export const StyledWrapper = styled.div` + font-family: Poppins; + position: relative; + display: flex; + width: 100%; + border-radius: 6px; + background-color: #dee2e6; + border: 1px solid #dbdfe3; + justify-content: space-between; + align-items: flex-start; + align-content: flex-start; + flex-wrap: wrap; + padding: 22px 34px 18px; + margin-bottom: 25px; +` as any + +export const StyledLeft = styled.div` + flex-grow: 1; + flex-shrink: 1; + display: flex; +` as any + +export const StyledRight = styled.div` + padding: 10px 0 0; + display: flex; +` as any + +export const StyledLogo = styled.span` +` as any + +export const StyledTitle = styled.div` + font-size: 28px; + font-weight: 600; + letter-spacing: 0.2px; + color: #4b4c5c; + margin: 4px 0 0 11px; +` as any + +export const StyledTM = styled.span` + font-size: 10px; + font-weight: 300; + letter-spacing: 0.2px; + text-align: center; + color: #222326; + vertical-align: text-top; +` as any + +export const StyleTitle = styled.div` + font-size: 22px; + line-height: 1.27; + color: #4b4c5c; + margin-top: 40px; +` as any + +export const StyleText = styled.div` + font-family: Muli; + font-size: 16px; + font-weight: 300; + line-height: 1.75; + color: #838391; +` as any + +export const StyledContent = styled.div` + flex-basis: 100%; +` as any diff --git a/components/brave_rewards/resources/ui/components/modalBackupRestore/__snapshots__/spec.tsx.snap b/components/brave_rewards/resources/ui/components/modalBackupRestore/__snapshots__/spec.tsx.snap new file mode 100644 index 000000000000..796ed2432f9b --- /dev/null +++ b/components/brave_rewards/resources/ui/components/modalBackupRestore/__snapshots__/spec.tsx.snap @@ -0,0 +1,357 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ModalBackupRestore tests basic tests matches the snapshot 1`] = ` +.c3 { + margin-top: 33px; +} + +.c8 { + font-family: Muli; + font-size: 16px; + font-weight: 300; + line-height: 1.63; + color: #686978; + margin-bottom: 39px; +} + +.c13 { + text-align: center; +} + +.c13 > div { + margin: 0 4px; +} + +.c15 { + text-align: center; + margin-top: 59px; +} + +.c4 { + border-bottom: 1px solid #DFDFE8; + text-align: center; + font-family: Poppins; +} + +.c5 { + border-radius: 6px 6px 0 0; + border: 1px solid #DFDFE8; + border-bottom: 1px solid #FFF; + color: #FB542B; + font-size: 16px; + font-weight: 500; + -webkit-letter-spacing: -0.29px; + -moz-letter-spacing: -0.29px; + -ms-letter-spacing: -0.29px; + letter-spacing: -0.29px; + line-height: 44px; + display: inline-block; + cursor: pointer; + min-width: 230px; + padding: 0 10px; + margin: 0 2px; + position: relative; + top: 1px; +} + +.c6 { + border-radius: 6px 6px 0 0; + border: 1px solid #DFDFE8; + border-bottom: 1px solid #DFDFE8; + color: #686978; + font-size: 16px; + font-weight: 500; + -webkit-letter-spacing: -0.29px; + -moz-letter-spacing: -0.29px; + -ms-letter-spacing: -0.29px; + letter-spacing: -0.29px; + line-height: 44px; + display: inline-block; + cursor: pointer; + min-width: 230px; + padding: 0 10px; + margin: 0 2px; + position: relative; + top: 1px; +} + +.c7 { + padding: 34px 56px 20px; +} + +.c9 { + max-width: 100%; + width: 100%; +} + +.c12 { + min-height: 112px; + box-sizing: border-box; + width: 100%; + font-family: Muli; + border: 1px solid #DFDFE8; + border-radius: 6px; + padding: 15px 0px 15px 20px; + font-size: 16px; + line-height: 26px; +} + +.c10 { + max-width: 100%; + width: 100%; + margin-bottom: 12px; +} + +.c11 { + width: 100%; + font-family: Poppins; + line-height: normal; + font-size: 14px; + font-weight: 500; + color: #686978; + margin-bottom: 6px; +} + +.c0 { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background: rgba(12,13,33,0.85); + z-index: 99; + padding: 0 20px; +} + +.c1 { + max-width: 666px; + margin: 52px auto; + padding: 61px 50px; + background: #fff; + border-radius: 6px; + overflow: hidden; + position: relative; +} + +.c2 { + position: absolute; + top: 19px; + right: 19px; + padding: 10px; + cursor: pointer; +} + +.c16 { + display: inline-block; + overflow: hidden; + background: #fff; + font-size: 13px; + border-radius: 20px; + min-width: 104px; + font-family: Poppins; +} + +.c17 { + text-align: center; + box-sizing: border-box; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + font-weight: 600; + line-height: 1; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + background: rgba(251,84,43,0.9); + color: #fff; + padding: 13.5px 10px; +} + +.c17:hover { + background: rgba(251,84,43,1); +} + +.c17:active { + background: rgba(251,84,43,0.4); +} + +.c14 { + display: inline-block; + overflow: hidden; + border: 1px solid rgba(184,185,196,0.9); + color: rgba(184,185,196,0.9); + font-size: 11px; + border-radius: 16px; + min-width: 88px; + padding: 10.5px 10px; + text-align: center; + box-sizing: border-box; + font-family: Poppins; + -webkit-letter-spacing: 0; + -moz-letter-spacing: 0; + -ms-letter-spacing: 0; + letter-spacing: 0; + font-weight: 600; + line-height: 1; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + font-weight: 500; +} + +.c14:hover { + border-color: rgba(184,185,196,1); +} + +.c14:active { + border-color: rgba(184,185,196,0.4); +} + +.c14:hover { + color: rgba(184,185,196,1); +} + +.c14:active { + color: rgba(184,185,196,0.4); +} + +