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

styles: send view and buttons general refactoring

This commit is contained in:
Andre Neves 2019-02-18 11:20:47 -05:00
parent be958a0c82
commit 5d8c7bd9df
7 changed files with 67 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/components/button.js
View File

@ -29,23 +29,24 @@ const Primary = styled(DefaultButton)`
}
&:disabled {
background-color: ${props => props.theme.colors.buttonBorderColor};
background-color: ${props => props.theme.colors.buttonPrimaryDisabledBg};
cursor: not-allowed;
opacity: 0.8;
opacity: 0.45;
}
`;
const Secondary = styled(DefaultButton)`
background-color: transparent;
background-color: ${props => props.theme.colors.buttonSecondaryBg};
color: ${props => props.theme.colors.buttonSecondaryText};
border: 2px solid ${props => props.theme.colors.buttonBorderColor};
border: 1px solid ${props => props.theme.colors.buttonSecondaryBorder};
&:hover {
border-color: ${props => props.theme.colors.primary};
background-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
border-color: ${props => props.theme.colors.buttonSecondaryHoveredBg}
}
&:disabled {
background-color: Transparent;
background-color: ${props => props.theme.colors.buttonSecondaryDisabledBg};
cursor: not-allowed;
color: ${props => props.theme.colors.buttonBorderColor};

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

@ -32,8 +32,14 @@ export const DARK_COLORS = {
sendCardBorder: 'transparent',
// Buttons
buttonPrimaryText: text,
buttonPrimaryBg: brand,
buttonPrimaryDisabledBg: brand,
buttonPrimaryText: black,
buttonSecondaryBg: '#ddd',
buttonSecondaryDisabledBg: brand,
buttonSecondaryText: black,
buttonSecondaryBorder: '#ddd',
buttonSecondaryHoveredBg: '#bbb',
// Transactions
transactionSent: error,

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

@ -31,8 +31,14 @@ export const LIGHT_COLORS = {
dropdownBorder: border,
// Buttons
buttonPrimaryBg: brand,
buttonPrimaryDisabledBg: brand,
buttonPrimaryText: white,
buttonSecondaryText: text,
buttonSecondaryBg: '#989898',
buttonSecondaryDisabledBg: brand,
buttonSecondaryBorder: '#989898',
buttonSecondaryText: white,
buttonSecondaryHoveredBg: '#aaa',
// Card
cardBackgroundColor: black,

40
app/theme/theme.js
View File

@ -154,14 +154,6 @@ export const appTheme: AppTheme = {
[LIGHT]: LIGHT_COLORS.sidebarBorderRight,
[DARK]: DARK_COLORS.sidebarBorderRight,
}),
buttonSecondaryText: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonSecondaryText,
[DARK]: DARK_COLORS.buttonSecondaryText,
}),
buttonPrimaryText: theme('mode', {
[LIGHT]: LIGHT_COLORS.buttonPrimaryText,
[DARK]: DARK_COLORS.buttonPrimaryText,
}),
qrCodeWrapperBg: theme('mode', {
[LIGHT]: LIGHT_COLORS.qrCodeWrapperBg,
[DARK]: DARK_COLORS.qrCodeWrapperBg,
@ -262,5 +254,37 @@ export const appTheme: AppTheme = {
[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,
}),
},
};

10
app/views/send.js
View File

@ -123,6 +123,7 @@ const InfoCard = styled.div`
background-color: ${props => props.theme.colors.sendCardBg};
border: 1px solid ${props => props.theme.colors.sendCardBorder}
border-radius: ${props => props.theme.boxBorderRadius};
margin-bottom: 10px;
`;
const InfoContent = styled.div`
@ -141,7 +142,11 @@ const InfoCardUSD = styled(TextComponent)`
const FormButton = styled(Button)`
width: 100%;
margin: 10px 0;
margin: 5px 0;
&:first-child {
margin-top: 0;
}
`;
const ModalContent = styled(ColumnComponent)`
@ -663,7 +668,6 @@ export class SendView extends PureComponent<Props, State> {
onClick={() => this.showModal(toggle)}
id='send-submit-button'
label='Send'
variant='secondary'
focused
isFluid
disabled={!from || !amount || !to || !fee}
@ -680,7 +684,7 @@ export class SendView extends PureComponent<Props, State> {
</ModalContent>
)}
</ConfirmDialogComponent>
<FormButton label='Cancel' variant='secondary' />
<FormButton label='Clear Form' variant='secondary' />
</SendWrapper>
</RowComponent>
);

2
app/views/settings.js
View File

@ -86,7 +86,7 @@ const LearnMore = styled.div`
cursor: pointer;
text-transform: uppercase;
font-size: 10px;
font-family: Roboto;
font-family: ${props => props.theme.fontFamily};;
letter-spacing: 1px;
color: ${props => props.theme.colors.settingsLearnMore};

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

@ -48,8 +48,14 @@ type Colors = {
consoleBorder: ThemeSet,
// Buttons
buttonPrimaryBg: ThemeSet,
buttonPrimaryText: ThemeSet,
buttonPrimaryDisabledBg: ThemeSet,
buttonSecondaryBg: ThemeSet,
buttonSecondaryText: ThemeSet,
buttonSecondaryDisabledBg: ThemeSet,
buttonSecondaryBorder: ThemeSet,
buttonSecondaryHoveredBg: ThemeSet,
// QR Code
qrCodeWrapperBg: ThemeSet,