From 3a86e1338c1cb69ef981cacf27b06cb6d7cbf54b Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Sun, 13 Nov 2022 09:36:09 +0800
Subject: [PATCH] chore: update button style

---
 web/src/components/Alert.tsx            |  2 +-
 web/src/components/WorkspaceSetting.tsx | 23 +++++++---------
 web/src/pages/Auth.tsx                  | 36 +++++++------------------
 web/src/pages/UserDetail.tsx            | 16 +++++------
 4 files changed, 27 insertions(+), 50 deletions(-)

diff --git a/web/src/components/Alert.tsx b/web/src/components/Alert.tsx
index e9b6835..e2743c0 100644
--- a/web/src/components/Alert.tsx
+++ b/web/src/components/Alert.tsx
@@ -2,7 +2,7 @@ import { Button, Modal, ModalDialog } from "@mui/joy";
 import { createRoot } from "react-dom/client";
 import Icon from "./Icon";
 
-type AlertStyle = "primary" | "warning";
+type AlertStyle = "primary" | "warning" | "danger";
 
 interface Props {
   title: string;
diff --git a/web/src/components/WorkspaceSetting.tsx b/web/src/components/WorkspaceSetting.tsx
index d20dca6..0237f05 100644
--- a/web/src/components/WorkspaceSetting.tsx
+++ b/web/src/components/WorkspaceSetting.tsx
@@ -1,3 +1,4 @@
+import { Button } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { deleteWorkspaceUser } from "../helpers/api";
@@ -59,7 +60,7 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
     showCommonDialog({
       title: "Delete Workspace",
       content: `Are you sure to delete workspace \`${workspace.name}\`?`,
-      style: "warning",
+      style: "danger",
       onConfirm: async () => {
         await workspaceService.deleteWorkspaceById(workspace.id);
         navigate("/");
@@ -71,7 +72,7 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
     showCommonDialog({
       title: "Exit Workspace",
       content: `Are you sure to exit workspace \`${workspace.name}\`?`,
-      style: "warning",
+      style: "danger",
       onConfirm: async () => {
         await deleteWorkspaceUser({
           workspaceId: workspace.id,
@@ -91,24 +92,18 @@ const WorkspaceSetting: React.FC<Props> = (props: Props) => {
           <div className="flex flex-row justify-start items-center space-x-2">
             {workspaceUser.role === "ADMIN" ? (
               <>
-                <button className="border rounded-md px-3 leading-8 hover:shadow" onClick={handleEditWorkspaceButtonClick}>
+                <Button variant="soft" onClick={handleEditWorkspaceButtonClick}>
                   Edit
-                </button>
-                <button
-                  className="border rounded-md px-3 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
-                  onClick={handleDeleteWorkspaceButtonClick}
-                >
+                </Button>
+                <Button variant="soft" color="danger" onClick={handleDeleteWorkspaceButtonClick}>
                   Delete
-                </button>
+                </Button>
               </>
             ) : (
               <>
-                <button
-                  className="border rounded-md px-3 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
-                  onClick={handleExitWorkspaceButtonClick}
-                >
+                <Button variant="soft" color="danger" onClick={handleExitWorkspaceButtonClick}>
                   Exit
-                </button>
+                </Button>
               </>
             )}
           </div>
diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx
index 18c98d1..5c2e1bc 100644
--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -1,3 +1,4 @@
+import { Button, Input } from "@mui/joy";
 import React, { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import * as api from "../helpers/api";
@@ -119,7 +120,8 @@ const Auth: React.FC = () => {
     <div className="flex flex-row justify-center items-center w-full h-screen bg-white">
       <div className="w-80 max-w-full h-full py-4 flex flex-col justify-start items-center">
         <div className="w-full py-4 grow flex flex-col justify-center items-center">
-          <div className="flex flex-col justify-start items-start w-full mb-4">
+          <div className="flex flex-row justify-start items-center w-full mb-4">
+            <img src="/corgi-logo.png" className="w-14 h-auto mr-1" alt="" />
             <div className="text-3xl font-medium font-mono flex flex-row justify-start items-center">
               Corgi
               {actionBtnLoadingState.isLoading && <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />}
@@ -128,38 +130,20 @@ const Auth: React.FC = () => {
           <div className={`flex flex-col justify-start items-start w-full ${actionBtnLoadingState.isLoading ? "opacity-80" : ""}`}>
             <div className="w-full flex flex-col mb-2">
               <span className="leading-8 mb-1 text-gray-600">Email</span>
-              <input
-                className="border rounded-md px-3 p-2 leading-7 focus:border-blue-600"
-                type="email"
-                value={email}
-                onChange={handleEmailInputChanged}
-              />
+              <Input className="w-full py-3" type="email" value={email} onChange={handleEmailInputChanged} />
             </div>
             <div className="w-full flex flex-col mb-2">
               <span className="leading-8 text-gray-600">Password</span>
-              <input
-                className="border rounded-md px-3 p-2 leading-7 focus:border-blue-600"
-                type="password"
-                value={password}
-                onChange={handlePasswordInputChanged}
-              />
+              <Input className="w-full py-3" type="password" value={password} onChange={handlePasswordInputChanged} />
             </div>
           </div>
-          <div className="w-full flex flex-row justify-end items-center mt-4">
-            <button
-              className={`mr-4 text-gray-600 hover:text-black ${actionBtnLoadingState.isLoading ? "opacity-80 cursor-wait" : ""}`}
-              onClick={() => handleSignupBtnsClick()}
-            >
+          <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
+            <Button variant="plain" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSignupBtnsClick()}>
               Sign up
-            </button>
-            <button
-              className={`border rounded-md border-green-600 bg-green-600 text-white px-3 py-2 leading-6 hover:bg-green-700 ${
-                actionBtnLoadingState.isLoading ? "opacity-80 cursor-wait" : ""
-              }`}
-              onClick={() => handleSigninBtnsClick()}
-            >
+            </Button>
+            <Button color="primary" disabled={actionBtnLoadingState.isLoading} onClick={() => handleSigninBtnsClick()}>
               Sign in
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/web/src/pages/UserDetail.tsx b/web/src/pages/UserDetail.tsx
index 9086626..5475852 100644
--- a/web/src/pages/UserDetail.tsx
+++ b/web/src/pages/UserDetail.tsx
@@ -1,3 +1,4 @@
+import { Button, Input } from "@mui/joy";
 import { useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { useAppSelector } from "../store";
@@ -70,22 +71,19 @@ const UserDetail: React.FC = () => {
           </p>
           <p className="leading-8 flex flex-row justify-start items-center">
             <span className="mr-3 text-gray-500 font-mono">Password: </span>
-            <button className="border rounded-md px-2 leading-8 hover:shadow" onClick={handleChangePasswordBtnClick}>
+            <Button variant="soft" onClick={handleChangePasswordBtnClick}>
               Change
-            </button>
+            </Button>
           </p>
           <p className="leading-8 flex flex-row justify-start items-center">
             <span className="mr-3 text-gray-500 font-mono">OpenID:</span>
-            <input className="border shrink w-48 rounded-md px-3 pr-5 shadow-inner truncate" type="text" value={user?.openId} readOnly />
-            <button className="-ml-6 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
+            <Input type="text" className="w-48" value={user?.openId} readOnly />
+            <button className="-ml-6 z-1 bg-white text-gray-600 hover:text-black" onClick={handleCopyOpenIdBtnClick}>
               <Icon.Clipboard className="w-4 h-auto" />
             </button>
-            <button
-              className="border ml-4 rounded-md px-2 leading-8 border-red-600 text-red-600 bg-red-50 hover:shadow"
-              onClick={handleResetOpenIdBtnClick}
-            >
+            <Button className="!ml-6" variant="soft" color="warning" onClick={handleResetOpenIdBtnClick}>
               Reset
-            </button>
+            </Button>
           </p>
         </div>
       </div>