feat(dashboard): signup and login page design update #7070
Conversation
✅ Deploy Preview for novu-stg-vite-dashboard-poc ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| return ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 17 16" fill="none" {...props}> | ||
| <path | ||
| d="M6.50004 7.99999L7.83337 9.33333L10.5 6.66666M15.1667 7.99999C15.1667 11.6819 12.1819 14.6667 8.50004 14.6667C4.81814 14.6667 1.83337 11.6819 1.83337 7.99999C1.83337 4.3181 4.81814 1.33333 8.50004 1.33333C12.1819 1.33333 15.1667 4.3181 15.1667 7.99999Z" | ||
| stroke="#1FC16B" | ||
| stroke={props.color ?? '#1FC16B'} |
There was a problem hiding this comment.
Added the abilty to update the color from the default green
There was a problem hiding this comment.
Variant styles should be applied via Tailwind classes on the className prop only, not via new props. So you can simply pass something like: <CircleCheck className="stroke-accent" />, or replace accent with an override using stroke-[red] or whichever color is necessary.
There was a problem hiding this comment.
@rifont issue is that I need this to be applied to the specific path element which is a child of the SVG parent. Will check if I can somehow convert it to use nesting.
There was a problem hiding this comment.
Copilot reviewed 12 out of 21 changed files in this pull request and generated no suggestions.
Files not reviewed (9)
- apps/dashboard/src/components/icons/flags/eu.tsx: Language not supported
- apps/dashboard/src/components/icons/flags/us.tsx: Language not supported
- apps/dashboard/src/components/icons/plug.tsx: Language not supported
- apps/dashboard/src/components/icons/shield-zap.tsx: Language not supported
- apps/dashboard/src/components/icons/sparkling.tsx: Language not supported
- apps/dashboard/src/pages/sign-up.tsx: Evaluated as low risk
- apps/dashboard/src/utils/clerk-appearance.ts: Evaluated as low risk
- apps/dashboard/src/components/icons/circle-check.tsx: Evaluated as low risk
- apps/dashboard/src/components/auth-layout.tsx: Evaluated as low risk
| </TooltipProvider> | ||
| </div> | ||
| <Select value={selectedRegion} onValueChange={handleRegionChange}> | ||
| <SelectTrigger className="h-[22px] w-[64px] p-[4px] pl-[6px] text-[10px] leading-[14px]"> |
There was a problem hiding this comment.
Tailwind operates with multiples of 4 for all spacing properties, so here is an example of what you would use here:
| <SelectTrigger className="h-[22px] w-[64px] p-[4px] pl-[6px] text-[10px] leading-[14px]"> | |
| <SelectTrigger className="h-[22px] w-16 p-1 pl-1.5 text-[10px] leading-[14px]"> |
Futhermore, you should always try the builtin default multiples first to see if they feel appropriate. This ensures that the base variable spacing values can be modified and the rest of the application updates dynamically with them.
There was a problem hiding this comment.
Perfect, on it. Thank you
There was a problem hiding this comment.
In the example of h-[22px] is it ok to use h-5.5 similiar to pl-1.5?
There was a problem hiding this comment.
chore: Please parse all SVGs through https://jakearchibald.github.io/svgomg/ to clean up redundant values and optimize size, most often we can reduce the total bytes by 50%
| <div className="inline-flex flex-col items-start justify-start px-5"> | ||
| <div className="flex flex-col items-start justify-start"> | ||
| <div className="relative h-[20px]"> | ||
| <img src={`/images/auth/${name}-customer.svg`} alt={name} /> |
There was a problem hiding this comment.
nice use ofalt - accessibility 😍
There was a problem hiding this comment.
was it Dima or Cursor, we will never know ;)
scopsy
changed the title
What changed? Why was the change needed?
Screenshots
Expand for optional sections
Related enterprise PR
Special notes for your reviewer