Page MenuHomePhabricator
Differential D19604 Diff 58919 cashtab/src/components/App/styles.ts

Changeset View

Standalone View

View Options

cashtab/src/components/App/styles.ts

Show First 20 Lines • Show All 92 Lines • ▼ Show 20 Linesexport const WalletBody = styled.div`
@media (max-width: 768px) { @media (max-width: 768px) {
max-height: unset; max-height: unset;
} }
`; `;
export const WalletCtn = styled.div<{ showFooter?: boolean }>` export const WalletCtn = styled.div<{ showFooter?: boolean }>`
width: 100%; width: 100%;
background: ${props => props.theme.primaryBackground}; background: ${props => props.theme.primaryBackground};
background: linear-gradient(
-165deg,
#1e0b3b 0%,
${props => props.theme.primaryBackground} 50%,
${props => props.theme.primaryBackground} 100%
);
position: relative; position: relative;
min-height: 100vh; min-height: 100vh;
max-height: 100vh; max-height: 100vh;
overflow-y: auto; overflow-y: auto;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
${CashtabScroll} ${CashtabScroll}
@media (max-width: 768px) { @media (max-width: 768px) {
max-height: unset; max-height: unset;
overflow-y: unset; overflow-y: unset;
padding: 0 0 100px; padding: 0 0 100px;
min-height: ${props => min-height: ${props =>
props.showFooter ? 'calc(100vh - 70px)' : '100vh'}; props.showFooter ? 'calc(100vh - 70px)' : '100vh'};
background: ${props => props.theme.primaryBackground};
} }
`; `;
export const Footer = styled.div` export const Footer = styled.div`
width: 230px; width: 230px;
background: ${props => props.theme.primaryBackground}; background: ${props => props.theme.primaryBackground};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-right: 1px solid ${props => props.theme.border};
height: 100vh; height: 100vh;
overflow-y: auto; overflow-y: auto;
${CashtabScroll} ${CashtabScroll}
padding: 0 10px; padding: 0 10px;
border-right: 1px solid ${props => props.theme.border};
@media (max-width: 768px) { @media (max-width: 768px) {
width: 100%; width: 100%;
z-index: 100; z-index: 100;
height: 70px; height: 70px;
border-top: 1px solid ${props => props.theme.border}; /* border-top: 1px solid ${props => props.theme.border}; */
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 0; padding: 0;
position: fixed; position: fixed;
flex-direction: row; flex-direction: row;
bottom: 0; bottom: 0;
overflow: visible; overflow: visible;
box-shadow: 0px 0px 24px 1px ${props => props.theme.menuGlow};
border-right: none; border-right: none;
/* Hide Settings nav button on mobile */
& > button:last-of-type {
display: none;
}
} }
`; `;
export const NavWrapper = styled.div` export const NavWrapper = styled.div`
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-bottom: 30px; padding-bottom: 30px;
▲ Show 20 Lines • Show All 85 Lines • ▼ Show 20 Linesconst NavButtonDesktop = css<{ active?: boolean }>`
border: none; border: none;
background: none; background: none;
margin-bottom: 5px; margin-bottom: 5px;
user-select: none; user-select: none;
flex-direction: row-reverse; flex-direction: row-reverse;
justify-content: flex-start; justify-content: flex-start;
text-align: left; text-align: left;
color: ${props => props.theme.secondaryText}; color: ${props => props.theme.secondaryText};
border-radius: 5px; border-radius: 8px;
font-weight: normal; font-weight: normal;
font-family: 'Poppins'; font-family: 'Space Grotesk', sans-serif;
span, span,
p { p {
line-height: 1em; line-height: 1em;
} }
:hover { :hover {
color: ${props => props.theme.secondaryAccent};
svg,
g,
path {
fill: ${props => props.theme.secondaryAccent};
}
background: ${props => props.theme.secondaryBackground}; background: ${props => props.theme.secondaryBackground};
} }
svg { svg {
fill: ${props => props.theme.secondaryText}; fill: ${props => props.theme.secondaryText};
width: 24px; width: 20px;
height: 24px; height: 20px;
margin-right: 8px; margin-right: 8px;
@media (max-width: 768px) { @media (max-width: 768px) {
margin-right: 0; margin-right: 0;
} }
} }
g, g,
path { path {
fill: ${props => props.theme.secondaryText}; fill: ${props => props.theme.secondaryText};
} }
${({ active, ...props }) => ${({ active, ...props }) =>
active && active &&
` `
color: ${props.theme.primaryBackground} !important; color: ${props.theme.primaryText} !important;
background: ${props.theme.accent} !important; background: ${props.theme.accent} !important;
svg, g, path { svg, g, path {
fill: ${props.theme.primaryBackground} !important; fill: ${props.theme.primaryText} !important;
} }
font-weight: 700; font-weight: 700;
`} `}
@media (max-width: 768px) { @media (max-width: 768px) {
border-radius: 0px; border-radius: 0px;
} }
`; `;
Show All 36 Linesexport const NavItem = styled.button`
} }
p { p {
flex: 2; flex: 2;
margin: 0; margin: 0;
} }
`; `;
export const ScreenWrapper = styled.div` export const ScreenWrapper = styled.div`
padding: 20px; padding: 0 20px;
background: ${props => props.theme.primaryBackground}; position: relative;
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 0px; padding: 0px;
max-height: unset; max-height: unset;
} }
`; `;
export const HeaderCtn = styled.div` export const HeaderCtn = styled.div`
display: none; display: none;
@media (max-width: 768px) { @media (max-width: 768px) {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 10px 0; padding: 10px 0;
gap: 6px; gap: 6px;
background: ${props => props.theme.primaryBackground};
border-bottom: 1px solid ${props => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
} }
`; `;
export const CashtabLogo = styled.img` export const CashtabLogo = styled.img`
width: 100px; width: 100px;
`; `;
Show All 32 Lines
`; `;
export const HeaderInfoCtn = styled.div` export const HeaderInfoCtn = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
align-items: center; align-items: center;
flex-direction: row-reverse; flex-direction: row-reverse;
padding: 20px; padding: 20px;
background: ${props => props.theme.primaryBackground};
border-bottom: 1px solid ${props => props.theme.border}; border-bottom: 1px solid ${props => props.theme.border};
position: relative; position: relative;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 99; z-index: 99;
@media (max-width: 768px) { @media (max-width: 768px) {
flex-direction: column; flex-direction: column;
position: relative; position: relative;
Show All 22 Lines