Replace text buttons with icon buttons

s-h-a-d-o-w · Nov 18, 2024 · f056920 · f056920
1 parent d5a3b78
commit f056920
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 32 deletions.
diff --git a/src/app/components/Actions.tsx b/src/app/components/Actions.tsx
@@ -1,9 +1,9 @@
 import { isDev } from "@/utils/consts";
 import { css } from "../../../styled-system/css";
 import { styled } from "../../../styled-system/jsx";
-import { Button } from "../../components/Button";
 import HmrTimestamp from "./HmrTimestamp";
 import { AuthButtonClient } from "../login/components/AuthButton/AuthButtonClient";
+import { IconButton } from "@/components/IconButton";
 
 type Props = {
   disabledHistoryActions: boolean;
@@ -46,15 +46,21 @@ export function Actions({
           Last update: <HmrTimestamp />
         </div>
       )}
-      <Button onClick={onReset}>Reset</Button>
-      <Button disabled={disabledHistoryActions} onClick={onShowHistory}>
-        History
-      </Button>
-      <Button disabled={disabledHistoryActions} onClick={onDeleteHistory}>
-        Delete History
-      </Button>
-      <Button onClick={onLoad}>Load</Button>
-      <Button onClick={onSave}>Save</Button>
+      <IconButton name="reset" iconSize="md" onClick={onReset} />
+      <IconButton
+        name="history"
+        iconSize="md"
+        disabled={disabledHistoryActions}
+        onClick={onShowHistory}
+      />
+      <IconButton
+        name="delete"
+        iconSize="md"
+        disabled={disabledHistoryActions}
+        onClick={onDeleteHistory}
+      />
+      <IconButton name="load" iconSize="md" onClick={onLoad} />
+      <IconButton name="save" iconSize="md" onClick={onSave} />
       <AuthButtonClient isSignedIn />
     </StyledActions>
   );

diff --git a/src/app/components/Message/CopyButton.tsx b/src/app/components/Message/CopyButton.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@/components/Button";
+import { IconButton } from "@/components/IconButton";
 import { useState } from "react";
 
 type Props = {
@@ -18,7 +18,9 @@ export function CopyButton({ className, content }: Props) {
   ];
 
   return !clipboardItem ? null : (
-    <Button
+    <IconButton
+      name={hasCopied ? "check" : "copy"}
+      iconSize="md"
       className={className}
       disabled={hasCopied}
       onClick={() => {
@@ -28,13 +30,6 @@ export function CopyButton({ className, content }: Props) {
           setHasCopied(false);
         }, 1000);
       }}
-      // style={{
-      //   position: "absolute",
-      //   top: 0,
-      //   right: 0,
-      // }}
-    >
-      {hasCopied ? "Done" : "Copy"}
-    </Button>
+    />
   );
 }
diff --git a/src/app/components/Message/index.tsx b/src/app/components/Message/index.tsx
@@ -2,10 +2,10 @@ import { type Message as MessageType } from "ai/react";
 import { memo } from "react";
 import ReactMarkdown from "react-markdown";
 import { styled } from "../../../../styled-system/jsx";
-import { Button } from "../../../components/Button";
 import { Code } from "./Code";
 import { CopyButton } from "./CopyButton";
 import { padNewlines } from "./padNewlines";
+import { IconButton } from "@/components/IconButton";
 
 type Props = MessageType & {
   className?: string;
@@ -103,7 +103,13 @@ export function Message({
           gap: "12rem",
         }}
       >
-        {onDelete && <Button onClick={() => onDelete(id)}>Delete</Button>}
+        {onDelete && (
+          <IconButton
+            name="delete"
+            iconSize="md"
+            onClick={() => onDelete(id)}
+          />
+        )}
         {showCopyAll && <CopyButton content={content} />}
       </div>
     </StyledMessage>

diff --git a/src/app/login/components/AuthButton/AuthButtonClient.tsx b/src/app/login/components/AuthButton/AuthButtonClient.tsx
@@ -7,7 +7,7 @@ import Spinner from "../../../../components/Spinner";
 import { ReactNode } from "react";
 import { signIn, signOut } from "./authActions";
 import { FaGithub } from "react-icons/fa6";
-import { IoLogOut } from "react-icons/io5";
+import { IconButton } from "@/components/IconButton";
 
 function PendingServerAction({ children }: { children: ReactNode }) {
   const { pending } = useFormStatus();
@@ -39,13 +39,13 @@ export function AuthButtonClient({
   return (
     <form action={action} style={isSignedIn ? { lineHeight: 0 } : {}}>
       <PendingServerAction>
-        <Button>
-          {isSignedIn ? (
-            <IoLogOut style={{ height: "21rem" }} />
-          ) : (
+        {isSignedIn ? (
+          <IconButton name="logout" iconSize="md" />
+        ) : (
+          <Button>
             <SignInButton />
-          )}
-        </Button>
+          </Button>
+        )}
       </PendingServerAction>
     </form>
   );

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -50,7 +50,7 @@ export const Button = styled("button", {
       md: {
         width: "md",
         height: "md",
-        padding: "4rem",
+        padding: "6rem",
       },
       xl: {
         width: "xl",

diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
@@ -1,4 +1,16 @@
-import { MdArrowUpward, MdDelete, MdReplay, MdStop } from "react-icons/md";
+import {
+  MdCheck,
+  MdContentCopy,
+  MdArrowUpward,
+  MdOutlineDelete,
+  MdReplay,
+  MdStop,
+  MdFileDownload,
+  MdFileUpload,
+  MdLogout,
+  MdHistory,
+  MdCached,
+} from "react-icons/md";
 import { Button } from "./Button";
 import { css } from "../../styled-system/css";
 import { ComponentProps } from "../../styled-system/types";
@@ -8,8 +20,15 @@ type Props = ComponentProps<typeof Button> & {
 };
 
 const iconMap = {
-  delete: MdDelete,
+  check: MdCheck,
+  copy: MdContentCopy,
+  delete: MdOutlineDelete,
+  history: MdHistory,
+  load: MdFileUpload,
+  logout: MdLogout,
   replay: MdReplay,
+  reset: MdCached,
+  save: MdFileDownload,
   stop: MdStop,
   up: MdArrowUpward,
 } as const;