-
Notifications
You must be signed in to change notification settings - Fork 102
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Permit styles [Modal/Stepper/IconSpinner] #3097
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
content = <span />; | ||
} | ||
|
||
return ( |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just an idea how to write it shorter:
<Wrapper size={size} spinnerWidth={spinnerWidth} bgColor={bgColor}>
{(() => {
if (currency) {
return <CurrencyLogo currency={currency} size="100%" />
} else if (image) {
return <img src={image} alt="Spinning icon" width={size} height={size} />
} else if (children) {
return <span>{children}</span>
}
return <span />
})()}
</Wrapper>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for the suggestion, updated!
dotBorderColor?: string | ||
} | ||
|
||
const stateStyles = { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Please, specify a type for the const:
interface StepStyles {
dotColor: string
dotBorderColor: string
labelColor: string
}
const stateStyles: Record<StepState, StepStyles> = {
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
updated!
* feat: optimize IconSpinner * feat: optimize * feat: add ENUM
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Leaving some example of usage of the enum for variable names.
margin: auto; | ||
|
||
> path { | ||
fill: var(--cow-color-text2); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here the enum would be used:
fill: var(--cow-color-text2); | |
fill: var(${ColorTypes.COLOR_TEXT_2}); |
background: var(--cow-container-bg-01); | ||
border-radius: var(--cow-border-radius-normal); | ||
box-shadow: var(--cow-box-shadow-normal); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
And here
background: var(--cow-container-bg-01); | |
border-radius: var(--cow-border-radius-normal); | |
box-shadow: var(--cow-box-shadow-normal); | |
background: var(${ColorTypes.CONTAINER_BG_01}); | |
border-radius: var(${ColorTypes.BORDER_RADIUS_NORMAL}); | |
box-shadow: var(${ColorTypes.BOX_SHADOW_NORMAL}); |
And so on
--cow-color-border: var(--cow-color-grey); | ||
--cow-container-bg-01: ${({ theme }) => theme.bg1}; | ||
--cow-modal-backdrop: var(--cow-color-text1-opacity-25); | ||
--cow-border-radius-normal: 24px; | ||
--cow-padding-normal: 24px; | ||
--cow-box-shadow-normal: 0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Here is a base place for their definition, using the same way.
It's just a template string, so it shouldn't add any extra processing/make it slower
--cow-color-border: var(--cow-color-grey); | |
--cow-container-bg-01: ${({ theme }) => theme.bg1}; | |
--cow-modal-backdrop: var(--cow-color-text1-opacity-25); | |
--cow-border-radius-normal: 24px; | |
--cow-padding-normal: 24px; | |
--cow-box-shadow-normal: 0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d; | |
${ColorTypes.COLOR_BORDER}: var(${ColorTypes.COLOR_GREY}); | |
--cow-container-bg-01: ${({ theme }) => theme.bg1}; | |
--cow-modal-backdrop: var(--cow-color-text1-opacity-25); | |
--cow-border-radius-normal: 24px; | |
--cow-padding-normal: 24px; | |
--cow-box-shadow-normal: 0 1.5rem 1rem #00000008,0 .75rem .75rem #0000000a,0 .25rem .375rem #0000000d; |
Merging as I'm addressing the ENUMs in #3110 |
Summary
Adds updated
Modal
Stepper
andIconSpinner
modules. To be used with the Permit flow. Available on Cosmos.Screen.Recording.2023-08-31.at.15.07.16.mov
Screen.Recording.2023-08-31.at.15.06.20.mov
Screen.Recording.2023-08-31.at.15.06.02.mov