diff --git a/examples/rewards-mobile-settings/.gitignore b/examples/rewards-mobile-settings/.gitignore deleted file mode 100644 index 53c37a166..000000000 --- a/examples/rewards-mobile-settings/.gitignore +++ /dev/null @@ -1 +0,0 @@ -dist \ No newline at end of file diff --git a/examples/rewards-mobile-settings/app.tsx b/examples/rewards-mobile-settings/app.tsx deleted file mode 100644 index 4d4e9c4c6..000000000 --- a/examples/rewards-mobile-settings/app.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react' -import { render } from 'react-dom' - -import SettingsMobile from '../../stories/features/rewards/settingsMobile/settingsMobile' -import { ThemeProvider } from '../../src/theme' -import Theme from '../../src/theme/brave-default' - -window.addEventListener('DOMContentLoaded', function () { - const appElement = document.createElement('div') - document.body.appendChild(appElement) - render( - - - , - appElement - ) -}) - diff --git a/examples/rewards-mobile-settings/package.json b/examples/rewards-mobile-settings/package.json deleted file mode 100644 index 8023826b9..000000000 --- a/examples/rewards-mobile-settings/package.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "name": "standalone-rewards-mobile-settings", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "build": "webpack --config webpack.config.js", - "start": "webpack-dev-server --open" - }, - "author": "", - "devDependencies": { - "html-webpack-harddisk-plugin": "^1.0.1", - "html-webpack-plugin": "^3.2.0", - "react": "^16.6.0", - "react-dom": "^16.6.0", - "ts-loader": "^5.3.0", - "typescript": "^3.1.6", - "webpack": "^4.24.0", - "webpack-cli": "^3.1.2", - "webpack-dev-server": "^3.1.14" - } -} diff --git a/examples/rewards-mobile-settings/tsconfig.json b/examples/rewards-mobile-settings/tsconfig.json deleted file mode 100644 index ff13c3276..000000000 --- a/examples/rewards-mobile-settings/tsconfig.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "extends": "../../tsconfig", - "include": [ - "../../definitions", - ] -} diff --git a/examples/rewards-mobile-settings/webpack.config.js b/examples/rewards-mobile-settings/webpack.config.js deleted file mode 100644 index 0c073d216..000000000 --- a/examples/rewards-mobile-settings/webpack.config.js +++ /dev/null @@ -1,44 +0,0 @@ -const path = require('path') -const HtmlWebpackPlugin = require('html-webpack-plugin') -const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin') - -module.exports = { - mode: "development", - entry: "./app.tsx", - output: { - filename: "bundle.js", - path: path.resolve(__dirname, 'dist') - }, - devServer: { - contentBase: './dist', - after: function (app, server) { - // Use JS for routing by serving same html - // file for all requests - app.get('*', (req, res) => { - res.sendFile(path.resolve(__dirname, 'dist', 'index.html')) - }) - } - }, - resolve: { - // Add `.ts` and `.tsx` as a resolvable extension. - extensions: [".ts", ".tsx", ".js"] - }, - plugins: [ - new HtmlWebpackPlugin({alwaysWriteToDisk: true|false}), - new HtmlWebpackHarddiskPlugin() - ], - module: { - rules: [ - // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader` - { test: /\.tsx?$/, loader: "ts-loader" }, - { - test: /\.(woff|woff2|ttf|eot|svg|png|jpg|jpeg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, - loader: 'url-loader' - }, - { - test: /\.css$/, - loader: 'style-loader!css-loader?-minimize' - } - ] - } -} \ No newline at end of file diff --git a/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap b/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap deleted file mode 100644 index 6b708d8f4..000000000 --- a/src/features/rewards/adRowsDetails/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,94 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Ad Rows Details tests basic tests matches the snapshot 1`] = ` -.c4 { - font-family: Muli,sans-serif; - font-size: 14px; - color: #5e6175; - display: inline-block; -} - -.c1 { - cursor: pointer; - white-space: nowrap; -} - -.c0 { - text-align: left; - padding-top: 15px; -} - -.c5 { - width: 94.5%; - padding-left: 10px; - display: inline-block; -} - -.c6 { - color: #c2c4cf; - background-color: #c2c4cf; - height: 2px; - border: none; -} - -.c2 { - margin: 0; - background: none; - border: none; - width: 16px; - height: 16px; - color: #c2c4cf; - padding: 1px; - outline: none; - display: inline-block; - text-align: center; -} - -.c3 { - width: 100%; - height: 100%; - fill: currentColor; -} - - - -
-
-
- -
-
- -
-
-
-
-
-
- - -`; diff --git a/src/features/rewards/adRowsDetails/index.tsx b/src/features/rewards/adRowsDetails/index.tsx deleted file mode 100644 index 033fa1199..000000000 --- a/src/features/rewards/adRowsDetails/index.tsx +++ /dev/null @@ -1,100 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledAdPortionTD, - StyledAdsDateRow, - StyledAdsDetailRow, - StyledCaratIcon, - StyledDateText, - StyledHR, - StyledHRDiv, - StyledInnerStartTD, - StyledSpaceDiv - } from './style' -import { - CaratTriangleDownSIcon, CaratTriangleRightSIcon -} from '../../../components/icons' -import { DetailRow } from '../tableAdsHistory' -import { Row, Cell } from '../../../components/dataTables/table' - -export interface Props { - id?: string - row?: DetailRow - rowIndex?: number - detailRows?: Row[] -} - -interface State { - innerDetailVisible: boolean -} - -export default class AdRowsDetails extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - innerDetailVisible: true - } - } - - setInnerVisible = () => { - this.setState({ - innerDetailVisible: !this.state.innerDetailVisible - }) - } - - render () { - const { row, rowIndex, detailRows } = this.props - return ( - <> - - - - - - { - this.state.innerDetailVisible - ? - : - } - - - { - row ? row.date : '' - } - - - - - - - - - { - detailRows && this.state.innerDetailVisible ? - detailRows.map((detailRow: Row, j: number) => { - return ( - - { - detailRow.content.map((detailCell: Cell, k: number) => { - return k === 0 ? - - - - : - - {detailCell.content} - - }) - } - - ) - }) - : null - } - - ) - } -} diff --git a/src/features/rewards/adRowsDetails/spec.tsx b/src/features/rewards/adRowsDetails/spec.tsx deleted file mode 100644 index 60d17cb7d..000000000 --- a/src/features/rewards/adRowsDetails/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import { TestThemeProvider } from '../../../theme' -import AdRowsDetails from './index'; - -describe('Ad Rows Details 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('#adRowsDetails').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/adRowsDetails/style.ts b/src/features/rewards/adRowsDetails/style.ts deleted file mode 100644 index f49c932ee..000000000 --- a/src/features/rewards/adRowsDetails/style.ts +++ /dev/null @@ -1,72 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from 'styled-components' - -export const StyledDateText = styled<{}, 'div'>('div')` - font-family: ${p => p.theme.fontFamily.body}; - font-size: 14px; - color: ${p => p.theme.color.text}; - display: inline-block; -` -export const StyledAdsDateRow = styled<{}, 'div'>('div')` - cursor: pointer; - white-space: nowrap; -` - -export const StyledAdsDetailRow = styled<{}, 'div'>('div')` - text-align: left; - padding-top: 15px; -` - -export const StyledHRDiv = styled<{}, 'div'>('div')` - width: 94.5%; - padding-left: 10px; - display: inline-block; -` - -export const StyledHR = styled<{}, 'hr'>('hr')` - color: ${p => p.theme.color.subtle}; - background-color: ${p => p.theme.color.subtle}; - height: 2px; - border: none; -` - -export const StyledCaratIcon = styled<{}, 'div'>('div')` - margin: 0; - background: none; - border: none; - width: 16px; - height: 16px; - color: ${p => p.theme.color.subtle}; - padding: 1px; - outline: none; - display: inline-block; - text-align: center; -` - -export const StyledAdPortionTD = styled<{}, 'td'>('td')` - font-family: ${p => p.theme.fontFamily.body}; - font-size: 14px; - font-weight: 500; - color: ${p => p.theme.color.text}; - border-bottom: none; - padding: 5px 0; - text-align: left; -` - -export const StyledInnerStartTD = styled<{}, 'td'>('td')` - font-family: ${p => p.theme.fontFamily.body}; - font-size: 14px; - font-weight: 500; - color: ${p => p.theme.color.text}; - border-bottom: none; - padding: 12px 0; - text-align: left; - height: 0%; -` - -export const StyledSpaceDiv = styled<{}, 'div'>('div')` - min-width: 55px; -` diff --git a/src/features/rewards/alert/__snapshots__/spec.tsx.snap b/src/features/rewards/alert/__snapshots__/spec.tsx.snap deleted file mode 100644 index 15e22555a..000000000 --- a/src/features/rewards/alert/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,106 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Alert tests basic tests matches the snapshot 1`] = ` -.c0 { - height: 100%; - 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-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - padding: 15px 38px 15px 19px; - font-family: Muli,sans-serif; - width: 100%; - --alert-wrapper-color: #fff; - background: var(--alert-wrapper-color); -} - -.c1 { - width: 40px; - height: 40px; - -webkit-flex-basis: 40px; - -ms-flex-preferred-size: 40px; - flex-basis: 40px; -} - -.c4 { - -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: 19px; - font-family: Muli,sans-serif; - font-size: 16px; - font-weight: 300; - -webkit-letter-spacing: -0.3px; - -moz-letter-spacing: -0.3px; - -ms-letter-spacing: -0.3px; - letter-spacing: -0.3px; - --alert-content-color: #838391; - --alert-content-bold: #4b4c5c; - color: var(--alert-content-color); -} - -.c4 b { - font-weight: 600; - color: var(--alert-content-bold); -} - -.c2 { - color: #1BBA6A; -} - -.c3 { - width: 100%; - height: 100%; - fill: currentColor; -} - -
- -
- -
- -
-
-`; diff --git a/src/features/rewards/alert/index.tsx b/src/features/rewards/alert/index.tsx deleted file mode 100644 index d5d531e00..000000000 --- a/src/features/rewards/alert/index.tsx +++ /dev/null @@ -1,75 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledWrapper, - StyledContent, - StyledClose, - StyledIcon, - StyledError, - StyledSuccess, - StyledWarning -} from './style' -import { - AlertCircleIcon, - CheckCircleIcon, - CloseStrokeIcon -} from '../../../components/icons' - -export type Type = 'error' | 'success' | 'warning' - -export interface Props { - type: Type - id?: string - children?: React.ReactNode - onClose?: () => void - colored?: boolean - bg?: boolean -} - -export default class Alert extends React.PureComponent { - get icon () { - switch (this.props.type) { - case 'error': - return ( - - - - ) - case 'success': - return ( - - - - ) - case 'warning': - return ( - - - - ) - } - - return null - } - - render () { - const { id, children, onClose, colored, bg, type } = this.props - - return ( - - {this.icon} - - {children} - - {onClose ? ( - - - - ) : null} - - ) - } -} diff --git a/src/features/rewards/alert/spec.tsx b/src/features/rewards/alert/spec.tsx deleted file mode 100644 index a39005db7..000000000 --- a/src/features/rewards/alert/spec.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* 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' -import { TestThemeProvider } from '../../../theme' - -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/src/features/rewards/alert/style.ts b/src/features/rewards/alert/style.ts deleted file mode 100644 index 173b80469..000000000 --- a/src/features/rewards/alert/style.ts +++ /dev/null @@ -1,110 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled, { css } from '../../../theme' -import { Props } from './index' - -const getBgColor = (p: Props) => { - let color = '#fff' - - if (p.bg) { - switch (p.type) { - case 'error': - color = '#FFEEF1' - break - case 'success': - color = '#E7F6FF' - break - case 'warning': - color = '#FAF2DE' - break - } - } - - return css` - --alert-wrapper-color: ${color}; - ` -} - -const getColor = (p: Props) => { - let color = '#838391' - let bold = '#4b4c5c' - - if (p.colored) { - switch (p.type) { - case 'error': - color = bold = '#F36980' - break - case 'success': - color = bold = '#67D79D' - break - case 'warning': - color = bold = '#FF7900' - break - } - } - - return css` - --alert-content-color: ${color}; - --alert-content-bold: ${bold}; - ` -} - -export const StyledWrapper = styled('div')` - height: 100%; - display: flex; - justify-content: flex-start; - align-content: flex-start; - align-items: center; - flex-wrap: nowrap; - padding: 15px 38px 15px 19px; - font-family: ${p => p.theme.fontFamily.body}; - width: 100%; - ${getBgColor}; - background: var(--alert-wrapper-color); -` - -export const StyledIcon = styled<{}, 'span'>('span')` - width: 40px; - height: 40px; - flex-basis: 40px; -` - -export const StyledContent = styled('div')` - flex-grow: 1; - flex-basis: 50%; - padding-left: 19px; - font-family: ${p => p.theme.fontFamily.body}; - font-size: 16px; - font-weight: 300; - letter-spacing: -0.3px; - ${getColor}; - color: var(--alert-content-color); - - b { - font-weight: 600; - color: var(--alert-content-bold); - } -` - -export const StyledClose = styled<{}, 'div'>('div')` - width: 11px; - height: 11px; - position: absolute; - top: 14px; - right: 14px; - z-index: 2; -` - -export const StyledError = styled<{}, 'div'>('div')` - color: #F43405; -` - -export const StyledSuccess = styled<{}, 'div'>('div')` - color: #1BBA6A; -` - -export const StyledWarning = styled<{}, 'div'>('div')` - color: #FF7900; -` diff --git a/src/features/rewards/amount/__snapshots__/spec.tsx.snap b/src/features/rewards/amount/__snapshots__/spec.tsx.snap deleted file mode 100644 index e5bde389e..000000000 --- a/src/features/rewards/amount/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,144 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Amount tests basic tests matches the snapshot 1`] = ` -.c0 { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-family: Muli,sans-serif; - border: none; - background: none; - padding: 0; - cursor: pointer; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0 0 8px 0; -} - -.c1 { - opacity: 1; - border-radius: 20px; - color: #fff; - border: 1px solid rgba(255,255,255,0.35); - background: transparent; - vertical-align: baseline; - padding: 0 12px; - min-height: 32px; - min-width: 82px; - margin-right: 12px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - margin-bottom: 0px; -} - -.c5 { - margin-left: 5px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c2 { - margin-right: 6px; - width: 23px; -} - -.c6 { - vertical-align: baseline; - opacity: 0.4; - font-size: 10px; - color: #ffffff; - display: inline-block; - font-weight: 500; -} - -.c3 { - width: 100%; - height: 100%; - fill: currentColor; -} - - -`; diff --git a/src/features/rewards/amount/index.tsx b/src/features/rewards/amount/index.tsx deleted file mode 100644 index 743fd2caa..000000000 --- a/src/features/rewards/amount/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { StyledWrapper, StyledAmount, StyledNumber, StyledLogo, StyledConverted, StyledTokens } from './style' -import { getLocale } from '../../../helpers' -import { BatColorIcon } from '../../../components/icons' - -export interface Props { - amount: string - converted: string - onSelect: (amount: string) => void - id?: string - selected?: boolean - type?: 'big' | 'small' - currency?: string - isMobile?: boolean -} - -export default class Amount extends React.PureComponent { - static defaultProps = { - type: 'small', - currency: 'USD', - converted: 0 - } - - getAboutText = (isMobile?: boolean) => { - return isMobile ? '' : getLocale('about') - } - - render () { - const { id, onSelect, amount, selected, type, converted, currency, isMobile } = this.props - - return ( - - - {amount} {type === 'big' ? 'BAT' : null} - - - {this.getAboutText(isMobile)} {converted} {currency} - - - ) - } -} diff --git a/src/features/rewards/amount/spec.tsx b/src/features/rewards/amount/spec.tsx deleted file mode 100644 index 8a51f2ece..000000000 --- a/src/features/rewards/amount/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* 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' -import { TestThemeProvider } from '../../../theme' - -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/src/features/rewards/amount/style.ts b/src/features/rewards/amount/style.ts deleted file mode 100644 index 9f89cdf46..000000000 --- a/src/features/rewards/amount/style.ts +++ /dev/null @@ -1,57 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from '../../../theme' -import { Props } from './index' - -export const StyledWrapper = styled, 'button'>('button')` - user-select: none; - font-family: ${p => p.theme.fontFamily.body}; - border: none; - background: none; - padding: 0; - cursor: pointer; - display: ${p => p.isMobile ? 'block' : 'flex'}; - align-items: center; - margin: ${p => p.isMobile ? '0 auto 8px auto' : '0 0 8px 0'}; -` - -export const StyledAmount = styled, 'div'>('div')` - opacity: 1; - border-radius: 20px; - color: #fff; - border: 1px solid rgba(255, 255, 255, 0.35); - background: ${p => p.selected ? 'rgba(255, 255, 255, 0.35)' : 'transparent'}; - vertical-align: baseline; - padding: ${p => p.type === 'big' ? '0 16px' : '0 12px'}; - min-height: ${p => p.type === 'big' ? 40 : 32}px; - min-width: ${p => p.isMobile ? '100px' : p.type === 'big' ? '118px' : '82px'}; - margin-right: ${p => p.isMobile ? 0 : 12}px; - display: flex; - align-items: center; - justify-content: center; - margin-bottom: ${p => p.isMobile ? 5 : 0}px; -` - -export const StyledTokens = styled<{}, 'div'>('div')` - margin-left: 5px; -` - -export const StyledNumber = styled.span` - display: flex; -` - -export const StyledLogo = styled, 'div'>('div')` - margin-right: 6px; - width: ${p => p.isMobile ? 20 : 23}px; -` - -export const StyledConverted = styled, 'div'>('div')` - vertical-align: baseline; - opacity: ${p => p.selected ? 1 : 0.4}; - font-size: ${p => p.type === 'big' ? '12px' : '10px'}; - color: #ffffff; - display: ${p => p.isMobile ? 'block' : 'inline-block'}; - font-weight: 500; -` diff --git a/src/features/rewards/box/__snapshots__/spec.tsx.snap b/src/features/rewards/box/__snapshots__/spec.tsx.snap deleted file mode 100644 index 702acc76f..000000000 --- a/src/features/rewards/box/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,232 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Box tests basic tests matches the snapshot 1`] = ` -.c2 { - max-width: 100%; - width: 100%; - min-height: auto; - margin: 0; - background-color: #fff; - border-radius: 4px; - box-shadow: 0 2px 4px rgba(0,0,0,.2); - font-size: inherit; - font-family: Muli,sans-serif; - box-sizing: border-box; - position: relative; -} - -.c3 { - padding: 32px; -} - -.c0 { - width: 100%; - margin: 0 0 24px; -} - -.c1 { - font-size: 14px; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - font-family: Poppins,sans-serif; - font-size: 20px; - font-weight: 600; - color: #4b4c5c; -} - -.c9 { - width: 100%; - font-size: 15px; - color: #5e6175; - padding: 12px 0 0; - line-height: 1.7; -} - -.c10 { - -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; -} - -.c11 { - background: #fff; - display: none; - width: 100%; -} - -.c12 { - display: none; - position: absolute; - right: 24px; - top: 24px; - width: 24px; - height: 24px; - border: none; - background: none; - padding: 0; - cursor: pointer; - color: #84889c; -} - -.c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - height: 100%; -} - -.c14 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin: 0 0 24px; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c15 { - font-size: 20px; - font-weight: 600; - font-family: Poppins,sans-serif; - color: #5e6175; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c13 { - width: 100%; - height: 100%; - fill: currentColor; -} - -
-
-
-
-
-
-
- test -
-
-
-
-
-
-
- -
-
- test MISSING: settings -
-
-
-
-
-
-
-`; diff --git a/src/features/rewards/box/index.tsx b/src/features/rewards/box/index.tsx deleted file mode 100644 index 08a73d5a6..000000000 --- a/src/features/rewards/box/index.tsx +++ /dev/null @@ -1,130 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledWrapper, - StyledCard, - StyledDescription, - StyledSettingsIcon, - StyledContent, - StyledTitle, - StyledSettingsWrapper, - StyledSettingsClose, - StyledSettingsTitle, - StyledSettingsText, - StyledSettingTitleWrapper, - StyledContentWrapper, - StyledFlip, - StyledSettingsToggleContainer -} from './style' -import { Tooltip } from '../' -import Toggle from '../../../components/formControls/toggle/index' -import { getLocale } from '../../../helpers' -import { CloseCircleOIcon, SettingsIcon } from '../../../components/icons' - -export type Type = 'ads' | 'contribute' | 'donation' - -export interface Props { - title: string - id?: string - description?: string - toggle?: boolean - checked?: boolean - attachedAlert?: React.ReactNode - onToggle?: () => void - settingsChild?: React.ReactNode - disabledContent?: React.ReactNode - children?: React.ReactNode - testId?: string - type: Type - onSettingsClick?: () => void - settingsOpened?: boolean -} - -/* - TODO - - add fade effect - */ -export default class Box extends React.PureComponent { - getSettingsTitle = (title: string) => { - return `${title} ${getLocale('settings')}` - } - - render () { - const { - id, - title, - toggle, - checked, - attachedAlert, - onToggle, - settingsChild, - disabledContent, - description, - type, - children, - testId, - settingsOpened, - onSettingsClick - } = this.props - - return ( - - - - - - - {title} - - - { - settingsChild && ((toggle && checked) || !toggle) ? - - - - - - : null - } - { - toggle ? - - : null - } - - - - {description} - - - { - disabledContent - ? disabledContent - : children - } - - - - - - - - {this.getSettingsTitle(title)} - - {settingsChild} - - - - {attachedAlert} - - ) - } -} diff --git a/src/features/rewards/box/spec.tsx b/src/features/rewards/box/spec.tsx deleted file mode 100644 index f7c6f3aad..000000000 --- a/src/features/rewards/box/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* 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' -import { TestThemeProvider } from '../../../theme' - -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/src/features/rewards/box/style.tsx b/src/features/rewards/box/style.tsx deleted file mode 100644 index 6849fa849..000000000 --- a/src/features/rewards/box/style.tsx +++ /dev/null @@ -1,121 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import styled from '../../../theme' -import { Type } from './index' -import Card, { CardProps } from '../../../components/layout/card' - -interface StyleProps { - open?: boolean - float?: string - checked?: boolean - type?: Type -} - -const colors: Record = { - ads: '#C12D7C', - contribute: '#9F22A1', - donation: '#696FDC' -} - -export const StyledWrapper = styled('div')` - width: 100%; - margin: 0 0 24px; -` - -const CustomCard: React.FC = (props) => - - -export const StyledCard = styled(CustomCard)` - font-size: 14px; -` - -export const StyledFlip = styled('div')` - display: flex; - align-items: center; - justify-content: center; -` - -export const StyledContentWrapper = styled('div')` - display: ${p => p.open ? 'flex' : 'none'}; - flex-direction: column; -` - -export const StyledTitle = styled('div')` - display: flex; - font-family: ${p => p.theme.fontFamily.heading}; - font-size: 20px; - font-weight: 600; - color: ${p => p.type && colors[p.type] || '#4b4c5c'}; -` - -export const StyledDescription = styled<{}, 'div'>('div')` - width: 100%; - font-size: 15px; - color: ${p => p.theme.color.text}; - padding: 12px 0 0; - line-height: 1.7; -` - -export const StyledSettingsIcon = styled('button')` - width: 24px; - height: 24px; - border: none; - background: none; - padding: 0; - cursor: pointer; - color: #A1A8F2; -` - -export const StyledContent = styled<{}, 'div'>('div')` - flex-basis: 100%; - flex-grow: 1; - margin-top: 25px; -` - -export const StyledSettingsWrapper = styled('div')` - background: #fff; - display: ${p => p.open ? 'block' : 'none'}; - width: 100%; -` - -export const StyledSettingsClose = styled('button')` - display: ${p => p.open ? 'block' : 'none'}; - position: absolute; - right: 24px; - top: 24px; - width: 24px; - height: 24px; - border: none; - background: none; - padding: 0; - cursor: pointer; - color: ${p => p.theme.palette.grey600}; -` -export const StyledSettingTitleWrapper = styled('div')` - display: flex; - align-items: center; - justify-content: space-between; - height: 100%; -` - -export const StyledSettingsTitle = styled<{}, 'div'>('div')` - display: flex; - margin: 0 0 24px; -` - -export const StyledSettingsToggleContainer = styled<{}, 'div'>('div')` - display: flex; - align-items: center; -` - -export const StyledSettingsText = styled<{}, 'div'>('div')` - font-size: 20px; - font-weight: 600; - font-family: ${p => p.theme.fontFamily.heading}; - color: ${p => p.theme.color.text}; - display: flex; - align-items: center; -` diff --git a/src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap b/src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap deleted file mode 100644 index acb2a5eac..000000000 --- a/src/features/rewards/boxAlert/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,89 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BoxAlert tests basic tests matches the snapshot 1`] = ` -.c0 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - background: #f0f8ff; - padding: 16px; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); - border-radius: 4px; -} - -.c1 { - width: 24px; - height: 24px; - margin: 8px; - color: #339af0; -} - -.c3 { - font-size: 16px; - font-family: Muli,sans-serif; - color: #5e6175; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c2 { - width: 100%; - height: 100%; - fill: currentColor; -} - -
-
- -
-
- - MISSING: adsNotSupported - -
-
-`; diff --git a/src/features/rewards/boxAlert/index.tsx b/src/features/rewards/boxAlert/index.tsx deleted file mode 100644 index d410f9694..000000000 --- a/src/features/rewards/boxAlert/index.tsx +++ /dev/null @@ -1,154 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public -* License, v. 2.0. If a copy of the MPL was not distributed with this file, -* You can obtain one at http://mozilla.org/MPL/2.0/. -*/ - -// Utils -import * as React from 'react' -import { getLocale } from '../../../helpers' - -// Components -import { - StyledWrapper, - StyledAlertIcon, - StyledInfo, - StyledMessage, - StyledMonthlyTips, - StyledReviewWrapper, - StyledReviewList, - StyledModalContent, - StyledModalInfo, - StyledListMessage, - StyledList, - StyledListItem, - StyledTipsIcon, - StyledButton, - StyledButtonContainer -} from './style' -import { Modal } from '../../../components' -import { AlertCircleIcon, RewardsSendTipsIcon } from '../../../components/icons' -import Button from '../../../components/buttonsIndicators/button' - -export type Type = 'tips' | 'ads' - -export interface Props { - type: Type - testId?: string - onReview?: () => void -} - -interface State { - modalShown: boolean -} - -export default class BoxAlert extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - modalShown: false - } - } - - toggleModalDisplay = () => { - this.setState({ - modalShown: !this.state.modalShown - }) - - if (this.state.modalShown && this.props.onReview) { - this.props.onReview() - } - } - - pinnedSitesModal = () => { - return ( - - - - - - - - {getLocale('pinnedSitesHeader')} - - - {getLocale('monthlyTips')} - - - {getLocale('pinnedSitesMsg')} - - - - {getLocale('pinnedSitesOne')} - - - {getLocale('pinnedSitesTwo')} - - - {getLocale('pinnedSitesThree')} - - - {getLocale('pinnedSitesFour')} - - - - - - -
-
-
-`; diff --git a/src/features/rewards/donate/index.tsx b/src/features/rewards/donate/index.tsx deleted file mode 100644 index b0f011b5c..000000000 --- a/src/features/rewards/donate/index.tsx +++ /dev/null @@ -1,157 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledWrapper, - StyledContent, - StyledDonationTitle, - StyledSend, - StyledIconSend, - StyledIconFace, - StyledFunds, - StyledFundsText, - StyledAmountsWrapper, - StyledSendButton, - StyledButtonWrapper -} from './style' - -import Amount from '../amount/index' -import { getLocale } from '../../../helpers' -import { EmoteSadIcon, SendIcon } from '../../../components/icons' - -export type DonateType = 'big' | 'small' - -type Donation = { - tokens: string, - converted: string -} - -export interface Props { - actionText: string - title: string - balance: number - donationAmounts: Donation[] - currentAmount: string - onDonate: (amount: string) => void - onAmountSelection?: (tokens: string) => void - id?: string - donateType: DonateType - children?: React.ReactNode - isMobile?: boolean - addFundsLink?: string -} - -interface State { - missingFunds: boolean -} - -export default class Donate extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - missingFunds: false - } - } - - componentDidUpdate (prevProps: Props) { - if ( - this.props.balance !== prevProps.balance || - this.props.donationAmounts !== prevProps.donationAmounts || - this.props.currentAmount !== prevProps.currentAmount - ) { - this.validateAmount(this.props.balance) - } - } - - validateDonation = () => { - if (this.validateAmount(this.props.balance)) { - return - } - - if (this.props.onDonate) { - this.props.onDonate(this.props.currentAmount) - } - } - - validateAmount (balance: number, tokens?: string) { - if (tokens === undefined) { - tokens = this.props.currentAmount - } - - const valid = parseInt(tokens, 10) > balance - this.setState({ missingFunds: valid }) - return valid - } - - onAmountChange = (tokens: string) => { - this.validateAmount(this.props.balance, tokens) - - if (this.props.onAmountSelection) { - this.props.onAmountSelection(tokens) - } - } - - render () { - const { - id, - donationAmounts, - actionText, - children, - title, - currentAmount, - donateType, - isMobile, - addFundsLink - } = this.props - const disabled = parseInt(currentAmount, 10) === 0 - - return ( - - - {title} - - { - donationAmounts && donationAmounts.map((donation: Donation) => { - return
- -
- }) - } - - {children} - - - - - - - - {actionText} - - - - { - this.state.missingFunds - ? - - - - - {getLocale('notEnoughTokens')} {getLocale('addFunds')}. - - - : null - } - - ) - } -} diff --git a/src/features/rewards/donate/spec.tsx b/src/features/rewards/donate/spec.tsx deleted file mode 100644 index a97395291..000000000 --- a/src/features/rewards/donate/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* 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' -import { TestThemeProvider } from '../../../theme' - -describe('Donate 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('#donate').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/donate/style.ts b/src/features/rewards/donate/style.ts deleted file mode 100644 index 4238c0547..000000000 --- a/src/features/rewards/donate/style.ts +++ /dev/null @@ -1,166 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled, { css } from '../../../theme' -import * as CSS from 'csstype' -import { DonateType } from './index' - -interface Theme { - paddingBox: CSS.PaddingProperty<1> - sendBgColor: CSS.Color - disabledSendColor: CSS.Color - paddingSend: CSS.PaddingProperty<1> - paddingFunds: CSS.PaddingProperty<1> -} - -interface StyleProps { - disabled?: boolean - donateType?: DonateType - isMobile?: boolean -} - -const customStyle: Record = { - big: { - paddingBox: '0 19px 0 55px', - sendBgColor: '#4c54d2', - disabledSendColor: '#3e45b2', - paddingSend: '14px 0px 13px 0px', - paddingFunds: '13px 12px 13px 24px' - }, - small: { - paddingBox: '0 0 0 23px', - sendBgColor: '#392dd1', - disabledSendColor: '#1a22a8', - paddingSend: '11px 0 10px 47px', - paddingFunds: '12px 0 11px 25px' - } -} - -const getStyle = (p: StyleProps) => { - const style = customStyle[p.donateType || 'small'] - - return css` - --donate-content-padding: ${style.paddingBox}; - --donate-send-bg: ${style.sendBgColor}; - --donate-send-color: ${p.disabled ? style.disabledSendColor : '#fff'}; - --donate-send-padding: ${style.paddingSend}; - --donate-funds-padding: ${style.paddingFunds}; - ` -} - -const getAmountStyle = (isMobile?: boolean) => { - if (!isMobile) { - return null - } - - return css` - display: grid; - grid-gap: 0px; - grid-template-columns: 1fr 1fr 1fr; - align-items: center; - justify-content: center; - padding: 0px 10px; - ` -} - -export const StyledWrapper = styled('div')` - position: relative; - font-family: ${p => p.theme.fontFamily.body}; - margin: ${p => p.isMobile ? '0 auto 8px auto' : 0}px - ${getStyle} -` - -export const StyledContent = styled('div')` - margin-top: ${p => p.isMobile ? -30 : 0}px; - padding: ${p => p.isMobile ? '0px' : 'var(--donate-content-padding)'}; -` - -export const StyledDonationTitle = styled('div')` - font-size: 16px; - font-weight: 600; - line-height: 1.75; - color: #fff; - margin-bottom: ${p => p.isMobile ? 20 : 14}px; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: 167px; - padding-left: ${p => p.isMobile ? 20 : 0}px; -` - -export const StyledSend = styled<{}, 'div'>('div')` - background: var(--donate-send-bg); - font-size: 13px; - font-weight: 600; - letter-spacing: 0.2px; - color: var(--donate-send-color); - padding: var(--donate-send-padding); - text-transform: uppercase; - border: none; - width: 100%; - text-align: left; - cursor: pointer; -` - -export const StyledSendButton = styled<{}, 'button'>('button')` - display: block; - border: none; - font-size: 13px; - font-weight: 600; - text-transform: uppercase; - background: var(--donate-send-bg); - cursor: pointer; -` - -export const StyledButtonWrapper = styled('div')` - display: block; - width: ${p => p.isMobile ? 190 : 245}px; - margin: 0 auto; -` - -export const StyledIconSend = styled('span')` - vertical-align: middle; - display: inline-block; - margin-right: 15px; - color: ${p => p.disabled ? p.donateType === 'small' ? '#1A22A8' : '#3e45b2' : '#a1a8f2'}; - width: 27px; - height: 27px; -` - -export const StyledFunds = styled<{}, 'div'>('div')` - font-family: Muli, sans-serif; - font-size: 13px; - font-weight: 300; - line-height: 1.69; - color: #fff; - padding: var(--donate-funds-padding); - background: #1b1d2f; - display: flex; - position:absolute; - bottom: 0; - left: 0; - z-index: 10; - width: 100%; - - a { - color: #6cc7fd; - text-decoration: none; - } -` - -export const StyledIconFace = styled<{}, 'div'>('div')` - flex-basis: 32px; - margin: -7px 6px 0 0; -` - -export const StyledFundsText = styled<{}, 'div'>('div')` - flex: 1; - margin-right: 9px; -` - -export const StyledAmountsWrapper = styled('div')` - width: 100%; - display: block; - ${p => getAmountStyle(p.isMobile)} -` diff --git a/src/features/rewards/donationOverlay/__snapshots__/spec.tsx.snap b/src/features/rewards/donationOverlay/__snapshots__/spec.tsx.snap deleted file mode 100644 index 791400653..000000000 --- a/src/features/rewards/donationOverlay/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,162 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DonationOverlay tests basic tests matches the snapshot 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(12,13,33,0.85); - font-family: Muli,sans-serif; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c4 { - display: block; -} - -.c5 { - margin-top: 110px; - padding-left: 5px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c6 { - color: #FFF; -} - -.c2 { - top: 20px; - right: 20px; - position: absolute; - background: none; - border: none; - cursor: pointer; - width: 24px; - height: 24px; - color: #FFF; - padding: 0; - z-index: 2; -} - -.c7 { - color: #FFFFFF; - font-size: 28px; - font-weight: 600; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - line-height: 28px; - display: block; - margin-bottom: 10px; -} - -.c8 { - color: #FFFFFF; - font-size: 16px; - font-family: "Muli",sans-serif; - font-weight: normal; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - line-height: 28px; - display: block; - text-align: center; - width: 249px; -} - -.c3 { - width: 100%; - height: 100%; - fill: currentColor; -} - -
-
- -
-
- - - - - MISSING: uhOh - - - MISSING: donationFailureMsg - -
-
-
-
-`; diff --git a/src/features/rewards/donationOverlay/index.tsx b/src/features/rewards/donationOverlay/index.tsx deleted file mode 100644 index 60293a0d5..000000000 --- a/src/features/rewards/donationOverlay/index.tsx +++ /dev/null @@ -1,210 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public -* License, v. 2.0. If a copy of the MPL was not distributed with this file, -* You can obtain one at http://mozilla.org/MPL/2.0/. -*/ - -import * as React from 'react' -import * as CSS from 'csstype' -import { - StyledWrapper, - StyledHeaderText, - StyledOverlayTop, - StyledOverlayContent, - StyledMessage, - StyledIcon, - StyledIconWrapper, - StyledProviderImage, - StyledFailWrapper, - StyledCloseIcon, - StyledFailTitle, - StyledFailMsg, - StyledOuterWrapper, - StyledBackgroundCurve, - StyledImageBorder, - StyleSubHeaderText, - StyledLetter, - StyledClose, - StyledLogoWrapper, - StyledLogoBorder, - StyledLogoIcon, - StyledLogoImage, - StyledDomainText, - StyledDateText, - StyledDate, - StyledMonthlyInfo, - StyledButtonWrapper, - StyledTwitterShareButton -} from './style' -import { getLocale } from '../../../helpers' -import { CloseCircleOIcon, LogoTwitterIcon, PaperAirplaneIcon } from '../../../components/icons' - -export interface Props { - id?: string - send?: boolean - success?: boolean - siteImg?: string - domain?: string - logoBgColor?: CSS.Color - logo?: string - amount?: string - monthlyDate?: string - onTweet?: () => void - onClose: () => void -} - -export default class DonationOverlay extends React.PureComponent { - - getFailureContent () { - return ( - - - - - - {getLocale('uhOh')} - - - {getLocale('donationFailureMsg')} - - - ) - } - - getOverlayContent = () => { - const { - success, - send, - siteImg, - logo, - domain, - logoBgColor, - amount, - monthlyDate, - onTweet - } = this.props - return ( - - { - success || send - ? - - { - send - ? - - - : null - } - { - !send && siteImg - ? - - - : null - } - { - !send && !siteImg && !logo && domain - ? - {(domain && domain.substring(0, 1)) || ''} - - : null - } - { - !send && !siteImg && logo - ? - - - - - : null - } - - - - { - send - ? getLocale('donationSent') - : null - } - { - success - ? <> - {getLocale('thankYou')} - - - { - monthlyDate - ? getLocale('autoTipText') - : getLocale('tipText') - } - - - {domain}
{amount} {getLocale('bat')} - { - monthlyDate - ? `, ${getLocale('monthlyText')}` - : null - } - - { - monthlyDate - ? <> - - {getLocale('firstTipDateText')} - - - {monthlyDate} - - - : null - } - - { - onTweet - ? <> - - {getLocale('tellOthers')} - - - - {getLocale('tweetNow')} - - - - - - - : null - } - - : null - } - - - - : this.getFailureContent() - } - - ) - } - - render () { - const { id, send, onClose } = this.props - - return ( - - { - send - ? - : null - } - - - - - {this.getOverlayContent()} - - - ) - } -} diff --git a/src/features/rewards/donationOverlay/spec.tsx b/src/features/rewards/donationOverlay/spec.tsx deleted file mode 100644 index 5cfa1cd62..000000000 --- a/src/features/rewards/donationOverlay/spec.tsx +++ /dev/null @@ -1,28 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public -* License, v. 2.0. If a copy of the MPL was not distributed with this file, -* You can obtain one at http://mozilla.org/MPL/2.0/. -*/ - -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import DonationOverlay from './index' -import { TestThemeProvider } from '../../../theme' - -describe('DonationOverlay 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('#donationoverlay').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/donationOverlay/style.ts b/src/features/rewards/donationOverlay/style.ts deleted file mode 100644 index 275df778d..000000000 --- a/src/features/rewards/donationOverlay/style.ts +++ /dev/null @@ -1,257 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public -* License, v. 2.0. If a copy of the MPL was not distributed with this file, -* You can obtain one at http://mozilla.org/MPL/2.0/. -*/ - -import styled from '../../../theme' -import * as CSS from 'csstype' - -interface StyleProps { - bg?: string - src?: string - success?: boolean - monthly?: string - logoBgColor?: CSS.Color -} - -export const StyledOuterWrapper = styled<{}, 'div'>('div')` - display: flex; -` - -export const StyledWrapper = styled<{}, 'div'>('div')` - display: flex; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(12,13,33,0.85); - font-family: ${p => p.theme.fontFamily.body}; - justify-content: center; -` - -export const StyledHeaderText = styled<{}, 'span'>('span')` - color: #D1D1DB; - font-size: 38px; - font-weight: 600; - letter-spacing: 0; - line-height: 28px; -` - -export const StyledOverlayTop = styled<{}, 'div'>('div')` - display: flex; - flex-direction: row; - padding-top: 110px; -` - -export const StyledOverlayContent = styled<{}, 'div'>('div')` - display: block; -` - -export const StyledIconWrapper = styled('span')` - flex: 1 0 0; - margin-top: ${p => p.success ? 0 : '-25px'} -` - -export const StyledIcon = styled<{}, 'span'>('span')` - width: 90px; - margin-top: -7px; - margin-right: 9px; - display: inline-block; -` - -export const StyledMessage = styled('div')` - flex: 9 0 0; - padding-top: 10px; - text-align: ${p => p.monthly ? 'center' : 'inherit'}; - margin-right: ${p => p.success ? 0 : '-10px'} -` - -export const StyledProviderImage = styled('div')` - width: 90px; - height: 90px; - padding: 0 20px; - border-radius: 50%; - margin-right: 25px; - background-repeat: no-repeat; - background-size: 90px; - background-image:url(${p => p.src ? p.src : ''}); -` - -export const StyledImageBorder = styled<{}, 'div'>('div')` - position: relative; - top: 0; - left: -20px; - width: 90px; - height: 90px; - border-radius: 50%; - border: 5px solid #ffffff; -` - -export const StyledFailWrapper = styled<{}, 'div'>('div')` - margin-top: 110px; - padding-left: 5px; - display: flex; - flex-direction: column; - align-items: center; -` - -export const StyledCloseIcon = styled<{}, 'span'>('span')` - color: #FFF; -` - -export const StyledClose = styled<{}, 'button'>('button')` - top: 20px; - right: 20px; - position: absolute; - background: none; - border: none; - cursor: pointer; - width: 24px; - height: 24px; - color: #FFF; - padding: 0; - z-index: 2; -` - -export const StyledFailTitle = styled<{}, 'span'>('span')` - color: #FFFFFF; - font-size: 28px; - font-weight: 600; - letter-spacing: 0; - line-height: 28px; - display: block; - margin-bottom: 10px; -` - -export const StyledFailMsg = styled<{}, 'span'>('span')` - color: #FFFFFF; - font-size: 16px; - font-family: "Muli", sans-serif; - font-weight: normal; - letter-spacing: 0; - line-height: 28px; - display: block; - text-align: center; - width: 249px; -` - -export const StyledBackgroundCurve = styled<{}, 'div'>('div')` - position: fixed; - top: 0; - left: -19px; - width: 105%; - height: 480px; - background: #191A2E; - border-bottom-left-radius: 50%; - border-bottom-right-radius: 140%; -` - -export const StyleSubHeaderText = styled<{}, 'div'>('div')` - font-size: 16px; - font-family: "Muli", sans-serif; - font-weight: normal; - letter-spacing: 0; - line-height: 28px; - display: block; - margin: 10px 0 0 5px; -` -export const StyledLetter = styled('div')` - border: 6px solid #fff; - border-radius: 50%; - width: 102px; - height: 102px; - background: ${p => p.logoBgColor || '#DE4D26'}; - overflow: hidden; - margin: -12px 25px 0 0; - color: #fff; - text-align: center; - line-height: 90px; - font-size: 65px; - text-transform: uppercase; -` - -export const StyledLogoImage = styled('div')` - width: 90px; - height: 90px; - background: url(${p => p.bg}) no-repeat; - background-size: cover; -` - -export const StyledLogoWrapper = styled<{}, 'div'>('div')` - padding-right: 25px; - flex-basis: 217px; -` - -export const StyledLogoBorder = styled('div')` - border: 6px solid #fff; - border-radius: 50%; - width: 102px; - height: 102px; - margin-top: -12px; - background: ${p => p.bg || '#DE4D26'}; - overflow: hidden; -` - -export const StyledMonthlyInfo = styled<{}, 'div'>('div')` - color: #fff; -` - -export const StyledDomainText = styled<{}, 'span'>('span')` - display: block; - font-size: 22px; - margin: 10px 0 25px; - font-weight: normal; - letter-spacing: 0; - line-height: 32px; -` - -export const StyledDateText = styled<{}, 'span'>('span')` - display: block; - font-size: 16px; - font-weight: normal; - text-align: center; - letter-spacing: 0; - line-height: 28px; -` - -export const StyledDate = styled<{}, 'span'>('span')` - display: block; - font-size: 16px; - font-weight: 500; - text-align: center; - letter-spacing: 0; - line-height: 28px; - color: ${p => p.theme.color.brandBrave}; -` - -export const StyledTwitterShareButton = styled<{}, 'button'>('button')` - box-sizing: border-box; - background: #38A1F3; - border: none; - color: white; - outline-color: transparent; - display: flex; - flex-direction: row-reverse; - justify-content: center; - align-items: center; - font-family: Poppins, sans-serif; - user-select: none; - font-size: 13px; - border-radius: 20px; - width: auto; - min-width: 100px; - padding: 7px 10px; -` - -export const StyledLogoIcon = styled<{}, 'div'>('div')` - width: 20px; - height: 20px; - margin-right: 10px; -` - -export const StyledButtonWrapper = styled<{}, 'div'>('div')` - display: flex; - margin-top: 20px; - justify-content: center; -` diff --git a/src/features/rewards/dropMenu/__snapshots__/spec.tsx.snap b/src/features/rewards/dropMenu/__snapshots__/spec.tsx.snap deleted file mode 100644 index 9fb55a4cb..000000000 --- a/src/features/rewards/dropMenu/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,37 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Drop Menu tests basic tests matches the snapshot 1`] = ` -.c0 { - width: 32px; - height: 32px; - display: inline-block; - padding: 2px; - position: relative; - border: none; - outline: none; -} - -.c1 { - width: 100%; - height: 100%; - fill: currentColor; -} - -
-
- -
-
-`; diff --git a/src/features/rewards/dropMenu/index.tsx b/src/features/rewards/dropMenu/index.tsx deleted file mode 100644 index fab8574eb..000000000 --- a/src/features/rewards/dropMenu/index.tsx +++ /dev/null @@ -1,108 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledAdMenuDropContent, - StyledAdStatBulletMenuIcon, - StyledAdMenuOptionDropContent, - StyledAdMenuOptionDropContentText -} from './style' -import { MoreVertLIcon } from '../../../components/icons' -import { getLocale } from '../../../helpers' - -interface State { - menuOpen: boolean -} - -export interface Props { - id?: string - currentlySaved: boolean - currentlyFlagged: boolean - onMenuSave?: () => void - onMenuFlag?: () => void -} - -export default class DropMenu extends React.PureComponent { - private container: React.RefObject - constructor (props: Props) { - super(props) - this.state = { - menuOpen: false - } - this.container = React.createRef() - } - - componentDidMount () { - document.addEventListener('mousedown', this.handleClickOutside) - } - - componentWillUnmount () { - document.removeEventListener('mousedown', this.handleClickOutside) - } - - handleClickOutside = (event: MouseEvent) => { - if (this.container.current && !this.container.current.contains(event.target as Element)) { - this.setState({ - menuOpen: false - }) - } - } - - showMenu = () => { - this.setState({ - menuOpen: !this.state.menuOpen - }) - } - - render () { - const { onMenuFlag, onMenuSave, currentlySaved, currentlyFlagged } = this.props - return ( - -
- - { - this.state.menuOpen ? - - - { - !currentlySaved ? - - { - getLocale('saveAd') - } - - : - - { - getLocale('removeAdFromSaved') - } - - } - - - { - !currentlyFlagged ? - - { - getLocale('markAsInappropriate') - } - - : - - { - getLocale('markAsInappropriateChecked') - } - - } - - - : - null - } -
- - ) - } -} diff --git a/src/features/rewards/dropMenu/spec.tsx b/src/features/rewards/dropMenu/spec.tsx deleted file mode 100644 index bebf9a6c8..000000000 --- a/src/features/rewards/dropMenu/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import { TestThemeProvider } from '../../../theme' -import DropMenu from './index'; - -describe('Drop Menu 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('#dropMenu').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/dropMenu/style.ts b/src/features/rewards/dropMenu/style.ts deleted file mode 100644 index 5e05a15d4..000000000 --- a/src/features/rewards/dropMenu/style.ts +++ /dev/null @@ -1,46 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public -* License. v. 2.0. If a copy of the MPL was not distributed with this file. -* You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from 'styled-components' - -export const StyledAdMenuDropContent = styled<{}, 'div'>('div')` - display: block; - position: absolute; - box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); - z-index: 1; - margin-top: -10px; - background-color: ${p => p.theme.color.contextMenuBackground}; - border: 1px solid; - border-color: ${p => p.theme.color.inputBorder}; - border-radius: 5px; - min-width: 200px; -` - -export const StyledAdStatBulletMenuIcon = styled<{}, 'div'>('div')` - width: 32px; - height: 32px; - display: inline-block; - padding: 2px; - position: relative; - border: none; - outline: none; -` - -export const StyledAdMenuOptionDropContent = styled<{}, 'div'>('div')` - display: flex; - align-items: center; - height: 35px; - padding-left: 5px; - margin-top: auto; - cursor: pointer; - &:hover { - background-color: ${p => p.theme.color.brandBraveLight}; - } -` - -export const StyledAdMenuOptionDropContentText = styled<{}, 'span'>('span')` - font-size: 16px; - vertical-align: middle; - font-weight: 600; -` diff --git a/src/features/rewards/grantCaptcha/__snapshots__/spec.tsx.snap b/src/features/rewards/grantCaptcha/__snapshots__/spec.tsx.snap deleted file mode 100644 index 31beb28b1..000000000 --- a/src/features/rewards/grantCaptcha/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,94 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Grant captcha tests basic tests matches the snapshot 1`] = ` -.c0 { - text-align: center; - margin: 15px 0 0 -32px; - width: 333px; -} - -.c5 { - width: 333px; - height: 296px; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c2 { - -webkit-flex-basis: 80px; - -ms-flex-preferred-size: 80px; - flex-basis: 80px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c4 { - -webkit-flex-basis: 130px; - -ms-flex-preferred-size: 130px; - flex-basis: 130px; - font-family: Muli,sans-serif; - font-size: 14px; - line-height: 1.29; - color: #686978; - text-align: left; - padding-left: 13px; -} - -.c3 { - width: 60px; - height: 52px; -} - -
-
-
- -
-
- MISSING: dndCaptchaText1 - - - - MISSING: dndCaptchaText2 -
-
- -
-`; diff --git a/src/features/rewards/grantCaptcha/assets/bat.png b/src/features/rewards/grantCaptcha/assets/bat.png deleted file mode 100644 index 137ab2722..000000000 Binary files a/src/features/rewards/grantCaptcha/assets/bat.png and /dev/null differ diff --git a/src/features/rewards/grantCaptcha/index.tsx b/src/features/rewards/grantCaptcha/index.tsx deleted file mode 100644 index f74a62a5a..000000000 --- a/src/features/rewards/grantCaptcha/index.tsx +++ /dev/null @@ -1,118 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledWrapper, - StyledDropArea, - StyledDrag, - StyledText, - StyledImageWrap, - StyledImage -} from './style' -import { getLocale } from '../../../helpers' - -import batUrl from './assets/bat.png' - -export interface Props { - id?: string - isPanel?: true - isWindows?: boolean - onSolution: (x: number, y: number) => void - dropBgImage: string - hint: string -} - -export default class GrantCaptcha extends React.PureComponent { - private readonly offset: number - private dndStartPosition: { x: number; y: number; width: number; height: number } - private captchaBox: HTMLDivElement | null - private captchaDrag: HTMLDivElement | null - - constructor (props: Props) { - super(props) - this.captchaBox = null - this.captchaDrag = null - this.offset = 5 - this.dndStartPosition = { - x: 0, - y: 0, - width: 0, - height: 0 - } - } - - onCaptchaDrop = (event: React.DragEvent) => { - event.preventDefault() - if (!this.captchaBox || !this.captchaDrag) { - return - } - - const target = this.captchaBox.getBoundingClientRect() - const captchaDrag = this.captchaDrag.getBoundingClientRect() - - let x = event.clientX - target.left - this.dndStartPosition.x + (this.dndStartPosition.width / 2) - let y = event.clientY - target.top - this.dndStartPosition.y + (this.dndStartPosition.height / 2) - captchaDrag.height - - if (this.props.isWindows) { - const dpr = window.devicePixelRatio - const factor = (dpr <= 1) ? 0 : (this.offset * dpr) - x = Math.round(x + factor) - y = Math.round(y + factor) - } - - this.props.onSolution(x, y) - } - - onCaptchaDrag = (event: any) => { - if (!event || !event.target) { - return - } - - const target = event.target.getBoundingClientRect() - this.dndStartPosition = { - x: event.clientX - target.left, - y: event.clientY - target.top, - width: target.width, - height: target.height - } - } - - preventDefault (event: React.DragEvent) { - event.preventDefault() - } - - refWrapper = (node: HTMLDivElement) => { - this.captchaBox = node - } - - refDrag = (node: HTMLDivElement) => { - this.captchaDrag = node - } - - render () { - const { id, isPanel, dropBgImage, hint } = this.props - - return ( - - - - - - { - !isPanel - ? - {getLocale('dndCaptchaText1')} {hint} {getLocale('dndCaptchaText2')} - - : null - } - - - - ) - } -} diff --git a/src/features/rewards/grantCaptcha/spec.tsx b/src/features/rewards/grantCaptcha/spec.tsx deleted file mode 100644 index d35516d54..000000000 --- a/src/features/rewards/grantCaptcha/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import GrantCaptcha from './index' -import { TestThemeProvider } from '../../../theme' - -describe('Grant captcha 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('#captcha').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/grantCaptcha/style.ts b/src/features/rewards/grantCaptcha/style.ts deleted file mode 100644 index e5cb42ddc..000000000 --- a/src/features/rewards/grantCaptcha/style.ts +++ /dev/null @@ -1,43 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from 'styled-components' - -export const StyledWrapper = styled<{}, 'div'>('div')` - text-align: center; - margin: 15px 0 0 -32px; - width: 333px; -` - -export const StyledDropArea = styled<{}, 'img'>('img')` - width: 333px; - height: 296px; -` - -export const StyledDrag = styled<{}, 'div'>('div')` - display: flex; - justify-content: center; -` - -export const StyledImageWrap = styled<{}, 'div'>('div')` - flex-basis: 80px; - flex-shrink: 0; - display: flex; - justify-content: center; -` - -export const StyledText = styled<{}, 'div'>('div')` - flex-basis: 130px; - font-family: Muli, sans-serif; - font-size: 14px; - line-height: 1.29; - color: #686978; - text-align: left; - padding-left: 13px; -` - -export const StyledImage = styled<{}, 'img'>('img')` - width: 60px; - height: 52px; -` diff --git a/src/features/rewards/grantClaim/__snapshots__/spec.tsx.snap b/src/features/rewards/grantClaim/__snapshots__/spec.tsx.snap deleted file mode 100644 index d3e5f6511..000000000 --- a/src/features/rewards/grantClaim/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,96 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Grant claim tests basic tests matches the snapshot 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - border-radius: 8px; - background-color: #fff; - overflow: hidden; - padding-left: 20px; - margin-bottom: 19px; - width: 100%; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); -} - -.c1 { - -webkit-flex-basis: 42px; - -ms-flex-preferred-size: 42px; - flex-basis: 42px; - height: 42px; - width: 52px; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - color: #FF9868; -} - -.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: 70%; - -ms-flex-preferred-size: 70%; - flex-basis: 70%; - font-size: 14px; - font-weight: 400; - line-height: 1.25; - color: #686978; - padding: 0 10px; -} - -.c3 { - -webkit-flex-basis: 90px; - -ms-flex-preferred-size: 90px; - flex-basis: 90px; - height: 64px; - background-color: #fb542b; - font-size: 12px; - line-height: 1.83; - -webkit-letter-spacing: 0.8px; - -moz-letter-spacing: 0.8px; - -ms-letter-spacing: 0.8px; - letter-spacing: 0.8px; - color: #fff; - border: none; - text-transform: uppercase; - cursor: pointer; - font-weight: 600; -} - -.c3:focus { - outline: none; -} - -
-
-
- MISSING: earningsClaimDefault -
- -
-`; diff --git a/src/features/rewards/grantClaim/index.tsx b/src/features/rewards/grantClaim/index.tsx deleted file mode 100644 index 631d5f704..000000000 --- a/src/features/rewards/grantClaim/index.tsx +++ /dev/null @@ -1,82 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { StyledWrapper, StyledIcon, StyledText, StyledClaim, StyledLoader } from './style' -import { getLocale } from '../../../helpers' -import { GiftIcon, LoaderIcon, MegaphoneIcon } from '../../../components/icons' - -export type Type = 'ads' | 'ugp' - -export interface Props { - id?: string - testId?: string - isMobile?: boolean - onClaim: () => void - type: Type - amount?: string - loading?: boolean -} - -export default class GrantClaim extends React.PureComponent { - getIcon = (type: Type) => { - let icon = null - - switch (type) { - case 'ads': - icon = - break - case 'ugp': - icon = - break - } - - return icon - } - - getGrantText = (type: Type, amount?: string) => { - if (type === 'ugp') { - return getLocale('newGrant') - } - - if (!amount) { - return getLocale('earningsClaimDefault') - } - - const formattedAmount = `${amount} ${getLocale('earningsClaimBat')}` - - return ( - <> - {getLocale('earningsClaimOne')} {formattedAmount} {getLocale('earningsClaimTwo')} - - ) - } - - render () { - const { id, testId, isMobile, onClaim, type, amount, loading } = this.props - - return ( - - - {this.getIcon(type)} - - - {this.getGrantText(type, amount)} - - - { - loading - ? - - - : getLocale('claim') - } - - - ) - } -} diff --git a/src/features/rewards/grantClaim/spec.tsx b/src/features/rewards/grantClaim/spec.tsx deleted file mode 100644 index 325f6a6ee..000000000 --- a/src/features/rewards/grantClaim/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import GrantClaim from './index' -import { TestThemeProvider } from '../../../theme' - -describe('Grant claim 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('#claim').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/grantClaim/style.ts b/src/features/rewards/grantClaim/style.ts deleted file mode 100644 index e43593ea0..000000000 --- a/src/features/rewards/grantClaim/style.ts +++ /dev/null @@ -1,68 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import { Type } from './' -import styled from 'styled-components' - -interface StyleProps { - type?: Type - isMobile?: boolean -} - -export const StyledWrapper = styled('div')` - display: flex; - align-items: center; - flex-wrap: nowrap; - border-radius: 8px; - background-color: #fff; - overflow: hidden; - padding-left: 20px; - margin-bottom: ${p => p.isMobile ? 15 : 19}px; - width: 100%; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); -` - -export const StyledIcon = styled('div')` - flex-basis: 42px; - height: 42px; - width: 52px; - flex-shrink: 0; - color: ${p => p.type === 'ads' ? '#C12D7C' : '#FF9868'}; -` - -export const StyledText = styled<{}, 'div'>('div')` - flex-grow: 1; - flex-shrink: 1; - flex-basis: 70%; - font-size: 14px; - font-weight: 400; - line-height: 1.25; - color: #686978; - padding: 0 10px; -` - -export const StyledClaim = styled<{}, 'button'>('button')` - flex-basis: 90px; - height: 64px; - background-color: #fb542b; - font-size: 12px; - line-height: 1.83; - letter-spacing: 0.8px; - color: #fff; - border: none; - text-transform: uppercase; - cursor: pointer; - font-weight: 600; - - &:focus { - outline: none; - } -` - -export const StyledLoader = styled<{}, 'span'>('span')` - width: 35px; - height: 35px; - margin-top: 7px; - display: inline-block; -` diff --git a/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap b/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap deleted file mode 100644 index df3d6e4c8..000000000 --- a/src/features/rewards/grantComplete/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,144 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Grant complete tests basic tests matches the snapshot 1`] = ` -.c0 { - text-align: center; - width: 100%; - margin: 40px 0 0; -} - -.c1 { - border-radius: 6px; - background-color: #f1f1f5; - padding: 5px 10px 20px; -} - -.c2 { - font-size: 14px; - font-weight: 300; - line-height: 1.57; - color: #838391; - margin: 11px 0 5px; -} - -.c3 { - font-size: 18px; - line-height: 1.22; - text-align: center; - color: #c12d7c; -} - -.c4 { - margin-top: 32px; -} - -.c6 { - --button-main-color: #FB542B; - --button-main-color-hover: #FB542B; - --button-main-color-active: #ffb8a6; - --button-state-color: var(--button-main-color); - --icon-size: 18px; - --icon-spacing: 6px; - --webkit-appearance: none; - box-sizing: border-box; - background: none; - border: none; - outline-color: transparent; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: row-reverse; - -ms-flex-direction: row-reverse; - flex-direction: row-reverse; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - font-family: Poppins,sans-serif; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - font-size: 14px; - border-radius: 28px; - width: 100%; - min-width: 235px; - padding: 19px 15px; -} - -.c6:hover:enabled { - --button-state-color: var(--button-main-color-hover); -} - -.c6:active:enabled { - --button-state-color: var(--button-main-color-active); -} - -.c5 { - color: #fff; - background: var(--button-state-color); - border: 1px solid var(--button-state-color); -} - -.c7 { - min-height: var(--icon-size); - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - text-align: center; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - font-weight: 500; - text-transform: uppercase; - line-height: 1; -} - -
-
-
-
- BAT -
-
-
- -
-
-`; diff --git a/src/features/rewards/grantComplete/index.tsx b/src/features/rewards/grantComplete/index.tsx deleted file mode 100644 index 89bffa0c2..000000000 --- a/src/features/rewards/grantComplete/index.tsx +++ /dev/null @@ -1,64 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledWrapper, - StyledBox, - StyledTitle, - StyledValue, - StyledText, - StyledButtonWrapper -} from './style' -import { getLocale } from '../../../helpers' -import Button from '../../../components/buttonsIndicators/button' - -export interface Props { - id?: string - testId?: string - onClose: () => void - amount: string - date: string - isMobile?: boolean - tokenTitle?: string -} - -export default class GrantComplete extends React.PureComponent { - render () { - const { id, testId, onClose, amount, date, isMobile, tokenTitle } = this.props - - return ( - - - {tokenTitle} - {amount} BAT - { - date && date.length > 0 - ? <> - {getLocale('grantExpire')} - {date} - - : null - } - - { - !isMobile && date && date.length > 0 - ? - {getLocale('grantDisclaimer')} - - : null - } - -
-
-`; diff --git a/src/features/rewards/grantError/index.tsx b/src/features/rewards/grantError/index.tsx deleted file mode 100644 index 509fb1645..000000000 --- a/src/features/rewards/grantError/index.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import Button from '../../../components/buttonsIndicators/button' -import { StyledWrapper, StyledText, StyledButton } from './style' - -export interface Props { - id?: string - text?: string - buttonText: string - onButtonClick: () => void -} - -export default class GrantError extends React.PureComponent { - render () { - const { id, text, buttonText, onButtonClick } = this.props - - return ( - - - {text} - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-`; diff --git a/src/features/rewards/grantWrapper/assets/gift.svg b/src/features/rewards/grantWrapper/assets/gift.svg deleted file mode 100644 index 3c41abdd3..000000000 --- a/src/features/rewards/grantWrapper/assets/gift.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/src/features/rewards/grantWrapper/assets/header.tsx b/src/features/rewards/grantWrapper/assets/header.tsx deleted file mode 100644 index e36c4a0f0..000000000 --- a/src/features/rewards/grantWrapper/assets/header.tsx +++ /dev/null @@ -1,151 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public -* License, v. 2.0. If a copy of the MPL was not distributed with this file, -* You can obtain one at http://mozilla.org/MPL/2.0/. -*/ -import * as React from 'react' - -export default ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -) diff --git a/src/features/rewards/grantWrapper/index.tsx b/src/features/rewards/grantWrapper/index.tsx deleted file mode 100644 index 78dcf7d6a..000000000 --- a/src/features/rewards/grantWrapper/index.tsx +++ /dev/null @@ -1,67 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { StyledWrapper, StyledHeader, StyledTitle, StyledClose, StyledText, StyledGrantIcon, StyledPanelText, StyledHint } from './style' -import { CloseCircleOIcon } from '../../../components/icons' -import { getLocale } from '../../../helpers' - -import header from './assets/header' -import giftIconUrl from './assets/gift.svg' - -export interface Props { - id?: string - testId?: string - isPanel?: boolean - onClose: () => void - title: string - fullScreen?: boolean - hint?: string - text: React.ReactNode - children: React.ReactNode -} - -export default class GrantWrapper extends React.PureComponent { - render () { - const { id, testId, isPanel, fullScreen, hint, onClose, title, text, children } = this.props - - return ( - - - - - { - !isPanel - ? - {header} - - : - } - - {title} - - { - !isPanel || !hint - ? - {text} - - : null - } - { - isPanel && hint - ? - {getLocale('captchaDrag')} {hint} {getLocale('captchaTarget')} - - : null - } - {children} - - ) - } -} diff --git a/src/features/rewards/grantWrapper/spec.tsx b/src/features/rewards/grantWrapper/spec.tsx deleted file mode 100644 index f7deb5743..000000000 --- a/src/features/rewards/grantWrapper/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import GrantWrapper from './index' -import { TestThemeProvider } from '../../../theme' - -describe('Grant wrapper 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/src/features/rewards/grantWrapper/style.ts b/src/features/rewards/grantWrapper/style.ts deleted file mode 100644 index e1b992afe..000000000 --- a/src/features/rewards/grantWrapper/style.ts +++ /dev/null @@ -1,97 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from 'styled-components' - -interface StyleProps { - isPanel?: boolean - fullScreen?: boolean -} - -const getBackground = (props: StyleProps) => { - if (props.fullScreen) { - return '#fff' - } - - if (props.isPanel) { - return 'linear-gradient(-180deg, rgba(255, 255, 255, 1) 50%, rgba(228, 242, 255, 1) 100%)' - } - - return 'rgba(255, 255, 255, 0.95)' -} - -export const StyledWrapper = styled('div')` - position: ${p => p.fullScreen ? 'fixed' : 'absolute'}; - top: 0; - left: 0; - z-index: 6; - display: flex; - align-items: stretch; - align-content: flex-start; - flex-wrap: wrap; - overflow: hidden; - width: 100%; - padding: 0 52px 20px; - border-radius: 6px; - height: ${p => (p.fullScreen || p.isPanel) ? '100%' : 'auto'}; - overflow-y: ${p => p.fullScreen ? 'scroll' : 'hidden'}; - background: ${p => getBackground(p)}; -` - -export const StyledHeader = styled<{}, 'div'>('div')` - text-align: center; - width: 100%; - margin: 59px 0; -` - -export const StyledTitle = styled('div')` - width: 100%; - font-size: ${p => p.isPanel ? 20 : 28}px; - font-weight: ${p => p.isPanel ? 'normal' : 500}; - line-height: 1.29; - letter-spacing: -0.2px; - text-align: center; - color: #fb542b; -` - -export const StyledClose = styled<{}, 'button'>('button')` - top: 16px; - right: 16px; - position: absolute; - padding: 0; - border: none; - background: none; - cursor: pointer; - color: #9E9FAB; - width: 20px; - height: 20px; -` - -export const StyledText = styled<{}, 'div'>('div')` - width: 100%; - font-family: Muli, sans-serif; - font-size: 16px; - font-weight: 300; - line-height: 1.63; - text-align: center; - color: #4b4c5c; -` - -export const StyledGrantIcon = styled<{}, 'img'>('img')` - height: 53px; - width: 53px; - margin: 25px auto 15px; -` - -export const StyledPanelText = styled<{}, 'div'>('div')` - padding: 7px; - font-size: 12px; - margin: 7px auto 0px; - background: rgba(241, 241, 245, 0.70); - border-radius: 8px 8px 8px 8px; -` - -export const StyledHint = styled<{}, 'span'>('span')` - font-weight: 600; -` diff --git a/src/features/rewards/hero/__snapshots__/spec.tsx.snap b/src/features/rewards/hero/__snapshots__/spec.tsx.snap deleted file mode 100644 index 2f9931f40..000000000 --- a/src/features/rewards/hero/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Hero tests basic tests matches the snapshot 1`] = ` -.c0 { - text-align: center; - min-height: 610px; - padding: 60px 0 25px 0; - border-top-left-radius: 35px; - border-top-right-radius: 35px; - background: linear-gradient(#392DD1,#8C41DE); - border-bottom-left-radius: 150% 120px; - border-bottom-right-radius: 150% 120px; -} - -@media (max-width:475px) { - .c0 { - padding-top: 35px; - } -} - -
-`; diff --git a/src/features/rewards/hero/index.tsx b/src/features/rewards/hero/index.tsx deleted file mode 100644 index f1b5f29a6..000000000 --- a/src/features/rewards/hero/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { StyledHero } from './style' - -export interface Props { - id?: string - isMobile?: boolean - children?: React.ReactNode -} - -export default class Hero extends React.PureComponent { - render () { - const { id, isMobile, children } = this.props - - return ( - - {children} - - ) - } -} diff --git a/src/features/rewards/hero/spec.tsx b/src/features/rewards/hero/spec.tsx deleted file mode 100644 index a01c956a2..000000000 --- a/src/features/rewards/hero/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import Hero from './index' -import { TestThemeProvider } from '../../../theme' - -describe('Hero 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('#test-hero').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/hero/style.ts b/src/features/rewards/hero/style.ts deleted file mode 100644 index c0400d026..000000000 --- a/src/features/rewards/hero/style.ts +++ /dev/null @@ -1,20 +0,0 @@ -import styled from 'styled-components' - -interface StyleProps { - isMobile?: boolean -} - -export const StyledHero = styled('div')` - text-align: center; - min-height: 610px; - padding: 60px 0 25px 0; - border-top-left-radius: ${p => p.isMobile ? 0 : 35}px; - border-top-right-radius: ${p => p.isMobile ? 0 : 35}px; - background: linear-gradient(#392DD1, #8C41DE); - border-bottom-left-radius: 150% 120px; - border-bottom-right-radius: 150% 120px; - - @media (max-width: 475px) { - padding-top: 35px; - } -` diff --git a/src/features/rewards/index.ts b/src/features/rewards/index.ts deleted file mode 100644 index 34e245377..000000000 --- a/src/features/rewards/index.ts +++ /dev/null @@ -1,123 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import AdRowsDetails from './adRowsDetails' -import Alert from './alert' -import Amount from './amount' -import Box from './box' -import BoxAlert from './boxAlert' -import CategoryLikePicker from './categoryLikePicker' -import DisabledBox from './disabledBox' -import DisabledContent from './disabledContent' -import DisabledPanel from './disabledPanel' -import Donate from './donate' -import DonationOverlay from './donationOverlay' -import GrantCaptcha from './grantCaptcha' -import GrantClaim from './grantClaim' -import GrantComplete from './grantComplete' -import GrantError from './grantError' -import GrantWrapper from './grantWrapper' -import InfoCard from './infoCard' -import List from './list' -import ListToken from './listToken' -import MainToggle from './mainToggle' -import MediaBox from './mediaBox' -import ModalActivity from './modalActivity' -import ModalAddFunds from './modalAddFunds' -import ModalBackupRestore from './modalBackupRestore' -import ModalContribute from './modalContribute' -import ModalDonation from './modalDonation' -import ModalPending from './modalPending' -import ModalRedirect from './modalRedirect' -import ModalShowAdsHistory from './modalShowAdsHistory' -import ModalVerify from './modalVerify' -import NextContribution from './nextContribution' -import PanelWelcome from './panelWelcome' -import Profile from './profile' -import RestoreSites from './restoreSites' -import RewardsButton from './rewardsButton' -import SettingsPage from './settingsPage' -import ShowAdsHistory from './showAdsHistory' -import SiteBanner from './siteBanner' -import Tab from './tab' -import TableAdsHistory from './tableAdsHistory' -import TableContribute from './tableContribute' -import TableDonation from './tableDonation' -import TablePending from './tablePending' -import TableTransactions from './tableTransactions' -import ThumbLikePicker from './thumbLikePicker' -import Tip from './tip' -import ToggleTips from './toggleTips' -import Tokens from './tokens' -import Tooltip from './tooltip' -import WalletEmpty from './walletEmpty' -import WalletOff from './walletOff' -import WalletPanel from './walletPanel' -import WalletPanelDisabled from './walletPanelDisabled' -import WalletPopup from './walletPopup' -import WalletSummary from './walletSummary' -import WalletSummarySlider from './walletSummarySlider' -import WalletWrapper from './walletWrapper' -import WelcomePage from './welcomePage' - -export { - AdRowsDetails, - Alert, - Amount, - Box, - BoxAlert, - CategoryLikePicker, - DisabledBox, - DisabledContent, - DisabledPanel, - DonationOverlay, - Donate, - GrantCaptcha, - GrantClaim, - GrantComplete, - GrantError, - GrantWrapper, - InfoCard, - List, - ListToken, - MainToggle, - MediaBox, - ModalActivity, - ModalAddFunds, - ModalBackupRestore, - ModalContribute, - ModalDonation, - ModalPending, - ModalRedirect, - ModalShowAdsHistory, - ModalVerify, - NextContribution, - PanelWelcome, - Profile, - RestoreSites, - RewardsButton, - SettingsPage, - ShowAdsHistory, - SiteBanner, - Tab, - TableAdsHistory, - TableContribute, - TableDonation, - TablePending, - TableTransactions, - ThumbLikePicker, - Tip, - ToggleTips, - Tokens, - Tooltip, - WalletEmpty, - WalletOff, - WalletPanel, - WalletPanelDisabled, - WalletPopup, - WalletSummary, - WalletSummarySlider, - WalletWrapper, - WelcomePage -} diff --git a/src/features/rewards/infoCard/__snapshots__/spec.tsx.snap b/src/features/rewards/infoCard/__snapshots__/spec.tsx.snap deleted file mode 100644 index 9a318b680..000000000 --- a/src/features/rewards/infoCard/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,7 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Info Cards tests basic tests matches the snapshot 1`] = ` -
-`; diff --git a/src/features/rewards/infoCard/index.tsx b/src/features/rewards/infoCard/index.tsx deleted file mode 100644 index c04c0911a..000000000 --- a/src/features/rewards/infoCard/index.tsx +++ /dev/null @@ -1,58 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' - -import { - StyledTitle, - StyledDesc, - StyledInfoCard, - StyledFigure, - StyledGrid, - StyledColumn -} from './style' - -export interface CardProps { - title?: string - description?: string - icon?: string | JSX.Element -} - -export interface Props { - id?: string - cards?: CardProps[] -} - -export default class InfoCard extends React.PureComponent { - getCards (items: CardProps[]) { - return ( - - {items.map((item: CardProps, index: number) => { - return - - - {item.icon} - - {item.title} - {item.description} - - - })} - - ) - } - - render () { - const { id, cards } = this.props - return ( -
- { - cards - ? this.getCards(cards) - : null - } -
- ) - } -} diff --git a/src/features/rewards/infoCard/spec.tsx b/src/features/rewards/infoCard/spec.tsx deleted file mode 100644 index 9dd494184..000000000 --- a/src/features/rewards/infoCard/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import InfoCards from './index' -import { TestThemeProvider } from '../../../theme' - -describe('Info Cards 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('#info-cards').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/infoCard/style.ts b/src/features/rewards/infoCard/style.ts deleted file mode 100644 index 537b0a71b..000000000 --- a/src/features/rewards/infoCard/style.ts +++ /dev/null @@ -1,58 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from 'styled-components' - -export const StyledInfoCard = styled<{}, 'div'>('div')` - height: 290px; - border-radius: 4px; - text-align: center; - padding: 31px 15px 15px; - background: #fff; - max-width: 275px; - margin: 0 auto; - box-shadow: 0 2 4px rgba(0,0,0,.2); -` - -export const StyledTitle = styled<{}, 'strong'>('strong')` - color: #222326; - font-size: 18px; - font-weight: 500; - line-height: 28px; -` - -export const StyledDesc = styled<{}, 'p'>('p')` - color: #686978; - font-size: 16px; - line-height: 22px; - font-family: Muli, sans-serif; - letter-spacing: 0.16px; - margin: 10px 0 8px; - font-weight: 400; -` - -export const StyledFigure = styled<{}, 'figure'>('figure')` - box-sizing: border-box; - display: block; - max-width: 100%; - margin: 10px auto 20px; - height: 80px; -` - -export const StyledGrid = styled<{}, 'div'>('div')` - display: grid; - grid-gap: 0px; - grid-template-columns: 1fr 1fr 1fr; - align-items: center; - justify-content: center; - - @media (max-width: 640px) { - grid-gap: 20px; - grid-template-columns: 1fr; - } -` - -export const StyledColumn = styled<{}, 'div'>('div')` - padding: 0 10px; -` diff --git a/src/features/rewards/list/__snapshots__/spec.tsx.snap b/src/features/rewards/list/__snapshots__/spec.tsx.snap deleted file mode 100644 index d9342bb80..000000000 --- a/src/features/rewards/list/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,47 +0,0 @@ -// 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 #E5E5EA; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - font-family: Muli,sans-serif; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c1 { - font-size: 16px; - color: #4b4c5c; - padding: 16px 0; - font-weight: 600; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -
-
-
-
-`; diff --git a/src/features/rewards/list/index.tsx b/src/features/rewards/list/index.tsx deleted file mode 100644 index 96d1031c2..000000000 --- a/src/features/rewards/list/index.tsx +++ /dev/null @@ -1,27 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { StyledWrapper, StyledTitle, StyledContentWrapper } from './style' - -export interface Props { - id?: string - title?: string | React.ReactNode - children?: React.ReactNode -} - -export default class List extends React.PureComponent { - render () { - const { id, title, children } = this.props - - return ( - - {title} - - {children} - - - ) - } -} diff --git a/src/features/rewards/list/spec.tsx b/src/features/rewards/list/spec.tsx deleted file mode 100644 index fa67d8d23..000000000 --- a/src/features/rewards/list/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* 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' -import { TestThemeProvider } from '../../../theme' - -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/src/features/rewards/list/style.ts b/src/features/rewards/list/style.ts deleted file mode 100644 index 1ba348eba..000000000 --- a/src/features/rewards/list/style.ts +++ /dev/null @@ -1,25 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from '../../../theme' - -export const StyledWrapper = styled<{}, 'div'>('div')` - position: relative; - display: flex; - border-bottom: solid 1px #E5E5EA; - justify-content: space-between; - font-family: ${p => p.theme.fontFamily.body}; - align-items: center; -` - -export const StyledTitle = styled<{}, 'div'>('div')` - font-size: 16px; - color: #4b4c5c; - padding: 16px 0; - font-weight: 600; -` - -export const StyledContentWrapper = styled<{}, 'div'>('div')` -display: flex; -` diff --git a/src/features/rewards/listToken/__snapshots__/spec.tsx.snap b/src/features/rewards/listToken/__snapshots__/spec.tsx.snap deleted file mode 100644 index 933a9afeb..000000000 --- a/src/features/rewards/listToken/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,122 +0,0 @@ -// 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; - font-family: Muli,sans-serif; -} - -.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 { - --tokens-value-color: #4b4c5c; - --tokens-text-size: 14px; - --tokens-token-size: 14px; - --tokens-tokenNum-size: 14px; -} - -.c4 { - display: inline-block; -} - -.c5 { - color: var(--tokens-value-color); - font-size: var(--tokens-tokenNum-size); -} - -.c6 { - font-size: var(--tokens-token-size); - display: inline-block; - margin-left: 4px; -} - -@media (max-width:385px) { - .c2 { - -webkit-flex-basis: 55%; - -ms-flex-preferred-size: 55%; - flex-basis: 55%; - } -} - -
-
-
- - - - - 10 - - - BAT - - - -
-
-`; diff --git a/src/features/rewards/listToken/index.tsx b/src/features/rewards/listToken/index.tsx deleted file mode 100644 index 039323fb1..000000000 --- a/src/features/rewards/listToken/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { StyledWrapper, StyledTitle, StyledContentWrapper } from './style' -import Tokens, { Size, Type } from '../tokens/index' - -export interface Props { - title: React.ReactNode - value: string - converted: string - id?: string - isNegative?: boolean - size?: Size - color?: Type - border?: 'first' | 'last' | 'default' - testId?: string -} - -export default class ListToken extends React.PureComponent { - static defaultProps = { - border: 'default' - } - - render () { - const { id, title, value, converted, isNegative, size, color, border, testId } = this.props - - return ( - - {title} - - - - - ) - } -} diff --git a/src/features/rewards/listToken/spec.tsx b/src/features/rewards/listToken/spec.tsx deleted file mode 100644 index 97ff95977..000000000 --- a/src/features/rewards/listToken/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* 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' -import { TestThemeProvider } from '../../../theme' - -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/src/features/rewards/listToken/style.ts b/src/features/rewards/listToken/style.ts deleted file mode 100644 index 3ef53157c..000000000 --- a/src/features/rewards/listToken/style.ts +++ /dev/null @@ -1,38 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from '../../../theme' -import { Props } from './index' - -export const StyledWrapper = styled, 'div'>('div')` - position: relative; - display: flex; - border-bottom: ${p => p.border === 'last' ? 'none' : '1px solid #d0d6dc'}; - border-top: ${p => p.border === 'first' ? '1px solid #d0d6dc' : 'none'}; - justify-content: space-between; - align-items: baseline; - align-content: flex-start; - flex-wrap: nowrap; - font-family: ${p => p.theme.fontFamily.body}; -` - -export const StyledTitle = styled<{}, 'div'>('div')` - font-size: 14px; - line-height: 2.79; - color: #4b4c5c; - flex-grow: 1; - flex-shrink: 1; - flex-basis: 60%; -` - -export const StyledContentWrapper = styled<{}, 'div'>('div')` - flex-grow: 1; - flex-shrink: 1; - flex-basis: 40%; - text-align: right; - - @media (max-width: 385px) { - flex-basis: 55%; - } -` diff --git a/src/features/rewards/mainToggle/__snapshots__/spec.tsx.snap b/src/features/rewards/mainToggle/__snapshots__/spec.tsx.snap deleted file mode 100644 index efcfc3e39..000000000 --- a/src/features/rewards/mainToggle/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,245 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MainToggle tests basic tests matches the snapshot 1`] = ` -.c0 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - border-radius: 4px; - background-color: #FFF; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 20px 32px; - margin-bottom: 24px; - width: 100%; - box-shadow: 0 2px 4px rgba(0,0,0,.2); - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - width: 100%; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; -} - -.c5 { - font-size: 28px; - font-weight: 600; - font-family: Poppins,sans-serif; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c11 { - display: block; - margin-top: 20px; - font-family: Muli,sans-serif; -} - -.c12 { - color: #3b3e4f; - font-size: 14px; - font-weight: normal; - -webkit-letter-spacing: 0; - -moz-letter-spacing: 0; - -ms-letter-spacing: 0; - letter-spacing: 0; - line-height: 18px; -} - -.c13 { - cursor: pointer; - color: #4C54D2; - font-weight: 600; -} - -.c3 { - width: 48px; - height: 48px; - margin: 8px; -} - -.c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c8 { - position: relative; - display: block; - height: 24px; - width: 40px; -} - -.c9 { - background: #A7ACB2; - height: 8px; - margin-top: 8px; - width: 100%; - border-radius: 3px; -} - -.c10 { - position: relative; - border-radius: 50%; - -webkit-transition: all .4s ease; - transition: all .4s ease; - --toggle-bullet-size: 20px; - --toggle-bullet-transform: translate(-1px,calc(-50% - 4px)); - --toggle-bullet-background: #CDD1D5; - width: var(--toggle-bullet-size); - height: var(--toggle-bullet-size); - -webkit-transform: var(--toggle-bullet-transform); - -ms-transform: var(--toggle-bullet-transform); - transform: var(--toggle-bullet-transform); - background-color: var(--toggle-bullet-background); - box-shadow: 0 3px 3px rgba(0,0,0,0.05); -} - -.c7 { - color: #838391; - font-size: 14px; - font-family: Muli,sans-serif; - text-align: right; - -webkit-letter-spacing: 0.4px; - -moz-letter-spacing: 0.4px; - -ms-letter-spacing: 0.4px; - letter-spacing: 0.4px; - text-transform: uppercase; - margin: 4px 8px 0 0; - opacity: 1; - -webkit-transition: 100ms ease-out; - transition: 100ms ease-out; -} - -.c4 { - width: 100%; - height: 100%; - fill: currentColor; -} - -
-
-
-
- -
-
- MISSING: braveRewards -
-
-
-
- MISSING: off -
-
-
-
-
-
-
-
- - MISSING: serviceTextToggle - - - MISSING: termsOfService - - - MISSING: and - - - MISSING: privacyPolicy - - . - -
-
-`; diff --git a/src/features/rewards/mainToggle/index.tsx b/src/features/rewards/mainToggle/index.tsx deleted file mode 100644 index 93ce71487..000000000 --- a/src/features/rewards/mainToggle/index.tsx +++ /dev/null @@ -1,65 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - MainToggleWrapper, - StyledTitle, - ToggleHeading, - StyledTOSWrapper, - StyledServiceText, - StyledServiceLink, - StyledLogotypeWrapper, - StyledLogoWrapper -} from './style' -import Toggle from '../../../components/formControls/toggle/index' -import { getLocale } from '../../../helpers' -import { BatColorIcon } from '../../../components/icons' - -export interface Props { - enabled: boolean - onToggle: () => void - id?: string - testId?: string - onTOSClick?: () => void - onPrivacyClick?: () => void -} - -export default class MainToggle extends React.PureComponent { - render () { - const { - id, - enabled, - onToggle, - testId, - onTOSClick, - onPrivacyClick - } = this.props - - return ( - - - - - - - - {getLocale('braveRewards')} - - - - - { - !enabled - ? - - {getLocale('serviceTextToggle')} {getLocale('termsOfService')} {getLocale('and')} {getLocale('privacyPolicy')}. - - - : null - } - - ) - } -} diff --git a/src/features/rewards/mainToggle/spec.tsx b/src/features/rewards/mainToggle/spec.tsx deleted file mode 100644 index f038aabd2..000000000 --- a/src/features/rewards/mainToggle/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* 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' -import { TestThemeProvider } from '../../../theme' - -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/src/features/rewards/mainToggle/style.ts b/src/features/rewards/mainToggle/style.ts deleted file mode 100644 index f6cbc4115..000000000 --- a/src/features/rewards/mainToggle/style.ts +++ /dev/null @@ -1,61 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from '../../../theme' - -export const MainToggleWrapper = styled<{}, 'div'>('div')` - display: flex; - border-radius: 4px; - background-color: #FFF; - justify-content: space-between; - padding: 20px 32px; - margin-bottom: 24px; - width: 100%; - box-shadow: 0 2px 4px rgba(0, 0, 0, .2); - flex-direction: column; -` - -export const ToggleHeading = styled<{}, 'div'>('div')` - display: flex; - align-items: center; - width: 100%; - justify-content: space-between; -` - -export const StyledTitle = styled<{}, 'div'>('div')` - font-size: 28px; - font-weight: 600; - font-family: ${p => p.theme.fontFamily.heading}; -` - -export const StyledLogotypeWrapper = styled('div')` - display: flex; - align-items: center; -` - -export const StyledTOSWrapper = styled<{}, 'div'>('div')` - display: block; - margin-top: 20px; - font-family: Muli, sans-serif; -` - -export const StyledServiceText = styled<{}, 'span'>('span')` - color: ${p => p.theme.palette.grey800}; - font-size: 14px; - font-weight: normal; - letter-spacing: 0; - line-height: 18px; -` - -export const StyledServiceLink = styled<{}, 'a'>('a')` - cursor: pointer; - color: ${p => p.theme.palette.blurple500}; - font-weight: 600; -` - -export const StyledLogoWrapper = styled<{}, 'div'>('div')` -width: 48px; -height: 48px; -margin: 8px; -` diff --git a/src/features/rewards/mediaBox/index.tsx b/src/features/rewards/mediaBox/index.tsx deleted file mode 100644 index fa8cba3b8..000000000 --- a/src/features/rewards/mediaBox/index.tsx +++ /dev/null @@ -1,66 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledMediaBox, - StyledMediaText, - StyledMediaTimestamp, - StyledMediaIcon -} from './style' - -import { - TwitterColorIcon, - RedditColorIcon -} from '../../../components/icons' - -export interface Props { - mediaType: 'twitter' | 'reddit' - mediaText: string - mediaTimestamp: number - mediaTimetext?: string -} - -export default class MediaBox extends React.Component { - formatTimestamp = (timestamp: Date) => { - const dateOptions = { month: 'short', day: 'numeric' } - if (new Date().getFullYear() !== timestamp.getFullYear()) { - (dateOptions as any)['year'] = 'numeric' - } - return timestamp.toLocaleString(navigator.language, dateOptions) - } - - getMediaIcon = () => { - return this.props.mediaType === 'twitter' - ? - : this.props.mediaType === 'reddit' - ? - : null - } - - getMediaTimestamp = () => { - const { mediaType, mediaTimestamp, mediaTimetext } = this.props - return mediaType === 'twitter' - ? this.formatTimestamp(new Date(mediaTimestamp * 1000)) - : mediaType === 'reddit' - ? mediaTimetext - : null - } - - render () { - return ( - - - {this.getMediaIcon()} - - - {this.getMediaTimestamp()} - - - {this.props.mediaText} - - - ) - } -} diff --git a/src/features/rewards/mediaBox/style.ts b/src/features/rewards/mediaBox/style.ts deleted file mode 100644 index 748bd5a43..000000000 --- a/src/features/rewards/mediaBox/style.ts +++ /dev/null @@ -1,35 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import palette from '../../../theme/colors' -import styled from 'styled-components' - -export const StyledMediaBox = styled<{}, 'div'>('div')` - border: 1px solid ${palette.grey400}; - border-radius: 5px; - margin: 15px 0 0 0; - padding: 15px; - text-overflow: ellipsis; - white-space: pre-wrap; - overflow: hidden; -` - -export const StyledMediaTimestamp = styled<{}, 'div'>('div')` - color: ${palette.grey500}; - font-size: 12px; - display: inline; - vertical-align: middle; -` - -export const StyledMediaText = styled<{}, 'p'>('p')` - font-size: 14px; -` - -export const StyledMediaIcon = styled<{}, 'span'>('span')` - width: 22px; - height: 22px; - margin-right: 5px; - display: inline-block; - vertical-align: middle; -` diff --git a/src/features/rewards/mobile/boxMobile/__snapshots__/spec.tsx.snap b/src/features/rewards/mobile/boxMobile/__snapshots__/spec.tsx.snap deleted file mode 100644 index 315aed857..000000000 --- a/src/features/rewards/mobile/boxMobile/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,145 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Box tests basic tests matches the snapshot 1`] = ` -.c1 { - max-width: 100%; - width: 100%; - min-height: auto; - margin: 0; - background-color: #fff; - border-radius: 4px; - box-shadow: 0 2px 4px rgba(0,0,0,.15); - font-size: inherit; - font-family: Muli,sans-serif; - box-sizing: border-box; - position: relative; -} - -.c0 { - margin-bottom: 12px; -} - -.c2 { - display: block; -} - -.c3 { - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - padding: 0 0 0 24px; -} - -.c7 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - padding: 0 24px 0 0; -} - -.c6 { - font-family: Poppins,sans-serif; - font-size: 18px; - font-weight: 600; - color: #4b4c5c; -} - -.c8 { - width: 100%; - display: block; -} - -.c10 { - width: 100%; - font-size: 14px; - line-height: 1.7; - padding: 16px 0; - color: #5e6175; -} - -.c9 { - width: 100%; - padding: 0px 24px; - display: block; -} - -.c4 { - width: 100%; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - z-index: 1; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - padding: 16px 0; - border-bottom: 1px solid #E5E5EA; -} - -
-
-
-
-
-
-
- test -
-
-
-
-
-
-
-
-
-
-
-
-`; diff --git a/src/features/rewards/mobile/boxMobile/index.tsx b/src/features/rewards/mobile/boxMobile/index.tsx deleted file mode 100644 index 9a64890fc..000000000 --- a/src/features/rewards/mobile/boxMobile/index.tsx +++ /dev/null @@ -1,334 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledCard, - StyledLeft, - StyledRight, - StyledDescription, - StyledContent, - StyledTitle, - StyledBreak, - StyledContentWrapper, - StyledFlip, - StyleDetailsLink, - StyledDetailContent, - StyledSettingsListTitle, - StyledArrow, - StyledToggleHeader, - StyledBackArrow, - StyledFullSizeWrapper, - StyledDetailInfo, - StyledSettingsContent, - StyledSettingsHeader, - StyledSettingsTitle, - StyledSettingsClose, - StyledChildContent, - StyledSettingsIcon, - StyledSettingsText, - StyledToggleWrapper, - StyledMobileListWrapper -} from './style' -import { - ArrowLeftIcon, - CaratRightIcon, - CloseStrokeIcon, - SettingsIcon -} from '../../../../components/icons' -import { List } from '../../' -import { getLocale } from '../../../../helpers' -import Toggle from '../../../../components/formControls/toggle/index' - -export type Type = 'ads' | 'contribute' | 'donation' - -export interface Props { - type: Type - id?: string - title: string - description?: string - settingsChild?: React.ReactNode - children?: React.ReactNode - toggle?: boolean - checked?: boolean - toggleAction?: () => void -} - -interface State { - detailView: boolean - settings: boolean -} - -export default class BoxMobile extends React.PureComponent { - constructor (props: Props) { - super(props) - this.state = { - detailView: false, - settings: false - } - } - - componentDidMount () { - this.handleUrl() - window.addEventListener('popstate', (e) => { - this.handleUrl() - }) - } - - handleUrl = () => { - const path = window.location.pathname - // Index view, no need to do anything here - if (path === '/') { - this.setState({ - detailView: false, - settings: false - }) - return - } - - const { type } = this.props - const typeString = `/${type}` - const settingsString = `/${type}-settings` - - if (path === typeString) { - this.setView('detailView', false) - } else if (path === settingsString) { - this.setView('settings', false) - } - } - - /* - * Sets state given the view that should be shown. - * - * When user is on the index page: (brave://rewards) - * (state) { detailView: false, settings: false } - * - * When user is on a detail view: (brave://rewards/ads) - * (state) { detailView: true, settings: false } - * - * When user is on a settings view: (brave://rewards/ads-settings) - * (state) { detailView: true, settings: true } - */ - setView = (view: string, updateHistory: boolean = true) => { - let isDetailView - let isSettingsView - - switch (view) { - case 'detailView': - isDetailView = true - isSettingsView = false - break - case 'settings': - isDetailView = true - isSettingsView = true - break - default: - isDetailView = false - isSettingsView = false - break - } - - this.setState({ - detailView: isDetailView, - settings: isSettingsView - }) - - if (updateHistory) { - let newPath = '' - const { type } = this.props - - if (!isSettingsView && !isDetailView) { - newPath = '/' - } else if (isSettingsView) { - newPath = `/${type}-settings` - } else if (isDetailView) { - newPath = `/${type}` - } - - window.history.pushState(null, '', newPath) - } - } - - onToggle = () => { - if (this.props.checked) { - this.setState({ - detailView: false, - settings: false - }) - } - - if (this.props.toggleAction) { - this.props.toggleAction() - } - } - - getSettingsTitle = (title: string) => { - return `${title} ${getLocale('settings')}` - } - - getToggleHeader = (props: Props) => { - const { - title, - type, - checked, - toggle - } = props - const isDetailView = checked && this.state.detailView - - return ( - - - { - isDetailView - ? - - - : null - } - - {title} - - - - { - toggle ? - - - - : null - } - - - ) - } - - getBoxContent = () => { - const { checked } = this.props - - if (!checked || this.state.detailView) { - return null - } - - return ( - - - {getLocale('viewDetails')} - - - - - - ) - } - - getSettingsListTitle = () => { - return ( - - - - {getLocale('settings')} - - - - - - - ) - } - - getSettingsContent = (show?: boolean) => { - const { title, settingsChild } = this.props - - if (!show || !settingsChild) { - return null - } - - return ( - - - - - - - {this.getSettingsTitle(title)} - - - - - - - {settingsChild} - - - ) - } - - getDetailContent = (show?: boolean) => { - const { children, settingsChild } = this.props - - if (!show) { - return null - } - - return ( - - {this.getToggleHeader(this.props)} - - - - {this.props.description} - - - - { - settingsChild - ? - : null - } - {children} - - - - ) - } - - render () { - const { - id, - description, - checked - } = this.props - - const showDetailView = checked && this.state.detailView - const showSettingsView = checked && this.state.settings - - return ( - - - - {this.getToggleHeader(this.props)} - - - - {description} - - - {this.getBoxContent()} - - - {this.getDetailContent(showDetailView)} - {this.getSettingsContent(showSettingsView)} - - ) - } -} diff --git a/src/features/rewards/mobile/boxMobile/spec.tsx b/src/features/rewards/mobile/boxMobile/spec.tsx deleted file mode 100644 index 2a3fcefd6..000000000 --- a/src/features/rewards/mobile/boxMobile/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import BoxMobile from './index' -import { TestThemeProvider } from '../../../../theme' - -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/src/features/rewards/mobile/boxMobile/style.tsx b/src/features/rewards/mobile/boxMobile/style.tsx deleted file mode 100644 index d94da5635..000000000 --- a/src/features/rewards/mobile/boxMobile/style.tsx +++ /dev/null @@ -1,234 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import styled, { css } from '../../../../theme' -import { Type } from './index' -import Card, { CardProps } from '../../../../components/layout/card' - -interface StyleProps { - open?: boolean - float?: string - type?: Type - enabled?: boolean - detailView?: boolean - contentShown?: boolean -} - -const colors: Record = { - ads: '#C12D7C', - contribute: '#9F22A1', - donation: '#696FDC' -} - -const getFixedStyling = (detailView?: boolean) => { - if (!detailView) { - return null - } - - return css` - top: 0px; - left: 0px; - position: fixed; - background: #fff; - ` -} - -const CustomCard: React.FC = (props) => - - -export const StyledCard = styled(CustomCard)` - margin-bottom: 12px; -` - -export const StyledFlip = styled<{}, 'div'>('div')` - display: block; -` - -export const StyledContentWrapper = styled('div')` - flex-direction: column; - display: ${p => p.open ? 'flex' : 'none'}; -` - -export const StyledLeft = styled<{}, 'div'>('div')` - display: flex; - align-items: center; - padding: 0 0 0 24px; -` - -export const StyledRight = styled<{}, 'div'>('div')` - display: flex; - padding: 0 24px 0 0; -` - -export const StyledTitle = styled('div')` - font-family: ${p => p.theme.fontFamily.heading}; - font-size: 18px; - font-weight: 600; - color: ${p => { - if (p.enabled === false) return '#838391' - return p.type && colors[p.type] || '#4b4c5c' - }}; -` - -export const StyledBreak = styled<{}, 'div'>('div')` - width: 100%; - display: block; -` - -export const StyledDescription = styled('div')` - width: 100%; - font-size: 14px; - line-height: 1.7; - padding: 16px 0; - color: ${p => p.theme.color.text}; -` - -export const StyledContent = styled('div')` - flex-basis: 100%; - flex-grow: 1; - text-align: ${p => p.contentShown ? 'default' : 'center'}; -` - -export const StyledSettingsWrapper = styled('div')` - background: #fff; - overflow: hidden; - display: ${p => p.open ? 'block' : 'none'}; -` - -export const StyledSettingsClose = styled<{}, 'button'>('button')` - display: block; - position: absolute; - right: 16px; - top: 16px; - width: 20px; - height: 20px; - border: none; - background: none; - padding: 0; - cursor: pointer; - color: ${p => p.theme.palette.grey600}; -` - -export const StyledSettingsTitle = styled<{}, 'span'>('span')` - color: #4B4C5C; - font-size: 16px; - font-weight: 600; - width: 100%; - text-align: center; -` - -export const StyledSettingsText = styled<{}, 'div'>('div')` - color: #4B4C5C; - font-size: 16px; - font-weight: 600; - display: flex; - align-items: center; -` - -export const StyleDetailsLink = styled<{}, 'a'>('a')` - color: #4C54D2; - font-size: 14px; - display: flex; - align-items: center; - justify-content: center; - padding: 16px; - font-weight: 600; -` - -export const StyledDetailInfo = styled<{}, 'div'>('div')` - width: 100%; - padding: 0px 24px; - display: block; -` - -export const StyledDetailContent = styled<{}, 'div'>('div')` - display: flex; - flex-direction: column; -` - -export const StyledChildContent = styled<{}, 'div'>('div')` - width: 100%; - display: flex; - flex-direction: column; - border-top: 1px solid #E5E5EA; -` - -export const StyledSettingsContent = styled<{}, 'div'>('div')` - width: 100%; - padding: 24px; - display: flex; - flex-direction: column; -` - -export const StyledSettingsHeader = styled<{}, 'div'>('div')` - width: 100%; - display: flex; - padding: 0 24px; -` - -export const StyledSettingsListTitle = styled<{}, 'span'>('span')` - font-size: 16px; - width: 100%; - display: flex; - justify-content: space-between; -` - -export const StyledArrow = styled<{}, 'span'>('span')` - color: #4C54D2; - height: 16px; - width: 16px; - margin: 4px; -` - -export const StyledToggleHeader = styled('div')` - width: 100%; - display: flex; - align-items: center; - ${p => getFixedStyling(p.detailView)} - z-index: 1; - justify-content: space-between; - padding: 16px 0; - border-bottom: 1px solid #E5E5EA; -` - -export const StyledBackArrow = styled<{}, 'span'>('span')` - height: 24px; - width: 24px; - margin: 0 8px 0 0; -` - -export const StyledFullSizeWrapper = styled<{}, 'div'>('div')` - display: block; - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: #fff; - z-index: 999; - overflow-y: scroll; - padding: 64px 0 0; -` - -export const StyledSettingsIcon = styled<{}, 'button'>('button')` - width: 24px; - height: 24px; - border: none; - background: none; - padding: 0; - cursor: pointer; - color: #A1A8F2; - position: absolute; - right: 24px; - top: 16px; -` - -export const StyledToggleWrapper = styled('div')` - display: flex; -` - -export const StyledMobileListWrapper = styled<{}, 'div'>('div')` - padding: 0 24px; -` diff --git a/src/features/rewards/mobile/index.ts b/src/features/rewards/mobile/index.ts deleted file mode 100644 index 34bc0c5ee..000000000 --- a/src/features/rewards/mobile/index.ts +++ /dev/null @@ -1,17 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import BoxMobile from './boxMobile' -import MainToggleMobile from './mainToggleMobile' -import SelectMobile from './selectMobile' -import SettingsPageMobile from './settingsPageMobile' -import WalletInfoHeader from './walletInfoHeader' - -export { - BoxMobile, - MainToggleMobile, - SelectMobile, - SettingsPageMobile, - WalletInfoHeader -} diff --git a/src/features/rewards/mobile/mainToggleMobile/__snapshots__/spec.tsx.snap b/src/features/rewards/mobile/mainToggleMobile/__snapshots__/spec.tsx.snap deleted file mode 100644 index 4ea4e6e67..000000000 --- a/src/features/rewards/mobile/mainToggleMobile/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,201 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`MainToggleMobile tests basic tests matches the snapshot 1`] = ` -.c0 { - font-family: Muli,sans-serif; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - width: 100%; - background-color: #fff; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: fixed; - top: 0; - left: 0; - height: 61px; - z-index: 2; - box-shadow: 0 2px 4px rgba(0,0,0,0.2); - padding: 0 16px; -} - -.c1 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c5 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c4 { - color: #4B4C5C; - font-size: 22px; - font-weight: 600; - font-family: Poppins,sans-serif; -} - -.c2 { - width: 24px; - height: 24px; - margin: 8px; -} - -.c6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; -} - -.c8 { - position: relative; - display: block; - height: 24px; - width: 40px; -} - -.c9 { - background: #A7ACB2; - height: 8px; - margin-top: 8px; - width: 100%; - border-radius: 3px; -} - -.c10 { - position: relative; - border-radius: 50%; - -webkit-transition: all .4s ease; - transition: all .4s ease; - --toggle-bullet-size: 20px; - --toggle-bullet-transform: translate(-1px,calc(-50% - 4px)); - --toggle-bullet-background: #CDD1D5; - width: var(--toggle-bullet-size); - height: var(--toggle-bullet-size); - -webkit-transform: var(--toggle-bullet-transform); - -ms-transform: var(--toggle-bullet-transform); - transform: var(--toggle-bullet-transform); - background-color: var(--toggle-bullet-background); - box-shadow: 0 3px 3px rgba(0,0,0,0.05); -} - -.c7 { - color: #838391; - font-size: 14px; - font-family: Muli,sans-serif; - text-align: right; - -webkit-letter-spacing: 0.4px; - -moz-letter-spacing: 0.4px; - -ms-letter-spacing: 0.4px; - letter-spacing: 0.4px; - text-transform: uppercase; - margin: 4px 8px 0 0; - opacity: 1; - -webkit-transition: 100ms ease-out; - transition: 100ms ease-out; -} - -.c3 { - width: 100%; - height: 100%; - fill: currentColor; -} - -@media (max-width:375px) { - .c4 { - word-wrap: break-word; - } -} - -
-
-
- -
-
- MISSING: braveRewards -
-
-
-
-
- MISSING: off -
-
-
-
-
-
-
-
-`; diff --git a/src/features/rewards/mobile/mainToggleMobile/index.tsx b/src/features/rewards/mobile/mainToggleMobile/index.tsx deleted file mode 100644 index 68cd17102..000000000 --- a/src/features/rewards/mobile/mainToggleMobile/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License, v. 2.0. If a copy of the MPL was not distributed with this file, - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import * as React from 'react' -import { - StyledWrapper, - StyledTitle, - StyledLeft, - StyledRight, - StyledLogoWrapper -} from './style' -import Toggle from '../../../../components/formControls/toggle/index' -import { getLocale } from '../../../../helpers' -import { BatColorIcon } from '../../../../components/icons' - -export interface Props { - enabled: boolean - onToggle: () => void - id?: string - testId?: string -} - -export default class MainToggleMobile extends React.PureComponent { - render () { - const { id, enabled, onToggle, testId } = this.props - - return ( - - - - - - - {getLocale('braveRewards')} - - - - - - - ) - } -} diff --git a/src/features/rewards/mobile/mainToggleMobile/spec.tsx b/src/features/rewards/mobile/mainToggleMobile/spec.tsx deleted file mode 100644 index 261c91882..000000000 --- a/src/features/rewards/mobile/mainToggleMobile/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import MainToggleMobile from './index' -import { TestThemeProvider } from '../../../../theme' - -describe('MainToggleMobile 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('#mainToggleMobile').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/mobile/mainToggleMobile/style.ts b/src/features/rewards/mobile/mainToggleMobile/style.ts deleted file mode 100644 index f6c381610..000000000 --- a/src/features/rewards/mobile/mainToggleMobile/style.ts +++ /dev/null @@ -1,47 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from '../../../../theme' - -export const StyledWrapper = styled<{}, 'div'>('div')` - font-family: ${p => p.theme.fontFamily.body}; - display: flex; - width: 100%; - background-color: #fff; - justify-content: space-between; - align-items: center; - position: fixed; - top: 0; - left: 0; - height: 61px; - z-index: 2; - box-shadow: 0 2px 4px rgba(0,0,0, 0.2); - padding: 0 16px; -` - -export const StyledLeft = styled<{}, 'div'>('div')` - display: flex; - align-items: center; -` - -export const StyledRight = styled<{}, 'div'>('div')` - display: flex; -` - -export const StyledTitle = styled<{}, 'div'>('div')` - color: #4B4C5C; - font-size: 22px; - font-weight: 600; - font-family: ${p => p.theme.fontFamily.heading}; - - @media (max-width: 375px) { - word-wrap: break-word; - } -` - -export const StyledLogoWrapper = styled<{}, 'div'>('div')` - width: 24px; - height: 24px; - margin: 8px; -` diff --git a/src/features/rewards/mobile/selectMobile/__snapshots__/spec.tsx.snap b/src/features/rewards/mobile/selectMobile/__snapshots__/spec.tsx.snap deleted file mode 100644 index 9c819a6df..000000000 --- a/src/features/rewards/mobile/selectMobile/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,21 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`SelectMobile tests basic tests matches the snapshot 1`] = ` -.c0 { - width: 100%; - background: #fff; - height: 34px; - font-size: 14px; - border: 1px solid #DFDFE8; - text-align-last: left; -} - -.c0:focus { - outline: 0; -} - - - { - Object.keys(months).map((item: string) => { - return
- {months[item]} -
- }) - } - - - : null - } - { - openBalance && closingBalance - ? - - - {getLocale('closeBalance')}} - value={closingBalance.value} - converted={closingBalance.converted} - color={'contribute'} - border={'last'} - /> - - - : null - } - - - - - - - - - {getLocale('print')} - - - - - - {getLocale('downloadPDF')} - - - {this.getSummaryBox()} - - - { - this.hasWarnings - ? - - - - - {getLocale('paymentNotMade')} {getLocale('paymentWarning')} - - - : null - } - - {getLocale('transactions')} - - - {getLocale('contributeAllocation')} - - {getLocale('paymentMonthly', { day: paymentDay })} - - - - - - - - {getLocale('braveVerified')} - - - - {getLocale('pleaseNote')} {getLocale('activityNote')} -

