How to use @mycrypto/ui - 2 common examples
To help you get started, we’ve selected a few @mycrypto/ui examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
MyCryptoHQ / MyCrypto / common / v2 / components / StackedCard.tsx View on Github 
border-bottom: 0.0625em solid #dde3ee;
`;
const StackedCardHead = styled.section`
display: flex;
align-items: center;
justify-content: space-between;
`;
const StackedCardHeading = styled(Typography)`
display: flex;
align-items: center;
margin: 0;
font-weight: bold;
line-height: 1.31;
font-size: ${scale(1)};
`;
StackedCardHeading.defaultProps = {
as: 'header'
};
// Arbitrary positioning of icons to respect AddressBook and AccountList designs
const StackedCardIcons = styled.div`
height: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
> * {
width: 15px;
}
${props =>return cards;
};
export const screenIsMobileSized = (breakpoint: number): boolean =>
window.matchMedia(`(max-width: ${breakpoint}px)`).matches;
const GroupHeading = styled(Typography)`
display: flex;
align-items: center;
margin: 0;
padding: 0.9375rem;
border-bottom: 0.0625rem solid #dde3ee;
background: ${props => props.theme.tableHeadBackground};
text-transform: uppercase;
font-size: ${scale(2)};
cursor: pointer;
` as StyledHTMLElement;
GroupHeading.defaultProps = {
as: 'section',
role: 'button'
};
const GroupHeadingCaret = styled(Icon)`
margin-left: 0.5em;
${props =>
props.isFlipped &&
`
svg {
transform: rotateX(180deg)
}@mycrypto/ui
The shared UI component library used across all MyCrypto products.
