Skip to content
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.

Sign up for GitHub

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

Jump to bottom

ui: reskin dashboard #2263

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

ui: reskin dashboard #2263

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a31d6cc
ui: reskin dashboard colors
suhailkakar Jul 12, 2024
ec08e8e
remove cn from lib/ui.ts
suhailkakar Jul 12, 2024
962939a
run prettier
suhailkakar Jul 12, 2024
5abb8b6
fix vercel build error
suhailkakar Jul 12, 2024
00c7310
ui: fix error color
suhailkakar Jul 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/www/components.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,6 @@
},
"aliases": {
"components": "components",
"utils": "lib"
"utils": "lib/cn"
}
}
5 changes: 4 additions & 1 deletion packages/www/components/ApiKeys/CreateDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -116,7 +116,9 @@ const CreateDialog = ({

return (
<AlertDialog open={isOpen} onOpenChange={onOpenChange}>
<AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
<AlertDialogContent
className="bg-surface"
css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
{!newToken && (
<>
<AlertDialogTitle asChild>
Expand Down Expand Up @@ -332,6 +334,7 @@ const CreateDialog = ({
size="2"
disabled={creating}
type="submit"
className="bg-accent text-foreground"
variant="primary">
{creating && (
<Spinner
Expand Down
5 changes: 4 additions & 1 deletion packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,10 @@ const AssetChildrenHeadingBox = ({
</Box>
</Box>
<Box css={{ position: "relative", top: "-8px" }}>
<Button size="2" onClick={() => setEditAssetDialogOpen(true)}>
<Button
className="bg-accent text-foreground"
size="2"
onClick={() => setEditAssetDialogOpen(true)}>
<Box
as={Pencil1Icon}
css={{
Expand Down
7 changes: 5 additions & 2 deletions packages/www/components/AssetDetails/AssetOverviewTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,9 @@ const AssetOverviewTab = ({
may also archive them using the following storage providers.
</Text>
</Box>
<Promo size="2" css={{ borderRadius: "$2" }}>
<div
className="bg-background text-foreground p-4 rounded-lg border"
css={{ borderRadius: "$2" }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep, but we will create this component from scratch with shadcn, so it doesn't make sense to style all of it here again

<Flex css={{ justifyContent: "space-between" }}>
<Flex align="center">
<StyledIpfsIcon />
Expand All @@ -158,6 +160,7 @@ const AssetOverviewTab = ({
display: "inline-flex",
ai: "center",
}}
className="bg-accent text-foreground"
size="2"
disabled={
Boolean(asset?.status?.phase !== "ready") || isUploading
Expand Down Expand Up @@ -206,7 +209,7 @@ const AssetOverviewTab = ({
</Flex>
</Box>
)}
</Promo>
</div>
</Box>
</>
);
Expand Down
2 changes: 2 additions & 0 deletions packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,6 +109,7 @@ const CreateAssetDialog = ({
return (
<AlertDialog open={isOpen} onOpenChange={onOpenChange}>
<AlertDialogContent
className="bg-surface"
css={{ maxWidth: 450, minWidth: 350, px: "$5", pt: "$4", pb: "$4" }}>
<AlertDialogTitle asChild>
<Heading size="1">Upload Asset</Heading>
Expand Down Expand Up @@ -221,6 +222,7 @@ const CreateAssetDialog = ({
<Button
css={{ display: "flex", ai: "center" }}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here - if we touch styling of a component, we should move it entirely to Tailwind.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but again, we will create all of them from scratch, and once we do all of them should have styling with tailwind

type="submit"
className="bg-accent text-foreground"
size="2"
disabled={creating || Object.keys(videoFiles ?? {}).length === 0}
variant="primary">
Expand Down
4 changes: 3 additions & 1 deletion packages/www/components/FeaturesModel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ export default function FeaturesModel() {

return (
<AlertDialog open={shouldShowFeature}>
<AlertDialogContent css={{ p: "0", borderRadius: 0 }}>
<AlertDialogContent
className="bg-surface"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here... once we create the Alert from scratch, all the styling will be inside the component level

css={{ p: "0", borderRadius: 0 }}>
<Flex className="flex flex-row gap-3">
<Box className="flex flex-col flex-1 justify-center p-5">
<Badge
Expand Down
3 changes: 1 addition & 2 deletions packages/www/components/FileUpload/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ const FileUpload = () => {

return (
<Box
className="bg-background border"
css={{
position: "fixed",
bottom: "$4",
Expand All @@ -52,10 +53,8 @@ const FileUpload = () => {
minWidth: 420,
maxHeight: "90%",
overflowY: "scroll",
border: "1px solid $neutral6",
borderRadius: "$3",
zIndex: 2,
backgroundColor: "$panel",
}}>
<Flex direction="column" justify="center">
{!hasPendingFileUploads && (
Expand Down
16 changes: 10 additions & 6 deletions packages/www/components/GettingStarted/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ curl --request POST \
<Flex align={"center"}>
<Avatar
fallback={getEmojiIcon(data?.name)}
className="bg-accent pt-1"
style={{
borderRadius: 10,
marginRight: 10,
Expand All @@ -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">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same thing here, we should have a handful of consistent Button styles, and then use that to re-style the dash.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Edit Project
</Button>
</Link>
Expand Down Expand Up @@ -169,7 +170,8 @@ curl --request POST \
gap: "$5",
gridTemplateColumns: "repeat(auto-fill, minmax(46%, 1fr))",
}}>
<Promo
<div
className="bg-background border p-4 rounded-xl"
css={{
width: "100%",
height: "100%",
Expand Down Expand Up @@ -238,6 +240,7 @@ curl --request POST \
"https://docs.livepeer.org/api-reference/overview/introduction"
}>
<Button
className="bg-accent"
css={{
mt: "$2",
display: "flex",
Expand All @@ -247,7 +250,7 @@ curl --request POST \
Visit documentation <ArrowRightIcon />
</Button>
</Link>
</Promo>
</div>
<Grid
css={{
display: "grid",
Expand Down Expand Up @@ -284,11 +287,11 @@ const Card = ({
link: string;
}) => {
return (
<Promo
<div
className="bg-background border p-4 rounded-xl"
css={{
width: "100%",
height: "100%",
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
Expand Down Expand Up @@ -326,6 +329,7 @@ const Card = ({
textDecoration: "none",
}}>
<Button
className="bg-accent"
css={{
mt: "$2",
display: "flex",
Expand All @@ -340,7 +344,7 @@ const Card = ({
/>
</Button>
</Link>
</Promo>
</div>
);
};

Expand Down
1 change: 0 additions & 1 deletion packages/www/components/Header/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,6 @@ const Header = ({ breadcrumbs = [] }) => {
height: 60,
width: "100%",
margin: "0 auto",
maxWidth: "1520px",
}}>
<Breadcrumbs aria-label="breadcrumb">
{breadcrumbs.map((breadcrumb, i) => {
Expand Down
2 changes: 1 addition & 1 deletion packages/www/components/Logger/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,10 +182,10 @@ const Logger = ({ stream, ...props }: { stream: Stream }) => {
</Heading>
</Box>
<Box
className="bg-accent"
css={{
overflow: "scroll",
p: "$4",
bc: "$neutral3",
height: 300,
borderRadius: 6,
}}>
Expand Down
4 changes: 3 additions & 1 deletion packages/www/components/Login/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -125,7 +125,9 @@ const Login = ({ id, buttonText, onSubmit, loading, errors }) => {
</Box>

{errors.length > 0 && (
<Box css={{ mt: "$2" }}>{errors.join(", ")}&nbsp;</Box>
<Box className="text-red-500" css={{ mt: "$2" }}>
{errors.join(", ")}&nbsp;
</Box>
)}

<Button
Expand Down
4 changes: 3 additions & 1 deletion packages/www/components/PaymentMethodDialog/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,7 +127,9 @@ const PaymentMethodDialog = ({ invalidateQuery }) => {
</Button>
</Flex>

<AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
<AlertDialogContent
className="bg-surface"
css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
<Box
as="form"
onSubmit={handleSubmit(onSubmit)}
Expand Down
18 changes: 11 additions & 7 deletions packages/www/components/Project/ProjectTile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@ import { getEmojiIcon } from "lib/get-emoji";
function ProjectTile({ name, id, invalidateQuery }) {
return (
<Box
className="bg-background border"
css={{
bc: "$neutral2",
border: "1px solid",
borderColor: "$neutral6",
p: "$4",
width: "100%",
borderRadius: "11px",
Expand All @@ -36,7 +34,11 @@ function ProjectTile({ name, id, invalidateQuery }) {
<Box>
<Flex align={"center"} justify={"between"}>
<Flex align={"center"}>
<Avatar fallback={getEmojiIcon(name)} size={"3"} />
<Avatar
className="bg-accent pt-1"
fallback={getEmojiIcon(name)}
size={"3"}
/>
<Text
css={{
fontWeight: 500,
Expand All @@ -59,8 +61,8 @@ function ProjectTile({ name, id, invalidateQuery }) {
</Box>
<DropdownMenuContent
placeholder="Settings"
className="border bg-background"
css={{
border: "1px solid $colors$neutral6",
p: "$2",
width: "13rem",
mt: "$1",
Expand All @@ -86,7 +88,9 @@ function ProjectTile({ name, id, invalidateQuery }) {
passHref
legacyBehavior
href={`/projects/${id}/${item.path}`}>
<NavLink key={item.title}>{item.title}</NavLink>
<NavLink className="hover:bg-accent" key={item.title}>
{item.title}
</NavLink>
</Link>
))}
</Flex>
Expand All @@ -96,7 +100,7 @@ function ProjectTile({ name, id, invalidateQuery }) {
</Flex>
</Box>
<Flex justify={"end"}>
<Button css={{ mt: 40 }} size={1}>
<Button className="bg-accent" css={{ mt: 40 }} size={1}>
Open Project
</Button>
</Flex>
Expand Down
5 changes: 4 additions & 1 deletion packages/www/components/Project/createProjectDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,9 @@ const CreateProjectDialog = ({

return (
<AlertDialog open={isOpen} onOpenChange={onOpenChange}>
<AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
<AlertDialogContent
className="bg-surface"
css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
<AlertDialogTitle asChild>
<Heading size="1">Create Project</Heading>
</AlertDialogTitle>
Expand Down Expand Up @@ -82,6 +84,7 @@ const CreateProjectDialog = ({
type="submit"
size="2"
disabled={creating}
className="bg-accent text-foreground"
variant="primary">
{creating && (
<Spinner
Expand Down
4 changes: 3 additions & 1 deletion packages/www/components/Project/deleteProjectDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,9 @@ const DeleteProjectDialog = ({

return (
<AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
<AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
<AlertDialogContent
className="bg-surface"
css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
<AlertDialogTitle asChild>
<Heading size="1">Delete Project </Heading>
</AlertDialogTitle>
Expand Down
Loading
Loading