- {getLocale('activityCopy')} - - - - ) - } -} diff --git a/src/features/rewards/modalActivity/spec.tsx b/src/features/rewards/modalActivity/spec.tsx deleted file mode 100644 index 2a29d8297..000000000 --- a/src/features/rewards/modalActivity/spec.tsx +++ /dev/null @@ -1,24 +0,0 @@ -/* global jest, expect, describe, it, afterEach */ -import * as React from 'react' -import { shallow } from 'enzyme' -import { create } from 'react-test-renderer' -import ModalActivity from './index' -import { TestThemeProvider } from '../../../theme' - -describe('ModalActivity 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('#activity').length - expect(assertion).toBe(1) - }) - }) -}) diff --git a/src/features/rewards/modalActivity/style.ts b/src/features/rewards/modalActivity/style.ts deleted file mode 100644 index df640b010..000000000 --- a/src/features/rewards/modalActivity/style.ts +++ /dev/null @@ -1,166 +0,0 @@ -/* This Source Code Form is subject to the terms of the Mozilla Public - * License. v. 2.0. If a copy of the MPL was not distributed with this file. - * You can obtain one at http://mozilla.org/MPL/2.0/. */ - -import styled from '../../../theme' - -export const StyledWrapper = styled<{}, 'div'>('div')` - font-family: ${p => p.theme.fontFamily.body}; -` - -export const StyledTitle = styled<{}, 'div'>('div')` - font-weight: 600; - color: #1B1D2F; - font-family: ${p => p.theme.fontFamily.heading}; - font-size: 16px; - line-height: 2; -` - -export const StyledSubTitle = styled<{}, 'span'>('span')` - color: #838391; - font-weight: normal; -` - -export const StyledHeader = styled<{}, 'div'>('div')` - display: flex; - width: 100%; - justify-content: space-between; -` - -export const StyledLeft = styled<{}, 'div'>('div')` - flex-basis: 40%; -` - -export const StyledRight = styled<{}, 'div'>('div')` - flex-basis: 378px; - flex-grow: 0; - flex-shrink: 1; - margin-bottom: 45px; -` - -export const StyledSelectOption = styled<{}, 'div'>('div')` - font-size: 22px; - font-weight: 300; - color: #4C54D2; -` - -export const StyledIconWrap = styled<{}, 'div'>('div')` - margin-bottom: 103px; - display: flex; -` - -export const StyledIcon = styled<{}, 'button'>('button')` - display: flex; - margin-right: 35px; - background: none; - border: none; - cursor: pointer; - align-items: center; -` - -export const StyledIconText = styled<{}, 'div'>('div')` - font-size: 14px; - line-height: 1.43; - color: #838391; - margin-left: 13px; -` - -export const StyledBalance = styled<{}, 'div'>('div')` - margin-top: 41px; -` - -export const StyledTables = styled<{}, 'div'>('div')` - background-color: #f9f9fd; - margin: 0 -50px; - padding: 0 50px; -` - -export const StyledWarning = styled<{}, 'div'>('div')` - display: flex; - justify-content: center; - border-top: 1px solid #ebecf0; - margin: 0 -50px; - padding: 17px 50px 0; - align-items: flex-start; -` - -export const StyledWarningText = styled<{}, 'div'>('div')` - max-width: 508px; - font-family: Muli, sans-serif; - font-size: 12px; - font-weight: 300; - line-height: 1.5; - color: #686978; - padding-left: 8px; -` - -export const StyledNote = styled<{}, 'div'>('div')` - max-width: 508px; - margin-top: 46px; - font-family: Muli, sans-serif; - font-size: 12px; - font-weight: 300; - line-height: 1.5; - color: #686978; -` - -export const StyledTableTitle = styled<{}, 'div'>('div')` - display: flex; - justify-content: space-between; - font-size: 14px; - font-weight: 600; - line-height: 2.79; - letter-spacing: 0.2px; - color: #4b4c5c; - text-transform: uppercase; - padding-top: 14px; - margin-top: 28px; -` - -export const StyledTableSubTitle = styled<{}, 'div'>('div')` - font-size: 14px; - font-weight: 300; - line-height: 2.79; - letter-spacing: 0.2px; - color: #4b4c5c; - text-transform: none; -` - -export const StyledVerified = styled<{}, 'div'>('div')` - display: flex; - font-size: 12px; - align-items: center; - line-height: 2; - color: #9e9fab; - padding: 11px 0 32px; -` - -export const StyledVerifiedText = styled<{}, 'div'>('div')` - margin-left: 5px; -` - -export const StyledClosing = styled<{}, 'div'>('div')` - margin-top: -10px; -` - -export const StyledActionIcon = styled<{}, 'span'>('span')` - color: #A1A8F2; - width: 27px; -` - -export const StyledAlertWrapper = styled<{}, 'div'>('div')` - color: #E9AB18; - width: 20px; - margin-left: 3px; -` - -export const StyledWarningWrapper = styled<{}, 'div'>('div')` - display: flex; -` - -export const StyledVerifiedIcon = styled<{}, 'div'>('div')` - display: flex; - color: #392DD1; - width: 24px; - height: 24px; -` diff --git a/src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap b/src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap deleted file mode 100644 index 8d05a5297..000000000 --- a/src/features/rewards/modalAddFunds/__snapshots__/spec.tsx.snap +++ /dev/null @@ -1,169 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ModalAddFunds tests basic tests matches the snapshot 1`] = ` -.c5 { - font-family: Poppins,sans-serif; -} - -.c6 { - font-size: 32px; - font-weight: 500; - color: #4b4c5c; - margin-bottom: 10px; - line-height: 1.3; -} - -.c9 { - max-width: 508px; - font-family: Muli,sans-serif; - font-size: 12px; - font-weight: 300; - line-height: 1.5; - color: #686978; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin: 0 -15px; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; -} - -.c10 { - color: #4c54d2; - -webkit-text-decoration: none; - text-decoration: none; -} - -.c10:hover { - -webkit-text-decoration: underline; - text-decoration: underline; -} - -.c7 { - margin-bottom: 30px; - padding: 0; - font-size: 15px; - line-height: 1.4; -} - -.c0 { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100vh; - background: rgba(12,13,33,0.85); - z-index: 99; - padding: 0 20px; - overflow: hidden; -} - -.c1 { - max-width: 920px; - margin: 52px auto; - background: #fff; - border-radius: 6px; - overflow: hidden; - position: relative; -} - -.c2 { - position: absolute; - top: 20px; - right: 20px; - cursor: pointer; - width: 20px; - height: 20px; - color: #9E9FAB; -} - -.c4 { - padding: 48px 48px; - overflow-y: auto; - max-height: calc(100vh - 100px); -} - -.c3 { - width: 100%; - height: 100%; - fill: currentColor; -} - -