2.0 UI

packages/www/components/Header/index.tsx

@@ -20,6 +20,8 @@ import PolygonIcon from "../../public/img/icons/polygonWithoutBorderBottom.svg";
 import CheckedIcon from "../../public/img/icons/checked.svg";
 import { useEffect, useState, useRef } from "react";
 import { useApi, useHubspotForm } from "hooks";
+import { Breadcrumb } from "layouts/dashboard";
+import { workspaces } from "pages/dashboard/settings";
 
 const StyledHornIcon = styled(HornIcon, {
   color: "$hiContrast",
@@ -47,6 +49,8 @@ const Header = ({ breadcrumbs = [] }) => {
     reaction: "",
     feedback: "",
   });
+  const [navBreadcrumbs, setNavBreadcrumbs] =
+    useState<Breadcrumb[]>(breadcrumbs);
   const [formSent, setFormSent] = useState(false);
   const [errorMessage, setErrorMessage] = useState("");
   const { data, handleSubmit } = useHubspotForm({
@@ -67,6 +71,13 @@ const Header = ({ breadcrumbs = [] }) => {
     }
   }, [user]);
 
+  useEffect(() => {
+    setNavBreadcrumbs([
+      { title: workspaces[0].projects[0].name, href: "/dashboard/settings" },
+      ...breadcrumbs,
+    ]);
+  }, []);
+
   return (
     <Box
       id="test123"
@@ -79,14 +90,13 @@ const Header = ({ breadcrumbs = [] }) => {
         align="center"
         justify="between"
         css={{
-          px: "$6",
           height: 60,
           width: "100%",
           margin: "0 auto",
           maxWidth: "1520px",
         }}>
         <Breadcrumbs aria-label="breadcrumb">
-          {breadcrumbs.map((breadcrumb, i) => {
+          {navBreadcrumbs.map((breadcrumb, i) => {
             if (breadcrumb?.href) {
               return (
                 <Link key={i} href={breadcrumb.href} passHref legacyBehavior>

packages/www/components/Project/CreateProjectDialog.tsx

@@ -0,0 +1,94 @@
+import {
+  Box,
+  Button,
+  Flex,
+  AlertDialog,
+  AlertDialogTitle,
+  AlertDialogContent,
+  AlertDialogCancel,
+  AlertDialogDescription,
+  TextField,
+  Heading,
+  Text,
+  Label,
+} from "@livepeer/design-system";
+
+const CreateProjectDialog = ({
+  isOpen,
+  onOpenChange,
+  onCreate,
+}: {
+  isOpen: boolean;
+  onOpenChange: (isOpen: boolean) => void;
+  onCreate: (projectName: string) => Promise<void>;
+}) => {
+  return (
+    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
+      <AlertDialogContent
+        css={{
+          maxWidth: 450,
+          px: "$5",
+          pt: "$4",
+          pb: "$4",
+          backgroundColor: "white",
+        }}>
+        <AlertDialogTitle asChild>
+          <Heading size="1">Create project</Heading>
+        </AlertDialogTitle>
+        <Box
+          css={{ mt: "$3" }}
+          as="form"
+          onSubmit={async (e) => {
+            //  Handle create project
+          }}>
+          <AlertDialogDescription asChild>
+            <Text
+              size="3"
+              variant="neutral"
+              css={{ mt: "$2", fontSize: "$3", mb: "$4" }}>
+              Working with different projects helps create a clear separation
+              between different customers or working environments.
+            </Text>
+          </AlertDialogDescription>
+          <Flex direction="column" gap="2">
+            <TextField
+              required
+              size="2"
+              type="text"
+              id="firstName"
+              autoFocus={true}
+              placeholder="Project name"
+            />
+          </Flex>
+          <Flex css={{ jc: "flex-end", gap: "$3", mt: "$4" }}>
+            <AlertDialogCancel asChild>
+              <Button
+                css={{
+                  p: "$4",
+                  fontSize: "$2",
+                  backgroundColor: "$neutral4",
+                  color: "black",
+                }}>
+                Cancel
+              </Button>
+            </AlertDialogCancel>
+            <Button
+              css={{
+                p: "$4",
+                fontSize: "$2",
+                backgroundColor: "black",
+                color: "white",
+              }}
+              type="submit"
+              size="2"
+              variant="primary">
+              Create new project
+            </Button>
+          </Flex>
+        </Box>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default CreateProjectDialog;

packages/www/components/Project/ProjectTile.tsx

@@ -0,0 +1,141 @@
+import {
+  Box,
+  Flex,
+  Text,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@livepeer/design-system";
+import { GoDotFill } from "react-icons/go";
+import Image from "next/image";
+import React from "react";
+import { sanitizeUrl } from "lib/url-sanitizer";
+import { DotsHorizontalIcon } from "@radix-ui/react-icons";
+import { HiDotsHorizontal } from "react-icons/hi";
+import Link from "next/link";
+import { generalSidebarItems } from "components/Sidebar";
+
+export default function ProjectTile({
+  name,
+  logo,
+  url,
+  activeStreams,
+  inProgressUploads,
+  ...props
+}) {
+  return (
+    <Box
+      css={{
+        border: "1px solid",
+        borderColor: "$neutral6",
+        p: "$4",
+        borderRadius: "11px",
+        width: "30%",
+      }}>
+      <Flex
+        css={{
+          gap: "$3",
+        }}
+        align={"center"}>
+        <Image
+          src={logo}
+          alt="Project logo"
+          style={{
+            borderRadius: "10px",
+          }}
+          width={50}
+          height={50}
+        />
+        <Flex direction={"column"}>
+          <Flex
+            align={"center"}
+            css={{
+              mr: "-$6",
+            }}
+            justify={"between"}>
+            <Text
+              css={{
+                fontWeight: 500,
+              }}>
+              {name}
+            </Text>
+            <DropdownMenu>
+              <Box
+                as={DropdownMenuTrigger}
+                css={{
+                  border: 0,
+                  backgroundColor: "transparent",
+                  "&:focus": {
+                    outline: "none",
+                  },
+                }}>
+                <HiDotsHorizontal />
+              </Box>
+              <DropdownMenuContent
+                placeholder={false}
+                css={{
+                  border: "1px solid $colors$neutral6",
+                  p: "$3",
+                  width: "13rem",
+                  ml: "-11rem",
+                  mt: "$1",
+                }}>
+                <Box
+                  css={{
+                    p: "$1",
+                    pb: 0,
+                    fontSize: 14,
+                    color: "$primary11",
+                    a: {
+                      textDecoration: "none",
+                      color: "$neutral12",
+                    },
+                  }}>
+                  <Flex
+                    direction={"column"}
+                    css={{
+                      gap: "$3",
+                      width: "100%",
+                    }}>
+                    {generalSidebarItems.map((item) => (
+                      <Link href="/" passHref legacyBehavior>
+                        {item.title}
+                      </Link>
+                    ))}
+                  </Flex>
+                </Box>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </Flex>
+          <Text
+            css={{
+              mt: "$0.5",
+              color: "$neutral10",
+            }}>
+            {sanitizeUrl(url)}
+          </Text>
+        </Flex>
+      </Flex>
+      <Flex
+        css={{
+          gap: "$3",
+          mt: "$6",
+        }}>
+        <Flex
+          align={"center"}
+          css={{
+            color: "$primary10",
+          }}>
+          <GoDotFill /> {activeStreams} active streams
+        </Flex>
+        <Flex
+          align={"center"}
+          css={{
+            color: "$primary10",
+          }}>
+          <GoDotFill /> {inProgressUploads} in-progress uploads
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}

packages/www/components/Sidebar/NavIcons.tsx

@@ -97,6 +97,20 @@ export const UsageIcon = ({ active = false }) => (
   </svg>
 );
 
+export const SettingsIcon = ({ active = false }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 15 14"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M6.03453 14L5.75592 11.76C5.60501 11.7017 5.4628 11.6317 5.3293 11.55C5.19581 11.4683 5.06521 11.3808 4.93751 11.2875L2.86537 12.1625L0.949951 8.8375L2.74348 7.4725C2.73187 7.39083 2.72607 7.31208 2.72607 7.23625V6.76375C2.72607 6.68792 2.73187 6.60917 2.74348 6.5275L0.949951 5.1625L2.86537 1.8375L4.93751 2.7125C5.06521 2.61917 5.19871 2.53167 5.33801 2.45C5.47731 2.36833 5.61662 2.29833 5.75592 2.24L6.03453 0H9.86537L10.144 2.24C10.2949 2.29833 10.4371 2.36833 10.5706 2.45C10.7041 2.53167 10.8347 2.61917 10.9624 2.7125L13.0345 1.8375L14.95 5.1625L13.1564 6.5275C13.168 6.60917 13.1738 6.68792 13.1738 6.76375V7.23625C13.1738 7.31208 13.1622 7.39083 13.139 7.4725L14.9325 8.8375L13.0171 12.1625L10.9624 11.2875C10.8347 11.3808 10.7012 11.4683 10.5619 11.55C10.4226 11.6317 10.2833 11.7017 10.144 11.76L9.86537 14H6.03453ZM7.25343 12.6H8.62906L8.87284 10.745C9.2327 10.6517 9.56645 10.5146 9.87408 10.3337C10.1817 10.1529 10.4632 9.93417 10.7186 9.6775L12.4425 10.395L13.1216 9.205L11.6241 8.0675C11.6821 7.90417 11.7228 7.73208 11.746 7.55125C11.7692 7.37042 11.7808 7.18667 11.7808 7C11.7808 6.81333 11.7692 6.62958 11.746 6.44875C11.7228 6.26792 11.6821 6.09583 11.6241 5.9325L13.1216 4.795L12.4425 3.605L10.7186 4.34C10.4632 4.07167 10.1817 3.84708 9.87408 3.66625C9.56645 3.48542 9.2327 3.34833 8.87284 3.255L8.64647 1.4H7.27085L7.02707 3.255C6.6672 3.34833 6.33345 3.48542 6.02582 3.66625C5.71819 3.84708 5.43668 4.06583 5.18129 4.3225L3.45741 3.605L2.77831 4.795L4.27582 5.915C4.21778 6.09 4.17715 6.265 4.15393 6.44C4.13071 6.615 4.11911 6.80167 4.11911 7C4.11911 7.18667 4.13071 7.3675 4.15393 7.5425C4.17715 7.7175 4.21778 7.8925 4.27582 8.0675L2.77831 9.205L3.45741 10.395L5.18129 9.66C5.43668 9.92833 5.71819 10.1529 6.02582 10.3337C6.33345 10.5146 6.6672 10.6517 7.02707 10.745L7.25343 12.6ZM7.98478 9.45C8.65808 9.45 9.2327 9.21083 9.70866 8.7325C10.1846 8.25417 10.4226 7.67667 10.4226 7C10.4226 6.32333 10.1846 5.74583 9.70866 5.2675C9.2327 4.78917 8.65808 4.55 7.98478 4.55C7.29987 4.55 6.72234 4.78917 6.25219 5.2675C5.78204 5.74583 5.54697 6.32333 5.54697 7C5.54697 7.67667 5.78204 8.25417 6.25219 8.7325C6.72234 9.21083 7.29987 9.45 7.98478 9.45Z"
+      fill="#4F566B"
+    />
+  </svg>
+);
+
 export const AssetsIcon = ({ active = false }) => (
   <Box
     as="svg"
@@ -108,3 +122,67 @@ export const AssetsIcon = ({ active = false }) => (
     <path d="M2 6H0v5h.01L0 20c0 1.1.9 2 2 2h18v-2H2V6zm20-2h-8l-2-2H6c-1.1 0-1.99.9-1.99 2L4 16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM7 15l4.5-6 3.5 4.51 2.5-3.01L21 15H7z" />
   </Box>
 );
+
+export const WorkspaceIcon = ({ active = false }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M3.24996 3C3.11189 3 2.99832 2.88751 3.01537 2.7505C3.13818 1.76368 3.97988 1 4.99996 1H11C12.0201 1 12.8618 1.76368 12.9846 2.7505C13.0016 2.88751 12.8881 3 12.75 3H3.24996Z"
+      fill="#6B6F76"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M3.5 4C3.22386 4 3 4.22386 3 4.5V14.5C3 14.7761 3.22386 15 3.5 15H5.5C5.77614 15 6 14.7761 6 14.5V12.5C6 12.2239 6.22386 12 6.5 12H9.5C9.77614 12 10 12.2239 10 12.5V14.5C10 14.7761 10.2239 15 10.5 15H12.5C12.7761 15 13 14.7761 13 14.5V4.5C13 4.22386 12.7761 4 12.5 4H3.5ZM11 8C10.4477 8 10 8.44772 10 9V9.6C10 9.82091 10.1791 10 10.4 10H11.6C11.8209 10 12 9.82091 12 9.6V9C12 8.44772 11.5523 8 11 8ZM10 6C10 5.44772 10.4477 5 11 5C11.5523 5 12 5.44772 12 6V6.6C12 6.82091 11.8209 7 11.6 7H10.4C10.1791 7 10 6.82091 10 6.6V6ZM8 5C7.44772 5 7 5.44772 7 6V6.6C7 6.82091 7.17909 7 7.4 7H8.6C8.82091 7 9 6.82091 9 6.6V6C9 5.44772 8.55228 5 8 5ZM7 9C7 8.44772 7.44772 8 8 8C8.55228 8 9 8.44772 9 9V9.6C9 9.82091 8.82091 10 8.6 10H7.4C7.17909 10 7 9.82091 7 9.6V9ZM5 8C4.44772 8 4 8.44772 4 9V9.6C4 9.82091 4.17909 10 4.4 10H5.6C5.82091 10 6 9.82091 6 9.6V9C6 8.44772 5.55228 8 5 8ZM4 6C4 5.44772 4.44772 5 5 5C5.55228 5 6 5.44772 6 6V6.6C6 6.82091 5.82091 7 5.6 7H4.4C4.17909 7 4 6.82091 4 6.6V6Z"
+      fill="#6B6F76"
+    />
+  </svg>
+);
+
+export const AccountIcon = ({ active = false }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M8 4C7.46957 4 6.96086 4.21071 6.58579 4.58579C6.21071 4.96086 6 5.46957 6 6V6.5C6 7.03043 6.21071 7.53914 6.58579 7.91421C6.96086 8.28929 7.46957 8.5 8 8.5C8.53043 8.5 9.03914 8.28929 9.41421 7.91421C9.78929 7.53914 10 7.03043 10 6.5V6C10 5.46957 9.78929 4.96086 9.41421 4.58579C9.03914 4.21071 8.53043 4 8 4Z"
+      fill="#6B6F76"
+    />
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M8 15C9.85652 15 11.637 14.2625 12.9497 12.9497C14.2625 11.637 15 9.85652 15 8C15 6.14348 14.2625 4.36301 12.9497 3.05025C11.637 1.7375 9.85652 1 8 1C6.14348 1 4.36301 1.7375 3.05025 3.05025C1.7375 4.36301 1 6.14348 1 8C1 9.85652 1.7375 11.637 3.05025 12.9497C4.36301 14.2625 6.14348 15 8 15ZM5.121 10.879L4.111 11.889C3.34179 11.1198 2.81794 10.1398 2.6057 9.07291C2.39346 8.00601 2.50236 6.90013 2.91864 5.89512C3.33491 4.89012 4.03986 4.03112 4.94434 3.42676C5.84881 2.8224 6.91219 2.49983 8 2.49983C9.08781 2.49983 10.1512 2.8224 11.0557 3.42676C11.9601 4.03112 12.6651 4.89012 13.0814 5.89512C13.4976 6.90013 13.6065 8.00601 13.3943 9.07291C13.1821 10.1398 12.6582 11.1198 11.889 11.889L10.879 10.879C10.6004 10.6003 10.2696 10.3792 9.90545 10.2284C9.54135 10.0776 9.1511 9.99995 8.757 10H7.243C6.8489 9.99995 6.45865 10.0776 6.09455 10.2284C5.73045 10.3792 5.39963 10.6003 5.121 10.879Z"
+      fill="#6B6F76"
+    />
+  </svg>
+);
+
+export const TopBottomChevron = ({ active = false }) => (
+  <svg
+    width="16"
+    height="16"
+    viewBox="0 0 12 12"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg">
+    <g opacity="0.4">
+      <path
+        d="M9 4L6 1L3 4"
+        stroke="black"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M3 8L6 11L9 8"
+        stroke="black"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </g>
+  </svg>
+);