From 8a8ba691e50e95f94d8eec3a8b894c8f641d005b Mon Sep 17 00:00:00 2001 From: Suhail Date: Wed, 2 Oct 2024 16:38:15 +0530 Subject: [PATCH 1/4] ui: update colors and design --- packages/www/components/GettingStarted/index.tsx | 4 ++-- packages/www/components/Header/index.tsx | 1 - packages/www/components/Sidebar/index.tsx | 2 +- packages/www/components/ui/card.tsx | 2 +- packages/www/css/tailwind.css | 6 ++++-- packages/www/layouts/dashboard.tsx | 16 ++++++++++------ 6 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/www/components/GettingStarted/index.tsx b/packages/www/components/GettingStarted/index.tsx index 6550dd347..24be234c2 100644 --- a/packages/www/components/GettingStarted/index.tsx +++ b/packages/www/components/GettingStarted/index.tsx @@ -177,7 +177,7 @@ curl --request POST \ Get started with Livepeer Studio - + { return ( - + {icon ? ( {icon} diff --git a/packages/www/components/Header/index.tsx b/packages/www/components/Header/index.tsx index 3f6bd78b3..ce0d46a45 100644 --- a/packages/www/components/Header/index.tsx +++ b/packages/www/components/Header/index.tsx @@ -80,7 +80,6 @@ const Header = ({ breadcrumbs = [] }) => { height: 60, width: "100%", margin: "0 auto", - maxWidth: "1520px", }}> {breadcrumbs.map((breadcrumb, i) => { diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index 61a0d44be..084d96b26 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -225,7 +225,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => { return ( <> - + diff --git a/packages/www/components/ui/card.tsx b/packages/www/components/ui/card.tsx index 4593b7a17..0f2af7497 100644 --- a/packages/www/components/ui/card.tsx +++ b/packages/www/components/ui/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
- +
{!isExport() && } - +
- +
{children} - - +
+
- +
); } From 65639ecc8d35fd246d49abfcc2e66c3ddc31ac8f Mon Sep 17 00:00:00 2001 From: Suhail Date: Wed, 2 Oct 2024 16:54:03 +0530 Subject: [PATCH 2/4] ui: fix sidebar child indentation --- packages/www/components/Nav/NavLink.tsx | 10 ++++++++-- packages/www/components/Sidebar/index.tsx | 4 +++- packages/www/components/ui/card.tsx | 2 +- 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/packages/www/components/Nav/NavLink.tsx b/packages/www/components/Nav/NavLink.tsx index c2465d851..f67a5c42e 100644 --- a/packages/www/components/Nav/NavLink.tsx +++ b/packages/www/components/Nav/NavLink.tsx @@ -1,11 +1,17 @@ import type { AnchorHTMLAttributes } from "react"; +import { cn } from "lib/cn"; + export const NavLink = ({ + isChild, ...rest -}: AnchorHTMLAttributes) => { +}: AnchorHTMLAttributes & { isChild?: boolean }) => { return ( ); diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index 084d96b26..c93551557 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -381,7 +381,9 @@ const Sidebar = ({ id }: { id: SidebarId }) => { key={child.id} passHref legacyBehavior> - + {child.title} diff --git a/packages/www/components/ui/card.tsx b/packages/www/components/ui/card.tsx index 0f2af7497..c5d7964f5 100644 --- a/packages/www/components/ui/card.tsx +++ b/packages/www/components/ui/card.tsx @@ -9,7 +9,7 @@ const Card = React.forwardRef<
Date: Wed, 2 Oct 2024 17:01:55 +0530 Subject: [PATCH 3/4] ui: update card element colors --- packages/www/css/tailwind.css | 12 ++++++++++++ packages/www/pages/settings/billing/index.tsx | 11 +---------- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/www/css/tailwind.css b/packages/www/css/tailwind.css index 857513704..85f170a42 100644 --- a/packages/www/css/tailwind.css +++ b/packages/www/css/tailwind.css @@ -77,3 +77,15 @@ text-rendering: optimizeLegibility; } } + +.rccs__card--front { + @apply border-2 border-input rounded-2xl !important; +} + +.rccs__card__background { + @apply bg-gradient-to-r from-zinc-900 to-zinc-900 border-2 border-input !important; +} + +.rccs__card--front { + @apply text-white !important; +} diff --git a/packages/www/pages/settings/billing/index.tsx b/packages/www/pages/settings/billing/index.tsx index c26c48e1e..57b50059a 100644 --- a/packages/www/pages/settings/billing/index.tsx +++ b/packages/www/pages/settings/billing/index.tsx @@ -311,16 +311,7 @@ const Billing = () => { - + {user?.stripeCustomerPaymentMethodId ? ( <> From 1595da92fc6a12f86d9a7aa5241438da76d9ac8d Mon Sep 17 00:00:00 2001 From: Suhail Date: Wed, 2 Oct 2024 17:48:56 +0530 Subject: [PATCH 4/4] ui: fix more issues --- packages/www/components/Sidebar/index.tsx | 8 +- .../StreamDetails/StreamPlayerBox/index.tsx | 92 ++++--------------- packages/www/components/Table/index.tsx | 2 +- .../www/components/WebhooksTable/helpers.tsx | 15 ++- packages/www/components/ui/dropdown-menu.tsx | 2 +- 5 files changed, 41 insertions(+), 78 deletions(-) diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx index c93551557..4dc26d0d2 100644 --- a/packages/www/components/Sidebar/index.tsx +++ b/packages/www/components/Sidebar/index.tsx @@ -245,7 +245,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => { + className="w-[14rem] mt-1 ml-3"> { {!isSettingsPage && ( - + {activeProject?.name} - + Projects diff --git a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx index c6cf41a45..86bc4240b 100644 --- a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx +++ b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx @@ -1,11 +1,4 @@ -import { - Badge, - Box, - Button, - Flex, - Status, - Tooltip, -} from "@livepeer/design-system"; +import { Box, Flex, Status, Tooltip } from "@livepeer/design-system"; import { Broadcast as LivepeerBroadcast } from "@livepeer/react"; import { Share2Icon } from "@radix-ui/react-icons"; import { Stream } from "@livepeer.studio/api"; @@ -24,6 +17,8 @@ import { FiVideo } from "react-icons/fi"; import StreamSetupBox from "../StreamSetupBox"; import ActiveStream from "./ActiveStream"; import { useJune, events } from "hooks/use-june"; +import { Badge } from "components/ui/badge"; +import { Button } from "components/ui/button"; export type StreamPlayerBoxProps = { stream: Stream; @@ -78,64 +73,30 @@ const StreamPlayerBox = ({ }, [June]); return ( - - - +
+
+
{isBroadcastLive ? ( ) : stream.isActive ? ( ) : ( <> - - + +
- +
Idle )} - +
- + } @@ -151,10 +112,8 @@ const StreamPlayerBox = ({ : "Go live from the browser, instantly" }> - - +
+
{ @@ -225,7 +173,7 @@ const StreamPlayerBox = ({ Streaming Software - +
- +
); }; diff --git a/packages/www/components/Table/index.tsx b/packages/www/components/Table/index.tsx index a2149edf0..00b04fafd 100644 --- a/packages/www/components/Table/index.tsx +++ b/packages/www/components/Table/index.tsx @@ -478,7 +478,7 @@ export const DataTableComponent = >({ {!noPagination && ( - {data?.count} results + {data?.count} {data?.count > 1 ? "results" : "result"} {viewAll ? ( diff --git a/packages/www/components/WebhooksTable/helpers.tsx b/packages/www/components/WebhooksTable/helpers.tsx index 77c2e8062..a7e65b4ae 100644 --- a/packages/www/components/WebhooksTable/helpers.tsx +++ b/packages/www/components/WebhooksTable/helpers.tsx @@ -21,7 +21,20 @@ export const makeColumns = () => [ { Header: "URL", accessor: "url", - Cell: TextCell, + Cell: ({ cell }) => { + const url = cell.value.value; + const truncatedUrl = url.length > 40 ? url.substring(0, 40) + "..." : url; + + const updatedCell = { + ...cell, + value: { + ...cell.value, + children: truncatedUrl, + }, + }; + // @ts-ignore - it is valid, just not typed - will check back later + return ; + }, disableSortBy: true, }, { diff --git a/packages/www/components/ui/dropdown-menu.tsx b/packages/www/components/ui/dropdown-menu.tsx index 318c197b9..b3cb9f40b 100644 --- a/packages/www/components/ui/dropdown-menu.tsx +++ b/packages/www/components/ui/dropdown-menu.tsx @@ -62,7 +62,7 @@ const DropdownMenuContent = React.forwardRef< ref={ref} sideOffset={sideOffset} className={cn( - "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", + "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-background p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className, )} {...props}