ui: update colors and design

Author: suhailkakar

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>

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) => {

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">

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}

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; */

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>
     </>
   );
 }