From a31d6cc141eba123b9450027d9be4d86ef4d6a43 Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Fri, 12 Jul 2024 18:09:04 +0530
Subject: [PATCH 1/5] ui: reskin dashboard colors

---
 packages/www/components.json                  |  2 +-
 .../www/components/ApiKeys/CreateDialog.tsx   |  5 ++-
 .../AssetDetails/AssetChildrenHeadingBox.tsx  |  4 +-
 .../AssetDetails/AssetOverviewTab.tsx         |  7 +++-
 .../AssetsTable/CreateAssetDialog/index.tsx   |  2 +
 .../www/components/FeaturesModel/index.tsx    |  2 +-
 packages/www/components/FileUpload/index.tsx  |  3 +-
 .../www/components/GettingStarted/index.tsx   | 19 ++++++---
 packages/www/components/Header/index.tsx      |  1 -
 packages/www/components/Logger/index.tsx      |  2 +-
 .../components/PaymentMethodDialog/index.tsx  |  2 +-
 .../www/components/Project/ProjectTile.tsx    | 18 +++++----
 .../Project/createProjectDialog.tsx           |  5 ++-
 .../Project/deleteProjectDialog.tsx           |  2 +-
 packages/www/components/Sidebar/index.tsx     | 36 ++++++-----------
 .../SigningKeysTable/CreateDialog.tsx         |  3 +-
 .../SigningKeysTable/CreateKeyDialog.tsx      |  3 +-
 .../SigningKeysTable/DeleteKeysDialog.tsx     |  2 +-
 .../MultistreamTargetsTable/Toolbox.tsx       |  4 +-
 .../StreamChildrenHeadingBox.tsx              |  8 +++-
 .../StreamDetails/StreamPlayerBox/index.tsx   | 15 ++++---
 .../components/StreamDetails/Terminate.tsx    |  2 +-
 .../StreamSessionsTable/DeleteDialog.tsx      |  2 +-
 .../StreamsTable/CreateStreamDialog.tsx       |  9 ++++-
 .../components/StreamsTable/StreamFilter.tsx  | 11 ++---
 .../Table/components/TableEmptyState.tsx      |  1 +
 .../components/TableStateDeleteDialog.tsx     |  2 +-
 .../www/components/Table/filters/index.tsx    | 20 ++++++----
 packages/www/components/Table/index.tsx       |  3 +-
 .../www/components/TypeFilterCard/index.tsx   | 12 +++---
 .../WebhookDialogs/CreateEditDialog.tsx       |  4 +-
 .../WebhookDialogs/DeleteDialog.tsx           |  2 +-
 packages/www/css/tailwind.css                 | 40 +++++++++++++------
 packages/www/layouts/dashboard.tsx            |  5 +--
 packages/www/package.json                     |  1 +
 .../pages/projects/[projectId]/settings.tsx   |  3 +-
 packages/www/pages/settings/projects.tsx      |  1 +
 packages/www/tailwind.config.js               | 13 +++---
 yarn.lock                                     | 17 +++++---
 39 files changed, 176 insertions(+), 117 deletions(-)

diff --git a/packages/www/components.json b/packages/www/components.json
index 29baf27e29..b5f29f83ff 100644
--- a/packages/www/components.json
+++ b/packages/www/components.json
@@ -12,6 +12,6 @@
   },
   "aliases": {
     "components": "components",
-    "utils": "lib"
+    "utils": "lib/cn"
   }
 }
