chore: update access token list

yourselfhosted · Aug 7, 2023 · 9c134f4 · 9c134f4
1 parent b624576
commit 9c134f4
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git 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
@@ -98,26 +98,28 @@ 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>
                         <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">{String(userAccessToken.issuedAt)}</td>
                         <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>
                     ))}