zecfoundation
/
zepio
mirror of https://github.com/ZcashFoundation/zepio.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: clean up theme files

This commit is contained in:
Andre Neves 2019-02-24 13:07:46 -05:00
parent 9becefbcf5
commit 89843bbc17
6 changed files with 148 additions and 469 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
app/components/button.js
View File

@ -20,7 +20,7 @@ const DefaultButton = styled.button`
`;
const Primary = styled(DefaultButton)`
background-color: ${props => props.theme.colors.primary};
background-color: ${props => props.theme.colors.buttonPrimaryBg};
color: ${props => props.theme.colors.buttonPrimaryText};
border: none;
@ -31,7 +31,12 @@ const Primary = styled(DefaultButton)`
&:disabled {
background-color: ${props => props.theme.colors.buttonPrimaryDisabledBg};
cursor: not-allowed;
border: none;
opacity: 0.45;
&:hover {
opacity: 0.45;
}
}
`;

37
app/theme/colors/dark.js
View File

@ -11,15 +11,24 @@ const darkBrand = '#212124';
const brandThree = '#5d5d65';
export const DARK_COLORS = {
darkOne: brand,
blackTwo: '#171717',
lightOne: text,
brandOne: black,
brandThree: '#5d5d65',
buttonBorderColor: '#3e3c42',
activeItem: brand,
// General
text,
background: '#212124',
divider: black,
inactiveItem: brandThree,
activeItem: brand,
// Header
headerTitle: text,
// Select
selectButtonShadow: 'rgba(238,201,76,0.65)',
// Send View (Additional Options Section)
sendAdditionalOptionsBg: black,
sendAdditionalOptionsBorder: black,
sendAdditionalInputBg: darkBrand,
sendAdditionalInputText: white,
// Dropdown
dropdownBg: '#5d5d5d',
@ -42,19 +51,18 @@ export const DARK_COLORS = {
buttonSecondaryText: black,
buttonSecondaryBorder: '#ddd',
buttonSecondaryHoveredBg: '#bbb',
buttonBorderColor: '#3e3c42',
// Transactions
transactionSent: error,
transactionReceived: success,
transactionsDate: '#777777',
transactionsItemHovered: '#222222',
transactionItemBg: black,
transactionItemHoverBg: '#0A0A0A',
transactionItemBorder: 'transparent',
transactionItemAddress: '#A7A7A7',
transactionItemAddressHover: white,
transactionDetailsShadow: `0px 0px 20px 0px ${black}`,
transactionDetailsBg: darkBrand,
transactionDetailsRowHover: '#1D1D1D',
@ -78,12 +86,9 @@ export const DARK_COLORS = {
sidebarItemHovered: '#FFF',
sidebarItemHoveredBg: darkBrand,
// Misc
divider: black,
// QRCode
qrCodeWrapperBg: black,
qrCodeWrapperBorder: black,
headerTitle: text,
selectButtonShadow: 'rgba(238,201,76,0.65)',
// Forms
inputBg: black,
@ -114,10 +119,4 @@ export const DARK_COLORS = {
// Loading
loadingScreenBg: black,
loadingScreenText: white,
// Misc
sendAdditionalOptionsBg: black,
sendAdditionalOptionsBorder: black,
sendAdditionalInputBg: darkBrand,
sendAdditionalInputText: white,
};

102
app/theme/colors/light.js
View File

@ -15,16 +15,24 @@ const border = '#DDDDDD';
export const LIGHT_COLORS = {
// General
background: offWhite,
text,
darkOne: brand,
blackTwo: '#171717',
lightOne: white,
brandOne: '#000',
brandThree: '#5D5D65',
buttonBorderColor: '#3E3C42',
background: offWhite,
divider: '#AAAAAA',
inactiveItem: success,
activeItem: brand,
// Header
headerTitle: text,
// Select
selectButtonShadow: 'rgba(238,201,76,0.65)',
// Send View (Additional Options Section)
sendAdditionalOptionsBg: white,
sendAdditionalOptionsBorder: border,
sendAdditionalInputBg: offWhite,
sendAdditionalInputText: white,
// Dropdown
dropdownBg: offWhite,
dropdownHoveredBg: white,
@ -32,6 +40,11 @@ export const LIGHT_COLORS = {
dropdownIconBorder: '#c1c1c1',
dropdownOpenedIconBorder: '#828282',
// Card
cardBackgroundColor: black,
sendCardBg: white,
sendCardBorder: border,
// Buttons
buttonPrimaryBg: brand,
buttonPrimaryDisabledBg: brand,
@ -41,11 +54,28 @@ export const LIGHT_COLORS = {
buttonSecondaryBorder: '#989898',
buttonSecondaryText: white,
buttonSecondaryHoveredBg: '#aaa',
buttonBorderColor: '#3E3C42',
// Card
cardBackgroundColor: black,
sendCardBg: white,
sendCardBorder: border,
// Transactions
transactionSent: error,
transactionReceived: success,
transactionsDate: secondaryText,
transactionsItemHovered: '#222222',
transactionItemBg: white,
transactionItemHoverBg: whiteHover,
transactionItemBorder: border,
transactionItemAddress: '#666666',
transactionItemAddressHover: '#666666',
transactionDetailsShadow: `0px 0px 1px 0px ${black}`,
transactionDetailsBg: white,
transactionDetailsRowHover: whiteHover,
transactionDetailsDivider: border,
transactionDetailsLabel: '#999999',
// Status Pill
statusPillLabel: text,
statusPillBg: '#F9FBFE',
statusPillBorder: border,
// Sidebar
sidebarBg: white,
@ -60,40 +90,14 @@ export const LIGHT_COLORS = {
sidebarActiveItemLabel: '#8E8E96',
sidebarActiveItemBorder: 'red',
// Transactions
transactionSent: error,
transactionReceived: success,
transactionsDate: secondaryText,
transactionsItemHovered: '#222222',
// Transaction Item
transactionItemBg: white,
transactionItemHoverBg: whiteHover,
transactionItemBorder: border,
transactionItemAddress: '#666666',
transactionItemAddressHover: '#666666',
// Transaction Details
transactionDetailsShadow: `0px 0px 1px 0px ${black}`,
transactionDetailsBg: white,
transactionDetailsRowHover: whiteHover,
transactionDetailsDivider: border,
transactionDetailsLabel: '#999999',
// Select
selectButtonShadow: 'rgba(238,201,76,0.65)',
// Status Pill
statusPillLabel: text,
statusPillBg: '#F9FBFE',
statusPillBorder: border,
// QR Code
qrCodeWrapperBg: white,
qrCodeWrapperBorder: border,
// Header
headerTitle: text,
// Forms
inputBg: white,
inputBorder: border,
inputBorderActive: '#828282',
// Wallet Summary
walletSummaryBg: white,
@ -107,30 +111,16 @@ export const LIGHT_COLORS = {
walletAddressTooltip: white,
walletAddressTooltipBg: black,
// Forms
inputBg: white,
inputBorder: border,
inputBorderActive: '#828282',
// Console
consoleBg: white,
consoleBorder: border,
// Misc
divider: '#AAAAAA',
// Settings
settingsCardBg: white,
settingsLearnMore: '#a0a0a0',
settingsLearnMoreHovered: '#000',
// Loading
loadingScreenBg: offWhite,
loadingScreenBg: black,
loadingScreenText: white,
// Additional Panes
sendAdditionalOptionsBg: white,
sendAdditionalOptionsBorder: border,
sendAdditionalInputBg: offWhite,
sendAdditionalInputText: white,
};

333
app/theme/theme.js
View File

@ -6,6 +6,18 @@ import { DARK, LIGHT } from '../constants/themes';
import { typography } from './typography';
import { DARK_COLORS, LIGHT_COLORS } from './colors';
// Building color object from theme keys
// All themes must have the same variables as DARK_COLORS
const colorKeys = Object.keys(DARK_COLORS);
const colors: Object = {};
colorKeys.forEach((key: string) => {
colors[key] = theme('mode', {
[LIGHT]: LIGHT_COLORS[key],
[DARK]: DARK_COLORS[key],
});
});
export const appTheme: AppTheme = {
// General
mode: DARK,
@ -13,7 +25,7 @@ export const appTheme: AppTheme = {
// Typography
...typography,
// Spacing
// Sizes & Spacing
sidebarWidth: '180px',
headerHeight: '60px',
layoutPaddingLeft: '35px',
@ -25,322 +37,5 @@ export const appTheme: AppTheme = {
transitionEase: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
// Colors
colors: {
primary: theme('mode', {
[LIGHT]: LIGHT_COLORS.darkOne,
[DARK]: DARK_COLORS.darkOne,
}),
secondary: theme('mode', {
[LIGHT]: LIGHT_COLORS.darkOne,
[DARK]: DARK_COLORS.darkOne,
}),
divider: theme('mode', {
[LIGHT]: LIGHT_COLORS.divider,
[DARK]: DARK_COLORS.divider,
}),
sidebarBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarBg,
[DARK]: DARK_COLORS.sidebarBg,
}),
sidebarItem: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarItem,
[DARK]: DARK_COLORS.sidebarItem,
}),
sidebarItemActive: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarItemActive,
[DARK]: DARK_COLORS.sidebarItemActive,
}),
sidebarItemHovered: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarItemHovered,
[DARK]: DARK_COLORS.sidebarItemHovered,
}),
sidebarHoveredItemLabel: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarHoveredItemLabel,
[DARK]: DARK_COLORS.sidebarHoveredItemLabel,
}),
cardBackgroundColor: theme('mode', {
[LIGHT]: LIGHT_COLORS.cardBackgroundColor,
[DARK]: DARK_COLORS.cardBackgroundColor,
}),
text: theme('mode', {
[LIGHT]: LIGHT_COLORS.text,
[DARK]: DARK_COLORS.text,
}),
activeItem: theme('mode', {
[LIGHT]: LIGHT_COLORS.activeItem,
[DARK]: DARK_COLORS.activeItem,
}),
inactiveItem: theme('mode', {
[LIGHT]: LIGHT_COLORS.brandThree,
[DARK]: DARK_COLORS.brandThree,
}),
sidebarLogoGradientBegin: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarLogoGradientBegin,
[DARK]: DARK_COLORS.sidebarLogoGradientBegin,
}),
sidebarLogoGradientEnd: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarLogoGradientEnd,
[DARK]: DARK_COLORS.sidebarLogoGradientEnd,
}),
background: theme('mode', {
[LIGHT]: LIGHT_COLORS.background,
[DARK]: DARK_COLORS.background,
}),
transactionSent: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionSent,
[DARK]: DARK_COLORS.transactionSent,
}),
transactionReceived: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionReceived,
[DARK]: DARK_COLORS.transactionReceived,
}),
transactionsDate: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionsDate,
[DARK]: DARK_COLORS.transactionsDate,
}),
transactionsItemHovered: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionsItemHovered,
[DARK]: DARK_COLORS.transactionsItemHovered,
}),
inputBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.inputBg,
[DARK]: DARK_COLORS.inputBg,
}),
selectButtonShadow: theme('mode', {
[LIGHT]: LIGHT_COLORS.selectButtonShadow,
[DARK]: DARK_COLORS.selectButtonShadow,
}),
transactionDetailsLabel: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionDetailsLabel,
[DARK]: DARK_COLORS.transactionDetailsLabel,
}),
statusPillLabel: theme('mode', {
[LIGHT]: LIGHT_COLORS.statusPillLabel,
[DARK]: DARK_COLORS.statusPillLabel,
}),
modalItemLabel: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionsDate,
[DARK]: DARK_COLORS.transactionsDate,
}),
blackTwo: theme('mode', {
[LIGHT]: LIGHT_COLORS.blackTwo,
[DARK]: DARK_COLORS.blackTwo,
}),
buttonBorderColor: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonBorderColor,
[DARK]: DARK_COLORS.buttonBorderColor,
}),
headerTitle: theme('mode', {
[LIGHT]: LIGHT_COLORS.headerTitle,
[DARK]: DARK_COLORS.headerTitle,
}),
statusPillBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.statusPillBg,
[DARK]: DARK_COLORS.statusPillBg,
}),
walletSummaryBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletSummaryBg,
[DARK]: DARK_COLORS.walletSummaryBg,
}),
walletSummaryBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletSummaryBorder,
[DARK]: DARK_COLORS.walletSummaryBorder,
}),
consoleBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.consoleBg,
[DARK]: DARK_COLORS.consoleBg,
}),
sidebarBorderRight: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarBorderRight,
[DARK]: DARK_COLORS.sidebarBorderRight,
}),
qrCodeWrapperBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.qrCodeWrapperBg,
[DARK]: DARK_COLORS.qrCodeWrapperBg,
}),
statusPillBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.statusPillBorder,
[DARK]: DARK_COLORS.statusPillBorder,
}),
sidebarActiveItemBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarActiveItemBorder,
[DARK]: DARK_COLORS.sidebarActiveItemBorder,
}),
transactionItemBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionItemBg,
[DARK]: DARK_COLORS.transactionItemBg,
}),
transactionItemHoverBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionItemHoverBg,
[DARK]: DARK_COLORS.transactionItemHoverBg,
}),
transactionItemBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionItemBorder,
[DARK]: DARK_COLORS.transactionItemBorder,
}),
transactionItemAddress: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionItemAddress,
[DARK]: DARK_COLORS.transactionItemAddress,
}),
transactionItemAddressHover: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionItemAddressHover,
[DARK]: DARK_COLORS.transactionItemAddressHover,
}),
transactionDetailsShadow: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionDetailsShadow,
[DARK]: DARK_COLORS.transactionDetailsShadow,
}),
transactionDetailsBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionDetailsBg,
[DARK]: DARK_COLORS.transactionDetailsBg,
}),
transactionDetailsRowHover: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionDetailsRowHover,
[DARK]: DARK_COLORS.transactionDetailsRowHover,
}),
transactionDetailsDivider: theme('mode', {
[LIGHT]: LIGHT_COLORS.transactionDetailsDivider,
[DARK]: DARK_COLORS.transactionDetailsDivider,
}),
inputBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.inputBorder,
[DARK]: DARK_COLORS.inputBorder,
}),
sidebarItemHoveredBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.sidebarItemHoveredBg,
[DARK]: DARK_COLORS.sidebarItemHoveredBg,
}),
consoleBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.consoleBorder,
[DARK]: DARK_COLORS.consoleBorder,
}),
sendCardBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendCardBg,
[DARK]: DARK_COLORS.sendCardBg,
}),
sendCardBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendCardBorder,
[DARK]: DARK_COLORS.sendCardBorder,
}),
walletAddressBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressBg,
[DARK]: DARK_COLORS.walletAddressBg,
}),
walletAddressBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressBorder,
[DARK]: DARK_COLORS.walletAddressBorder,
}),
walletAddressInput: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressInput,
[DARK]: DARK_COLORS.walletAddressInput,
}),
walletAddressInputHovered: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressInputHovered,
[DARK]: DARK_COLORS.walletAddressInputHovered,
}),
dropdownBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownBg,
[DARK]: DARK_COLORS.dropdownBg,
}),
dropdownHoveredBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownHoveredBg,
[DARK]: DARK_COLORS.dropdownHoveredBg,
}),
dropdownBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownBorder,
[DARK]: DARK_COLORS.dropdownBorder,
}),
settingsCardBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.settingsCardBg,
[DARK]: DARK_COLORS.settingsCardBg,
}),
settingsLearnMore: theme('mode', {
[LIGHT]: LIGHT_COLORS.settingsLearnMore,
[DARK]: DARK_COLORS.settingsLearnMore,
}),
settingsLearnMoreHovered: theme('mode', {
[LIGHT]: LIGHT_COLORS.settingsLearnMoreHovered,
[DARK]: DARK_COLORS.settingsLearnMoreHovered,
}),
buttonPrimaryText: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonPrimaryText,
[DARK]: DARK_COLORS.buttonPrimaryText,
}),
buttonSecondaryText: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonSecondaryText,
[DARK]: DARK_COLORS.buttonSecondaryText,
}),
buttonPrimaryBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonPrimaryBg,
[DARK]: DARK_COLORS.buttonPrimaryBg,
}),
buttonSecondaryBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonSecondaryBg,
[DARK]: DARK_COLORS.buttonSecondaryBg,
}),
buttonPrimaryDisabledBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonPrimaryDisabledBg,
[DARK]: DARK_COLORS.buttonPrimaryDisabledBg,
}),
buttonSecondaryDisabledBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonSecondaryDisabledBg,
[DARK]: DARK_COLORS.buttonSecondaryDisabledBg,
}),
buttonSecondaryBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonSecondaryBorder,
[DARK]: DARK_COLORS.buttonSecondaryBorder,
}),
buttonSecondaryHoveredBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonSecondaryHoveredBg,
[DARK]: DARK_COLORS.buttonSecondaryHoveredBg,
}),
dropdownIconBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownIconBorder,
[DARK]: DARK_COLORS.dropdownIconBorder,
}),
dropdownOpenedIconBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.dropdownOpenedIconBorder,
[DARK]: DARK_COLORS.dropdownOpenedIconBorder,
}),
inputBorderActive: theme('mode', {
[LIGHT]: LIGHT_COLORS.inputBorderActive,
[DARK]: DARK_COLORS.inputBorderActive,
}),
walletAddressTooltipBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressTooltipBg,
[DARK]: DARK_COLORS.walletAddressTooltipBg,
}),
qrCodeWrapperBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.qrCodeWrapperBorder,
[DARK]: DARK_COLORS.qrCodeWrapperBorder,
}),
walletAddressTooltip: theme('mode', {
[LIGHT]: LIGHT_COLORS.walletAddressTooltip,
[DARK]: DARK_COLORS.walletAddressTooltip,
}),
loadingScreenBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.loadingScreenBg,
[DARK]: DARK_COLORS.loadingScreenBg,
}),
loadingScreenText: theme('mode', {
[LIGHT]: LIGHT_COLORS.loadingScreenText,
[DARK]: DARK_COLORS.loadingScreenText,
}),
sendAdditionalOptionsBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendAdditionalOptionsBg,
[DARK]: DARK_COLORS.sendAdditionalOptionsBg,
}),
sendAdditionalOptionsBorder: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendAdditionalOptionsBorder,
[DARK]: DARK_COLORS.sendAdditionalOptionsBorder,
}),
sendAdditionalInputBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendAdditionalInputBg,
[DARK]: DARK_COLORS.sendAdditionalInputBg,
}),
sendAdditionalInputText: theme('mode', {
[LIGHT]: LIGHT_COLORS.sendAdditionalInputText,
[DARK]: DARK_COLORS.sendAdditionalInputText,
}),
},
colors: { ...colors },
};

136
flow-custom-typedefs/theme.js
View File

@ -3,25 +3,25 @@
import { ThemeSet } from 'styled-theming';
type Colors = {
primary: ThemeSet,
secondary: ThemeSet,
sidebarBg: ThemeSet,
// Card
cardBackgroundColor: ThemeSet,
sendCardBg: ThemeSet,
sendCardBorder: ThemeSet,
// General
text: ThemeSet,
background: ThemeSet,
divider: ThemeSet,
activeItem: ThemeSet,
inactiveItem: ThemeSet,
background: ThemeSet,
modalItemLabel: ThemeSet,
// Header
headerTitle: ThemeSet,
// Select
selectButtonShadow: ThemeSet,
modalItemLabel: ThemeSet,
blackTwo: ThemeSet,
buttonBorderColor: ThemeSet,
// Send View (Additional Options Section)
sendAdditionalOptionsBg: ThemeSet,
sendAdditionalOptionsBorder: ThemeSet,
sendAdditionalInputBg: ThemeSet,
sendAdditionalInputText: ThemeSet,
// Dropdown
dropdownBg: ThemeSet,
@ -30,17 +30,63 @@ type Colors = {
dropdownIconBorder: ThemeSet,
dropdownOpenedIconBorder: ThemeSet,
// Divider
divider: ThemeSet,
// Card
cardBackgroundColor: ThemeSet,
sendCardBg: ThemeSet,
sendCardBorder: ThemeSet,
// Header
headerTitle: ThemeSet,
// Buttons
buttonPrimaryBg: ThemeSet,
buttonPrimaryText: ThemeSet,
buttonPrimaryDisabledBg: ThemeSet,
buttonSecondaryBg: ThemeSet,
buttonSecondaryText: ThemeSet,
buttonSecondaryDisabledBg: ThemeSet,
buttonSecondaryBorder: ThemeSet,
buttonSecondaryHoveredBg: ThemeSet,
buttonBorderColor: ThemeSet,
// Transactions
transactionSent: ThemeSet,
transactionReceived: ThemeSet,
transactionsDate: ThemeSet,
transactionsItemHovered: ThemeSet,
transactionItemBg: ThemeSet,
transactionItemHoverBg: ThemeSet,
transactionItemAddress: ThemeSet,
transactionItemAddressHover: ThemeSet,
transactionDetailsShadow: ThemeSet,
transactionDetailsBg: ThemeSet,
transactionDetailsRowHover: ThemeSet,
transactionDetailsDivider: ThemeSet,
transactionDetailsLabel: ThemeSet,
// Status Pill
statusPillBg: ThemeSet,
statusPillLabel: ThemeSet,
statusPillBorder: ThemeSet,
// Sidebar
sidebarBg: ThemeSet,
sidebarItem: ThemeSet,
sidebarItemActive: ThemeSet,
sidebarActiveItemBorder: ThemeSet,
sidebarBorderRight: ThemeSet,
sidebarItemHovered: ThemeSet,
sidebarHoveredItemLabel: ThemeSet,
sidebarLogoGradientBegin: ThemeSet,
sidebarLogoGradientEnd: ThemeSet,
sidebarItemHoveredBg: ThemeSet,
// QR Code
qrCodeWrapperBg: ThemeSet,
qrCodeWrapperBorder: ThemeSet,
// Forms
inputBg: ThemeSet,
inputBorder: ThemeSet,
inputBorderActive: ThemeSet,
// Wallet Summary
walletSummaryBg: ThemeSet,
walletSummaryBorder: ThemeSet,
@ -57,56 +103,6 @@ type Colors = {
consoleBg: ThemeSet,
consoleBorder: ThemeSet,
// Buttons
buttonPrimaryBg: ThemeSet,
buttonPrimaryText: ThemeSet,
buttonPrimaryDisabledBg: ThemeSet,
buttonSecondaryBg: ThemeSet,
buttonSecondaryText: ThemeSet,
buttonSecondaryDisabledBg: ThemeSet,
buttonSecondaryBorder: ThemeSet,
buttonSecondaryHoveredBg: ThemeSet,
// QR Code
qrCodeWrapperBg: ThemeSet,
qrCodeWrapperBorder: ThemeSet,
// Transactions
transactionSent: ThemeSet,
transactionReceived: ThemeSet,
transactionsDate: ThemeSet,
transactionsItemHovered: ThemeSet,
// Transaction Item
transactionItemBg: ThemeSet,
transactionItemHoverBg: ThemeSet,
transactionItemAddress: ThemeSet,
transactionItemAddressHover: ThemeSet,
// Transaction Details
transactionDetailsShadow: ThemeSet,
transactionDetailsBg: ThemeSet,
transactionDetailsRowHover: ThemeSet,
transactionDetailsDivider: ThemeSet,
transactionDetailsLabel: ThemeSet,
// Input
inputBg: ThemeSet,
inputBorder: ThemeSet,
inputBorderActive: ThemeSet,
// Sidebar
sidebarBg: ThemeSet,
sidebarItem: ThemeSet,
sidebarItemActive: ThemeSet,
sidebarActiveItemBorder: ThemeSet,
sidebarBorderRight: ThemeSet,
sidebarItemHovered: ThemeSet,
sidebarHoveredItemLabel: ThemeSet,
sidebarLogoGradientBegin: ThemeSet,
sidebarLogoGradientEnd: ThemeSet,
sidebarItemHoveredBg: ThemeSet,
// Settings
settingsCardBg: ThemeSet,
settingsLearnMore: ThemeSet,
@ -115,12 +111,6 @@ type Colors = {
// Loading
loadingScreenBg: ThemeSet,
loadingScreenText: ThemeSet,
// Misc
sendAdditionalOptionsBg: ThemeSet,
sendAdditionalOptionsBorder: ThemeSet,
sendAdditionalInputBg: ThemeSet,
sendAdditionalInputText: ThemeSet,
};
type FontSize = {

2
public/flow-coverage-badge.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">88%</text><text x="107" y="14">88%</text></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="125" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><mask id="a"><rect width="125" height="20" rx="3" fill="#fff"/></mask><g mask="url(#a)"><path fill="#555" d="M0 0h91v20H0z"/><path fill="#4C1" d="M91 0h34v20H91z"/><path fill="url(#b)" d="M0 0h125v20H0z"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,DejaVu Sans,Geneva,sans-serif" font-size="11"><text x="45.5" y="15" fill="#010101" fill-opacity=".3">flow-coverage</text><text x="45.5" y="14">flow-coverage</text><text x="107" y="15" fill="#010101" fill-opacity=".3">87%</text><text x="107" y="14">87%</text></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 745 B

After

Width:  |  Height:  |  Size: 745 B