2018-11-28 14:02:42 -08:00
|
|
|
// @flow
|
2019-02-04 20:41:45 -08:00
|
|
|
|
2019-02-06 19:06:48 -08:00
|
|
|
import React, { Fragment, type Node } from 'react';
|
2018-11-28 20:14:44 -08:00
|
|
|
import theme from 'styled-theming';
|
2018-11-28 18:45:37 -08:00
|
|
|
import { ThemeProvider, createGlobalStyle } from 'styled-components';
|
|
|
|
// $FlowFixMe
|
2018-11-28 20:14:44 -08:00
|
|
|
import { normalize } from 'polished'; // eslint-disable-line
|
2018-11-28 14:02:42 -08:00
|
|
|
|
|
|
|
import { DARK } from './constants/themes';
|
|
|
|
|
2019-01-15 18:02:04 -08:00
|
|
|
const darkOne = '#F4B728';
|
2019-01-21 10:47:57 -08:00
|
|
|
const blackTwo = '#171717';
|
2018-12-04 20:26:03 -08:00
|
|
|
const lightOne = '#ffffff';
|
2018-12-11 15:41:08 -08:00
|
|
|
const brandOne = '#000';
|
2019-01-20 10:57:27 -08:00
|
|
|
const brandThree = '#5d5d65';
|
2019-01-23 12:59:30 -08:00
|
|
|
const buttonBorderColor = '#3e3c42';
|
2019-01-15 18:02:04 -08:00
|
|
|
const activeItem = '#F4B728';
|
2018-12-10 12:50:31 -08:00
|
|
|
const text = '#FFF';
|
|
|
|
const cardBackgroundColor = '#000';
|
2018-12-11 15:41:08 -08:00
|
|
|
const sidebarLogoGradientBegin = '#F4B728';
|
|
|
|
const sidebarLogoGradientEnd = '#FFE240';
|
2018-12-12 11:48:08 -08:00
|
|
|
const sidebarHoveredItem = '#1C1C1C';
|
2019-01-20 10:57:27 -08:00
|
|
|
const sidebarHoveredItemLabel = '#8e8e96';
|
2018-12-11 16:34:38 -08:00
|
|
|
const background = '#212124';
|
2018-12-12 13:11:28 -08:00
|
|
|
const transactionSent = '#FF6C6C';
|
|
|
|
const transactionReceived = '#6AEAC0';
|
2018-12-13 09:18:40 -08:00
|
|
|
const transactionsDate = '#777777';
|
2018-12-15 14:35:29 -08:00
|
|
|
const transactionsItemHovered = '#222222';
|
2018-12-20 09:13:52 -08:00
|
|
|
const selectButtonShadow = 'rgba(238,201,76,0.65)';
|
2019-01-17 11:40:27 -08:00
|
|
|
const statusPillLabel = '#727272';
|
2018-12-19 08:58:09 -08:00
|
|
|
const transactionsDetailsLabel = transactionsDate;
|
2018-12-04 20:26:03 -08:00
|
|
|
|
2019-02-06 19:06:48 -08:00
|
|
|
const appTheme: AppTheme = {
|
2018-11-28 14:02:42 -08:00
|
|
|
mode: DARK,
|
2018-12-20 11:13:49 -08:00
|
|
|
fontFamily: 'Roboto',
|
2018-12-12 11:01:30 -08:00
|
|
|
fontWeight: {
|
|
|
|
bold: 700,
|
|
|
|
default: 400,
|
2018-12-21 04:13:43 -08:00
|
|
|
light: 300,
|
2018-12-12 11:01:30 -08:00
|
|
|
},
|
|
|
|
fontSize: {
|
2018-12-21 04:13:43 -08:00
|
|
|
large: 1.25,
|
|
|
|
medium: 1.125,
|
|
|
|
regular: 0.84375,
|
|
|
|
small: 0.667,
|
2018-12-12 11:01:30 -08:00
|
|
|
},
|
2018-11-28 14:02:42 -08:00
|
|
|
colors: {
|
|
|
|
primary: theme('mode', {
|
2018-12-04 20:26:03 -08:00
|
|
|
light: lightOne,
|
|
|
|
dark: darkOne,
|
2018-11-28 20:14:44 -08:00
|
|
|
}),
|
2018-12-05 10:12:50 -08:00
|
|
|
secondary: theme('mode', {
|
|
|
|
light: darkOne,
|
|
|
|
dark: lightOne,
|
|
|
|
}),
|
2019-02-08 20:59:21 -08:00
|
|
|
sidebarBg: theme('mode', {
|
|
|
|
light: brandOne,
|
|
|
|
dark: brandOne,
|
|
|
|
}),
|
|
|
|
sidebarItem: theme('mode', {
|
|
|
|
light: brandThree,
|
|
|
|
dark: brandThree,
|
|
|
|
}),
|
|
|
|
sidebarItemActive: theme('mode', {
|
|
|
|
light: activeItem,
|
|
|
|
dark: activeItem,
|
|
|
|
}),
|
|
|
|
sidebarHoveredItem: theme('mode', {
|
|
|
|
light: sidebarHoveredItem,
|
|
|
|
dark: sidebarHoveredItem,
|
|
|
|
}),
|
|
|
|
sidebarHoveredItemLabel: theme('mode', {
|
|
|
|
light: sidebarHoveredItemLabel,
|
|
|
|
dark: sidebarHoveredItemLabel,
|
|
|
|
}),
|
|
|
|
cardBackgroundColor: theme('mode', {
|
|
|
|
light: cardBackgroundColor,
|
|
|
|
dark: cardBackgroundColor,
|
|
|
|
}),
|
|
|
|
text: theme('mode', {
|
|
|
|
light: '#000',
|
|
|
|
dark: text,
|
|
|
|
}),
|
|
|
|
activeItem: theme('mode', {
|
|
|
|
light: activeItem,
|
|
|
|
dark: activeItem,
|
|
|
|
}),
|
|
|
|
inactiveItem: theme('mode', {
|
|
|
|
light: brandThree,
|
|
|
|
dark: brandThree,
|
|
|
|
}),
|
|
|
|
sidebarLogoGradientBegin: theme('mode', {
|
|
|
|
light: sidebarLogoGradientBegin,
|
|
|
|
dark: sidebarLogoGradientBegin,
|
|
|
|
}),
|
|
|
|
sidebarLogoGradientEnd: theme('mode', {
|
|
|
|
light: sidebarLogoGradientEnd,
|
|
|
|
dark: sidebarLogoGradientEnd,
|
|
|
|
}),
|
|
|
|
background: theme('mode', {
|
|
|
|
light: '#FFF',
|
|
|
|
dark: background,
|
|
|
|
}),
|
|
|
|
transactionSent: theme('mode', {
|
|
|
|
light: transactionSent,
|
|
|
|
dark: transactionSent,
|
|
|
|
}),
|
|
|
|
transactionReceived: theme('mode', {
|
|
|
|
light: transactionReceived,
|
|
|
|
dark: transactionReceived,
|
|
|
|
}),
|
|
|
|
transactionsDate: theme('mode', {
|
|
|
|
light: transactionsDate,
|
|
|
|
dark: transactionsDate,
|
|
|
|
}),
|
|
|
|
transactionsItemHovered: theme('mode', {
|
|
|
|
light: transactionsItemHovered,
|
|
|
|
dark: transactionsItemHovered,
|
|
|
|
}),
|
|
|
|
inputBackground: theme('mode', {
|
|
|
|
light: brandOne,
|
|
|
|
dark: brandOne,
|
|
|
|
}),
|
|
|
|
selectButtonShadow: theme('mode', {
|
|
|
|
light: selectButtonShadow,
|
|
|
|
dark: selectButtonShadow,
|
|
|
|
}),
|
|
|
|
transactionsDetailsLabel: theme('mode', {
|
|
|
|
light: transactionsDetailsLabel,
|
|
|
|
dark: transactionsDetailsLabel,
|
|
|
|
}),
|
|
|
|
statusPillLabel: theme('mode', {
|
|
|
|
light: statusPillLabel,
|
|
|
|
dark: statusPillLabel,
|
|
|
|
}),
|
|
|
|
modalItemLabel: theme('mode', {
|
|
|
|
light: transactionsDate,
|
|
|
|
dark: transactionsDate,
|
|
|
|
}),
|
|
|
|
blackTwo: theme('mode', {
|
|
|
|
light: blackTwo,
|
|
|
|
dark: blackTwo,
|
|
|
|
}),
|
|
|
|
buttonBorderColor: theme('mode', {
|
|
|
|
light: buttonBorderColor,
|
|
|
|
dark: buttonBorderColor,
|
|
|
|
}),
|
2018-11-28 14:02:42 -08:00
|
|
|
},
|
2019-01-10 19:30:46 -08:00
|
|
|
sidebarWidth: '180px',
|
2018-12-12 11:01:30 -08:00
|
|
|
headerHeight: '60px',
|
2019-01-10 19:30:46 -08:00
|
|
|
layoutPaddingLeft: '35px',
|
|
|
|
layoutPaddingRight: '35px',
|
2018-12-19 13:39:46 -08:00
|
|
|
layoutContentPaddingTop: '20px',
|
2019-01-10 19:30:46 -08:00
|
|
|
boxBorderRadius: '3px',
|
|
|
|
transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
|
2018-11-28 14:02:42 -08:00
|
|
|
};
|
2018-11-28 17:54:08 -08:00
|
|
|
|
2018-12-10 16:08:20 -08:00
|
|
|
export const GlobalStyle = createGlobalStyle`
|
|
|
|
${normalize()}
|
|
|
|
|
|
|
|
* {
|
|
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
|
|
`;
|
2018-12-10 13:23:21 -08:00
|
|
|
|
2019-02-06 19:06:48 -08:00
|
|
|
export const DoczWrapper = ({ children }: { children: () => Node<*> }) => (
|
2018-12-10 13:23:21 -08:00
|
|
|
<ThemeProvider theme={appTheme}>
|
|
|
|
<Fragment>
|
|
|
|
<GlobalStyle />
|
|
|
|
{children()}
|
|
|
|
</Fragment>
|
|
|
|
</ThemeProvider>
|
|
|
|
);
|
2018-11-28 18:45:37 -08:00
|
|
|
|
2019-01-29 07:36:13 -08:00
|
|
|
// eslint-disable-next-line
|
2018-11-28 18:45:37 -08:00
|
|
|
export default appTheme;
|