From 2c0a7d1fd9d510ca83f99d59a8e3f31526f28650 Mon Sep 17 00:00:00 2001
From: Yao Xiao <108576690+Charlie-XIAO@users.noreply.github.com>
Date: Thu, 13 Feb 2025 03:08:14 -0500
Subject: [PATCH] refactor: about tab (#420)

* refactor: about tab

* minor

* minor
---
 .../components/About/ExternalCopyLink.tsx     | 54 ------------
 src/manager/components/About/index.tsx        | 87 +++++++++++--------
 src/manager/components/ExternalCopyLink.tsx   | 43 +++++++++
 src/manager/components/Widgets/Config.tsx     |  1 -
 src/manager/components/Widgets/Settings.tsx   |  1 -
 5 files changed, 94 insertions(+), 92 deletions(-)
 delete mode 100644 src/manager/components/About/ExternalCopyLink.tsx
 create mode 100644 src/manager/components/ExternalCopyLink.tsx

diff --git a/src/manager/components/About/ExternalCopyLink.tsx b/src/manager/components/About/ExternalCopyLink.tsx
deleted file mode 100644
index 6e855ddd..00000000
--- a/src/manager/components/About/ExternalCopyLink.tsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import {
-  Flex,
-  FlexProps,
-  IconButton,
-  Link,
-  LinkProps,
-  Tooltip,
-} from "@radix-ui/themes";
-import { RxCopy } from "react-icons/rx";
-import { writeText } from "@tauri-apps/plugin-clipboard-manager";
-import { toast } from "sonner";
-import { PropsWithChildren } from "react";
-
-interface ExternalCopyLinkProps {
-  /** The external target of the link. */
-  href: LinkProps["href"];
-  /** The gap size between the link text and the copy button. */
-  gap?: FlexProps["gap"];
-}
-
-/**
- * The external link component with a copy button.
- *
- * The link will be opened in a new tab when clicked. The copy button will copy the link
- * address to the clipboard. Wrap the link text within this component.
- */
-const ExternalCopyLink = ({
-  href,
-  gap = "3",
-  children,
-}: PropsWithChildren<ExternalCopyLinkProps>) => {
-  return (
-    <Flex gap={gap} align="center">
-      <Link href={href} target="_blank" rel="noreferrer">
-        {children}
-      </Link>
-      <Tooltip content="Copy link" side="right">
-        <IconButton
-          size="1"
-          variant="ghost"
-          onClick={() =>
-            writeText(
-              "https://csci-shu-410-se-project.github.io/Deskulpt/",
-            ).then(() => toast.success("Copied to clipboard."))
-          }
-        >
-          <RxCopy />
-        </IconButton>
-      </Tooltip>
-    </Flex>
-  );
-};
-
-export default ExternalCopyLink;
diff --git a/src/manager/components/About/index.tsx b/src/manager/components/About/index.tsx
index b4d71681..a266bce6 100644
--- 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
new file mode 100644
index 00000000..1715c51d
--- /dev/null
+++ 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
index 711b6ccd..b4b4b2d5 100644
--- 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
index e2fdfdac..ec305d63 100644
--- 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)",