From 9c134f4c8f255f612192b344c1d8a9dff43dc84f Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 7 Aug 2023 23:41:48 +0800
Subject: [PATCH] chore: update access token list

---
 web/src/components/Alert.tsx                   |  2 +-
 .../components/setting/AccessTokenSection.tsx  | 18 ++++++++++--------
 2 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/web/src/components/Alert.tsx b/web/src/components/Alert.tsx
index e2743c0..b73c5bc 100644
--- a/web/src/components/Alert.tsx
+++ b/web/src/components/Alert.tsx
@@ -54,7 +54,7 @@ const Alert: React.FC<Props> = (props: Props) => {
         <div className="w-80">
           <p className="content-text mb-4">{content}</p>
           <div className="w-full flex flex-row justify-end items-center space-x-2">
-            <Button variant="plain" onClick={handleCloseBtnClick}>
+            <Button variant="plain" color="neutral" onClick={handleCloseBtnClick}>
               {closeBtnText}
             </Button>
             <Button color={style} onClick={handleConfirmBtnClick}>
diff --git a/web/src/components/setting/AccessTokenSection.tsx b/web/src/components/setting/AccessTokenSection.tsx
index 3d3f5bc..61578d4 100644
--- a/web/src/components/setting/AccessTokenSection.tsx
+++ b/web/src/components/setting/AccessTokenSection.tsx
@@ -98,10 +98,10 @@ const AccessTokenSection = () => {
                   <tbody className="divide-y divide-gray-200">
                     {userAccessTokens.map((userAccessToken) => (
                       <tr key={userAccessToken.accessToken}>
-                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500 flex flex-row justify-start items-center gap-x-1">
-                          <span>{getFormatedAccessToken(userAccessToken.accessToken)}</span>
+                        <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-900 flex flex-row justify-start items-center gap-x-1">
+                          <span className="font-mono">{getFormatedAccessToken(userAccessToken.accessToken)}</span>
                           <Button color="neutral" variant="plain" size="sm" onClick={() => copyAccessToken(userAccessToken.accessToken)}>
-                            <Icon.Clipboard className="w-4 h-auto" />
+                            <Icon.Clipboard className="w-4 h-auto text-gray-500" />
                           </Button>
                         </td>
                         <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-900">{userAccessToken.description}</td>
@@ -109,15 +109,17 @@ const AccessTokenSection = () => {
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">
                           {String(userAccessToken.expiresAt ?? "Never")}
                         </td>
-                        <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm font-medium">
-                          <button
-                            className="text-indigo-600 hover:text-indigo-900"
+                        <td className="relative whitespace-nowrap py-4 pl-3 pr-4 text-right text-sm">
+                          <Button
+                            color="danger"
+                            variant="plain"
+                            size="sm"
                             onClick={() => {
                               handleDeleteAccessToken(userAccessToken.accessToken);
                             }}
                           >
-                            Delete
-                          </button>
+                            <Icon.Trash className="w-4 h-auto" />
+                          </Button>
                         </td>
                       </tr>
                     ))}