fix: design qa feedback #1033
fix: design qa feedback #1033
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
RobChangCA
requested review from
moldy530,
rthomare,
dancoombs,
mokok123 and
dphilipson
as code owners
| @@ -12,7 +12,7 @@ const CodePreviewSwitch = React.forwardRef< | |||
| >(({ className, ...props }, ref) => ( | |||
| <SwitchPrimitives.Root | |||
| className={cn( | |||
| "peer inline-flex h-[28px] w-[50px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-brand data-[state=unchecked]:bg-[#94A3B8]", | |||
| "peer inline-flex h-[28px] w-[50px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-[#020617] data-[state=unchecked]:bg-[#94A3B8]", | |||
There was a problem hiding this comment.
nit: can we put these bg colors into the theme for the ui-demo somewhere? I ran into some inconsistencies with background colors on the toggles (eg. Email toggle vs Passkey On Signup toggle when passkeys are off)
There's also a thread about revisiting some of the bg colors of the toggles and that will make it easier to address them all
There was a problem hiding this comment.
These are hardcoded because we don't want them to change when we alter the theme from light to dark
There was a problem hiding this comment.
If we end up theming the sidebar we will refactor all the hardcoded values.
| > | ||
| <NFT | ||
| nftTransfered={nftTransfered} | ||
| transactionUrl={transactionUrl} | ||
| status={status} | ||
| /> | ||
| <MintCardActionButtons | ||
| className="hidden xl:block" | ||
| className="hidden xl:block w-[208px] m-auto" |
There was a problem hiding this comment.
any reason for the w of this to be controlled by flex-1 and use padding / break points to control the spacing and layout?
There was a problem hiding this comment.
they want it to match the width of the mint image which isn't a direct sibling
Pull Request Checklist
yarn test)sitefolder, and guidelines for updating/adding docs can be found in the contribution guide)feat!: breaking change)yarn lint:check) and fix any issues? (yarn lint:write)PR-Codex overview
This PR focuses on updating styles and class names across various components for improved UI consistency and responsiveness. It also includes minor text adjustments for clarity.
Detailed summary
classNameproperties for various components to improve styling.NFT.tsxand other components for clarity.divelements and their attributes for consistency.Switchcomponent styling for better visibility.