refactor: css as const and styles for dynamic (#421)

CSCI-SHU-410-SE-Project · Feb 14, 2025 · 0bd6d0c · 0bd6d0c
1 parent 2c0a7d1
commit 0bd6d0c
Show file tree

Hide file tree

Showing 15 changed files with 215 additions and 189 deletions.
diff --git a/src/canvas/components/ErrorDisplay.tsx b/src/canvas/components/ErrorDisplay.tsx
@@ -1,6 +1,11 @@
+import { css } from "@emotion/react";
 import { Box, Code, Dialog, ScrollArea, Text } from "@radix-ui/themes";
 import { memo } from "react";
 
+const styles = {
+  trigger: css({ cursor: "pointer" }),
+};
+
 interface ErrorDisplayProps {
   id: string;
   error: string;
@@ -11,25 +16,29 @@ const ErrorDisplay = memo(({ id, error, message }: ErrorDisplayProps) => {
   return (
     <Dialog.Root>
       <Dialog.Trigger>
-        <Box width="100%" height="100%" p="2" css={{ cursor: "pointer" }}>
-          <Text size="2" color="red">
+        <Box width="100%" height="100%" p="2" css={styles.trigger} asChild>
+          <Text size="2" as="div" color="red">
             An error occurred in widget <Code variant="ghost">{id}</Code>. Click
             anywhere to check the details.
           </Text>
         </Box>
       </Dialog.Trigger>
-      <Dialog.Content size="2" maxWidth="60vw">
-        <Dialog.Title size="3" color="red" mb="1">
+      <Dialog.Content size="1" maxWidth="60vw">
+        <Dialog.Title size="3" color="red" mt="2" mb="1">
           Error in widget <Code variant="ghost">{id}</Code>
         </Dialog.Title>
-        <Dialog.Description size="2" color="red" mb="2">
+        <Dialog.Description size="2" color="red" mb="4">
           {error}
         </Dialog.Description>
         <ScrollArea asChild>
-          <Box pb="3" pr="3" maxHeight="50vh">
-            <Code size="2" variant="ghost" css={{ whiteSpace: "pre" }}>
-              {message}
-            </Code>
+          <Box px="3" pb="3" maxHeight="50vh">
+            <Box asChild m="0">
+              <pre>
+                <Code size="2" variant="ghost">
+                  {message}
+                </Code>
+              </pre>
+            </Box>
           </Box>
         </ScrollArea>
       </Dialog.Content>

diff --git a/src/canvas/components/WidgetContainer.tsx b/src/canvas/components/WidgetContainer.tsx
@@ -1,11 +1,28 @@
-import { RefObject, memo, useCallback, useRef } from "react";
+import { RefObject, memo, useRef } from "react";
 import Draggable, { DraggableData, DraggableEvent } from "react-draggable";
 import { ErrorBoundary } from "react-error-boundary";
 import ErrorDisplay from "./ErrorDisplay";
 import { stringifyError } from "../utils";
 import { LuGripVertical } from "react-icons/lu";
 import { Box } from "@radix-ui/themes";
 import { updateWidgetSettings, useWidgetsStore } from "../hooks";
+import { css } from "@emotion/react";
+
+const styles = {
+  wrapper: css({
+    "&:hover": { ".handle": { opacity: 1 } },
+  }),
+  handle: css({
+    cursor: "grab",
+    opacity: 0,
+    zIndex: 2,
+    transition: "opacity 200ms ease-in-out",
+  }),
+  container: css({
+    color: "var(--gray-12)",
+    zIndex: 1,
+  }),
+};
 
 interface WidgetContainerProps {
   id: string;
@@ -15,69 +32,59 @@ const WidgetContainer = memo(({ id }: WidgetContainerProps) => {
   const { Component, width, height, x, y, opacity } = useWidgetsStore(
     (state) => state.widgets[id],
   );
-  const containerRef = useRef<HTMLDivElement>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
 
-  const onStop = useCallback(
-    (_: DraggableEvent, data: DraggableData) => {
-      updateWidgetSettings(id, { x: x + data.x, y: y + data.y }, true);
-    },
-    [id, x, y],
-  );
+  const onStop = (_: DraggableEvent, data: DraggableData) => {
+    updateWidgetSettings(id, { x: x + data.x, y: y + data.y }, true);
+  };
 
   return (
     <Draggable
       // TODO: remove the `as` part which is workaround for React 19:
       // https://github.com/react-grid-layout/react-draggable/issues/768
-      nodeRef={containerRef as RefObject<HTMLDivElement>}
+      nodeRef={wrapperRef as RefObject<HTMLDivElement>}
       onStop={onStop}
       bounds="body"
-      handle=".draggable-handle"
+      handle=".handle"
       position={{ x: 0, y: 0 }}
     >
       <Box
-        ref={containerRef}
+        ref={wrapperRef}
         overflow="hidden"
         position="absolute"
-        left={`${x}px`}
-        top={`${y}px`}
-        width={width ?? "300px"}
-        height={height ?? "150px"}
-        css={{
-          color: "var(--gray-12)",
-          backgroundColor: "var(--gray-surface)",
-          borderRadius: "var(--radius-2)",
-          boxShadow: "0 0 2px var(--gray-8)",
-          opacity: `${opacity}%`,
-        }}
+        css={styles.wrapper}
+        style={{ left: x, top: y }}
       >
-        <LuGripVertical
-          className="draggable-handle"
-          size={20}
-          css={{
-            position: "absolute",
-            top: "var(--space-1)",
-            right: "var(--space-1)",
-            cursor: "grab",
-            opacity: "0",
-            zIndex: 9999,
-            transition: "opacity 200ms ease-in-out",
-            "&:hover": {
-              opacity: "1",
-            },
-          }}
-        />
-        <ErrorBoundary
-          resetKeys={[Component]}
-          fallbackRender={({ error }) => (
-            <ErrorDisplay
-              id={id}
-              error="Error in the widget component [React error boundary]"
-              message={stringifyError(error)}
-            />
-          )}
+        <Box
+          className="handle"
+          position="absolute"
+          top="1"
+          right="1"
+          css={styles.handle}
+          asChild
+        >
+          <LuGripVertical size={20} />
+        </Box>
+        <Box
+          position="relative"
+          width={width ?? "300px"}
+          height={height ?? "150px"}
+          css={styles.container}
+          style={{ opacity: opacity / 100 }}
         >
-          <Component id={id} />
-        </ErrorBoundary>
+          <ErrorBoundary
+            resetKeys={[Component]}
+            fallbackRender={({ error }) => (
+              <ErrorDisplay
+                id={id}
+                error="Error in the widget component [React error boundary]"
+                message={stringifyError(error)}
+              />
+            )}
+          >
+            <Component id={id} />
+          </ErrorBoundary>
+        </Box>
       </Box>
     </Draggable>
   );

diff --git a/src/canvas/index.html b/src/canvas/index.html
@@ -8,7 +8,7 @@
   </head>
 
   <body style="overflow: hidden; margin: 0">
-    <div id="root"></div>
+    <div id="root" style="width: 100vw; height: 100vh"></div>
     <script type="module" src="main.tsx"></script>
   </body>
 </html>
diff --git a/src/custom.css b/src/custom.css
@@ -1,4 +1,9 @@
 .radix-themes {
   --em-font-family: var(--default-font-family);
   --em-font-size-adjust: 1;
+
+  &[data-is-root-theme="true"] {
+    height: 100%;
+    width: 100%;
+  }
 }
diff --git a/src/manager/App.tsx b/src/manager/App.tsx
@@ -25,12 +25,7 @@ const App = () => {
   useUpdateSettingsListener();
 
   return (
-    <RadixTheme
-      appearance={theme}
-      accentColor="indigo"
-      grayColor="slate"
-      css={{ height: "100vh" }}
-    >
+    <RadixTheme appearance={theme} accentColor="indigo" grayColor="slate">
       <Toaster
         position="bottom-center"
         theme={theme}

diff --git a/src/manager/components/About/index.tsx b/src/manager/components/About/index.tsx
@@ -3,22 +3,28 @@ import ExternalCopyLink from "../ExternalCopyLink";
 import Logo from "/deskulpt.svg";
 import { memo } from "react";
 import { FaGithub } from "react-icons/fa";
+import { css } from "@emotion/react";
+
+const styles = {
+  logo: css({
+    ".dark &": {
+      filter: "invert(90%) hue-rotate(170deg)",
+      opacity: 0.9,
+    },
+  }),
+  table: css({
+    "--table-cell-padding": "var(--space-1) 0",
+    "--table-cell-min-height": 0,
+    "& tr": { "--table-row-box-shadow": "none" },
+    "& th": { color: "var(--gray-11)", width: "100px" },
+  }),
+};
 
 const AboutTab = memo(() => {
   return (
     <Flex height="100%" pb="8" justify="center" align="center">
       <Flex align="center" justify="center" flexGrow="1">
-        <Avatar
-          src={Logo}
-          fallback="D"
-          size="8"
-          css={{
-            ".dark &": {
-              filter: "invert(90%) hue-rotate(170deg)",
-              opacity: 0.9,
-            },
-          }}
-        />
+        <Avatar src={Logo} fallback="D" size="8" css={styles.logo} />
       </Flex>
       <Box flexGrow="1">
         <Heading size="6" mb="1">
@@ -27,15 +33,7 @@ const AboutTab = memo(() => {
         <Heading size="3" mb="4" weight="regular" color="gray">
           A cross-platform desktop customization tool
         </Heading>
-        <Table.Root
-          size="1"
-          css={{
-            "--table-cell-padding": "var(--space-1) 0",
-            "--table-cell-min-height": 0,
-            "& tr": { "--table-row-box-shadow": "none" },
-            "& th": { color: "var(--gray-11)", width: "100px" },
-          }}
-        >
+        <Table.Root size="1" css={styles.table}>
           <Table.Body>
             <Table.Row align="center">
               <Table.RowHeaderCell>Version</Table.RowHeaderCell>

diff --git a/src/manager/components/IntegerInput.tsx b/src/manager/components/IntegerInput.tsx
@@ -1,6 +1,15 @@
+import { css } from "@emotion/react";
 import { Box, BoxProps, Reset } from "@radix-ui/themes";
 import { ChangeEvent, KeyboardEvent, useCallback } from "react";
 
+const styles = {
+  root: css({
+    backgroundColor: "var(--gray-5)",
+    borderRadius: "var(--radius-2)",
+    lineHeight: "1.6",
+  }),
+};
+
 type IntegerInputProps = BoxProps & {
   value: number;
   onValueChange: (value: number) => void;
@@ -78,16 +87,7 @@ const IntegerInput = ({
   };
 
   return (
-    <Box
-      pl="2"
-      css={{
-        backgroundColor: "var(--gray-5)",
-        borderRadius: "var(--radius-2)",
-        lineHeight: "1.6",
-      }}
-      {...boxProps}
-      asChild
-    >
+    <Box pl="2" css={styles.root} {...boxProps} asChild>
       <Reset>
         <input
           type="number"

diff --git a/src/manager/components/Settings/SectionTable.tsx b/src/manager/components/Settings/SectionTable.tsx
@@ -1,6 +1,21 @@
+import { css } from "@emotion/react";
 import { Box, Heading, Table } from "@radix-ui/themes";
 import { PropsWithChildren } from "react";
 
+const styles = {
+  root: css({
+    border: "1px solid var(--gray-a6)",
+    borderRadius: "var(--radius-2)",
+  }),
+  title: css({ backgroundColor: "var(--gray-1)" }),
+  table: css({
+    "--table-cell-padding": "var(--space-1) var(--space-2)",
+    "--table-cell-min-height": 0,
+    "& tr": { "--table-row-box-shadow": "none" },
+    "& th": { width: "120px" },
+  }),
+};
+
 interface SectionTableProps {
   title: string;
 }
@@ -10,38 +25,20 @@ const SectionTable = ({
   children,
 }: PropsWithChildren<SectionTableProps>) => {
   return (
-    <Box
-      position="relative"
-      mt="2"
-      pt="4"
-      pb="2"
-      px="1"
-      css={{
-        border: "1px solid var(--gray-a6)",
-        borderRadius: "var(--radius-2)",
-      }}
-    >
+    <Box position="relative" mt="2" pt="4" pb="2" px="1" css={styles.root}>
       <Box
         position="absolute"
         top="calc(-0.5 * var(--heading-line-height-2))"
         left="2"
         px="2"
-        css={{ backgroundColor: "var(--gray-1)" }}
+        css={styles.title}
         asChild
       >
         <Heading size="2" color="gray" weight="medium">
           {title}
         </Heading>
       </Box>
-      <Table.Root
-        size="1"
-        css={{
-          "--table-cell-padding": "var(--space-1) var(--space-2)",
-          "--table-cell-min-height": 0,
-          "& tr": { "--table-row-box-shadow": "none" },
-          "& th": { width: "120px" },
-        }}
-      >
+      <Table.Root size="1" css={styles.table}>
         <Table.Body>{children}</Table.Body>
       </Table.Root>
     </Box>