hotfix(responsive): refactoring UI on wallet summary to allow for small screens
This commit is contained in:
parent
b76c56a1e9
commit
ec2609bb0f
|
@ -9,6 +9,8 @@ import { formatNumber } from '../utils/format-number';
|
|||
import { getCoinName } from '../utils/get-coin-name';
|
||||
import { DARK } from '../constants/themes';
|
||||
|
||||
import { media } from '../theme';
|
||||
|
||||
import ShieldDarkImage from '../assets/images/shield_dark.png';
|
||||
import ShieldLightImage from '../assets/images/shield_light.png';
|
||||
|
||||
|
@ -18,12 +20,17 @@ const OutsideWrapper = styled.div`
|
|||
|
||||
const Wrapper = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
background-color: ${props => props.theme.colors.walletSummaryBg};
|
||||
border: 1px solid ${props => props.theme.colors.walletSummaryBorder};
|
||||
border-radius: ${props => props.theme.boxBorderRadius};
|
||||
padding: 30px 30px;
|
||||
position: relative;
|
||||
|
||||
${media.main`
|
||||
margin-top: 0;
|
||||
flex-direction: row;
|
||||
`}
|
||||
`;
|
||||
|
||||
const OutsideLabel = styled(TextComponent)`
|
||||
|
@ -86,6 +93,15 @@ const UnconfirmedValue = styled(MiddleLabel)`
|
|||
color: ${props => props.theme.colors.walletSummaryUnconfirmed};
|
||||
`;
|
||||
|
||||
const DetailMainContainer = styled.div`
|
||||
display: flex;
|
||||
margin-top: 1rem;
|
||||
|
||||
${media.main`
|
||||
margin-top: 0;
|
||||
`}
|
||||
`;
|
||||
|
||||
type Props = {
|
||||
total: number,
|
||||
shielded: number,
|
||||
|
@ -120,6 +136,7 @@ export const Component = ({
|
|||
size={theme.fontSize.medium * 2}
|
||||
/>
|
||||
</TotalContainer>
|
||||
<DetailMainContainer>
|
||||
<DetailContainer>
|
||||
<ShieldedValue value='SHIELDED' isBold size={theme.fontSize.small} />
|
||||
<MiddleLabel
|
||||
|
@ -147,6 +164,7 @@ export const Component = ({
|
|||
/>
|
||||
<USDValue value={`USD $${formatNumber({ value: unconfirmed * zecPrice })}`} />
|
||||
</DetailContainer>
|
||||
</DetailMainContainer>
|
||||
</Wrapper>
|
||||
</OutsideWrapper>
|
||||
);
|
||||
|
|
|
@ -3,3 +3,4 @@
|
|||
export { appTheme } from './theme';
|
||||
export { DoczWrapper } from './docz';
|
||||
export { GlobalStyle } from './global';
|
||||
export { media } from './media-queries';
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
// @flow
|
||||
|
||||
import { css } from 'styled-components';
|
||||
|
||||
// Media Queries
|
||||
export const sizes = {
|
||||
main: 910,
|
||||
// desktop: 1024,
|
||||
// largeDesktop: 1280,
|
||||
};
|
||||
|
||||
export const media = Object.keys(sizes).reduce((acc, label) => {
|
||||
acc[label] = (...args: any) => css`
|
||||
@media (min-width: ${sizes[label]}px) {
|
||||
${css(...args)}
|
||||
}
|
||||
`;
|
||||
|
||||
return acc;
|
||||
}, {});
|
|
@ -57,7 +57,7 @@ const createWindow = () => {
|
|||
});
|
||||
|
||||
mainWindow = new BrowserWindow({
|
||||
minWidth: 700,
|
||||
minWidth: 815,
|
||||
minHeight: 600,
|
||||
width: 1000,
|
||||
height: 660,
|
||||
|
|
Loading…
Reference in New Issue