refactor: about tab (#420)

* refactor: about tab * minor * minor
CSCI-SHU-410-SE-Project · Feb 13, 2025 · 2c0a7d1 · 2c0a7d1
1 parent 53aace8
commit 2c0a7d1
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 92 deletions.
diff --git a/src/manager/components/About/ExternalCopyLink.tsx b/src/manager/components/About/ExternalCopyLink.tsx
diff --git a/src/manager/components/About/index.tsx b/src/manager/components/About/index.tsx
@@ -1,12 +1,13 @@
-import { Avatar, DataList, Flex, Heading, Text } from "@radix-ui/themes";
-import ExternalCopyLink from "./ExternalCopyLink";
+import { Avatar, Box, Flex, Heading, Table } from "@radix-ui/themes";
+import ExternalCopyLink from "../ExternalCopyLink";
 import Logo from "/deskulpt.svg";
 import { memo } from "react";
+import { FaGithub } from "react-icons/fa";
 
 const AboutTab = memo(() => {
   return (
-    <Flex height="100%" pb="9" px="3" justify="center" align="center" gap="3">
-      <Flex align="center" justify="center" css={{ flex: 1 }}>
+    <Flex height="100%" pb="8" justify="center" align="center">
+      <Flex align="center" justify="center" flexGrow="1">
         <Avatar
           src={Logo}
           fallback="D"
@@ -19,38 +20,52 @@ const AboutTab = memo(() => {
           }}
         />
       </Flex>
-      <Flex direction="column" gap="3" css={{ flex: 2 }}>
-        <Flex direction="column">
-          <Heading size="6">Deskulpt</Heading>
-          <Text>A cross-platform desktop customization tool</Text>
-        </Flex>
-        <DataList.Root size="2" css={{ gap: "var(--space-1)" }}>
-          <DataList.Item>
-            <DataList.Label>Version</DataList.Label>
-            <DataList.Value>{__VERSION__}</DataList.Value>
-          </DataList.Item>
-          <DataList.Item>
-            <DataList.Label>Authors</DataList.Label>
-            <DataList.Value>The Deskulpt Development Team</DataList.Value>
-          </DataList.Item>
-          <DataList.Item>
-            <DataList.Label>Repository</DataList.Label>
-            <DataList.Value>
-              <ExternalCopyLink href="https://github.com/CSCI-SHU-410-SE-Project/Deskulpt">
-                CSCI-SHU-410-SE-Project/Deskulpt
-              </ExternalCopyLink>
-            </DataList.Value>
-          </DataList.Item>
-          <DataList.Item>
-            <DataList.Label>Documentation</DataList.Label>
-            <DataList.Value>
-              <ExternalCopyLink href="https://csci-shu-410-se-project.github.io/Deskulpt/">
-                Website
-              </ExternalCopyLink>
-            </DataList.Value>
-          </DataList.Item>
-        </DataList.Root>
-      </Flex>
+      <Box flexGrow="1">
+        <Heading size="6" mb="1">
+          Deskulpt
+        </Heading>
+        <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.Body>
+            <Table.Row align="center">
+              <Table.RowHeaderCell>Version</Table.RowHeaderCell>
+              <Table.Cell>{__VERSION__}</Table.Cell>
+            </Table.Row>
+            <Table.Row align="center">
+              <Table.RowHeaderCell>Authors</Table.RowHeaderCell>
+              <Table.Cell>The Deskulpt Development Team</Table.Cell>
+            </Table.Row>
+            <Table.Row align="center">
+              <Table.RowHeaderCell>Repository</Table.RowHeaderCell>
+              <Table.Cell>
+                <ExternalCopyLink href="https://github.com/CSCI-SHU-410-SE-Project/Deskulpt">
+                  <Flex align="center" gap="1">
+                    <FaGithub /> CSCI-SHU-410-SE-Project/Deskulpt
+                  </Flex>
+                </ExternalCopyLink>
+              </Table.Cell>
+            </Table.Row>
+            <Table.Row align="center">
+              <Table.RowHeaderCell>Homepage</Table.RowHeaderCell>
+              <Table.Cell>
+                <ExternalCopyLink href="https://csci-shu-410-se-project.github.io/Deskulpt">
+                  csci-shu-410-se-project.github.io/Deskulpt
+                </ExternalCopyLink>
+              </Table.Cell>
+            </Table.Row>
+          </Table.Body>
+        </Table.Root>
+      </Box>
     </Flex>
   );
 });

diff --git a/src/manager/components/ExternalCopyLink.tsx b/src/manager/components/ExternalCopyLink.tsx
@@ -0,0 +1,43 @@
+import { Flex, FlexProps, IconButton, Link, LinkProps } from "@radix-ui/themes";
+import { RxCopy } from "react-icons/rx";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
+import { toast } from "sonner";
+import { useCallback } from "react";
+
+interface ExternalCopyLinkProps extends LinkProps {
+  gap?: FlexProps["gap"];
+}
+
+const ExternalCopyLink = ({
+  gap = "2",
+  children,
+  ...linkProps
+}: ExternalCopyLinkProps) => {
+  const handleCopy = useCallback(() => {
+    if (linkProps.href !== undefined) {
+      writeText(linkProps.href).then(() =>
+        toast.success("Copied to clipboard."),
+      );
+    }
+  }, [linkProps.href]);
+
+  return (
+    <Flex gap={gap} align="center">
+      <Link {...linkProps} target="_blank" rel="noreferrer">
+        {children}
+      </Link>
+      {linkProps.href !== undefined && (
+        <IconButton
+          size="1"
+          variant="ghost"
+          title="Copy link"
+          onClick={handleCopy}
+        >
+          <RxCopy />
+        </IconButton>
+      )}
+    </Flex>
+  );
+};
+
+export default ExternalCopyLink;
diff --git a/src/manager/components/Widgets/Config.tsx b/src/manager/components/Widgets/Config.tsx
@@ -17,7 +17,6 @@ const Config = memo(({ id }: ConfigProps) => {
         {config.type === WidgetConfigType.VALID ? (
           <Table.Root
             size="1"
-            variant="ghost"
             layout="fixed"
             css={{
               "--table-cell-padding": "var(--space-1) var(--space-2)",

diff --git a/src/manager/components/Widgets/Settings.tsx b/src/manager/components/Widgets/Settings.tsx
@@ -70,7 +70,6 @@ const Settings = memo(({ id }: SettingsProps) => {
   return (
     <Table.Root
       size="1"
-      variant="ghost"
       layout="fixed"
       css={{
         "--table-cell-padding": "var(--space-1) var(--space-2)",