feat: redesign

.yarnrc.yml

@@ -0,0 +1 @@
+yarnPath: .yarn/releases/yarn-classic.cjs

packages/api/esbuild.mjs

@@ -11,7 +11,7 @@ async function getFiles(dir) {
     dirents.map((dirent) => {
       const res = resolve(dir, dirent.name);
       return dirent.isDirectory() ? getFiles(res) : res;
-    }),
+    })
   );
   return Array.prototype.concat(...files).filter((f) => !f.includes("cache"));
 }
@@ -46,7 +46,7 @@ let frontendBundlePlugin = {
           loader: "js",
           resolveDir: resolve(args.resolveDir, args.path),
         };
-      },
+      }
     );
 
     // Any files from the static-build directory should be bundled as binary

packages/api/package.json

@@ -150,7 +150,7 @@
     "prettier": "^2.6.2",
     "redoc-cli": "^0.8.3",
     "tus-js-client": "^3.0.0-0",
-    "typescript": "^4.3.4"
+    "typescript": "^5.5.4"
   },
   "homepage": "https://livepeer.org",
   "repository": {

packages/api/src/task/scheduler.ts

@@ -102,7 +102,9 @@ export class TaskScheduler {
     const task = await db.task.get(event.task.id, { useReplica: false });
     if (!task || task?.deleted) {
       console.log(
-        `task event process error: task ${event.task.id} ${task ? "is deleted" : "not found"} in process task event`,
+        `task event process error: task ${event.task.id} ${
+          task ? "is deleted" : "not found"
+        } in process task event`,
       );
       return true;
     }
@@ -220,7 +222,9 @@ export class TaskScheduler {
     const task = await db.task.get(event.task.id, { useReplica: false });
     if (!task || task?.deleted) {
       console.log(
-        `task event process error: task ${event.task.id} ${task ? "is deleted" : "not found"} in process task result partial`,
+        `task event process error: task ${event.task.id} ${
+          task ? "is deleted" : "not found"
+        } in process task result partial`,
       );
       return true;
     }

packages/www/components/ApiKeys/CreateDialog.tsx

@@ -1,24 +1,26 @@
 import {
   Box,
-  Button,
   Flex,
-  AlertDialog,
-  AlertDialogContent,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogCancel,
   TextField,
-  Text,
   Heading,
   Label,
   Link,
   Tooltip,
   Checkbox,
   styled,
 } from "@livepeer/design-system";
+import { Button } from "components/ui/button";
 import { useState, useEffect, useCallback, useMemo } from "react";
 import { useApi } from "../../hooks";
 import Spinner from "components/Spinner";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from "components/ui/dialog";
+import { Text } from "components/ui/text";
 import { ApiToken } from "@livepeer.studio/api";
 import {
   ExclamationTriangleIcon as Warning,
@@ -27,6 +29,7 @@ import {
   PlusIcon as Plus,
 } from "@radix-ui/react-icons";
 import ClipButton from "../Clipping/ClipButton";
+import { Input } from "components/ui/input";
 
 const initialCorsOpts: ApiToken["access"]["cors"] = {
   allowedOrigins: ["http://localhost:3000"],
@@ -115,13 +118,13 @@ const CreateDialog = ({
   }, [toggleOrigin, setNewAllowedOrigin, isNewOriginValid]);
 
   return (
-    <AlertDialog open={isOpen} onOpenChange={onOpenChange}>
-      <AlertDialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
+    <Dialog open={isOpen} onOpenChange={onOpenChange}>
+      <DialogContent css={{ maxWidth: 450, px: "$5", pt: "$4", pb: "$4" }}>
         {!newToken && (
           <>
-            <AlertDialogTitle asChild>
+            <DialogTitle>
               <Heading size="1">Create an API Key</Heading>
-            </AlertDialogTitle>
+            </DialogTitle>
             <Box
               as="form"
               onSubmit={async (e) => {
@@ -141,18 +144,14 @@ const CreateDialog = ({
                   setCreating(false);
                 }
               }}>
-              <AlertDialogDescription asChild>
-                <Text
-                  size="3"
-                  variant="neutral"
-                  css={{ mt: "$2", lineHeight: "22px", mb: "$2" }}>
+              <DialogDescription asChild>
+                <Text className="my-2" variant="neutral">
                   Enter a name for your key to differentiate it from other keys.
                 </Text>
-              </AlertDialogDescription>
+              </DialogDescription>
 
               <Flex direction="column" gap="2">
-                <TextField
-                  size="2"
+                <Input
                   type="text"
                   required
                   id="tokenName"
@@ -200,16 +199,10 @@ const CreateDialog = ({
                       Add an origin
                     </Label>
                     <Box css={{ display: "flex", alignItems: "stretch" }}>
-                      <TextField
-                        size="2"
+                      <Input
                         type="text"
                         id="addAllowedOrigin"
                         value={newAllowedOrigin}
-                        state={
-                          newAllowedOrigin !== "" && !isNewOriginValid
-                            ? "invalid"
-                            : null
-                        }
                         onChange={(e) => setNewAllowedOrigin(e.target.value)}
                         onKeyDown={(e) => {
                           if (e.key === "Enter") {
@@ -220,9 +213,8 @@ const CreateDialog = ({
                         placeholder="e.g. * for all origins; https://example.com for one"
                       />
                       <Button
-                        css={{ ml: "$1" }}
-                        size="3"
-                        variant="primary"
+                        className="ml-1"
+                        variant="outline"
                         disabled={!isNewOriginValid}
                         onClick={(e) => {
                           e.preventDefault();
@@ -232,6 +224,10 @@ const CreateDialog = ({
                       </Button>
                     </Box>
 
+                    {newAllowedOrigin !== "" && !isNewOriginValid ? (
+                      <Text variant="error">Invalid origin</Text>
+                    ) : null}
+
                     <Flex
                       align="center"
                       direction="column"
@@ -244,26 +240,25 @@ const CreateDialog = ({
                         height: 120,
                         overflowX: "hidden",
                         overflowY: "auto",
-                        border: "1px solid $colors$neutral7",
-                        backgroundColor: "$neutral2",
+                        backgroundColor: "hsl(var(--card))",
                         mt: "-3px",
                         zIndex: 1,
                       }}>
                       {cors.allowedOrigins.length > 0 ? (
                         cors.allowedOrigins.map((origin, i) => (
                           <Flex
-                            key={i}
+                            key={origin}
                             justify="between"
                             align="center"
                             css={{
                               width: "100%",
-                              borderBottom: "1px solid $colors$neutral5",
                               p: "$2",
                               fontSize: "$2",
                               color: "$hiContrast",
                             }}>
                             {origin}
                             <StyledCross
+                              className="h-3 w-3"
                               onClick={() => {
                                 toggleOrigin(origin);
                               }}
@@ -323,16 +318,10 @@ const CreateDialog = ({
               </Flex>
 
               <Flex css={{ jc: "flex-end", gap: "$3", mt: "$4" }}>
-                <AlertDialogCancel asChild>
-                  <Button size="2" ghost>
-                    Cancel
-                  </Button>
-                </AlertDialogCancel>
-                <Button
-                  size="2"
-                  disabled={creating}
-                  type="submit"
-                  variant="primary">
+                <DialogClose asChild>
+                  <Button variant="outline">Cancel</Button>
+                </DialogClose>
+                <Button disabled={creating} type="submit">
                   {creating && (
                     <Spinner
                       css={{
@@ -351,31 +340,28 @@ const CreateDialog = ({
         )}
         {newToken && (
           <Box>
-            <AlertDialogTitle asChild>
+            <DialogTitle>
               <Heading size="1">Token Created</Heading>
-            </AlertDialogTitle>
-            <AlertDialogDescription asChild>
-              <Text
-                size="3"
-                variant="neutral"
-                css={{ mt: "$2", lineHeight: "22px", mb: "$2" }}>
+            </DialogTitle>
+            <DialogDescription asChild>
+              <Text className="my-2" variant="neutral">
                 <Box>
                   <Box css={{ mb: "$2" }}>Here's your new API key:</Box>
-                  <Button variant="neutral" size="2">
+                  <Button variant="outline">
                     <ClipButton value={newToken.id} text={newToken.id} />
                   </Button>
                 </Box>
               </Text>
-            </AlertDialogDescription>
+            </DialogDescription>
             <Flex css={{ jc: "flex-end", gap: "$3", mt: "$4" }}>
-              <Button onClick={() => onClose()} size="2">
+              <Button onClick={() => onClose()} variant="outline">
                 Close
               </Button>
             </Flex>
           </Box>
         )}
-      </AlertDialogContent>
-    </AlertDialog>
+      </DialogContent>
+    </Dialog>
   );
 };
 

packages/www/components/ApiKeys/KeyCell.tsx

@@ -4,13 +4,13 @@ import {
   HoverCardTrigger,
   Flex,
   HoverCardContent,
-  Button,
   Text,
   useSnackbar,
 } from "@livepeer/design-system";
 import { CopyIcon } from "@radix-ui/react-icons";
 import { useState } from "react";
 import { CopyToClipboard } from "react-copy-to-clipboard";
+import { Button } from "components/ui/button";
 
 const KeyCell = ({ token }) => {
   const [openSnackbar] = useSnackbar();
@@ -52,7 +52,10 @@ const KeyCell = ({ token }) => {
           </HoverCardContent>
         </HoverCardRoot>
       ) : (
-        <Button size="1" type="button" onClick={() => setKeyRevealed(true)}>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => setKeyRevealed(true)}>
           Reveal key
         </Button>
       )}

packages/www/components/AssetDetails/AssetChildrenHeadingBox.tsx

@@ -1,15 +1,14 @@
+import { Box, Flex } from "@livepeer/design-system";
+import { ChevronDownIcon } from "@radix-ui/react-icons";
+import { Dispatch, SetStateAction } from "react";
+import { Button } from "components/ui/button";
 import {
-  Box,
-  Flex,
-  Button,
   DropdownMenu,
-  DropdownMenuTrigger,
   DropdownMenuContent,
   DropdownMenuGroup,
   DropdownMenuItem,
-} from "@livepeer/design-system";
-import { ChevronDownIcon } from "@radix-ui/react-icons";
-import { Dispatch, SetStateAction } from "react";
+  DropdownMenuTrigger,
+} from "components/ui/dropdown-menu";
 
 export type AssetChildrenHeadingBoxProps = {
   children: React.ReactNode;
@@ -77,9 +76,7 @@ const AssetChildrenHeadingBox = ({
         <Box css={{ position: "relative", top: "-8px" }}>
           <DropdownMenu>
             <DropdownMenuTrigger asChild>
-              <Button
-                size="2"
-                css={{ display: "flex", ai: "center", mr: "$1" }}>
+              <Button variant="secondary" size="sm">
                 Actions
                 <Box as={ChevronDownIcon} css={{ ml: "$1" }} />
               </Button>

packages/www/components/AssetDetails/AssetOverviewTab.tsx

@@ -20,6 +20,7 @@ import { useApi } from "hooks";
 import Spinner from "../Spinner";
 import moment from "moment";
 import ClipButton from "../Clipping/ClipButton";
+import { Card } from "components/ui/card";
 
 const StyledIpfsIcon = styled(IpfsIcon, {
   color: "$gray",
@@ -134,7 +135,7 @@ const AssetOverviewTab = ({
             may also archive them using the following storage providers.
           </Text>
         </Box>
-        <Promo size="2" css={{ borderRadius: "$2" }}>
+        <Card className="p-4">
           <Flex css={{ justifyContent: "space-between" }}>
             <Flex align="center">
               <StyledIpfsIcon />
@@ -206,7 +207,7 @@ const AssetOverviewTab = ({
               </Flex>
             </Box>
           )}
-        </Promo>
+        </Card>
       </Box>
     </>
   );