From 8a8ba691e50e95f94d8eec3a8b894c8f641d005b Mon Sep 17 00:00:00 2001
From: Suhail <suhail.zahed@gmail.com>
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 \
           <Heading>Get started with Livepeer Studio</Heading>
         </Box>
         <Grid className="grid-cols-1 gap-5 lg:grid-cols-2">
-          <Box className="w-full h-full flex bg-card flex-col justify-between p-4 rounded-md">
+          <Box className="w-full h-full flex bg-background border border-input flex-col justify-between p-4 rounded-lg">
             <Box>
               <TerminalIcon
                 strokeWidth={1}
@@ -269,7 +269,7 @@ const Card = ({
   link: string;
 }) => {
   return (
-    <Box className="w-full h-full flex bg-card flex-col justify-between p-4 rounded-md">
+    <Box className="w-full h-full flex bg-background flex-col justify-between p-4 rounded-lg border border-input">
       <Box>
         {icon ? (
           <Box>{icon}</Box>
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 aria-label="breadcrumb">
           {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 (
     <>
-      <Flex className="bg-background flex-col min-h-0 border-r border-input md:w-[270px] h-full p-2">
+      <Flex className=" flex-col min-h-0  md:w-[270px] h-full p-2">
         <Flex className="p-1 mb-1 gap-2 flex items-center justify-between">
           <DropdownMenu>
             <DropdownMenuTrigger className="flex w-full items-center p-2 bg-transparent border-0 gap-2 hover:bg-accent data-[state=open]:bg-accent rounded-lg">
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<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-card text-card-foreground shadow-sm",
+      "rounded-lg border bg-red-500 text-card-foreground shadow-sm",
       className,
     )}
     {...props}
diff --git a/packages/www/css/tailwind.css b/packages/www/css/tailwind.css
index bfce97bab..857513704 100644
--- a/packages/www/css/tailwind.css
+++ b/packages/www/css/tailwind.css
@@ -6,7 +6,7 @@
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
-    --card: 0 0% 97.5%;
+    --card: 0 0% 99%;
     --card-foreground: 240 10% 3.9%;
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
@@ -33,7 +33,7 @@
   }
 
   .dark-theme-green {
-    --background: 240 10% 3.9%;
+    --background: 0 0% 7%;
     --foreground: 0 0% 98%;
     --card: 240 3% 8.2%;
     --card-foreground: 0 0% 98%;
@@ -65,9 +65,11 @@
   * {
     @apply border-border;
   }
+
   html {
     @apply scroll-smooth;
   }
+
   body {
     @apply bg-background text-foreground;
     /* font-feature-settings: "rlig" 1, "calt" 1; */
diff --git a/packages/www/layouts/dashboard.tsx b/packages/www/layouts/dashboard.tsx
index a9edc9f52..6233e3207 100644
--- a/packages/www/layouts/dashboard.tsx
+++ b/packages/www/layouts/dashboard.tsx
@@ -77,19 +77,23 @@ function DashboardLayout({
 
   return (
     <>
-      <Flex className="min-w-0 min-h-0 flex-1 w-full h-full max-h-full">
+      <div className="flex min-w-0 min-h-0 flex-1 w-full h-full max-h-full">
         <Elements stripe={stripePromise}>
           {!isExport() && <NextSeo {...seo} />}
           <Sidebar id={id} />
-          <Flex className="w-full min-w-0 flex-col max-h-full h-full min-h-0 overflow-auto">
+          <div
+            style={{
+              margin: 25,
+            }}
+            className="border border-input  flex w-full min-w-0 flex-col max-h-auto h-auto bg-card rounded-md min-h-0 overflow-auto">
             <Header breadcrumbs={breadcrumbs} />
-            <Flex className="w-full flex-col mx-auto max-w-[1200px] h-full">
+            <div className="w-full flex flex-col mx-auto max-w-[1200px] h-full">
               {children}
-            </Flex>
-          </Flex>
+            </div>
+          </div>
           <FileUpload />
         </Elements>
-      </Flex>
+      </div>
     </>
   );
 }

From 65639ecc8d35fd246d49abfcc2e66c3ddc31ac8f Mon Sep 17 00:00:00 2001
From: Suhail <suhail.zahed@gmail.com>
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<HTMLAnchorElement>) => {
+}: AnchorHTMLAttributes<HTMLAnchorElement> & { isChild?: boolean }) => {
   return (
     <a
-      className="text-sm cursor-pointer flex items-center text-primary px-2 py-2 rounded-md leading-snug font-medium gap-2 no-underline hover:bg-accent focus:outline-none aria-selected:bg-accent"
+      className={cn(
+        "text-sm cursor-pointer flex items-center text-primary px-2 py-2 rounded-md leading-snug font-medium gap-2 no-underline hover:bg-accent focus:outline-none aria-selected:bg-accent",
+        isChild && "pl-8",
+      )}
       {...rest}
     />
   );
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>
-                          <NavLink aria-selected={isActive(child)}>
+                          <NavLink
+                            aria-selected={isActive(child)}
+                            isChild={true}>
                             {child.title}
                           </NavLink>
                         </Link>
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<
   <div
     ref={ref}
     className={cn(
-      "rounded-lg border bg-red-500 text-card-foreground shadow-sm",
+      "rounded-lg border bg-background text-card-foreground shadow-sm",
       className,
     )}
     {...props}

From e13562ea6d867e1b4c15621de7cd2a0ae3455276 Mon Sep 17 00:00:00 2001
From: Suhail <suhail.zahed@gmail.com>
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 = () => {
             </Text>
             <PaymentMethodDialog invalidateQuery={invalidateQuery} />
           </Flex>
-          <Flex
-            css={{
-              ".rccs__card__background": {
-                background:
-                  "linear-gradient(to right, $colors$green11, $colors$green11) !important",
-              },
-              ".rccs__card--front": {
-                color: "white !important",
-              },
-            }}>
+          <Flex>
             {user?.stripeCustomerPaymentMethodId ? (
               <>
                 <PaymentMethod data={data} />

From 1595da92fc6a12f86d9a7aa5241438da76d9ac8d Mon Sep 17 00:00:00 2001
From: Suhail <suhail.zahed@gmail.com>
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 }) => {
             </DropdownMenuTrigger>
             <DropdownMenuContent
               placeholder="Account"
-              className="w-[12rem] ml-3">
+              className="w-[14rem] mt-1 ml-3">
               <DropdownMenuGroup className="flex flex-col mx-1">
                 <DropdownMenuItem
                   className="px-2 py-1"
@@ -305,11 +305,13 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
 
         {!isSettingsPage && (
           <DropdownMenu>
-            <DropdownMenuTrigger className="flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1">
+            <DropdownMenuTrigger className="ml-2 flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1">
               {activeProject?.name}
               <ChevronDown className="h-4 w-4 opacity-50" />
             </DropdownMenuTrigger>
-            <DropdownMenuContent placeholder={"Projects"}>
+            <DropdownMenuContent
+              className="mt-1 w-[13rem]"
+              placeholder={"Projects"}>
               <DropdownMenuGroup>
                 <DropdownMenuLabel>Projects</DropdownMenuLabel>
 
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 (
-    <Box
-      css={{
-        maxWidth: "470px",
-        justifySelf: "flex-end",
-        width: "100%",
-      }}>
-      <Box
-        css={{
-          borderRadius: "$3",
-          position: "relative",
-          mb: "$5",
-        }}>
-        <Box
-          css={{
-            width: "100%",
-            minHeight: 220,
-            borderRadius: "$2",
-            position: "relative",
-            bc: "$panel",
-            border: "1px solid $neutral6",
-            overflow: "hidden",
-          }}>
+    <div className="max-w-[470px] justify-self-end w-full">
+      <div className="rounded-lg relative mb-5">
+        <div className="w-full rounded-md relative bg-background border border-input overflow-hidden min-h-[220px]">
           {isBroadcastLive ? (
             <LivepeerBroadcast streamKey={stream.streamKey} />
           ) : stream.isActive ? (
             <ActiveStream playbackId={stream.playbackId} />
           ) : (
             <>
-              <Badge
-                size="2"
-                css={{
-                  backgroundColor: "$neutral7",
-                  position: "absolute",
-                  zIndex: 1,
-                  left: 10,
-                  top: 10,
-                  letterSpacing: 0,
-                }}>
-                <Box css={{ mr: 5 }}>
+              <Badge className="absolute z-10 left-2 top-2 ">
+                <div className="mr-1">
                   <Status css={{ backgroundColor: "$neutral9" }} size="1" />
-                </Box>
+                </div>
                 Idle
               </Badge>
             </>
           )}
-        </Box>
+        </div>
         <Flex css={{ mt: "$2", mb: "$1" }} gap="2" align="center">
           <AssetSharePopup
             playbackId={stream.playbackId}
             triggerNode={
-              <Button size="2">
-                <Box
-                  as={Share2Icon}
-                  css={{
-                    mr: "$1",
-                    flex: 1,
-                  }}
-                />
+              <Button variant="outline">
+                <Share2Icon className="mr-1" />
                 Share
               </Button>
             }
@@ -151,10 +112,8 @@ const StreamPlayerBox = ({
                 : "Go live from the browser, instantly"
             }>
             <Button
-              size="2"
-              css={{
-                flex: 2,
-              }}
+              className="w-full"
+              variant="secondary"
               disabled={isStreamActiveFromExternal}
               onClick={() =>
                 setIsBroadcastLive((prev) => {
@@ -162,25 +121,14 @@ const StreamPlayerBox = ({
                   return !prev;
                 })
               }>
-              <Box
-                as={FiVideo}
-                css={{
-                  mr: "$1",
-                }}
-              />
+              <FiVideo className="mr-1" />
+
               {isBroadcastLive ? "Stop broadcast" : "Go live"}
             </Button>
           </Tooltip>
         </Flex>
-      </Box>
-      <Box
-        css={{
-          display: "flex",
-          backgroundColor: "$neutral3",
-          borderRadius: "$1",
-          fontWeight: 600,
-          fontSize: "$2",
-        }}>
+      </div>
+      <div className="flex flex-row bg-background border border-input rounded-md font-semibold text-sm">
         <Box
           as="div"
           onClick={() => {
@@ -225,7 +173,7 @@ const StreamPlayerBox = ({
           <FaKey />
           Streaming Software
         </Box>
-      </Box>
+      </div>
       <StreamSetupBox
         activeTab={activeTab}
         stream={stream}
@@ -234,7 +182,7 @@ const StreamPlayerBox = ({
         globalPlaybackUrl={globalPlaybackUrl}
         invalidateStream={invalidateStream}
       />
-    </Box>
+    </div>
   );
 };
 
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 = <T extends Record<string, unknown>>({
           {!noPagination && (
             <Flex className="justify-between items-center mt-4">
               <Text>
-                <b>{data?.count}</b> results
+                <b>{data?.count}</b> {data?.count > 1 ? "results" : "result"}
               </Text>
               {viewAll ? (
                 <Link href={viewAll} passHref legacyBehavior>
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 <TextCell cell={updatedCell} />;
+    },
     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}