From 840659e2b2b49f6c9114646674821dffc0417d17 Mon Sep 17 00:00:00 2001
From: Steven <stevenlgtm@gmail.com>
Date: Mon, 12 Sep 2022 11:37:33 +0800
Subject: [PATCH] chore: update frontend actions

---
 web/src/components/CreateShortcutDialog.tsx  |  20 ++--
 web/src/components/CreateWorkspaceDialog.tsx |  26 ++--
 web/src/components/Header.tsx                |   5 +-
 web/src/components/ShortcutListView.tsx      |  35 +++++-
 web/src/components/WorkspaceListView.tsx     |  36 +++++-
 web/src/components/common/DatePicker.tsx     | 120 -------------------
 web/src/less/auth.less                       | 103 ----------------
 web/src/less/common/date-picker.less         |  65 ----------
 web/src/less/common/dropdown.less            |   2 -
 web/src/less/common/selector.less            |   3 -
 web/src/less/header.module.less              |   3 -
 web/src/pages/Auth.tsx                       |  99 +++++++++++----
 web/src/pages/Home.tsx                       |   2 +-
 web/src/pages/WorkspaceDetail.tsx            |  19 +--
 14 files changed, 173 insertions(+), 365 deletions(-)
 delete mode 100644 web/src/components/common/DatePicker.tsx
 delete mode 100644 web/src/less/auth.less
 delete mode 100644 web/src/less/common/date-picker.less
 delete mode 100644 web/src/less/header.module.less

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 18ecc6c..20a52e8 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -66,24 +66,26 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="w-full flex flex-row justify-between items-center mb-4">
+      <div className="max-w-full w-80 flex flex-row justify-between items-center mb-4">
         <p className="text-base">{shortcutId ? "Edit Shortcut" : "Create Shortcut"}</p>
         <button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
           <Icon.X className="w-5 h-auto text-gray-600" />
         </button>
       </div>
       <div className="w-full flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input className="rounded border px-2 py-2" type="text" placeholder="Name" value={name} onChange={handleNameInputChange} />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Name</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={name} onChange={handleNameInputChange} />
         </div>
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input className="rounded border px-2 py-2" type="text" placeholder="Link" value={link} onChange={handleLinkInputChange} />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Link</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={link} onChange={handleLinkInputChange} />
         </div>
-      </div>
-      <div className="w-full flex flex-row justify-end items-center mt-2">
-        <div className="flex flex-row justify-start items-center">
+        <div className="w-full flex flex-row justify-end items-center">
           <button
-            className={`border rounded px-2 py-1 border-green-600 text-green-600 ${requestState.isLoading ? "opacity-80" : ""}`}
+            className={`border rounded px-3 py-2 border-green-600 bg-green-600 text-white hover:bg-green-700 ${
+              requestState.isLoading ? "opacity-80" : ""
+            }`}
             onClick={handleSaveBtnClick}
           >
             Save
diff --git a/web/src/components/CreateWorkspaceDialog.tsx b/web/src/components/CreateWorkspaceDialog.tsx
index c4ed434..1c2143d 100644
--- a/web/src/components/CreateWorkspaceDialog.tsx
+++ b/web/src/components/CreateWorkspaceDialog.tsx
@@ -63,30 +63,26 @@ const CreateWorkspaceDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
-      <div className="w-full flex flex-row justify-between items-center mb-4">
+      <div className="max-w-full w-80 flex flex-row justify-between items-center mb-4">
         <p className="text-base">{workspaceId ? "Edit Workspace" : "Create Workspace"}</p>
         <button className="rounded p-1 hover:bg-gray-100" onClick={destroy}>
           <Icon.X className="w-5 h-auto text-gray-600" />
         </button>
       </div>
       <div className="w-full flex flex-col justify-start items-start">
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input className="rounded border px-2 py-2" type="text" placeholder="Name" value={name} onChange={handleNameInputChange} />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Name</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={name} onChange={handleNameInputChange} />
         </div>
