type(styled): add theme as default prop in interpolations
This commit is contained in:
George Lima
parent
7e8e572f6a
commit
8dc55b97a1
|
|
@ -1,6 +1,7 @@
|
|||
[ignore]
|
||||
.*/node_modules/polished/.*
|
||||
./__tests__/**.js
|
||||
./flow-typed/npm/styled-components_v4.x.x.js
|
||||
|
||||
[include]
|
||||
|
||||
|
|
@ -13,4 +14,4 @@ flow-custom-typedefs
|
|||
[options]
|
||||
esproposal.optional_chaining=enable
|
||||
|
||||
[strict]
|
||||
[strict]
|
||||
|
|
|
|||
|
|
@ -9,19 +9,19 @@ const DefaultButton = styled.button`
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 10px 30px;
|
||||
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular}em`};
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
font-size: ${props => `${props.theme.fontSize.regular}em`};
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
min-width: 100px;
|
||||
border-radius: 100px;
|
||||
transition: background-color 0.1s ${(props: PropsWithTheme<>) => props.theme.transitionEase};
|
||||
transition: background-color 0.1s ${props => props.theme.transitionEase};
|
||||
`;
|
||||
|
||||
const Primary = styled(DefaultButton)`
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.primary};
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.secondary};
|
||||
background-color: ${props => props.theme.colors.primary};
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
border: none;
|
||||
|
||||
&:hover {
|
||||
|
|
@ -29,7 +29,7 @@ const Primary = styled(DefaultButton)`
|
|||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||
background-color: ${props => props.theme.colors.buttonBorderColor};
|
||||
cursor: not-allowed;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
|
@ -37,20 +37,20 @@ const Primary = styled(DefaultButton)`
|
|||
|
||||
const Secondary = styled(DefaultButton)`
|
||||
background-color: transparent;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.secondary};
|
||||
border: 2px solid ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||
color: ${props => props.theme.colors.secondary};
|
||||
border: 2px solid ${props => props.theme.colors.buttonBorderColor};
|
||||
|
||||
&:hover {
|
||||
border-color: ${(props: PropsWithTheme<>) => props.theme.colors.primary};
|
||||
border-color: ${props => props.theme.colors.primary};
|
||||
}
|
||||
|
||||
&:disabled {
|
||||
background-color: Transparent;
|
||||
cursor: not-allowed;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||
color: ${props => props.theme.colors.buttonBorderColor};
|
||||
|
||||
&:hover {
|
||||
border-color: ${(props: PropsWithTheme<>) => props.theme.colors.buttonBorderColor};
|
||||
border-color: ${props => props.theme.colors.buttonBorderColor};
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ import CloseIcon from '../assets/images/close_icon.svg';
|
|||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
width: ${(props: PropsWithTheme<{ width: number }>) => `${props.width}px`};
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||
width: ${(props: PropsWithTheme<{ width: number }>) => `${String(props.width)}px`};
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
border-radius: 6px;
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ import { truncateAddress } from '../utils/truncate-address';
|
|||
|
||||
/* eslint-disable max-len */
|
||||
const MenuWrapper = styled.div`
|
||||
background-image: ${(props: PropsWithTheme<>) => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${
|
||||
background-image: ${props => `linear-gradient(to right, ${darken(0.05, props.theme.colors.activeItem)}, ${
|
||||
props.theme.colors.activeItem
|
||||
})`};
|
||||
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
margin-left: -10px;
|
||||
max-width: 400px;
|
||||
overflow: hidden;
|
||||
|
|
@ -28,7 +28,7 @@ const MenuItem = styled.button`
|
|||
background-color: transparent;
|
||||
border: none;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||
border-bottom-color: ${props => props.theme.colors.text};
|
||||
border-bottom-width: 1px;
|
||||
padding: 15px;
|
||||
cursor: pointer;
|
||||
|
|
@ -68,7 +68,7 @@ const Option = styled(TextComponent)`
|
|||
|
||||
const PopoverWithStyle = styled(Popover)`
|
||||
& > .Popover-tip {
|
||||
fill: ${(props: PropsWithTheme<>) => props.theme.colors.activeItem};
|
||||
fill: ${props => props.theme.colors.activeItem};
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ const ModalWrapper = styled.div`
|
|||
|
||||
const ChildrenWrapper = styled.div`
|
||||
width: 350px;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -12,34 +12,34 @@ import { StatusPill } from './status-pill';
|
|||
import { withSyncStatus } from '../../services/sync-status';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
height: ${(props: PropsWithTheme<>) => props.theme.headerHeight};
|
||||
height: ${props => props.theme.headerHeight};
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
`;
|
||||
|
||||
const LogoWrapper = styled.div`
|
||||
height: ${(props: PropsWithTheme<>) => props.theme.headerHeight};
|
||||
width: ${(props: PropsWithTheme<>) => props.theme.sidebarWidth};
|
||||
height: ${props => props.theme.headerHeight};
|
||||
width: ${props => props.theme.sidebarWidth};
|
||||
background-image: linear-gradient(
|
||||
to right,
|
||||
${(props: PropsWithTheme<>) => props.theme.colors.sidebarLogoGradientBegin},
|
||||
${(props: PropsWithTheme<>) => props.theme.colors.sidebarLogoGradientEnd}
|
||||
${props => props.theme.colors.sidebarLogoGradientBegin},
|
||||
${props => props.theme.colors.sidebarLogoGradientEnd}
|
||||
);
|
||||
margin-bottom: 20px;
|
||||
`;
|
||||
|
||||
const TitleWrapper = styled.div`
|
||||
width: ${(props: PropsWithTheme<>) => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||
height: ${(props: PropsWithTheme<>) => props.theme.headerHeight};
|
||||
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||
height: ${props => props.theme.headerHeight};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px;
|
||||
padding-left: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingLeft};
|
||||
padding-right: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingRight};
|
||||
padding-left: ${props => props.theme.layoutPaddingLeft};
|
||||
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||
`;
|
||||
|
||||
const TitleRow = styled(RowComponent)`
|
||||
|
|
@ -49,12 +49,12 @@ const TitleRow = styled(RowComponent)`
|
|||
`;
|
||||
|
||||
const Title = styled(TextComponent)`
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.large}em`};
|
||||
font-size: ${props => `${props.theme.fontSize.large}em`};
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0.25px;
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
|
|
|||
|
|
@ -8,11 +8,11 @@ import { ErrorModalComponent } from './error-modal';
|
|||
const Layout = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: ${(props: PropsWithTheme<>) => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||
height: ${(props: PropsWithTheme<>) => `calc(100vh - ${props.theme.headerHeight})`};
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||
padding-left: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingLeft};
|
||||
padding-right: ${(props: PropsWithTheme<>) => props.theme.layoutPaddingRight};
|
||||
width: ${props => `calc(100% - ${props.theme.sidebarWidth})`};
|
||||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
padding-left: ${props => props.theme.layoutPaddingLeft};
|
||||
padding-right: ${props => props.theme.layoutPaddingRight};
|
||||
overflow: auto;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ const Wrapper = styled.div`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
`;
|
||||
|
||||
const CircleWrapper = styled.div`
|
||||
|
|
|
|||
|
|
@ -31,7 +31,9 @@ const SelectWrapper = styled.div`
|
|||
position: relative;
|
||||
|
||||
${(props: SelectWrapperProps) => (props.isOpen
|
||||
? `border-${props.placement}-left-radius: 0; border-${props.placement}-right-radius: 0;`
|
||||
? `border-${String(props.placement)}-left-radius: 0; border-${String(
|
||||
props.placement,
|
||||
)}-right-radius: 0;`
|
||||
: '')}
|
||||
`;
|
||||
/* eslint-enable max-len */
|
||||
|
|
@ -52,7 +54,7 @@ const SelectMenuButtonWrapper = styled.div`
|
|||
width: 50px;
|
||||
height: 100%;
|
||||
padding: 13px;
|
||||
border-left: ${(props: PropsWithTheme<>) => `1px solid ${props.theme.colors.background}`};
|
||||
border-left: ${props => `1px solid ${props.theme.colors.background}`};
|
||||
`;
|
||||
|
||||
/* eslint-disable max-len */
|
||||
|
|
@ -75,7 +77,7 @@ const OptionsWrapper = styled.div`
|
|||
flex-direction: column;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${props.placement}: ${`-${props.optionsAmount * 40}px`}`};
|
||||
${(props: PropsWithTheme<{ placement: string, optionsAmount: number }>) => `${String(props.placement)}: ${`-${String((props.optionsAmount || 0) * 40)}px`}`};
|
||||
overflow-y: auto;
|
||||
`;
|
||||
|
||||
|
|
@ -91,7 +93,7 @@ const Option = styled.button`
|
|||
border-bottom: 1px solid #4e4b4b;
|
||||
|
||||
&:hover {
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ import { MENU_OPTIONS } from '../constants/sidebar';
|
|||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: ${(props: PropsWithTheme<>) => props.theme.sidebarWidth};
|
||||
height: ${(props: PropsWithTheme<>) => `calc(100vh - ${props.theme.headerHeight})`};
|
||||
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.sidebarBg};
|
||||
width: ${props => props.theme.sidebarWidth};
|
||||
height: ${props => `calc(100vh - ${props.theme.headerHeight})`};
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
background-color: ${props => props.theme.colors.sidebarBg};
|
||||
padding-top: 15px;
|
||||
position: relative;
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -40,8 +40,8 @@ const Icon = styled.img`
|
|||
`;
|
||||
|
||||
const StatusPillLabel = styled(TextComponent)`
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.statusPillLabel};
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.statusPillLabel};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
text-transform: uppercase;
|
||||
font-size: 10px;
|
||||
padding-top: 1px;
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ const Wrapper = styled.div`
|
|||
`;
|
||||
|
||||
const TransactionsWrapper = styled.div`
|
||||
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
overflow: hidden;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
|
|
@ -23,9 +23,9 @@ const TransactionsWrapper = styled.div`
|
|||
|
||||
const Day = styled(TextComponent)`
|
||||
text-transform: uppercase;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate};
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`};
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionsDate};
|
||||
font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import { openExternal } from '../utils/open-external';
|
|||
|
||||
const Wrapper = styled.div`
|
||||
width: 460px;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.background};
|
||||
background-color: ${props => props.theme.colors.background};
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -91,8 +91,8 @@ const Divider = styled.div`
|
|||
`;
|
||||
|
||||
const Label = styled(TextComponent)`
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDetailsLabel};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionsDetailsLabel};
|
||||
margin-bottom: 5px;
|
||||
letter-spacing: 0.25px;
|
||||
`;
|
||||
|
|
@ -106,7 +106,7 @@ const Ellipsis = styled(TextComponent)`
|
|||
|
||||
const TransactionId = styled.button`
|
||||
width: 100%;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||
color: ${props => props.theme.colors.text};
|
||||
padding: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ import { formatNumber } from '../utils/format-number';
|
|||
import { truncateAddress } from '../utils/truncate-address';
|
||||
|
||||
const Wrapper = styled(RowComponent)`
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
padding: 15px 17px;
|
||||
cursor: pointer;
|
||||
|
||||
|
|
@ -49,7 +49,7 @@ const TransactionAddress = styled(TextComponent)`
|
|||
`;
|
||||
|
||||
const TransactionTime = styled(TextComponent)`
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.inactiveItem};
|
||||
color: ${props => props.theme.colors.inactiveItem};
|
||||
`;
|
||||
|
||||
const TransactionColumn = styled(ColumnComponent)`
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@ const AddressWrapper = styled.div`
|
|||
`;
|
||||
|
||||
const Input = styled.input`
|
||||
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
border: none;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.inputBackground};
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||
background-color: ${props => props.theme.colors.inputBackground};
|
||||
color: ${props => props.theme.colors.text};
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
|
||||
::placeholder {
|
||||
opacity: 0.5;
|
||||
|
|
|
|||
|
|
@ -13,17 +13,17 @@ import theme from '../theme';
|
|||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 37px 45px;
|
||||
min-height: 250px;
|
||||
position: relative;
|
||||
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
`;
|
||||
|
||||
const AllAddresses = styled(TextComponent)`
|
||||
margin-bottom: 2.5px;
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.small}em`};
|
||||
font-size: ${props => `${props.theme.fontSize.small}em`};
|
||||
`;
|
||||
|
||||
const ValueBox = styled.div`
|
||||
|
|
@ -39,11 +39,11 @@ const Label = styled(TextComponent)`
|
|||
|
||||
const USDValue = styled(TextComponent)`
|
||||
opacity: 0.5;
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.light)};
|
||||
font-weight: ${props => String(props.theme.fontWeight.light)};
|
||||
`;
|
||||
|
||||
const ShieldedValue = styled(Label)`
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.activeItem};
|
||||
color: ${props => props.theme.colors.activeItem};
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
|
|
|
|||
|
|
@ -12,9 +12,9 @@ import ConsoleSymbol from '../assets/images/console_zcash.png';
|
|||
const Wrapper = styled.div`
|
||||
max-height: 100%;
|
||||
overflow-y: auto;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 38px 33.5px;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -20,9 +20,9 @@ const Row = styled(RowComponent)`
|
|||
|
||||
const Label = styled(InputLabelComponent)`
|
||||
text-transform: uppercase;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate};
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`};
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionsDate};
|
||||
font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
|
||||
|
|
@ -31,7 +31,7 @@ const ActionButton = styled.button`
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||
color: ${props => props.theme.colors.text};
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -46,7 +46,7 @@ const ActionButton = styled.button`
|
|||
const ActionIcon = styled.img`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 1px solid ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||
border: 1px solid ${props => props.theme.colors.text};
|
||||
border-radius: 100%;
|
||||
margin-right: 11.5px;
|
||||
padding: 5px;
|
||||
|
|
|
|||
|
|
@ -49,7 +49,7 @@ const Loader = styled.img`
|
|||
`;
|
||||
|
||||
const FormWrapper = styled.div`
|
||||
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
width: 71%;
|
||||
`;
|
||||
|
||||
|
|
@ -69,7 +69,7 @@ const AmountWrapper = styled.div`
|
|||
|
||||
&:before {
|
||||
content: 'ZEC';
|
||||
font-family: ${(props: PropsWithTheme<>) => props.theme.fontFamily};
|
||||
font-family: ${props => props.theme.fontFamily};
|
||||
position: absolute;
|
||||
margin-top: 15px;
|
||||
margin-left: 15px;
|
||||
|
|
@ -90,7 +90,7 @@ const ShowFeeButton = styled.button`
|
|||
border: none;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||
color: ${props => props.theme.colors.text};
|
||||
outline: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -105,7 +105,7 @@ const ShowFeeButton = styled.button`
|
|||
const SeeMoreIcon = styled.img`
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 1px solid ${(props: PropsWithTheme<>) => props.theme.colors.text};
|
||||
border: 1px solid ${props => props.theme.colors.text};
|
||||
border-radius: 100%;
|
||||
margin-right: 11.5px;
|
||||
`;
|
||||
|
|
@ -119,8 +119,8 @@ const FeeWrapper = styled.div`
|
|||
|
||||
const InfoCard = styled.div`
|
||||
width: 100%;
|
||||
background-color: ${(props: PropsWithTheme<>) => props.theme.colors.cardBackgroundColor};
|
||||
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||
background-color: ${props => props.theme.colors.cardBackgroundColor};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
`;
|
||||
|
||||
const InfoContent = styled.div`
|
||||
|
|
@ -171,15 +171,15 @@ const ItemLabel = styled(TextComponent)`
|
|||
`;
|
||||
|
||||
const SendZECValue = styled(TextComponent)`
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionSent};
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.large}em`};
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionSent};
|
||||
font-size: ${props => `${props.theme.fontSize.large}em`};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
`;
|
||||
|
||||
const SendUSDValue = styled(TextComponent)`
|
||||
opacity: 0.5;
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.light)};
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.medium}em`};
|
||||
font-weight: ${props => String(props.theme.fontWeight.light)};
|
||||
font-size: ${props => `${props.theme.fontSize.medium}em`};
|
||||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ import rpc from '../../services/api';
|
|||
const HOME_DIR = electron.remote.app.getPath('home');
|
||||
|
||||
const Wrapper = styled.div`
|
||||
margin-top: ${(props: PropsWithTheme<>) => props.theme.layoutContentPaddingTop};
|
||||
margin-top: ${props => props.theme.layoutContentPaddingTop};
|
||||
`;
|
||||
|
||||
const ModalContent = styled.div`
|
||||
|
|
@ -43,7 +43,7 @@ const Btn = styled(Button)`
|
|||
|
||||
const ClipboardButton = styled(Clipboard)`
|
||||
width: 50px;
|
||||
border-radius: ${(props: PropsWithTheme<>) => props.theme.boxBorderRadius};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
height: 45px;
|
||||
margin-left: 5px;
|
||||
`;
|
||||
|
|
@ -56,9 +56,9 @@ const SettingsWrapper = styled.div`
|
|||
|
||||
const SettingsTitle = styled(TextComponent)`
|
||||
text-transform: uppercase;
|
||||
color: ${(props: PropsWithTheme<>) => props.theme.colors.transactionsDate};
|
||||
font-size: ${(props: PropsWithTheme<>) => `${props.theme.fontSize.regular * 0.9}em`};
|
||||
font-weight: ${(props: PropsWithTheme<>) => String(props.theme.fontWeight.bold)};
|
||||
color: ${props => props.theme.colors.transactionsDate};
|
||||
font-size: ${props => `${props.theme.fontSize.regular * 0.9}em`};
|
||||
font-weight: ${props => String(props.theme.fontWeight.bold)};
|
||||
margin-bottom: 5px;
|
||||
`;
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,422 @@
|
|||
// flow-typed signature: 8ae4cfa383fc58443d8d65b5301bf1c1
|
||||
// flow-typed version: 1a7d5ca288/styled-components_v4.x.x/flow_>=v0.75.x
|
||||
|
||||
// @flow
|
||||
|
||||
declare module 'styled-components' {
|
||||
declare export type Interpolation =
|
||||
| (<P: {}>(executionContext: PropsWithTheme<any>) => string)
|
||||
| CSSRules
|
||||
| KeyFrames
|
||||
| string
|
||||
| number;
|
||||
|
||||
declare export type CSSRules = Interpolation[];
|
||||
|
||||
// This is not exported on purpose, since it's an implementation detail
|
||||
declare type TaggedTemplateLiteral<R> = (
|
||||
strings: string[],
|
||||
...interpolations: Interpolation[]
|
||||
) => R;
|
||||
|
||||
declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>;
|
||||
declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>;
|
||||
declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>;
|
||||
|
||||
declare interface Tag<T> {
|
||||
styleTag: HTMLStyleElement | null;
|
||||
getIds(): string[];
|
||||
hasNameForId(id: string, name: string): boolean;
|
||||
insertMarker(id: string): T;
|
||||
insertRules(id: string, cssRules: string[], name: ?string): void;
|
||||
removeRules(id: string): void;
|
||||
css(): string;
|
||||
toHTML(additionalAttrs: ?string): string;
|
||||
toElement(): React$Element<*>;
|
||||
clone(): Tag<T>;
|
||||
sealed: boolean;
|
||||
}
|
||||
|
||||
// The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
|
||||
declare export class StyleSheet {
|
||||
static get master(): StyleSheet;
|
||||
static get instance(): StyleSheet;
|
||||
static reset(forceServer?: boolean): void;
|
||||
|
||||
id: number;
|
||||
forceServer: boolean;
|
||||
target: ?HTMLElement;
|
||||
tagMap: { [string]: Tag<any> }; // eslint-disable-line flowtype/no-weak-types
|
||||
deferred: { [string]: string[] | void };
|
||||
rehydratedNames: { [string]: boolean };
|
||||
ignoreRehydratedNames: { [string]: boolean };
|
||||
tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
|
||||
importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
capacity: number;
|
||||
clones: StyleSheet[];
|
||||
|
||||
constructor(?HTMLElement): this;
|
||||
rehydrate(): this;
|
||||
clone(): StyleSheet;
|
||||
sealAllTags(): void;
|
||||
makeTag(tag: ?Tag<any>): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
getImportRuleTag(): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
getTagForId(id: string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
hasId(id: string): boolean;
|
||||
hasNameForId(id: string, name: string): boolean;
|
||||
deferredInject(id: string, cssRules: string[]): void;
|
||||
inject(id: string, cssRules: string[], name?: string): void;
|
||||
remove(id: string): void;
|
||||
toHtml(): string;
|
||||
toReactElements(): React$ElementType[];
|
||||
}
|
||||
|
||||
declare export class KeyFrames {
|
||||
id: string;
|
||||
name: string;
|
||||
rules: string[];
|
||||
|
||||
constructor(name: string, rules: string[]): this;
|
||||
inject(StyleSheet): void;
|
||||
toString(): string;
|
||||
getName(): string;
|
||||
}
|
||||
|
||||
// I think any is appropriate here?
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
declare export type Theme = { +[string]: any };
|
||||
|
||||
declare export var css: CSSConstructor;
|
||||
declare export var keyframes: KeyFramesConstructor;
|
||||
declare export var createGlobalStyle: CreateGlobalStyleConstructor;
|
||||
declare export var ThemeProvider: React$ComponentType<{
|
||||
children?: ?React$Node,
|
||||
theme: Theme | (Theme => Theme),
|
||||
}>;
|
||||
|
||||
// This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
|
||||
declare type InjectedProps = { theme: Theme | void };
|
||||
declare export function withTheme<Props: {}, Component: React$ComponentType<Props>>(
|
||||
WrappedComponent: Component,
|
||||
): React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
|
||||
|
||||
// @HACK This is a cheat to hide that the underlying type is "just a string"
|
||||
// once we know of a better way, we should be able to update this accordingly.
|
||||
// I don't think there _is_ a good way, currently.
|
||||
// @NOTE Also not too sure about the naming of this...
|
||||
declare export type StyledElementType<T> = T;
|
||||
declare export type StyledComponentType<C> = {
|
||||
[[call]]: TaggedTemplateLiteral<C>,
|
||||
+attrs: <A: {}>(
|
||||
attributes: A | ((props: React$ElementConfig<C>) => A),
|
||||
) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>,
|
||||
};
|
||||
|
||||
declare type StyledComponentList = {
|
||||
a: StyledComponentType<StyledElementType<'a'>>,
|
||||
abbr: StyledComponentType<StyledElementType<'abbr'>>,
|
||||
address: StyledComponentType<StyledElementType<'address'>>,
|
||||
area: StyledComponentType<StyledElementType<'area'>>,
|
||||
article: StyledComponentType<StyledElementType<'article'>>,
|
||||
aside: StyledComponentType<StyledElementType<'aside'>>,
|
||||
audio: StyledComponentType<StyledElementType<'audio'>>,
|
||||
b: StyledComponentType<StyledElementType<'b'>>,
|
||||
base: StyledComponentType<StyledElementType<'base'>>,
|
||||
bdi: StyledComponentType<StyledElementType<'bdi'>>,
|
||||
bdo: StyledComponentType<StyledElementType<'bdo'>>,
|
||||
big: StyledComponentType<StyledElementType<'big'>>,
|
||||
blockquote: StyledComponentType<StyledElementType<'blockquote'>>,
|
||||
body: StyledComponentType<StyledElementType<'body'>>,
|
||||
br: StyledComponentType<StyledElementType<'br'>>,
|
||||
button: StyledComponentType<StyledElementType<'button'>>,
|
||||
canvas: StyledComponentType<StyledElementType<'canvas'>>,
|
||||
caption: StyledComponentType<StyledElementType<'caption'>>,
|
||||
cite: StyledComponentType<StyledElementType<'cite'>>,
|
||||
code: StyledComponentType<StyledElementType<'code'>>,
|
||||
col: StyledComponentType<StyledElementType<'col'>>,
|
||||
colgroup: StyledComponentType<StyledElementType<'colgroup'>>,
|
||||
data: StyledComponentType<StyledElementType<'data'>>,
|
||||
datalist: StyledComponentType<StyledElementType<'datalist'>>,
|
||||
dd: StyledComponentType<StyledElementType<'dd'>>,
|
||||
del: StyledComponentType<StyledElementType<'del'>>,
|
||||
details: StyledComponentType<StyledElementType<'details'>>,
|
||||
dfn: StyledComponentType<StyledElementType<'dfn'>>,
|
||||
dialog: StyledComponentType<StyledElementType<'dialog'>>,
|
||||
div: StyledComponentType<StyledElementType<'div'>>,
|
||||
dl: StyledComponentType<StyledElementType<'dl'>>,
|
||||
dt: StyledComponentType<StyledElementType<'dt'>>,
|
||||
em: StyledComponentType<StyledElementType<'em'>>,
|
||||
embed: StyledComponentType<StyledElementType<'embed'>>,
|
||||
fieldset: StyledComponentType<StyledElementType<'fieldset'>>,
|
||||
figcaption: StyledComponentType<StyledElementType<'figcaption'>>,
|
||||
figure: StyledComponentType<StyledElementType<'figure'>>,
|
||||
footer: StyledComponentType<StyledElementType<'footer'>>,
|
||||
form: StyledComponentType<StyledElementType<'form'>>,
|
||||
h1: StyledComponentType<StyledElementType<'h1'>>,
|
||||
h2: StyledComponentType<StyledElementType<'h2'>>,
|
||||
h3: StyledComponentType<StyledElementType<'h3'>>,
|
||||
h4: StyledComponentType<StyledElementType<'h4'>>,
|
||||
h5: StyledComponentType<StyledElementType<'h5'>>,
|
||||
h6: StyledComponentType<StyledElementType<'h6'>>,
|
||||
head: StyledComponentType<StyledElementType<'head'>>,
|
||||
header: StyledComponentType<StyledElementType<'header'>>,
|
||||
hgroup: StyledComponentType<StyledElementType<'hgroup'>>,
|
||||
hr: StyledComponentType<StyledElementType<'hr'>>,
|
||||
html: StyledComponentType<StyledElementType<'html'>>,
|
||||
i: StyledComponentType<StyledElementType<'i'>>,
|
||||
iframe: StyledComponentType<StyledElementType<'iframe'>>,
|
||||
img: StyledComponentType<StyledElementType<'img'>>,
|
||||
input: StyledComponentType<StyledElementType<'input'>>,
|
||||
ins: StyledComponentType<StyledElementType<'ins'>>,
|
||||
kbd: StyledComponentType<StyledElementType<'kbd'>>,
|
||||
keygen: StyledComponentType<StyledElementType<'keygen'>>,
|
||||
label: StyledComponentType<StyledElementType<'label'>>,
|
||||
legend: StyledComponentType<StyledElementType<'legend'>>,
|
||||
li: StyledComponentType<StyledElementType<'li'>>,
|
||||
link: StyledComponentType<StyledElementType<'link'>>,
|
||||
main: StyledComponentType<StyledElementType<'main'>>,
|
||||
map: StyledComponentType<StyledElementType<'map'>>,
|
||||
mark: StyledComponentType<StyledElementType<'mark'>>,
|
||||
menu: StyledComponentType<StyledElementType<'menu'>>,
|
||||
menuitem: StyledComponentType<StyledElementType<'menuitem'>>,
|
||||
meta: StyledComponentType<StyledElementType<'meta'>>,
|
||||
meter: StyledComponentType<StyledElementType<'meter'>>,
|
||||
nav: StyledComponentType<StyledElementType<'nav'>>,
|
||||
noscript: StyledComponentType<StyledElementType<'noscript'>>,
|
||||
object: StyledComponentType<StyledElementType<'object'>>,
|
||||
ol: StyledComponentType<StyledElementType<'ol'>>,
|
||||
optgroup: StyledComponentType<StyledElementType<'optgroup'>>,
|
||||
option: StyledComponentType<StyledElementType<'option'>>,
|
||||
output: StyledComponentType<StyledElementType<'output'>>,
|
||||
p: StyledComponentType<StyledElementType<'p'>>,
|
||||
param: StyledComponentType<StyledElementType<'param'>>,
|
||||
picture: StyledComponentType<StyledElementType<'picture'>>,
|
||||
pre: StyledComponentType<StyledElementType<'pre'>>,
|
||||
progress: StyledComponentType<StyledElementType<'progress'>>,
|
||||
q: StyledComponentType<StyledElementType<'q'>>,
|
||||
rp: StyledComponentType<StyledElementType<'rp'>>,
|
||||
rt: StyledComponentType<StyledElementType<'rt'>>,
|
||||
ruby: StyledComponentType<StyledElementType<'ruby'>>,
|
||||
s: StyledComponentType<StyledElementType<'s'>>,
|
||||
samp: StyledComponentType<StyledElementType<'samp'>>,
|
||||
script: StyledComponentType<StyledElementType<'script'>>,
|
||||
section: StyledComponentType<StyledElementType<'section'>>,
|
||||
select: StyledComponentType<StyledElementType<'select'>>,
|
||||
small: StyledComponentType<StyledElementType<'small'>>,
|
||||
source: StyledComponentType<StyledElementType<'source'>>,
|
||||
span: StyledComponentType<StyledElementType<'span'>>,
|
||||
strong: StyledComponentType<StyledElementType<'strong'>>,
|
||||
style: StyledComponentType<StyledElementType<'style'>>,
|
||||
sub: StyledComponentType<StyledElementType<'sub'>>,
|
||||
summary: StyledComponentType<StyledElementType<'summary'>>,
|
||||
sup: StyledComponentType<StyledElementType<'sup'>>,
|
||||
table: StyledComponentType<StyledElementType<'table'>>,
|
||||
tbody: StyledComponentType<StyledElementType<'tbody'>>,
|
||||
td: StyledComponentType<StyledElementType<'td'>>,
|
||||
textarea: StyledComponentType<StyledElementType<'textarea'>>,
|
||||
tfoot: StyledComponentType<StyledElementType<'tfoot'>>,
|
||||
th: StyledComponentType<StyledElementType<'th'>>,
|
||||
thead: StyledComponentType<StyledElementType<'thead'>>,
|
||||
time: StyledComponentType<StyledElementType<'time'>>,
|
||||
title: StyledComponentType<StyledElementType<'title'>>,
|
||||
tr: StyledComponentType<StyledElementType<'tr'>>,
|
||||
track: StyledComponentType<StyledElementType<'track'>>,
|
||||
u: StyledComponentType<StyledElementType<'u'>>,
|
||||
ul: StyledComponentType<StyledElementType<'ul'>>,
|
||||
var: StyledComponentType<StyledElementType<'var'>>,
|
||||
video: StyledComponentType<StyledElementType<'video'>>,
|
||||
wbr: StyledComponentType<StyledElementType<'wbr'>>,
|
||||
|
||||
// SVG
|
||||
circle: StyledComponentType<StyledElementType<'circle'>>,
|
||||
clipPath: StyledComponentType<StyledElementType<'clipPath'>>,
|
||||
defs: StyledComponentType<StyledElementType<'defs'>>,
|
||||
ellipse: StyledComponentType<StyledElementType<'ellipse'>>,
|
||||
g: StyledComponentType<StyledElementType<'g'>>,
|
||||
image: StyledComponentType<StyledElementType<'image'>>,
|
||||
line: StyledComponentType<StyledElementType<'line'>>,
|
||||
linearGradient: StyledComponentType<StyledElementType<'linearGradient'>>,
|
||||
mask: StyledComponentType<StyledElementType<'mask'>>,
|
||||
path: StyledComponentType<StyledElementType<'path'>>,
|
||||
pattern: StyledComponentType<StyledElementType<'pattern'>>,
|
||||
polygon: StyledComponentType<StyledElementType<'polygon'>>,
|
||||
polyline: StyledComponentType<StyledElementType<'polyline'>>,
|
||||
radialGradient: StyledComponentType<StyledElementType<'radialGradient'>>,
|
||||
rect: StyledComponentType<StyledElementType<'rect'>>,
|
||||
stop: StyledComponentType<StyledElementType<'stop'>>,
|
||||
svg: StyledComponentType<StyledElementType<'svg'>>,
|
||||
text: StyledComponentType<StyledElementType<'text'>>,
|
||||
tspan: StyledComponentType<StyledElementType<'tspan'>>,
|
||||
};
|
||||
|
||||
declare export default StyledComponentList & {
|
||||
[[call]]: <S: string>(S) => $ElementType<StyledComponentList, S>,
|
||||
[[call]]: <P: {}, C: React$ComponentType<P>>(C) => StyledComponentType<C>,
|
||||
};
|
||||
}
|
||||
|
||||
declare module 'styled-components/native' {
|
||||
declare export type Interpolation =
|
||||
| (<P: {}>(executionContext: P) => string)
|
||||
| CSSRules
|
||||
| KeyFrames
|
||||
| string
|
||||
| number;
|
||||
|
||||
declare export type CSSRules = Interpolation[];
|
||||
|
||||
// This is not exported on purpose, since it's an implementation detail
|
||||
declare type TaggedTemplateLiteral<R> = (
|
||||
strings: string[],
|
||||
...interpolations: Interpolation[]
|
||||
) => R;
|
||||
|
||||
declare export type CSSConstructor = TaggedTemplateLiteral<CSSRules>;
|
||||
declare export type KeyFramesConstructor = TaggedTemplateLiteral<KeyFrames>;
|
||||
declare export type CreateGlobalStyleConstructor = TaggedTemplateLiteral<React$ComponentType<*>>;
|
||||
|
||||
declare interface Tag<T> {
|
||||
styleTag: HTMLStyleElement | null;
|
||||
getIds(): string[];
|
||||
hasNameForId(id: string, name: string): boolean;
|
||||
insertMarker(id: string): T;
|
||||
insertRules(id: string, cssRules: string[], name: ?string): void;
|
||||
removeRules(id: string): void;
|
||||
css(): string;
|
||||
toHTML(additionalAttrs: ?string): string;
|
||||
toElement(): React$Element<*>;
|
||||
clone(): Tag<T>;
|
||||
sealed: boolean;
|
||||
}
|
||||
|
||||
// The `any`/weak types in here all come from `styled-components` directly, since those definitions were just copied over
|
||||
declare export class StyleSheet {
|
||||
static get master(): StyleSheet;
|
||||
static get instance(): StyleSheet;
|
||||
static reset(forceServer?: boolean): void;
|
||||
|
||||
id: number;
|
||||
forceServer: boolean;
|
||||
target: ?HTMLElement;
|
||||
tagMap: { [string]: Tag<any> }; // eslint-disable-line flowtype/no-weak-types
|
||||
deferred: { [string]: string[] | void };
|
||||
rehydratedNames: { [string]: boolean };
|
||||
ignoreRehydratedNames: { [string]: boolean };
|
||||
tags: Tag<any>[]; // eslint-disable-line flowtype/no-weak-types
|
||||
importRuleTag: Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
capacity: number;
|
||||
clones: StyleSheet[];
|
||||
|
||||
constructor(?HTMLElement): this;
|
||||
rehydrate(): this;
|
||||
clone(): StyleSheet;
|
||||
sealAllTags(): void;
|
||||
makeTag(tag: ?Tag<any>): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
getImportRuleTag(): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
getTagForId(id: string): Tag<any>; // eslint-disable-line flowtype/no-weak-types
|
||||
hasId(id: string): boolean;
|
||||
hasNameForId(id: string, name: string): boolean;
|
||||
deferredInject(id: string, cssRules: string[]): void;
|
||||
inject(id: string, cssRules: string[], name?: string): void;
|
||||
remove(id: string): void;
|
||||
toHtml(): string;
|
||||
toReactElements(): React$ElementType[];
|
||||
}
|
||||
|
||||
declare export class KeyFrames {
|
||||
id: string;
|
||||
name: string;
|
||||
rules: string[];
|
||||
|
||||
constructor(name: string, rules: string[]): this;
|
||||
inject(StyleSheet): void;
|
||||
toString(): string;
|
||||
getName(): string;
|
||||
}
|
||||
|
||||
// I think any is appropriate here?
|
||||
// eslint-disable-next-line flowtype/no-weak-types
|
||||
declare export type Theme = { +[string]: any };
|
||||
|
||||
declare export var css: CSSConstructor;
|
||||
declare export var keyframes: KeyFramesConstructor;
|
||||
declare export var createGlobalStyle: CreateGlobalStyleConstructor;
|
||||
declare export var ThemeProvider: React$ComponentType<{
|
||||
children?: ?React$Node,
|
||||
theme: Theme | (Theme => Theme),
|
||||
}>;
|
||||
|
||||
// This is a bit hard to read. Not sure how to make it more readable. I think adding line-breaks makes it worse.
|
||||
declare type InjectedProps = { theme: Theme | void };
|
||||
declare export function withTheme<Props: {}, Component: React$ComponentType<Props>>(
|
||||
WrappedComponent: Component,
|
||||
): React$ComponentType<$Diff<React$ElementConfig<$Supertype<Component>>, InjectedProps>>;
|
||||
|
||||
// @HACK This is a cheat to hide that the underlying type is "just a string"
|
||||
// once we know of a better way, we should be able to update this accordingly.
|
||||
// I don't think there _is_ a good way, currently.
|
||||
// @NOTE Also not too sure about the naming of this...
|
||||
declare export type StyledElementType<T> = T;
|
||||
declare export type StyledComponentType<C> = {
|
||||
[[call]]: TaggedTemplateLiteral<C>,
|
||||
+attrs: <A: {}>(
|
||||
attributes: A,
|
||||
) => TaggedTemplateLiteral<React$ComponentType<$Diff<React$ElementConfig<C>, A>>>,
|
||||
};
|
||||
|
||||
declare type StyledComponentList = {
|
||||
ActivityIndicator: StyledComponentType<React$ComponentType<{}>>,
|
||||
ActivityIndicatorIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
ART: StyledComponentType<React$ComponentType<{}>>,
|
||||
Button: StyledComponentType<React$ComponentType<{}>>,
|
||||
DatePickerIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
DrawerLayoutAndroid: StyledComponentType<React$ComponentType<{}>>,
|
||||
Image: StyledComponentType<React$ComponentType<{}>>,
|
||||
ImageBackground: StyledComponentType<React$ComponentType<{}>>,
|
||||
ImageEditor: StyledComponentType<React$ComponentType<{}>>,
|
||||
ImageStore: StyledComponentType<React$ComponentType<{}>>,
|
||||
KeyboardAvoidingView: StyledComponentType<React$ComponentType<{}>>,
|
||||
ListView: StyledComponentType<React$ComponentType<{}>>,
|
||||
MapView: StyledComponentType<React$ComponentType<{}>>,
|
||||
Modal: StyledComponentType<React$ComponentType<{}>>,
|
||||
NavigatorIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
Picker: StyledComponentType<React$ComponentType<{}>>,
|
||||
PickerIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
ProgressBarAndroid: StyledComponentType<React$ComponentType<{}>>,
|
||||
ProgressViewIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
ScrollView: StyledComponentType<React$ComponentType<{}>>,
|
||||
SegmentedControlIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
Slider: StyledComponentType<React$ComponentType<{}>>,
|
||||
SliderIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
SnapshotViewIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
Switch: StyledComponentType<React$ComponentType<{}>>,
|
||||
RecyclerViewBackedScrollView: StyledComponentType<React$ComponentType<{}>>,
|
||||
RefreshControl: StyledComponentType<React$ComponentType<{}>>,
|
||||
SafeAreaView: StyledComponentType<React$ComponentType<{}>>,
|
||||
StatusBar: StyledComponentType<React$ComponentType<{}>>,
|
||||
SwipeableListView: StyledComponentType<React$ComponentType<{}>>,
|
||||
SwitchAndroid: StyledComponentType<React$ComponentType<{}>>,
|
||||
SwitchIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
TabBarIOS: StyledComponentType<React$ComponentType<{}>>,
|
||||
Text: StyledComponentType<React$ComponentType<{}>>,
|
||||
TextInput: StyledComponentType<React$ComponentType<{}>>,
|
||||
ToastAndroid: StyledComponentType<React$ComponentType<{}>>,
|
||||
ToolbarAndroid: StyledComponentType<React$ComponentType<{}>>,
|
||||
Touchable: StyledComponentType<React$ComponentType<{}>>,
|
||||
TouchableHighlight: StyledComponentType<React$ComponentType<{}>>,
|
||||
TouchableNativeFeedback: StyledComponentType<React$ComponentType<{}>>,
|
||||
TouchableOpacity: StyledComponentType<React$ComponentType<{}>>,
|
||||
TouchableWithoutFeedback: StyledComponentType<React$ComponentType<{}>>,
|
||||
View: StyledComponentType<React$ComponentType<{}>>,
|
||||
ViewPagerAndroid: StyledComponentType<React$ComponentType<{}>>,
|
||||
WebView: StyledComponentType<React$ComponentType<{}>>,
|
||||
FlatList: StyledComponentType<React$ComponentType<{}>>,
|
||||
SectionList: StyledComponentType<React$ComponentType<{}>>,
|
||||
VirtualizedList: StyledComponentType<React$ComponentType<{}>>,
|
||||
};
|
||||
|
||||
declare export default StyledComponentList & {
|
||||
[[call]]: <S: string>(S) => $ElementType<StyledComponentList, S>,
|
||||
[[call]]: <P: {}, C: React$ComponentType<P>>(C) => StyledComponentType<C>,
|
||||
};
|
||||
}
|
||||
|
|
@ -55,8 +55,7 @@ type AppTheme = {
|
|||
};
|
||||
|
||||
// =(
|
||||
declare type PropsWithTheme<T = {}> =
|
||||
| Object
|
||||
| ({
|
||||
theme: AppTheme,
|
||||
} & (T | Object));
|
||||
declare type PropsWithTheme<T = {}> = {
|
||||
...T,
|
||||
theme: AppTheme,
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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">94%</text><text x="107" y="14">94%</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">90%</text><text x="107" y="14">90%</text></g></svg>
|
||||
|
Before Width: | Height: | Size: 745 B After Width: | Height: | Size: 745 B |
Loading…
Reference in New Issue