ui: reskin dashboard #2263
ui: reskin dashboard #2263
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
Generally let's sync on how we want to go about the redesign. I'd like to add the shadcn components (some components folder with Button, Dialog, etc), get those styled according to our style guide, and then move to using those in the dashboard. Right now this is top-down, and it makes more sense to go bottom-up
| <Promo size="2" css={{ borderRadius: "$2" }}> | ||
| <div | ||
| className="bg-background text-foreground p-4 rounded-lg border" | ||
| css={{ borderRadius: "$2" }}> |
There was a problem hiding this comment.
When we move to tailwind, can we remove all of the previous CSS? In this, they are competing for priority (they are both applying border radius here).
There was a problem hiding this comment.
Yep, but we will create this component from scratch with shadcn, so it doesn't make sense to style all of it here again
| @@ -221,6 +222,7 @@ const CreateAssetDialog = ({ | |||
| <Button | |||
| css={{ display: "flex", ai: "center" }} | |||
There was a problem hiding this comment.
Same here - if we touch styling of a component, we should move it entirely to Tailwind.
There was a problem hiding this comment.
Yes, but again, we will create all of them from scratch, and once we do all of them should have styling with tailwind
| @@ -45,7 +45,9 @@ export default function FeaturesModel() { | |||
|
|
|||
| return ( | |||
| <AlertDialog open={shouldShowFeature}> | |||
| <AlertDialogContent css={{ p: "0", borderRadius: 0 }}> | |||
| <AlertDialogContent | |||
| className="bg-surface" | |||
There was a problem hiding this comment.
This should be styled at the component level, not at every Alert Dialog level. We don't want to have to apply this class to every dialog, the underlying dialog should be responsible for that.
There was a problem hiding this comment.
Same here... once we create the Alert from scratch, all the styling will be inside the component level
| @@ -140,7 +141,7 @@ curl --request POST \ | |||
| </Heading> | |||
| </Flex> | |||
| <Link href={appendProjectId("/settings")} passHref legacyBehavior> | |||
| <Button as="a" size="2"> | |||
| <Button className="bg-accent" as="a" size="2"> | |||
There was a problem hiding this comment.
Same thing here, we should have a handful of consistent Button styles, and then use that to re-style the dash.
There was a problem hiding this comment.
Yep, with shadcn we can do that, but as we are still didn't migrated all component, we can keep them as it is and just change color
|
Thanks Chase, sharing the same reply from discord: __ Like we talked earlier, we're planning to switch all our components from @livepeer/design to shadcn and tailwindcss and realized it’s will take some time, so we’re gonna tackle it step by step instead of in one big go. To make sure our new stuff matches the Studio dashboard, we need to start by just changing the colors. This way, even if we roll out small updates one by one, they’ll still fit with the dashboard theme. I know the Alert background component should ideally be updated on component level, but since we don’t have the updated component yet, we need to update the colors first. This means we’ll replace the components gradually. We can’t do it all at once, so we’ll continue by adding the new component with updated colors and remove the current components along with their styles. Hope this clears things up! Let me know if you want to chat more about this. We can also hop on a call if that helps. |
What does this pull request do? Explain your changes. (required)
Updated the colors in Studio dashboard.
NOTE: I've updated only the background or foreground colors not the components. Migrating components will take more time so until they are completed, we can use the already added tailwind colors
Specific updates (required)
How did you test each of these updates (required)
Does this pull request close any open issues?
Screenshots (optional)
Checklist