diff --git a/packages/www/components/ApiKeys/CreateDialog.tsx b/packages/www/components/ApiKeys/CreateDialog.tsx
index 949da2f91c..e8d848740c 100644
--- a/packages/www/components/ApiKeys/CreateDialog.tsx
+++ b/packages/www/components/ApiKeys/CreateDialog.tsx
@@ -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>
@@ -332,6 +334,7 @@ const CreateDialog = ({
                   size="2"
                   disabled={creating}
                   type="submit"
+                  className="bg-accent text-foreground"
                   variant="primary">
                   {creating && (
                     <Spinner
diff --git a/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx b/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
index 8218be4d20..455a50cf1a 100644
--- a/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
+++ b/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
@@ -64,7 +64,9 @@ 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={{
diff --git a/packages/www/components/AssetDetails/AssetOverviewTab.tsx b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
index 2531e64457..05110526c5 100644
--- a/packages/www/components/AssetDetails/AssetOverviewTab.tsx
+++ b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
@@ -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" 
+        size="2" css={{ borderRadius: "$2" }}>
           <Flex css={{ justifyContent: "space-between" }}>
             <Flex align="center">
               <StyledIpfsIcon />
@@ -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
@@ -206,7 +209,7 @@ const AssetOverviewTab = ({
               </Flex>
             </Box>
           )}
-        </Promo>
+        </div>
       </Box>
     </>
   );
diff --git a/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx b/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
index c47cc1f547..648a9fbdbe 100644
--- a/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
+++ b/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
@@ -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>
@@ -221,6 +222,7 @@ const CreateAssetDialog = ({
             <Button
               css={{ display: "flex", ai: "center" }}
               type="submit"
+              className="bg-accent text-foreground"
               size="2"
               disabled={creating || Object.keys(videoFiles ?? {}).length === 0}
               variant="primary">
diff --git a/packages/www/components/FeaturesModel/index.tsx b/packages/www/components/FeaturesModel/index.tsx
index 16d9d01a60..ada42af4a1 100644
--- a/packages/www/components/FeaturesModel/index.tsx
+++ b/packages/www/components/FeaturesModel/index.tsx
@@ -45,7 +45,7 @@ export default function FeaturesModel() {
 
   return (
     <AlertDialog open={shouldShowFeature}>
-      <AlertDialogContent css={{ p: "0", borderRadius: 0 }}>
+      <AlertDialogContent className="bg-surface" css={{ p: "0", borderRadius: 0 }}>
         <Flex className="flex flex-row gap-3">
           <Box className="flex flex-col flex-1 justify-center p-5">
             <Badge
diff --git a/packages/www/components/FileUpload/index.tsx b/packages/www/components/FileUpload/index.tsx
index 609fc6aac7..b33ab41b93 100644
--- a/packages/www/components/FileUpload/index.tsx
+++ b/packages/www/components/FileUpload/index.tsx
@@ -43,6 +43,7 @@ const FileUpload = () => {
 
   return (
     <Box
+    className="bg-background border"
       css={{
         position: "fixed",
         bottom: "$4",
@@ -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 && (
diff --git a/packages/www/components/GettingStarted/index.tsx b/packages/www/components/GettingStarted/index.tsx
index 2443101263..f22708f975 100644
--- a/packages/www/components/GettingStarted/index.tsx
+++ b/packages/www/components/GettingStarted/index.tsx
@@ -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,
@@ -140,7 +141,10 @@ curl --request POST \
           </Heading>
         </Flex>
         <Link href={appendProjectId("/settings")} passHref legacyBehavior>
-          <Button as="a" size="2">
+          <Button 
+        className="bg-accent"
+        
+          as="a" size="2">
             Edit Project
           </Button>
         </Link>
@@ -169,7 +173,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%",
@@ -238,6 +243,7 @@ curl --request POST \
                 "https://docs.livepeer.org/api-reference/overview/introduction"
               }>
               <Button
+              className="bg-accent"
                 css={{
                   mt: "$2",
                   display: "flex",
@@ -247,7 +253,7 @@ curl --request POST \
                 Visit documentation <ArrowRightIcon />
               </Button>
             </Link>
-          </Promo>
+          </div>
           <Grid
             css={{
               display: "grid",
@@ -284,11 +290,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",
@@ -326,6 +332,7 @@ const Card = ({
           textDecoration: "none",
         }}>
         <Button
+        className="bg-accent"
           css={{
             mt: "$2",
             display: "flex",
@@ -340,7 +347,7 @@ const Card = ({
           />
         </Button>
       </Link>
-    </Promo>
+    </div>
   );
 };
 
diff --git a/packages/www/components/Header/index.tsx b/packages/www/components/Header/index.tsx
index 41dcfcb913..beee25b5c9 100644
--- a/packages/www/components/Header/index.tsx
+++ b/packages/www/components/Header/index.tsx
@@ -93,7 +93,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/Logger/index.tsx b/packages/www/components/Logger/index.tsx
index 000fc4f930..788bf7d507 100644
--- a/packages/www/components/Logger/index.tsx
+++ b/packages/www/components/Logger/index.tsx
@@ -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,
         }}>
diff --git a/packages/www/components/PaymentMethodDialog/index.tsx b/packages/www/components/PaymentMethodDialog/index.tsx
index 8a8b4c1429..62076737a9 100644
--- a/packages/www/components/PaymentMethodDialog/index.tsx
+++ b/packages/www/components/PaymentMethodDialog/index.tsx
@@ -127,7 +127,7 @@ 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)}
diff --git a/packages/www/components/Project/ProjectTile.tsx b/packages/www/components/Project/ProjectTile.tsx
index 0101ec98ec..01167bd2ae 100644
--- a/packages/www/components/Project/ProjectTile.tsx
+++ b/packages/www/components/Project/ProjectTile.tsx
@@ -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",
@@ -36,7 +34,9 @@ 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,
@@ -59,8 +59,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",
@@ -86,7 +86,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>
@@ -96,7 +98,9 @@ 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>
diff --git a/packages/www/components/Project/createProjectDialog.tsx b/packages/www/components/Project/createProjectDialog.tsx
index a7be55692e..da42422130 100644
--- a/packages/www/components/Project/createProjectDialog.tsx
+++ b/packages/www/components/Project/createProjectDialog.tsx
@@ -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>
@@ -82,6 +84,7 @@ const CreateProjectDialog = ({
               type="submit"
               size="2"
               disabled={creating}
+              className="bg-accent text-foreground"
               variant="primary">
               {creating && (
                 <Spinner
diff --git a/packages/www/components/Project/deleteProjectDialog.tsx b/packages/www/components/Project/deleteProjectDialog.tsx
index c470222d2b..57f63d030d 100644
--- a/packages/www/components/Project/deleteProjectDialog.tsx
+++ b/packages/www/components/Project/deleteProjectDialog.tsx
@@ -40,7 +40,7 @@ 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>
diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index 79f6eddeb1..b6592edd66 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -56,14 +56,14 @@ export const NavLink = styled(A, {
   gap: "$2",
   textDecoration: "none",
   "&:hover": {
-    bc: "$neutral4",
+    bc: "hsl(var(--accent))",
     textDecoration: "none",
   },
   "&:focus": {
     outline: "none",
   },
   variants: {
-    active: { true: { bc: "$neutral4" } },
+    active: { true: { bc: "hsl(var(--accent))" } },
   },
 });
 
@@ -232,7 +232,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
     const response = canSendEmail("resetPassword");
     if (!response.canSend) {
       openSnackbar(
-        `Please wait ${response.waitTime} seconds before sending another email.`,
+        `Please wait ${response.waitTime} seconds before sending another email.`
       );
       return;
     }
@@ -245,30 +245,18 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
 
   return (
     <>
-      <Box
-        css={{
-          backgroundColor: "$panel",
-          borderRight: "1px solid",
-          borderColor: "$neutral6",
-          maxWidth: 270,
-          width: 270,
-          top: 0,
-          position: "fixed",
-          justifyContent: "flex-end",
-          bottom: 0,
-          zIndex: 0,
-        }}>
+      <Box className="bg-background w-[17rem] fixed justify-end  bottom-0 top-0 z-0">
         <Flex align="center" justify="between" css={{ p: "$3", mb: "$3" }}>
           <DropdownMenu>
             <Flex
               as={DropdownMenuTrigger}
+              className="hover:bg-accent"
               align="center"
               css={{
                 border: 0,
                 background: "transparent",
                 p: 6,
                 "&:hover": {
-                  backgroundColor: "$neutral4",
                   borderRadius: "$3",
                 },
               }}>
@@ -297,9 +285,9 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               </Text>
             </Flex>
             <DropdownMenuContent
+              className="bg-surface border"
               placeholder="Account"
               css={{
-                border: "1px solid $colors$neutral6",
                 width: "12rem",
                 ml: "$4",
                 mt: "$1",
@@ -418,6 +406,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
           <DropdownMenu>
             <Flex
               align={"center"}
+              className="hover:bg-accent"
               as={DropdownMenuTrigger}
               css={{
                 py: "$1",
@@ -432,7 +421,6 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
                   outline: "none",
                 },
                 "&:hover": {
-                  backgroundColor: "$neutral4",
                   borderRadius: "$3",
                 },
               }}>
@@ -445,13 +433,13 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
               <TopBottomChevron />
             </Flex>
             <DropdownMenuContent
+              className="bg-surface border"
               placeholder={"Projects"}
               css={{
-                border: "1px solid $colors$neutral6",
-                width: "14rem",
-                ml: "$5",
+                width: "13rem",
+                ml: "$4",
                 py: "$2",
-                px: "$3",
+                px: "$2",
               }}>
               <Text size={2} variant={"neutral"} css={{ ml: "$1", mb: "$1" }}>
                 Projects
@@ -598,7 +586,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
                     </Box>
                   )}
                 </Box>
-              ),
+              )
             )}
           </Grid>
           <Flex
diff --git a/packages/www/components/SigningKeysTable/CreateDialog.tsx b/packages/www/components/SigningKeysTable/CreateDialog.tsx
index 935940b087..a75c92d907 100644
--- a/packages/www/components/SigningKeysTable/CreateDialog.tsx
+++ b/packages/www/components/SigningKeysTable/CreateDialog.tsx
@@ -60,7 +60,7 @@ 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" }}>
         {!newKey && (
           <>
             <AlertDialogTitle asChild>
@@ -98,6 +98,7 @@ const CreateDialog = ({
                   size="2"
                   disabled={isLoading}
                   type="submit"
+                  className="bg-accent text-foreground" 
                   variant="primary">
                   {isLoading && (
                     <Spinner
diff --git a/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx b/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
index 3390e01f52..bbdac5d8d9 100644
--- a/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
+++ b/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
@@ -62,7 +62,7 @@ const CreateKeyDialog = ({
 
   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" }}>
         {!newKey && (
           <>
             <AlertDialogTitle asChild>
@@ -100,6 +100,7 @@ const CreateKeyDialog = ({
                   size="2"
                   disabled={isLoading}
                   type="submit"
+                  className="bg-accent text-foreground" 
                   variant="primary">
                   {isLoading && (
                     <Spinner
diff --git a/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx b/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
index 1dd2226601..8709a42e49 100644
--- a/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
+++ b/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
@@ -53,7 +53,7 @@ const DeleteKeysDialog = ({
     <AlertDialog
       open={deleteDialogState.on}
       onOpenChange={deleteDialogState.onOff}>
-      <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 {state.selectedRows.length} signing key
diff --git a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
index 1159d37256..d4650483ee 100644
--- a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
+++ b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
@@ -39,7 +39,7 @@ const DisableDialog = ({
   const [saving, setSaving] = useState(false);
   return (
     <AlertDialog open={open} onOpenChange={() => setOpen(!open)}>
-      <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">Disable multistream target?</Heading>
         </AlertDialogTitle>
@@ -104,7 +104,7 @@ const DeleteDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      <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 multistream target?</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
index 621552c7b1..351de5486d 100644
--- a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
+++ b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
@@ -79,12 +79,16 @@ const StreamChildrenHeadingBox = ({
       <Box css={{ position: "relative", top: "-8px" }}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button size="2" css={{ display: "flex", ai: "center", mr: "$1" }}>
+            <Button 
+            className="bg-accent"
+            size="2" css={{ display: "flex", ai: "center", mr: "$1" }}>
               Actions
               <Box as={ChevronDownIcon} css={{ ml: "$1" }} />
             </Button>
           </DropdownMenuTrigger>
-          <DropdownMenuContent placeholder="dropdown-menu-content" align="end">
+          <DropdownMenuContent
+          className="bg-accent mt-2"
+          placeholder="dropdown-menu-content" align="end">
             <DropdownMenuGroup>
               <Record
                 stream={stream}
diff --git a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
index c6cf41a45a..ef9a152361 100644
--- a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
+++ b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
@@ -91,12 +91,13 @@ const StreamPlayerBox = ({
           mb: "$5",
         }}>
         <Box
+              className="bg-accent"
+
           css={{
             width: "100%",
             minHeight: 220,
             borderRadius: "$2",
             position: "relative",
-            bc: "$panel",
             border: "1px solid $neutral6",
             overflow: "hidden",
           }}>
@@ -128,7 +129,9 @@ const StreamPlayerBox = ({
           <AssetSharePopup
             playbackId={stream.playbackId}
             triggerNode={
-              <Button size="2">
+              <Button
+              className="bg-accent"
+              size="2">
                 <Box
                   as={Share2Icon}
                   css={{
@@ -152,6 +155,8 @@ const StreamPlayerBox = ({
             }>
             <Button
               size="2"
+              className="bg-accent"
+
               css={{
                 flex: 2,
               }}
@@ -174,9 +179,9 @@ const StreamPlayerBox = ({
         </Flex>
       </Box>
       <Box
+      className="bg-accent"
         css={{
           display: "flex",
-          backgroundColor: "$neutral3",
           borderRadius: "$1",
           fontWeight: 600,
           fontSize: "$2",
@@ -199,7 +204,7 @@ const StreamPlayerBox = ({
             justifyContent: "center",
             color: activeTab === "Browser" ? "$neutral1" : "inherit",
             backgroundColor:
-              activeTab === "Browser" ? "$neutral12" : "transparent",
+              activeTab === "Browser" ? "white" : "transparent",
           }}>
           <FaVideo />
           Browser
@@ -220,7 +225,7 @@ const StreamPlayerBox = ({
             justifyContent: "center",
             color: activeTab === "Streaming Software" ? "$neutral1" : "inherit",
             backgroundColor:
-              activeTab === "Streaming Software" ? "$neutral12" : "transparent",
+              activeTab === "Streaming Software" ? "white" : "transparent",
           }}>
           <FaKey />
           Streaming Software
diff --git a/packages/www/components/StreamDetails/Terminate.tsx b/packages/www/components/StreamDetails/Terminate.tsx
index ea067e01e8..b4954a29de 100644
--- a/packages/www/components/StreamDetails/Terminate.tsx
+++ b/packages/www/components/StreamDetails/Terminate.tsx
@@ -37,7 +37,7 @@ const Terminate = ({ stream, invalidate, ...props }) => {
         Terminate
       </Box>
 
-      <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">Terminate stream?</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/StreamSessionsTable/DeleteDialog.tsx b/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
index d6fab664eb..a2d56b73cd 100644
--- a/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
+++ b/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
@@ -45,7 +45,7 @@ const DeleteDialog = ({ total, onUnselect, onDelete }) => {
         </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" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">
             Delete {total} session{total > 1 && "s"}?
diff --git a/packages/www/components/StreamsTable/CreateStreamDialog.tsx b/packages/www/components/StreamsTable/CreateStreamDialog.tsx
index b51b854cc7..072fc44bf9 100644
--- a/packages/www/components/StreamsTable/CreateStreamDialog.tsx
+++ b/packages/www/components/StreamsTable/CreateStreamDialog.tsx
@@ -28,8 +28,12 @@ const CreateStreamDialog = ({
   const [streamName, setStreamName] = useState("");
 
   return (
-    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+    <AlertDialog
+    
+    open={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialogContent 
+      className="bg-surface"
+      css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Create a new livestream</Heading>
         </AlertDialogTitle>
@@ -85,6 +89,7 @@ const CreateStreamDialog = ({
             <Button
               css={{ display: "flex", ai: "center" }}
               type="submit"
+              className="bg-accent text-foreground"
               size="2"
               disabled={creating}
               variant="primary">
diff --git a/packages/www/components/StreamsTable/StreamFilter.tsx b/packages/www/components/StreamsTable/StreamFilter.tsx
index e7ae58ac11..a6416f63b4 100644
--- a/packages/www/components/StreamsTable/StreamFilter.tsx
+++ b/packages/www/components/StreamsTable/StreamFilter.tsx
@@ -237,11 +237,11 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                 fontSize: "$2",
                 borderRadius: "20px",
                 backgroundColor: "transparent",
-                borderColor: isActive ? "$primary8" : "$neutral9",
-                color: isActive ? "$primary9" : "$neutral9",
+                borderColor: isActive ? "$white" : "$neutral9",
+                color: isActive ? "$white" : "$neutral9",
                 "&:hover": {
-                  borderColor: "$primary8",
-                  color: "$primary9",
+                  borderColor: "$white",
+                  color: "$white",
                   transition: "0.3s",
                 },
                 "&:focus": {
@@ -286,9 +286,9 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                     : value)}
             </Flex>
             <DropdownMenuContent
+            className="bg-background border"
               placeholder={"more options"}
               css={{
-                border: "1px solid $colors$neutral6",
                 p: "$2",
                 width: "15rem",
                 mt: "$2",
@@ -308,6 +308,7 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                     mt: "$2",
                   }}>
                   <Button
+                  className="bg-accent"
                     type="submit"
                     css={{
                       fontWeight: 500,
diff --git a/packages/www/components/Table/components/TableEmptyState.tsx b/packages/www/components/Table/components/TableEmptyState.tsx
index c280397a4e..4dee3fc87c 100644
--- a/packages/www/components/Table/components/TableEmptyState.tsx
+++ b/packages/www/components/Table/components/TableEmptyState.tsx
@@ -46,6 +46,7 @@ const TableEmptyState = ({
     {actionToggleState && (
       <Flex align="center">
         <Button
+        className="bg-accent text-foreground"
           onClick={actionToggleState.onOn}
           css={{ alignSelf: "flex-start", mr: "$2" }}
           size="2"
diff --git a/packages/www/components/Table/components/TableStateDeleteDialog.tsx b/packages/www/components/Table/components/TableStateDeleteDialog.tsx
index 26ee0ff235..e45d5adc72 100644
--- a/packages/www/components/Table/components/TableStateDeleteDialog.tsx
+++ b/packages/www/components/Table/components/TableStateDeleteDialog.tsx
@@ -65,7 +65,7 @@ const TableStateDeleteDialog = ({
     <AlertDialog
       open={dialogToggleState.on}
       onOpenChange={dialogToggleState.onOff}>
-      <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 {state.selectedRows.length} {name}?
diff --git a/packages/www/components/Table/filters/index.tsx b/packages/www/components/Table/filters/index.tsx
index 8e76c45450..bf9dd60024 100644
--- a/packages/www/components/Table/filters/index.tsx
+++ b/packages/www/components/Table/filters/index.tsx
@@ -108,7 +108,9 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
   return (
     <DropdownMenu.Root open={isOpen} onOpenChange={handleOpenChange}>
       <DropdownMenu.Trigger asChild>
-        <Button css={{ display: "flex", ai: "center" }} size="2">
+        <Button
+        className="bg-accent text-foreground"
+        css={{ display: "flex", ai: "center" }} size="2">
           <Flex css={{ mr: "$2" }}>
             <FilterIcon />
           </Flex>
@@ -129,35 +131,39 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
           )}
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content align="end" sideOffset={5}>
+      <DropdownMenu.Content
+      className="bg-accent"
+      align="end" sideOffset={5}>
         <Box
           css={{
-            backgroundColor: "$loContrast",
             width: "284px",
             maxWidth: "284px",
             display: "flex",
             flexDirection: "column",
-            border: "1px solid $colors$neutral5",
             marginRight: "6px",
             borderRadius: "4px",
             overflow: "hidden",
             boxShadow: "0px 5px 15px -5px hsl(206deg 22% 7% / 15%)",
           }}>
           <Flex
+          className="bg-accent border-b border-2 "
             css={{
               width: "100%",
               justifyContent: "space-between",
               alignItems: "center",
               padding: "6px 7px",
-              background: "$panel",
             }}>
-            <Button onClick={handleClear} size="1" variant="neutral">
+            <Button 
+            className="bg-accent text-foreground"
+            onClick={handleClear} size="1" variant="neutral">
               Clear
             </Button>
             <Text size="2" css={{ margin: "0px" }}>
               Filters
             </Text>
-            <Button size="1" variant="primary" onClick={handleDone}>
+            <Button
+            className="bg-accent text-foreground"
+            size="1" variant="primary" onClick={handleDone}>
               Done
             </Button>
           </Flex>
diff --git a/packages/www/components/Table/index.tsx b/packages/www/components/Table/index.tsx
index a1174b5490..20e7f13c10 100644
--- a/packages/www/components/Table/index.tsx
+++ b/packages/www/components/Table/index.tsx
@@ -311,8 +311,6 @@ export const DataTableComponent = <T extends Record<string, unknown>>({
         justify="between"
         css={{
           mb: "$3",
-          borderBottom: "1px solid",
-          borderColor: border ? "$neutral5" : "transparent",
           pb: border ? "$2" : 0,
         }}>
         {/* Header title */}
@@ -374,6 +372,7 @@ export const DataTableComponent = <T extends Record<string, unknown>>({
               )}
               {createAction && (
                 <Button
+                className="bg-accent"
                   variant="neutral"
                   size="2"
                   // @ts-ignore
diff --git a/packages/www/components/TypeFilterCard/index.tsx b/packages/www/components/TypeFilterCard/index.tsx
index 97699c1f9b..4d1f4f224f 100644
--- a/packages/www/components/TypeFilterCard/index.tsx
+++ b/packages/www/components/TypeFilterCard/index.tsx
@@ -19,21 +19,21 @@ export default function TypeFilterCard({
     paddingBottom: "$2",
     width: "20em",
     border: "1px solid",
-    borderColor: isActive ? "$primary8" : "$neutral8",
+    borderColor: isActive ? "$white" : "$neutral8",
     borderRadius: "$3",
-    color: isActive ? "$primary8" : "$neutral8",
+    color: isActive ? "$white" : "$neutral8",
     cursor: "default",
     "&:hover": {
       border: "1px solid",
-      borderColor: "$primary8",
-      color: "$primary8",
+      borderColor: "$white",
+      color: "$white",
       transition: "0.3s",
     },
     "& h4": {
-      color: isActive ? "$primary8" : "$primary12",
+      color: isActive ? "$white" : "$primary12",
     },
     "&:hover h4": {
-      color: "$primary8",
+      color: "$white",
       transition: "0.3s",
     },
   });
diff --git a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
index 4017c9f40a..af225b4d06 100644
--- a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
+++ b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
@@ -95,6 +95,7 @@ const CreateEditDialog = ({
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
       {button}
       <AlertDialogContent
+      className="bg-surface"
         css={{ width: 450, maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">
@@ -222,6 +223,7 @@ const CreateEditDialog = ({
 
             <Flex
               align="center"
+              className="bg-surface"
               direction="column"
               justify={events.length > 0 ? "start" : "center"}
               css={{
@@ -232,7 +234,6 @@ const CreateEditDialog = ({
                 overflowX: "hidden",
                 overflowY: "auto",
                 border: "1px solid $colors$neutral7",
-                backgroundColor: "$neutral2",
                 zIndex: 1,
               }}>
               {events.length > 0 ? (
@@ -280,6 +281,7 @@ const CreateEditDialog = ({
                 css={{ display: "flex", ai: "center" }}
                 type="submit"
                 size="2"
+                className="bg-accent text-foreground"
                 disabled={saving}
                 variant="primary">
                 {saving && (
diff --git a/packages/www/components/WebhookDialogs/DeleteDialog.tsx b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
index be23481975..d747631781 100644
--- a/packages/www/components/WebhookDialogs/DeleteDialog.tsx
+++ b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
@@ -41,7 +41,7 @@ const DeleteDialog = ({
 
   return (
     <AlertDialog open={deleteDialogOpen}>
-      <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 Webhook</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/css/tailwind.css b/packages/www/css/tailwind.css
index fd0529a1ef..6d73d5602d 100644
--- a/packages/www/css/tailwind.css
+++ b/packages/www/css/tailwind.css
@@ -4,23 +4,39 @@
 
 @layer base {
   :root {
-    --color-border: 240 5% 80%;
-    --color-background: 0 0% 98%;
-    --color-foreground: 0 0% 10%;
-    --color-muted: 249 4% 44%;
-    --color-surface: 240 4% 95%;
-    --color-accent: 240 4% 30%;
+    --border: 240 5% 90%;
+    --background: 0 0% 98%;
+    --foreground: 0 0% 10%;
+    --muted: 249 4% 44%;
+    --surface: 240 4% 97%;
+    --accent: 240 4% 90%;
   }
 
   /* 
   The class name here is temporory. Since old class names are still in use. We can replace this with .dark once we are ready to switch to the new class names.
   */
   .dark-theme-green {
-    --color-border: 240 5% 16%;
-    --color-background: 0 0% 9%;
-    --color-foreground: 0 0% 100%;
-    --color-muted: 249 4 64;
-    --color-surface: 240 4% 9%;
-    --color-accent: 240 4% 14;
+    --border: 240 5% 15%;
+    --background: 0 0% 7%;
+    --foreground: 0 0% 100%;
+    --muted: 249 4 64;
+    --surface: 240 4% 8%;
+    --accent: 240 4% 14;
+  }
+}
+
+
+@layer base {
+  * {
+    @apply border-border !important;
+  }
+  html {
+    @apply scroll-smooth;
+  }
+  body {
+    @apply bg-background text-foreground !important;
+    /* font-feature-settings: "rlig" 1, "calt" 1; */
+    font-synthesis-weight: none;
+    text-rendering: optimizeLegibility;
   }
 }
diff --git a/packages/www/layouts/dashboard.tsx b/packages/www/layouts/dashboard.tsx
index 89a02078fa..ceb5506559 100644
--- a/packages/www/layouts/dashboard.tsx
+++ b/packages/www/layouts/dashboard.tsx
@@ -85,16 +85,15 @@ function DashboardLayout({
           </Head>
           {!isExport() && <NextSeo {...seo} />}
           <Sidebar id={id} />
-          <Box css={{ pl: 270, width: "100%" }}>
+          <div className="ml-[18rem] bg-surface rounded-md h-[96vh] m-6 border border-border">
             <Header breadcrumbs={breadcrumbs} />
             <Box
               css={{
                 margin: "0 auto",
-                maxWidth: "1520px",
               }}>
               {children}
             </Box>
-          </Box>
+          </div>
           <FileUpload />
         </Elements>
       </Box>
diff --git a/packages/www/package.json b/packages/www/package.json
index 4bd29964a5..68e6c6babc 100644
--- a/packages/www/package.json
+++ b/packages/www/package.json
@@ -32,6 +32,7 @@
     "@radix-ui/react-accordion": "^0.1.7-rc.7",
     "@radix-ui/react-collapsible": "^0.1.6",
     "@radix-ui/react-icons": "^1.1.1",
+    "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^0.0.13",
     "@radix-ui/themes": "^1.1.2",
     "@segment/snippet": "^4.9.0",
diff --git a/packages/www/pages/projects/[projectId]/settings.tsx b/packages/www/pages/projects/[projectId]/settings.tsx
index e3ec9dd843..386feee446 100644
--- a/packages/www/pages/projects/[projectId]/settings.tsx
+++ b/packages/www/pages/projects/[projectId]/settings.tsx
@@ -119,12 +119,11 @@ const Settings = () => {
           <Button
             onClick={handleSubmit}
             disabled={isLoading || !projectName}
+            className="bg-accent text-foreground"
             css={{
               p: "$4",
               fontSize: "$2",
               mt: "$3",
-              backgroundColor: "$hiContrast",
-              color: "$loContrast",
             }}>
             {isLoading && (
               <Spinner
diff --git a/packages/www/pages/settings/projects.tsx b/packages/www/pages/settings/projects.tsx
index d91ba4b39d..61c8b47f83 100644
--- a/packages/www/pages/settings/projects.tsx
+++ b/packages/www/pages/settings/projects.tsx
@@ -86,6 +86,7 @@ const WorkspaceProjects = () => {
               </Text>
             </Flex>
             <Button
+            className="bg-accent"
               onClick={() => setShowCreateProjectAlert(true)}
               css={{
                 p: "$3",
diff --git a/packages/www/tailwind.config.js b/packages/www/tailwind.config.js
index 8c0d3349a0..590da65261 100644
--- a/packages/www/tailwind.config.js
+++ b/packages/www/tailwind.config.js
@@ -4,28 +4,29 @@ module.exports = {
   content: [
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./layouts/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
       colors: {
         border: {
-          DEFAULT: "hsl(var(--color-border))",
+          DEFAULT: "hsl(var(--border))",
         },
         background: {
-          DEFAULT: "hsl(var(--color-background))",
+          DEFAULT: "hsl(var(--background))",
         },
         foreground: {
-          DEFAULT: "hsl(var(--color-foreground))",
+          DEFAULT: "hsl(var(--foreground))",
         },
         muted: {
-          DEFAULT: "hsl(var(--color-muted))",
+          DEFAULT: "hsl(var(--muted))",
         },
         surface: {
-          DEFAULT: "hsl(var(--color-surface))",
+          DEFAULT: "hsl(var(--surface))",
         },
         accent: {
-          DEFAULT: "hsl(var(--color-accent))",
+          DEFAULT: "hsl(var(--accent))",
         },
       },
     },
diff --git a/yarn.lock b/yarn.lock
index 3c6e593864..31bd3edc3e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4585,6 +4585,11 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-compose-refs@1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74"
+  integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==
+
 "@radix-ui/react-context-menu@2.1.4", "@radix-ui/react-context-menu@^2.1.4":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-context-menu/-/react-context-menu-2.1.4.tgz#250420d259d3cebe026b7658414c516a1204de3f"
@@ -5072,6 +5077,13 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-compose-refs" "1.0.1"
 
+"@radix-ui/react-slot@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84"
+  integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw==
+  dependencies:
+    "@radix-ui/react-compose-refs" "1.1.0"
+
 "@radix-ui/react-switch@1.0.3", "@radix-ui/react-switch@^1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.0.3.tgz#6119f16656a9eafb4424c600fdb36efa5ec5837e"
@@ -22183,11 +22195,6 @@ socks@^2.7.1:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
-sonner@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.5.0.tgz#af359f817063318415326b33aab54c5d17c747b7"
-  integrity sha512-FBjhG/gnnbN6FY0jaNnqZOMmB73R+5IiyYAw8yBj7L54ER7HB3fOSE5OFiQiE2iXWxeXKvg6fIP4LtVppHEdJA==
-
 sort-keys@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/sort-keys/-/sort-keys-2.0.0.tgz"

From ec08e8ea52b377de634eb72bfcabb690fba7773c Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Fri, 12 Jul 2024 18:11:06 +0530
Subject: [PATCH 2/5] remove cn from lib/ui.ts

---
 packages/www/css/tailwind.css | 2 +-
 packages/www/lib/ui.ts        | 6 ------
 2 files changed, 1 insertion(+), 7 deletions(-)
 delete mode 100644 packages/www/lib/ui.ts

diff --git a/packages/www/css/tailwind.css b/packages/www/css/tailwind.css
index 6d73d5602d..9d6b075106 100644
--- a/packages/www/css/tailwind.css
+++ b/packages/www/css/tailwind.css
@@ -9,7 +9,7 @@
     --foreground: 0 0% 10%;
     --muted: 249 4% 44%;
     --surface: 240 4% 97%;
-    --accent: 240 4% 90%;
+    --accent: 240 4% 94%;
   }
 
   /* 
diff --git a/packages/www/lib/ui.ts b/packages/www/lib/ui.ts
deleted file mode 100644
index 365058cebd..0000000000
--- a/packages/www/lib/ui.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}

From 962939a8212dbdd1b07db4d7cac36ecb7f7fda5d Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Fri, 12 Jul 2024 18:11:31 +0530
Subject: [PATCH 3/5] run prettier

---
 .../www/components/ApiKeys/CreateDialog.tsx   |  4 +--
 .../AssetDetails/AssetChildrenHeadingBox.tsx  |  7 +++---
 .../AssetDetails/AssetOverviewTab.tsx         |  5 ++--
 .../AssetsTable/CreateAssetDialog/index.tsx   |  2 +-
 .../www/components/FeaturesModel/index.tsx    |  4 ++-
 packages/www/components/FileUpload/index.tsx  |  2 +-
 .../www/components/GettingStarted/index.tsx   | 13 ++++------
 packages/www/components/Logger/index.tsx      |  2 +-
 .../components/PaymentMethodDialog/index.tsx  |  4 ++-
 .../www/components/Project/ProjectTile.tsx    | 20 +++++++--------
 .../Project/createProjectDialog.tsx           |  4 +--
 .../Project/deleteProjectDialog.tsx           |  4 ++-
 packages/www/components/Sidebar/index.tsx     |  4 +--
 .../SigningKeysTable/CreateDialog.tsx         |  6 +++--
 .../SigningKeysTable/CreateKeyDialog.tsx      |  6 +++--
 .../SigningKeysTable/DeleteKeysDialog.tsx     |  4 ++-
 .../MultistreamTargetsTable/Toolbox.tsx       |  8 ++++--
 .../StreamChildrenHeadingBox.tsx              | 12 +++++----
 .../StreamDetails/StreamPlayerBox/index.tsx   | 13 +++-------
 .../components/StreamDetails/Terminate.tsx    |  4 ++-
 .../StreamSessionsTable/DeleteDialog.tsx      |  4 ++-
 .../StreamsTable/CreateStreamDialog.tsx       | 10 +++-----
 .../components/StreamsTable/StreamFilter.tsx  |  4 +--
 .../Table/components/TableEmptyState.tsx      |  2 +-
 .../components/TableStateDeleteDialog.tsx     |  4 ++-
 .../www/components/Table/filters/index.tsx    | 25 +++++++++++--------
 packages/www/components/Table/index.tsx       |  2 +-
 .../WebhookDialogs/CreateEditDialog.tsx       |  2 +-
 .../WebhookDialogs/DeleteDialog.tsx           |  4 ++-
 packages/www/css/tailwind.css                 |  1 -
 packages/www/pages/settings/projects.tsx      |  2 +-
 31 files changed, 104 insertions(+), 84 deletions(-)

diff --git a/packages/www/components/ApiKeys/CreateDialog.tsx b/packages/www/components/ApiKeys/CreateDialog.tsx
index e8d848740c..5da402300f 100644
--- a/packages/www/components/ApiKeys/CreateDialog.tsx
+++ b/packages/www/components/ApiKeys/CreateDialog.tsx
@@ -117,8 +117,8 @@ const CreateDialog = ({
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
       <AlertDialogContent
-      className="bg-surface"
-      css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         {!newToken && (
           <>
             <AlertDialogTitle asChild>
diff --git a/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx b/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
index 455a50cf1a..3a3d5f82c1 100644
--- a/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
+++ b/packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx
@@ -64,9 +64,10 @@ const AssetChildrenHeadingBox = ({
           </Box>
         </Box>
         <Box css={{ position: "relative", top: "-8px" }}>
-          <Button 
-          className="bg-accent text-foreground"
-          size="2" onClick={() => setEditAssetDialogOpen(true)}>
+          <Button
+            className="bg-accent text-foreground"
+            size="2"
+            onClick={() => setEditAssetDialogOpen(true)}>
             <Box
               as={Pencil1Icon}
               css={{
diff --git a/packages/www/components/AssetDetails/AssetOverviewTab.tsx b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
index 05110526c5..466d86b4ed 100644
--- a/packages/www/components/AssetDetails/AssetOverviewTab.tsx
+++ b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
@@ -135,8 +135,9 @@ const AssetOverviewTab = ({
           </Text>
         </Box>
         <div
-        className="bg-background text-foreground p-4 rounded-lg border" 
-        size="2" css={{ borderRadius: "$2" }}>
+          className="bg-background text-foreground p-4 rounded-lg border"
+          size="2"
+          css={{ borderRadius: "$2" }}>
           <Flex css={{ justifyContent: "space-between" }}>
             <Flex align="center">
               <StyledIpfsIcon />
diff --git a/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx b/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
index 648a9fbdbe..efb663f719 100644
--- a/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
+++ b/packages/www/components/AssetsTable/CreateAssetDialog/index.tsx
@@ -109,7 +109,7 @@ const CreateAssetDialog = ({
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
       <AlertDialogContent
-      className="bg-surface"
+        className="bg-surface"
         css={{ maxWidth: 450, minWidth: 350, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Upload Asset</Heading>
diff --git a/packages/www/components/FeaturesModel/index.tsx b/packages/www/components/FeaturesModel/index.tsx
index ada42af4a1..cb99d5fc84 100644
--- a/packages/www/components/FeaturesModel/index.tsx
+++ b/packages/www/components/FeaturesModel/index.tsx
@@ -45,7 +45,9 @@ export default function FeaturesModel() {
 
   return (
     <AlertDialog open={shouldShowFeature}>
-      <AlertDialogContent className="bg-surface" css={{ p: "0", borderRadius: 0 }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ p: "0", borderRadius: 0 }}>
         <Flex className="flex flex-row gap-3">
           <Box className="flex flex-col flex-1 justify-center p-5">
             <Badge
diff --git a/packages/www/components/FileUpload/index.tsx b/packages/www/components/FileUpload/index.tsx
index b33ab41b93..0a2337ed84 100644
--- a/packages/www/components/FileUpload/index.tsx
+++ b/packages/www/components/FileUpload/index.tsx
@@ -43,7 +43,7 @@ const FileUpload = () => {
 
   return (
     <Box
-    className="bg-background border"
+      className="bg-background border"
       css={{
         position: "fixed",
         bottom: "$4",
diff --git a/packages/www/components/GettingStarted/index.tsx b/packages/www/components/GettingStarted/index.tsx
index f22708f975..cea39db021 100644
--- a/packages/www/components/GettingStarted/index.tsx
+++ b/packages/www/components/GettingStarted/index.tsx
@@ -129,7 +129,7 @@ curl --request POST \
         <Flex align={"center"}>
           <Avatar
             fallback={getEmojiIcon(data?.name)}
-               className="bg-accent pt-1"
+            className="bg-accent pt-1"
             style={{
               borderRadius: 10,
               marginRight: 10,
@@ -141,10 +141,7 @@ curl --request POST \
           </Heading>
         </Flex>
         <Link href={appendProjectId("/settings")} passHref legacyBehavior>
-          <Button 
-        className="bg-accent"
-        
-          as="a" size="2">
+          <Button className="bg-accent" as="a" size="2">
             Edit Project
           </Button>
         </Link>
@@ -174,7 +171,7 @@ curl --request POST \
             gridTemplateColumns: "repeat(auto-fill, minmax(46%, 1fr))",
           }}>
           <div
-          className="bg-background border p-4 rounded-xl"
+            className="bg-background border p-4 rounded-xl"
             css={{
               width: "100%",
               height: "100%",
@@ -243,7 +240,7 @@ curl --request POST \
                 "https://docs.livepeer.org/api-reference/overview/introduction"
               }>
               <Button
-              className="bg-accent"
+                className="bg-accent"
                 css={{
                   mt: "$2",
                   display: "flex",
@@ -332,7 +329,7 @@ const Card = ({
           textDecoration: "none",
         }}>
         <Button
-        className="bg-accent"
+          className="bg-accent"
           css={{
             mt: "$2",
             display: "flex",
diff --git a/packages/www/components/Logger/index.tsx b/packages/www/components/Logger/index.tsx
index 788bf7d507..b5d81027dc 100644
--- a/packages/www/components/Logger/index.tsx
+++ b/packages/www/components/Logger/index.tsx
@@ -182,7 +182,7 @@ const Logger = ({ stream, ...props }: { stream: Stream }) => {
         </Heading>
       </Box>
       <Box
-      className="bg-accent"
+        className="bg-accent"
         css={{
           overflow: "scroll",
           p: "$4",
diff --git a/packages/www/components/PaymentMethodDialog/index.tsx b/packages/www/components/PaymentMethodDialog/index.tsx
index 62076737a9..9a5be556cf 100644
--- a/packages/www/components/PaymentMethodDialog/index.tsx
+++ b/packages/www/components/PaymentMethodDialog/index.tsx
@@ -127,7 +127,9 @@ const PaymentMethodDialog = ({ invalidateQuery }) => {
         </Button>
       </Flex>
 
-      <AlertDialogContent className="bg-surface" 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)}
diff --git a/packages/www/components/Project/ProjectTile.tsx b/packages/www/components/Project/ProjectTile.tsx
index 01167bd2ae..8f42389f54 100644
--- a/packages/www/components/Project/ProjectTile.tsx
+++ b/packages/www/components/Project/ProjectTile.tsx
@@ -17,7 +17,7 @@ import { getEmojiIcon } from "lib/get-emoji";
 function ProjectTile({ name, id, invalidateQuery }) {
   return (
     <Box
-    className="bg-background border"
+      className="bg-background border"
       css={{
         p: "$4",
         width: "100%",
@@ -34,9 +34,11 @@ function ProjectTile({ name, id, invalidateQuery }) {
       <Box>
         <Flex align={"center"} justify={"between"}>
           <Flex align={"center"}>
-            <Avatar 
-            className="bg-accent pt-1"
-            fallback={getEmojiIcon(name)} size={"3"} />
+            <Avatar
+              className="bg-accent pt-1"
+              fallback={getEmojiIcon(name)}
+              size={"3"}
+            />
             <Text
               css={{
                 fontWeight: 500,
@@ -86,9 +88,9 @@ function ProjectTile({ name, id, invalidateQuery }) {
                       passHref
                       legacyBehavior
                       href={`/projects/${id}/${item.path}`}>
-                      <NavLink
-                      className="hover:bg-accent"
-                      key={item.title}>{item.title}</NavLink>
+                      <NavLink className="hover:bg-accent" key={item.title}>
+                        {item.title}
+                      </NavLink>
                     </Link>
                   ))}
                 </Flex>
@@ -98,9 +100,7 @@ function ProjectTile({ name, id, invalidateQuery }) {
         </Flex>
       </Box>
       <Flex justify={"end"}>
-        <Button 
-        className="bg-accent"
-        css={{ mt: 40 }} size={1}>
+        <Button className="bg-accent" css={{ mt: 40 }} size={1}>
           Open Project
         </Button>
       </Flex>
diff --git a/packages/www/components/Project/createProjectDialog.tsx b/packages/www/components/Project/createProjectDialog.tsx
index da42422130..7fb7cfd153 100644
--- a/packages/www/components/Project/createProjectDialog.tsx
+++ b/packages/www/components/Project/createProjectDialog.tsx
@@ -29,8 +29,8 @@ const CreateProjectDialog = ({
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
       <AlertDialogContent
-      className="bg-surface"
-      css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Create Project</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/Project/deleteProjectDialog.tsx b/packages/www/components/Project/deleteProjectDialog.tsx
index 57f63d030d..815e7c5a0a 100644
--- a/packages/www/components/Project/deleteProjectDialog.tsx
+++ b/packages/www/components/Project/deleteProjectDialog.tsx
@@ -40,7 +40,9 @@ const DeleteProjectDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={onOpenChange} {...props}>
-      <AlertDialogContent className="bg-surface" 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>
diff --git a/packages/www/components/Sidebar/index.tsx b/packages/www/components/Sidebar/index.tsx
index b6592edd66..1d495cbb21 100644
--- a/packages/www/components/Sidebar/index.tsx
+++ b/packages/www/components/Sidebar/index.tsx
@@ -232,7 +232,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
     const response = canSendEmail("resetPassword");
     if (!response.canSend) {
       openSnackbar(
-        `Please wait ${response.waitTime} seconds before sending another email.`
+        `Please wait ${response.waitTime} seconds before sending another email.`,
       );
       return;
     }
@@ -586,7 +586,7 @@ const Sidebar = ({ id }: { id: SidebarId }) => {
                     </Box>
                   )}
                 </Box>
-              )
+              ),
             )}
           </Grid>
           <Flex
diff --git a/packages/www/components/SigningKeysTable/CreateDialog.tsx b/packages/www/components/SigningKeysTable/CreateDialog.tsx
index a75c92d907..98fc8874a2 100644
--- a/packages/www/components/SigningKeysTable/CreateDialog.tsx
+++ b/packages/www/components/SigningKeysTable/CreateDialog.tsx
@@ -60,7 +60,9 @@ const CreateDialog = ({
 
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="bg-surface" css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         {!newKey && (
           <>
             <AlertDialogTitle asChild>
@@ -98,7 +100,7 @@ const CreateDialog = ({
                   size="2"
                   disabled={isLoading}
                   type="submit"
-                  className="bg-accent text-foreground" 
+                  className="bg-accent text-foreground"
                   variant="primary">
                   {isLoading && (
                     <Spinner
diff --git a/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx b/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
index bbdac5d8d9..68950db26e 100644
--- a/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
+++ b/packages/www/components/SigningKeysTable/CreateKeyDialog.tsx
@@ -62,7 +62,9 @@ const CreateKeyDialog = ({
 
   return (
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent className="bg-surface" css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         {!newKey && (
           <>
             <AlertDialogTitle asChild>
@@ -100,7 +102,7 @@ const CreateKeyDialog = ({
                   size="2"
                   disabled={isLoading}
                   type="submit"
-                  className="bg-accent text-foreground" 
+                  className="bg-accent text-foreground"
                   variant="primary">
                   {isLoading && (
                     <Spinner
diff --git a/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx b/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
index 8709a42e49..7609762f85 100644
--- a/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
+++ b/packages/www/components/SigningKeysTable/DeleteKeysDialog.tsx
@@ -53,7 +53,9 @@ const DeleteKeysDialog = ({
     <AlertDialog
       open={deleteDialogState.on}
       onOpenChange={deleteDialogState.onOff}>
-      <AlertDialogContent className="bg-surface" 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 {state.selectedRows.length} signing key
diff --git a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
index d4650483ee..d9e47dfe6d 100644
--- a/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
+++ b/packages/www/components/StreamDetails/MultistreamTargetsTable/Toolbox.tsx
@@ -39,7 +39,9 @@ const DisableDialog = ({
   const [saving, setSaving] = useState(false);
   return (
     <AlertDialog open={open} onOpenChange={() => setOpen(!open)}>
-      <AlertDialogContent className="bg-surface" 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">Disable multistream target?</Heading>
         </AlertDialogTitle>
@@ -104,7 +106,9 @@ const DeleteDialog = ({
 
   return (
     <AlertDialog open={open} onOpenChange={setOpen}>
-      <AlertDialogContent className="bg-surface" 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 multistream target?</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
index 351de5486d..75256f5de6 100644
--- a/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
+++ b/packages/www/components/StreamDetails/StreamChildrenHeadingBox.tsx
@@ -79,16 +79,18 @@ const StreamChildrenHeadingBox = ({
       <Box css={{ position: "relative", top: "-8px" }}>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button 
-            className="bg-accent"
-            size="2" css={{ display: "flex", ai: "center", mr: "$1" }}>
+            <Button
+              className="bg-accent"
+              size="2"
+              css={{ display: "flex", ai: "center", mr: "$1" }}>
               Actions
               <Box as={ChevronDownIcon} css={{ ml: "$1" }} />
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent
-          className="bg-accent mt-2"
-          placeholder="dropdown-menu-content" align="end">
+            className="bg-accent mt-2"
+            placeholder="dropdown-menu-content"
+            align="end">
             <DropdownMenuGroup>
               <Record
                 stream={stream}
diff --git a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
index ef9a152361..b656bc23ad 100644
--- a/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
+++ b/packages/www/components/StreamDetails/StreamPlayerBox/index.tsx
@@ -91,8 +91,7 @@ const StreamPlayerBox = ({
           mb: "$5",
         }}>
         <Box
-              className="bg-accent"
-
+          className="bg-accent"
           css={{
             width: "100%",
             minHeight: 220,
@@ -129,9 +128,7 @@ const StreamPlayerBox = ({
           <AssetSharePopup
             playbackId={stream.playbackId}
             triggerNode={
-              <Button
-              className="bg-accent"
-              size="2">
+              <Button className="bg-accent" size="2">
                 <Box
                   as={Share2Icon}
                   css={{
@@ -156,7 +153,6 @@ const StreamPlayerBox = ({
             <Button
               size="2"
               className="bg-accent"
-
               css={{
                 flex: 2,
               }}
@@ -179,7 +175,7 @@ const StreamPlayerBox = ({
         </Flex>
       </Box>
       <Box
-      className="bg-accent"
+        className="bg-accent"
         css={{
           display: "flex",
           borderRadius: "$1",
@@ -203,8 +199,7 @@ const StreamPlayerBox = ({
             alignItems: "center",
             justifyContent: "center",
             color: activeTab === "Browser" ? "$neutral1" : "inherit",
-            backgroundColor:
-              activeTab === "Browser" ? "white" : "transparent",
+            backgroundColor: activeTab === "Browser" ? "white" : "transparent",
           }}>
           <FaVideo />
           Browser
diff --git a/packages/www/components/StreamDetails/Terminate.tsx b/packages/www/components/StreamDetails/Terminate.tsx
index b4954a29de..1c64b22c51 100644
--- a/packages/www/components/StreamDetails/Terminate.tsx
+++ b/packages/www/components/StreamDetails/Terminate.tsx
@@ -37,7 +37,9 @@ const Terminate = ({ stream, invalidate, ...props }) => {
         Terminate
       </Box>
 
-      <AlertDialogContent className="bg-surface" 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">Terminate stream?</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/StreamSessionsTable/DeleteDialog.tsx b/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
index a2d56b73cd..e0388210ba 100644
--- a/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
+++ b/packages/www/components/StreamSessionsTable/DeleteDialog.tsx
@@ -45,7 +45,9 @@ const DeleteDialog = ({ total, onUnselect, onDelete }) => {
         </Button>
       </Flex>
 
-      <AlertDialogContent className="bg-surface" 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 {total} session{total > 1 && "s"}?
diff --git a/packages/www/components/StreamsTable/CreateStreamDialog.tsx b/packages/www/components/StreamsTable/CreateStreamDialog.tsx
index 072fc44bf9..fa14576cd1 100644
--- a/packages/www/components/StreamsTable/CreateStreamDialog.tsx
+++ b/packages/www/components/StreamsTable/CreateStreamDialog.tsx
@@ -28,12 +28,10 @@ const CreateStreamDialog = ({
   const [streamName, setStreamName] = useState("");
 
   return (
-    <AlertDialog
-    
-    open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent 
-      className="bg-surface"
-      css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialogContent
+        className="bg-surface"
+        css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">Create a new livestream</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/components/StreamsTable/StreamFilter.tsx b/packages/www/components/StreamsTable/StreamFilter.tsx
index a6416f63b4..96afd825ff 100644
--- a/packages/www/components/StreamsTable/StreamFilter.tsx
+++ b/packages/www/components/StreamsTable/StreamFilter.tsx
@@ -286,7 +286,7 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                     : value)}
             </Flex>
             <DropdownMenuContent
-            className="bg-background border"
+              className="bg-background border"
               placeholder={"more options"}
               css={{
                 p: "$2",
@@ -308,7 +308,7 @@ const StreamFilter = ({ onDone, activeFilters }) => {
                     mt: "$2",
                   }}>
                   <Button
-                  className="bg-accent"
+                    className="bg-accent"
                     type="submit"
                     css={{
                       fontWeight: 500,
diff --git a/packages/www/components/Table/components/TableEmptyState.tsx b/packages/www/components/Table/components/TableEmptyState.tsx
index 4dee3fc87c..c4baf3799c 100644
--- a/packages/www/components/Table/components/TableEmptyState.tsx
+++ b/packages/www/components/Table/components/TableEmptyState.tsx
@@ -46,7 +46,7 @@ const TableEmptyState = ({
     {actionToggleState && (
       <Flex align="center">
         <Button
-        className="bg-accent text-foreground"
+          className="bg-accent text-foreground"
           onClick={actionToggleState.onOn}
           css={{ alignSelf: "flex-start", mr: "$2" }}
           size="2"
diff --git a/packages/www/components/Table/components/TableStateDeleteDialog.tsx b/packages/www/components/Table/components/TableStateDeleteDialog.tsx
index e45d5adc72..26ac5c2042 100644
--- a/packages/www/components/Table/components/TableStateDeleteDialog.tsx
+++ b/packages/www/components/Table/components/TableStateDeleteDialog.tsx
@@ -65,7 +65,9 @@ const TableStateDeleteDialog = ({
     <AlertDialog
       open={dialogToggleState.on}
       onOpenChange={dialogToggleState.onOff}>
-      <AlertDialogContent className="bg-surface" 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 {state.selectedRows.length} {name}?
diff --git a/packages/www/components/Table/filters/index.tsx b/packages/www/components/Table/filters/index.tsx
index bf9dd60024..6ef9198898 100644
--- a/packages/www/components/Table/filters/index.tsx
+++ b/packages/www/components/Table/filters/index.tsx
@@ -109,8 +109,9 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
     <DropdownMenu.Root open={isOpen} onOpenChange={handleOpenChange}>
       <DropdownMenu.Trigger asChild>
         <Button
-        className="bg-accent text-foreground"
-        css={{ display: "flex", ai: "center" }} size="2">
+          className="bg-accent text-foreground"
+          css={{ display: "flex", ai: "center" }}
+          size="2">
           <Flex css={{ mr: "$2" }}>
             <FilterIcon />
           </Flex>
@@ -131,9 +132,7 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
           )}
         </Button>
       </DropdownMenu.Trigger>
-      <DropdownMenu.Content
-      className="bg-accent"
-      align="end" sideOffset={5}>
+      <DropdownMenu.Content className="bg-accent" align="end" sideOffset={5}>
         <Box
           css={{
             width: "284px",
@@ -146,24 +145,28 @@ const TableFilter = ({ items, onDone }: TableFilterProps) => {
             boxShadow: "0px 5px 15px -5px hsl(206deg 22% 7% / 15%)",
           }}>
           <Flex
-          className="bg-accent border-b border-2 "
+            className="bg-accent border-b border-2 "
             css={{
               width: "100%",
               justifyContent: "space-between",
               alignItems: "center",
               padding: "6px 7px",
             }}>
-            <Button 
-            className="bg-accent text-foreground"
-            onClick={handleClear} size="1" variant="neutral">
+            <Button
+              className="bg-accent text-foreground"
+              onClick={handleClear}
+              size="1"
+              variant="neutral">
               Clear
             </Button>
             <Text size="2" css={{ margin: "0px" }}>
               Filters
             </Text>
             <Button
-            className="bg-accent text-foreground"
-            size="1" variant="primary" onClick={handleDone}>
+              className="bg-accent text-foreground"
+              size="1"
+              variant="primary"
+              onClick={handleDone}>
               Done
             </Button>
           </Flex>
diff --git a/packages/www/components/Table/index.tsx b/packages/www/components/Table/index.tsx
index 20e7f13c10..ecb119e7e9 100644
--- a/packages/www/components/Table/index.tsx
+++ b/packages/www/components/Table/index.tsx
@@ -372,7 +372,7 @@ export const DataTableComponent = <T extends Record<string, unknown>>({
               )}
               {createAction && (
                 <Button
-                className="bg-accent"
+                  className="bg-accent"
                   variant="neutral"
                   size="2"
                   // @ts-ignore
diff --git a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
index af225b4d06..3c6414db42 100644
--- a/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
+++ b/packages/www/components/WebhookDialogs/CreateEditDialog.tsx
@@ -95,7 +95,7 @@ const CreateEditDialog = ({
     <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
       {button}
       <AlertDialogContent
-      className="bg-surface"
+        className="bg-surface"
         css={{ width: 450, maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         <AlertDialogTitle asChild>
           <Heading size="1">
diff --git a/packages/www/components/WebhookDialogs/DeleteDialog.tsx b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
index d747631781..3bf55cff63 100644
--- a/packages/www/components/WebhookDialogs/DeleteDialog.tsx
+++ b/packages/www/components/WebhookDialogs/DeleteDialog.tsx
@@ -41,7 +41,9 @@ const DeleteDialog = ({
 
   return (
     <AlertDialog open={deleteDialogOpen}>
-      <AlertDialogContent className="bg-surface" 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 Webhook</Heading>
         </AlertDialogTitle>
diff --git a/packages/www/css/tailwind.css b/packages/www/css/tailwind.css
index 9d6b075106..7eee375513 100644
--- a/packages/www/css/tailwind.css
+++ b/packages/www/css/tailwind.css
@@ -25,7 +25,6 @@
   }
 }
 
-
 @layer base {
   * {
     @apply border-border !important;
diff --git a/packages/www/pages/settings/projects.tsx b/packages/www/pages/settings/projects.tsx
index 61c8b47f83..76c013a374 100644
--- a/packages/www/pages/settings/projects.tsx
+++ b/packages/www/pages/settings/projects.tsx
@@ -86,7 +86,7 @@ const WorkspaceProjects = () => {
               </Text>
             </Flex>
             <Button
-            className="bg-accent"
+              className="bg-accent"
               onClick={() => setShowCreateProjectAlert(true)}
               css={{
                 p: "$3",

From 5abb8b61f9f8380a9395d5609c598a9427683ded Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Fri, 12 Jul 2024 18:17:11 +0530
Subject: [PATCH 4/5] fix vercel build error

---
 packages/www/components/AssetDetails/AssetOverviewTab.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/www/components/AssetDetails/AssetOverviewTab.tsx b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
index 466d86b4ed..7e4c810f08 100644
--- a/packages/www/components/AssetDetails/AssetOverviewTab.tsx
+++ b/packages/www/components/AssetDetails/AssetOverviewTab.tsx
@@ -136,7 +136,6 @@ const AssetOverviewTab = ({
         </Box>
         <div
           className="bg-background text-foreground p-4 rounded-lg border"
-          size="2"
           css={{ borderRadius: "$2" }}>
           <Flex css={{ justifyContent: "space-between" }}>
             <Flex align="center">

From 00c7310c2d7f8267b3914dabd43c6d610c4758fd Mon Sep 17 00:00:00 2001
From: Suhail Kakar <suhail.zahed@gmail.com>
Date: Fri, 12 Jul 2024 20:40:14 +0530
Subject: [PATCH 5/5] ui: fix error color

---
 packages/www/components/Login/index.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/www/components/Login/index.tsx b/packages/www/components/Login/index.tsx
index d95787a4cf..69650888ad 100644
--- a/packages/www/components/Login/index.tsx
+++ b/packages/www/components/Login/index.tsx
@@ -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