-        <div className="w-full flex flex-row justify-start items-center mb-2">
-          <input
-            className="rounded border px-2 py-2"
-            type="text"
-            placeholder="Description"
-            value={description}
-            onChange={handleDescriptionInputChange}
-          />
+        <div className="w-full flex flex-col justify-start items-start mb-3">
+          <span className="mb-2">Description</span>
+          <input className="w-full rounded border px-2 py-2" type="text" value={description} onChange={handleDescriptionInputChange} />
         </div>
-      </div>
-      <div className="w-full flex flex-row justify-end items-center mt-2">
-        <div className="flex flex-row justify-start items-center">
+        <div className="w-full flex flex-row justify-end items-center">
           <button
-            className={`border rounded px-2 py-1 border-green-600 text-green-600 ${requestState.isLoading ? "opacity-80" : ""}`}
+            className={`border rounded px-3 py-2 border-green-600 bg-green-600 text-white hover:bg-green-700 ${
+              requestState.isLoading ? "opacity-80" : ""
+            }`}
             onClick={handleSaveBtnClick}
           >
             Save
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 6109e30..15c6be7 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -3,7 +3,6 @@ import { useAppSelector } from "../store";
 import { userService } from "../services";
 import useToggle from "../hooks/useToggle";
 import Icon from "./Icon";
