Sign-in With Ethereum Design Update (#16019)
* header warning changes * updated warning message * Updated button color * add rounded corners * text + style changes * cleanup * linter fixes * remove console.log * break out components * remove unused css * use icon name var * improve icon styling * remove unused styles * Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * use design system fonts * remove unused fonts * moved tooltip to parent component * remove domain call * updated stories * classname cleanup * fix locales * remove unused locales * Update ui/components/app/signature-request-siwe/signature-request-siwe-tag/index.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> Co-authored-by: George Marshall <georgewrmarshall@gmail.com>feature/default_network_editable
Sam Gbafa
2 years ago
committed by
GitHub
parent
76af0f4d4f
commit
512b9bdf76
@ -0,0 +1,25 @@ |
||||
import React from 'react'; |
||||
import { |
||||
DISPLAY, |
||||
ALIGN_ITEMS, |
||||
COLORS, |
||||
JUSTIFY_CONTENT, |
||||
} from '../../../../helpers/constants/design-system'; |
||||
import Box from '../../../ui/box'; |
||||
import { Icon, ICON_NAMES } from '../../../component-library/icon'; |
||||
|
||||
const SignatureRequestSIWEIcon = () => { |
||||
return ( |
||||
<Box |
||||
className="signature-request-siwe-icon" |
||||
display={DISPLAY.INLINE_FLEX} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
backgroundColor={COLORS.ERROR_DEFAULT} |
||||
justifyContent={JUSTIFY_CONTENT.CENTER} |
||||
> |
||||
<Icon name={ICON_NAMES.DANGER_FILLED} color={COLORS.ERROR_INVERSE} /> |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default SignatureRequestSIWEIcon; |
||||
@ -0,0 +1,5 @@ |
||||
.signature-request-siwe-icon { |
||||
border-radius: 100%; |
||||
height: 32px; |
||||
width: 32px; |
||||
} |
||||
@ -0,0 +1,11 @@ |
||||
import React from 'react'; |
||||
import SignatureRequestSIWEIcon from '.'; |
||||
|
||||
export default { |
||||
title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWEIcon', |
||||
id: __filename, |
||||
}; |
||||
|
||||
export const DefaultStory = (args) => <SignatureRequestSIWEIcon {...args} />; |
||||
|
||||
DefaultStory.storyName = 'Default'; |
||||
@ -0,0 +1,45 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { |
||||
TYPOGRAPHY, |
||||
SIZES, |
||||
DISPLAY, |
||||
ALIGN_ITEMS, |
||||
COLORS, |
||||
FONT_WEIGHT, |
||||
} from '../../../../helpers/constants/design-system'; |
||||
import Box from '../../../ui/box'; |
||||
import Typography from '../../../ui/typography/typography'; |
||||
|
||||
const SignatureRequestSIWETag = ({ text }) => { |
||||
return ( |
||||
<Box |
||||
className="signature-request-siwe-tag" |
||||
marginRight={1} |
||||
display={DISPLAY.INLINE_FLEX} |
||||
alignItems={ALIGN_ITEMS.CENTER} |
||||
backgroundColor={COLORS.ERROR_DEFAULT} |
||||
borderRadius={SIZES.XL} |
||||
paddingLeft={4} |
||||
paddingRight={4} |
||||
> |
||||
<Typography |
||||
fontWeight={FONT_WEIGHT.BOLD} |
||||
margin={0} |
||||
variant={TYPOGRAPHY.H7} |
||||
color={COLORS.ERROR_INVERSE} |
||||
> |
||||
{text} |
||||
</Typography> |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
export default SignatureRequestSIWETag; |
||||
|
||||
SignatureRequestSIWETag.propTypes = { |
||||
/** |
||||
* The text to display in the tag |
||||
*/ |
||||
text: PropTypes.string, |
||||
}; |
||||
@ -0,0 +1,18 @@ |
||||
import React from 'react'; |
||||
import SignatureRequestSIWETag from '.'; |
||||
|
||||
export default { |
||||
title: 'Components/App/SignatureRequestSIWE/SignatureRequestSIWETag', |
||||
id: __filename, |
||||
argTypes: { |
||||
text: { control: 'text' }, |
||||
}, |
||||
}; |
||||
|
||||
export const DefaultStory = (args) => <SignatureRequestSIWETag {...args} />; |
||||
|
||||
DefaultStory.storyName = 'Default'; |
||||
|
||||
DefaultStory.args = { |
||||
text: 'Unsafe', |
||||
}; |
||||
Loading…
Reference in new issue