-import styles from "../less/header.module.less";
 
 const Header: React.FC = () => {
   const navigate = useNavigate();
@@ -16,9 +15,9 @@ const Header: React.FC = () => {
   };
 
   return (
-    <div className={styles.header}>
+    <div className="w-full bg-amber-50">
       <div className="w-full max-w-4xl mx-auto px-3 py-4 flex flex-row justify-between items-center">
-        <span>Corgi</span>
+        <span className="text-xl font-mono font-medium">Corgi</span>
         <div className="relative">
           <div className="flex flex-row justify-end items-center" onClick={() => toggleShowDropdown()}>
             <span>{user?.name}</span>
diff --git a/web/src/components/ShortcutListView.tsx b/web/src/components/ShortcutListView.tsx
index 020bce8..e39f2d2 100644
--- a/web/src/components/ShortcutListView.tsx
+++ b/web/src/components/ShortcutListView.tsx
@@ -1,17 +1,44 @@
+import { shortcutService } from "../services";
+import Dropdown from "./common/Dropdown";
+import showCreateShortcutDialog from "./CreateShortcutDialog";
+
 interface Props {
+  workspaceId: WorkspaceId;
   shortcutList: Shortcut[];
 }
 
 const ShortcutListView: React.FC<Props> = (props: Props) => {
-  const { shortcutList } = props;
+  const { workspaceId, shortcutList } = props;
+
+  const handleDeleteShortcutButtonClick = (shortcut: Shortcut) => {
+    shortcutService.deleteShortcutById(shortcut.id);
+  };
 
   return (
     <div className="w-full flex flex-col justify-start items-start">
       {shortcutList.map((shortcut) => {
         return (
-          <div key={shortcut.id} className="w-full flex flex-col justify-start items-start border px-6 py-4 mb-2 rounded-lg">
-            <span className="text-xl font-medium">{shortcut.name}</span>
-            <span className="text-base text-gray-600">{shortcut.link}</span>
+          <div key={shortcut.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
+            <div className="flex flex-col justify-start items-start">
+              <span className="text-lg font-medium">{shortcut.name}</span>
+              <span className="text-base text-gray-600">{shortcut.link}</span>
+            </div>
+            <Dropdown>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
+                onClick={() => showCreateShortcutDialog(workspaceId, shortcut.id)}
+              >
+                Edit
+              </span>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                onClick={() => {
+                  handleDeleteShortcutButtonClick(shortcut);
+                }}
+              >
+                Delete
+              </span>
+            </Dropdown>
           </div>
         );
       })}
diff --git a/web/src/components/WorkspaceListView.tsx b/web/src/components/WorkspaceListView.tsx
index 0c50c59..b6d3521 100644
--- a/web/src/components/WorkspaceListView.tsx
+++ b/web/src/components/WorkspaceListView.tsx
@@ -1,4 +1,8 @@
 import { useNavigate } from "react-router-dom";
+import { workspaceService } from "../services";
+import workspace from "../store/modules/workspace";
+import Dropdown from "./common/Dropdown";
+import showCreateWorkspaceDialog from "./CreateWorkspaceDialog";
 
 interface Props {
   workspaceList: Workspace[];
@@ -12,15 +16,37 @@ const WorkspaceListView: React.FC<Props> = (props: Props) => {
     navigate(`/workspace/${workspace.id}`);
   };
 
+  const handleDeleteWorkspaceButtonClick = (workspace: Workspace) => {
+    workspaceService.deleteWorkspaceById(workspace.id);
+  };
+
   return (
     <div className="w-full flex flex-col justify-start items-start">
       {workspaceList.map((workspace) => {
         return (
-          <div key={workspace.id} className="w-full flex flex-col justify-start items-start border px-6 py-4 mb-2 rounded-lg">
-            <span className="text-xl font-medium" onClick={() => gotoWorkspaceDetailPage(workspace)}>
-              {workspace.name}
-            </span>
-            <span className="text-base text-gray-600">{workspace.description}</span>
+          <div key={workspace.id} className="w-full flex flex-row justify-between items-start border px-6 py-4 mb-3 rounded-lg">
+            <div className="flex flex-col justify-start items-start">
+              <span className="text-lg font-medium cursor-pointer hover:underline" onClick={() => gotoWorkspaceDetailPage(workspace)}>
+                {workspace.name}
+              </span>
+              <span className="text-base text-gray-600">{workspace.description}</span>
+            </div>
+            <Dropdown>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded hover:bg-gray-100"
+                onClick={() => showCreateWorkspaceDialog(workspace.id)}
+              >
+                Edit
+              </span>
+              <span
+                className="w-full px-2 leading-8 cursor-pointer rounded text-red-600 hover:bg-gray-100"
+                onClick={() => {
+                  handleDeleteWorkspaceButtonClick(workspace);
+                }}
+              >
+                Delete
+              </span>
+            </Dropdown>
           </div>
         );
       })}
diff --git a/web/src/components/common/DatePicker.tsx b/web/src/components/common/DatePicker.tsx
deleted file mode 100644
index c98ea1b..0000000
--- a/web/src/components/common/DatePicker.tsx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { useEffect, useState } from "react";
-import { DAILY_TIMESTAMP } from "../../helpers/consts";
-import Icon from "../Icon";
-import "../../less/common/date-picker.less";
-
-interface DatePickerProps {
-  className?: string;
-  datestamp: DateStamp;
-  handleDateStampChange: (datastamp: DateStamp) => void;
-}
-
-const DatePicker: React.FC<DatePickerProps> = (props: DatePickerProps) => {
-  const { className, datestamp, handleDateStampChange } = props;
-  const [currentDateStamp, setCurrentDateStamp] = useState<DateStamp>(getMonthFirstDayDateStamp(datestamp));
-
-  useEffect(() => {
-    setCurrentDateStamp(getMonthFirstDayDateStamp(datestamp));
-  }, [datestamp]);
-
-  const firstDate = new Date(currentDateStamp);
-  const firstDateDay = firstDate.getDay() === 0 ? 7 : firstDate.getDay();
-  const dayList = [];
-  for (let i = 1; i < firstDateDay; i++) {
-    dayList.push({
-      date: 0,
-      datestamp: firstDate.getTime() - DAILY_TIMESTAMP * (7 - i),
-    });
-  }
-  const dayAmount = getMonthDayAmount(currentDateStamp);
-  for (let i = 1; i <= dayAmount; i++) {
-    dayList.push({
-      date: i,
-      datestamp: firstDate.getTime() + DAILY_TIMESTAMP * (i - 1),
-    });
-  }
-
-  const handleDateItemClick = (datestamp: DateStamp) => {
-    handleDateStampChange(datestamp);
-  };
-
-  const handleChangeMonthBtnClick = (i: -1 | 1) => {
-    const year = firstDate.getFullYear();
-    const month = firstDate.getMonth() + 1;
-    let nextDateStamp = 0;
-    if (month === 1 && i === -1) {
-      nextDateStamp = new Date(`${year - 1}/12/1`).getTime();
-    } else if (month === 12 && i === 1) {
-      nextDateStamp = new Date(`${year + 1}/1/1`).getTime();
-    } else {
-      nextDateStamp = new Date(`${year}/${month + i}/1`).getTime();
-    }
-    setCurrentDateStamp(getMonthFirstDayDateStamp(nextDateStamp));
-  };
-
-  return (
-    <div className={`date-picker-wrapper ${className}`}>
-      <div className="date-picker-header">
-        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(-1)}>
-          <Icon.ChevronLeft className="icon-img" />
-        </span>
-        <span className="normal-text">
-          {firstDate.getFullYear()}/{firstDate.getMonth() + 1}
-        </span>
-        <span className="btn-text" onClick={() => handleChangeMonthBtnClick(1)}>
-          <Icon.ChevronRight className="icon-img" />
-        </span>
-      </div>
-      <div className="date-picker-day-container">
-        <div className="date-picker-day-header">
-          <span className="day-item">Mon</span>
-          <span className="day-item">Tue</span>
-          <span className="day-item">Web</span>
-          <span className="day-item">Thu</span>
-          <span className="day-item">Fri</span>
-          <span className="day-item">Sat</span>
-          <span className="day-item">Sun</span>
-        </div>
-
-        {dayList.map((d) => {
-          if (d.date === 0) {
-            return (
-              <span key={d.datestamp} className="day-item null">
-                {""}
-              </span>
-            );
-          } else {
-            return (
-              <span
-                key={d.datestamp}
-                className={`day-item ${d.datestamp === datestamp ? "current" : ""}`}
-                onClick={() => handleDateItemClick(d.datestamp)}
-              >
-                {d.date}
-              </span>
-            );
-          }
-        })}
-      </div>
-    </div>
-  );
-};
-
-function getMonthDayAmount(datestamp: DateStamp): number {
-  const dateTemp = new Date(datestamp);
-  const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
-  const nextMonthDate =
-    currentDate.getMonth() === 11
-      ? new Date(`${currentDate.getFullYear() + 1}/1/1`)
-      : new Date(`${currentDate.getFullYear()}/${currentDate.getMonth() + 2}/1`);
-
-  return (nextMonthDate.getTime() - currentDate.getTime()) / DAILY_TIMESTAMP;
-}
-
-function getMonthFirstDayDateStamp(timestamp: TimeStamp): DateStamp {
-  const dateTemp = new Date(timestamp);
-  const currentDate = new Date(`${dateTemp.getFullYear()}/${dateTemp.getMonth() + 1}/1`);
-  return currentDate.getTime();
-}
-
-export default DatePicker;
diff --git a/web/src/less/auth.less b/web/src/less/auth.less
deleted file mode 100644
index 58ce3c9..0000000
--- a/web/src/less/auth.less
+++ /dev/null
@@ -1,103 +0,0 @@
-.page-wrapper.auth {
-  @apply flex flex-row justify-center items-center w-full h-screen bg-white;
-
-  > .page-container {
-    @apply w-80 max-w-full h-full py-4 flex flex-col justify-start items-center;
-
-    > .auth-form-wrapper {
-      @apply w-full py-4 grow flex flex-col justify-center items-center;
-
-      > .page-header-container {
-        @apply flex flex-col justify-start items-start w-full mb-4;
-
-        > .title-container {
-          @apply w-full flex flex-row justify-between items-center;
-
-          > .logo-img {
-            @apply h-20 w-auto;
-          }
-        }
-
-        > .slogan-text {
-          @apply text-sm text-gray-700;
-        }
-      }
-
-      > .page-content-container {
-        @apply flex flex-col justify-start items-start w-full;
-
-        > .form-item-container {
-          @apply flex flex-col justify-start items-start relative w-full text-base mt-2;
-
-          > .normal-text {
-            @apply absolute top-3 left-3 px-1 leading-10 flex-shrink-0 text-base cursor-text text-gray-400 bg-transparent transition-all select-none;
-
-            &.not-null {
-              @apply text-sm top-0 z-10 leading-4 bg-white rounded;
-            }
-          }
-
-          &.input-form-container {
-            @apply py-2;
-
-            > input {
-              @apply w-full py-3 px-3 text-base shadow-inner rounded-lg border border-solid border-gray-400 hover:opacity-80;
-            }
-          }
-        }
-
-        &.requesting {
-          @apply opacity-80;
-        }
-      }
-
-      > .action-btns-container {
-        @apply flex flex-row justify-end items-center w-full mt-2;
-
-        > .btn {
-          @apply flex flex-row justify-center items-center px-1 py-2 text-sm rounded hover:opacity-80;
-
-          &.signin-btn {
-            @apply bg-green-600 text-white px-3 shadow;
-          }
-
-          &.requesting {
-            @apply cursor-wait opacity-80;
-          }
-
-          > .img-icon {
-            @apply w-4 h-auto mr-1 animate-spin;
-          }
-        }
-      }
-
-      > .tip-text {
-        @apply w-full inline-block float-right text-sm mt-4 text-gray-500 text-right whitespace-pre-wrap;
-
-        &.host-tip {
-          @apply text-blue-600;
-        }
-      }
-    }
-
-    > .footer-container {
-      @apply w-full flex flex-col justify-start items-center;
-
-      > .language-container {
-        @apply mt-2 w-full flex flex-row justify-center items-center text-sm text-gray-400;
-
-        > .locale-item {
-          @apply px-2 cursor-pointer;
-
-          &.active {
-            @apply text-blue-600 font-bold;
-          }
-        }
-
-        > .split-line {
-          @apply font-mono text-gray-400;
-        }
-      }
-    }
-  }
-}
diff --git a/web/src/less/common/date-picker.less b/web/src/less/common/date-picker.less
deleted file mode 100644
index 17e5bfe..0000000
--- a/web/src/less/common/date-picker.less
+++ /dev/null
@@ -1,65 +0,0 @@
-@import "../mixin.less";
-
-.date-picker-wrapper {
-  @apply flex flex-col justify-start items-start p-4;
-
-  > .date-picker-header {
-    @apply flex flex-row justify-center items-center w-full mb-2;
-
-    > .btn-text {
-      @apply w-6 h-6 rounded cursor-pointer select-none flex flex-col justify-center items-center opacity-40 hover:bg-gray-200;
-    }
-
-    > .normal-text {
-      @apply mx-1 leading-6 font-mono;
-    }
-  }
-
-  > .date-picker-day-container {
-    .flex(row, flex-start, flex-start);
-    width: 280px;
-    flex-wrap: wrap;
-
-    > .date-picker-day-header {
-      .flex(row, space-around, center);
-      width: 100%;
-
-      > .day-item {
-        .flex(column, center, center);
-        width: 36px;
-        height: 36px;
-        user-select: none;
-        color: gray;
-        font-size: 13px;
-        margin: 2px 0;
-      }
-    }
-
-    > .day-item {
-      .flex(column, center, center);
-      width: 36px;
-      height: 36px;
-      border-radius: 50%;
-      font-size: 14px;
-      user-select: none;
-      cursor: pointer;
-      margin: 2px;
-
-      &:hover {
-        background-color: @bg-whitegray;
-      }
-
-      &.current {
-        background-color: @bg-light-blue;
-        font-size: 16px;
-        color: @text-blue;
-        font-weight: bold;
-      }
-
-      &.null {
-        background-color: unset;
-        cursor: unset;
-      }
-    }
-  }
-}
diff --git a/web/src/less/common/dropdown.less b/web/src/less/common/dropdown.less
index 02de7b3..a37d801 100644
--- a/web/src/less/common/dropdown.less
+++ b/web/src/less/common/dropdown.less
@@ -1,5 +1,3 @@
-@import "../mixin.less";
-
 .dropdown-wrapper {
   @apply relative flex flex-col justify-start items-start select-none;
 
diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less
index 43e558a..95d2144 100644
--- a/web/src/less/common/selector.less
+++ b/web/src/less/common/selector.less
@@ -1,5 +1,3 @@
-@import "../mixin.less";
-
 .selector-wrapper {
   @apply flex flex-col justify-start items-start relative h-8;
 
@@ -30,7 +28,6 @@
     min-width: calc(100% + 16px);
     max-height: 256px;
     box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
-    .hide-scroll-bar();
 
     > .item-container {
       @apply flex flex-col justify-start items-start w-full px-3 text-sm select-none leading-8 cursor-pointer rounded whitespace-nowrap hover:bg-gray-100;
diff --git a/web/src/less/header.module.less b/web/src/less/header.module.less
deleted file mode 100644
index 018b421..0000000
--- a/web/src/less/header.module.less
+++ /dev/null
@@ -1,3 +0,0 @@
-.header {
-  @apply w-full bg-amber-50;
-}
diff --git a/web/src/pages/Auth.tsx b/web/src/pages/Auth.tsx
index 023a884..aaabeb7 100644
--- a/web/src/pages/Auth.tsx
+++ b/web/src/pages/Auth.tsx
@@ -7,7 +7,6 @@ import useLoading from "../hooks/useLoading";
 import Icon from "../components/Icon";
 import Only from "../components/common/OnlyWhen";
 import toastHelper from "../components/Toast";
-import "../less/auth.less";
 
 const validateConfig: ValidatorConfig = {
   minLength: 4,
@@ -73,7 +72,42 @@ const Auth: React.FC = () => {
           replace: true,
         });
       } else {
-        toastHelper.error("Login failed");
+        toastHelper.error("Signin failed");
+      }
+    } catch (error: any) {
+      console.error(error);
+      toastHelper.error(error.response.data.message);
+    }
+    actionBtnLoadingState.setFinish();
+  };
+
+  const handleSignupBtnsClick = async () => {
+    if (actionBtnLoadingState.isLoading) {
+      return;
+    }
+
+    const emailValidResult = validate(email, validateConfig);
+    if (!emailValidResult.result) {
+      toastHelper.error("Email: " + emailValidResult.reason);
+      return;
+    }
+
+    const passwordValidResult = validate(password, validateConfig);
+    if (!passwordValidResult.result) {
+      toastHelper.error("Password: " + passwordValidResult.reason);
+      return;
+    }
+
+    try {
+      actionBtnLoadingState.setLoading();
+      await api.signup(email, password);
+      const user = await userService.doSignIn();
+      if (user) {
+        navigate("/", {
+          replace: true,
+        });
+      } else {
+        toastHelper.error("Signup failed");
       }
     } catch (error: any) {
       console.error(error);
@@ -83,33 +117,50 @@ const Auth: React.FC = () => {
   };
 
   return (
-    <div className="page-wrapper auth">
-      <div className="page-container">
-        <div className="auth-form-wrapper">
-          <div className="page-header-container">
-            <div className="title-container">
-              <img className="logo-img" src="/logo-full.webp" alt="" />
-            </div>
-            <p className="slogan-text">Corgi</p>
-          </div>
-          <div className={`page-content-container ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}>
-            <div className="form-item-container input-form-container">
-              <span className={`normal-text ${email ? "not-null" : ""}`}>Email</span>
-              <input type="email" value={email} onChange={handleEmailInputChanged} />
-            </div>
-            <div className="form-item-container input-form-container">
-              <span className={`normal-text ${password ? "not-null" : ""}`}>Password</span>
-              <input type="password" value={password} onChange={handlePasswordInputChanged} />
+    <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="text-3xl font-medium font-mono flex flex-row justify-start items-center">
+              Corgi
+              <Only when={actionBtnLoadingState.isLoading}>
+                <Icon.Loader className="ml-2 w-5 h-auto animate-spin" />
+              </Only>
             </div>
           </div>
-          <div className="action-btns-container">
+          <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}
+              />
+            </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}
+              />
+            </div>
+          </div>
+          <div className="w-full flex flex-row justify-end items-center mt-4">
             <button
-              className={`btn signin-btn ${actionBtnLoadingState.isLoading ? "requesting" : ""}`}
+              className={`mr-4 text-gray-600 hover:text-black ${actionBtnLoadingState.isLoading ? "opacity-80 cursor-wait" : ""}`}
+              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()}
             >
-              <Only when={actionBtnLoadingState.isLoading}>
-                <Icon.Loader className="img-icon" />
-              </Only>
               Sign in
             </button>
           </div>
diff --git a/web/src/pages/Home.tsx b/web/src/pages/Home.tsx
index 9b9d1b4..a812d43 100644
--- a/web/src/pages/Home.tsx
+++ b/web/src/pages/Home.tsx
@@ -25,7 +25,7 @@ const Home: React.FC = () => {
           <p className="font-mono mb-2 text-gray-400">Workspace List</p>
           <WorkspaceListView workspaceList={workspaceList} />
           <div
-            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg mt-4 cursor-pointer"
+            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg cursor-pointer"
             onClick={() => showCreateWorkspaceDialog()}
           >
             <Icon.Plus className="w-5 h-auto mr-1" /> Create Workspace
diff --git a/web/src/pages/WorkspaceDetail.tsx b/web/src/pages/WorkspaceDetail.tsx
index f1f59ea..a0be532 100644
--- a/web/src/pages/WorkspaceDetail.tsx
+++ b/web/src/pages/WorkspaceDetail.tsx
@@ -48,16 +48,19 @@ const WorkspaceDetail: React.FC = () => {
       <Header />
       {loadingState.isLoading ? null : (
         <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
-          <div
-            className="flex flex-row justify-start items-center mb-4 text-gray-600 border rounded px-2 py-1 cursor-pointer"
-            onClick={() => handleBackToHome()}
-          >
-            <Icon.ChevronLeft className="w-5 h-auto mr-1" /> Back to Home
+          <div className="w-full flex flex-row justify-start items-center mb-4">
+            <div
+              className="flex flex-row justify-start items-center text-gray-600 border rounded-md px-2 py-1 cursor-pointer"
+              onClick={() => handleBackToHome()}
+            >
+              <Icon.ChevronLeft className="w-5 h-auto" /> Back to Home
+            </div>
+            <span className="ml-4 font-mono text-gray-600">Workspace: {state?.workspace.name}</span>
           </div>
-          <p className="font-mono mb-2 text-gray-600">Workspace: {state?.workspace.name}</p>
-          <ShortcutListView shortcutList={shortcutList} />
+          <p className="font-mono mb-2 text-gray-400">Shortcut List</p>
+          <ShortcutListView workspaceId={state.workspace.id} shortcutList={shortcutList} />
           <div
-            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg mt-4 cursor-pointer"
+            className="flex flex-row justify-start items-center border px-3 py-3 rounded-lg cursor-pointer"
             onClick={() => showCreateShortcutDialog(state.workspace.id)}
           >
             <Icon.Plus className="w-5 h-auto mr-1" /> Create Shortcut