From 0fea2a86da7b991c986e891d8db181ba424a55c3 Mon Sep 17 00:00:00 2001
From: email <imrealleonardo@gmail.com>
Date: Thu, 24 Mar 2022 21:39:58 +0800
Subject: [PATCH] chore: update styles

---
 web/src/components/DeletedMemo.tsx      | 19 ++++--------
 web/src/components/MyAccountSection.tsx |  4 +--
 web/src/less/memo.less                  | 41 ++++++++-----------------
 web/src/less/my-account-section.less    | 13 ++++----
 web/src/less/setting-dialog.less        |  4 +--
 web/src/less/shortcut-list.less         |  4 +--
 web/src/less/toast.less                 | 13 ++------
 web/tailwind.config.js                  |  1 +
 8 files changed, 34 insertions(+), 65 deletions(-)

diff --git a/web/src/components/DeletedMemo.tsx b/web/src/components/DeletedMemo.tsx
index 8dcc1c9e..a7cac670 100644
--- a/web/src/components/DeletedMemo.tsx
+++ b/web/src/components/DeletedMemo.tsx
@@ -53,23 +53,16 @@ const DeletedMemo: React.FC<Props> = (props: Props) => {
   };
 
   return (
-    <div className={`memo-wrapper ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
+    <div className={`memo-wrapper deleted-memo ${"memos-" + memo.id}`} onMouseLeave={handleMouseLeaveMemoWrapper}>
       <div className="memo-top-wrapper">
         <span className="time-text">Deleted at {memo.deletedAtStr}</span>
         <div className="btns-container">
-          <span className="btn more-action-btn">
-            <img className="icon-img" src="/icons/more.svg" />
+          <span className="btn restore-btn" onClick={handleRestoreMemoClick}>
+            Restore
+          </span>
+          <span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
+            {showConfirmDeleteBtn ? "Delete!" : "Delete"}
           </span>
-          <div className="more-action-btns-wrapper">
-            <div className="more-action-btns-container">
-              <span className="btn restore-btn" onClick={handleRestoreMemoClick}>
-                Restore
-              </span>
-              <span className={`btn delete-btn ${showConfirmDeleteBtn ? "final-confirm" : ""}`} onClick={handleDeleteMemoClick}>
-                {showConfirmDeleteBtn ? "Delete!" : "Delete"}
-              </span>
-            </div>
-          </div>
         </div>
       </div>
       <div className="memo-content-text" dangerouslySetInnerHTML={{ __html: formatMemoContent(memo.content) }}></div>
diff --git a/web/src/components/MyAccountSection.tsx b/web/src/components/MyAccountSection.tsx
index 7dfc74be..802747cb 100644
--- a/web/src/components/MyAccountSection.tsx
+++ b/web/src/components/MyAccountSection.tsx
@@ -82,11 +82,11 @@ const MyAccountSection: React.FC<Props> = () => {
     <>
       <div className="section-container account-section-container">
         <p className="title-text">Account Information</p>
-        <label className="form-label input-form-label">
+        <label className="form-label">
           <span className="normal-text">ID:</span>
           <span className="normal-text">{user.id}</span>
         </label>
-        <label className="form-label input-form-label">
+        <label className="form-label">
           <span className="normal-text">Created at:</span>
           <span className="normal-text">{utils.getDateString(user.createdAt)}</span>
         </label>
diff --git a/web/src/less/memo.less b/web/src/less/memo.less
index a0a919fd..52565d0b 100644
--- a/web/src/less/memo.less
+++ b/web/src/less/memo.less
@@ -3,29 +3,27 @@
 
 .memo-wrapper {
   .flex(column, flex-start, flex-start);
-  @apply w-full p-4 px-6 mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
+  @apply w-full p-4 px-6 mt-4 first:mt-2 bg-white rounded-lg border border-transparent hover:border-gray-200;
+
+  &.deleted-memo {
+    @apply border-gray-200;
+  }
 
   > .memo-top-wrapper {
     .flex(row, space-between, center);
-    width: 100%;
-    height: 24px;
-    margin-bottom: 4px;
+    @apply w-full h-6 mb-1;
 
     > .time-text {
-      @apply text-xs;
-      color: gray;
-      cursor: pointer;
+      @apply text-xs text-gray-400 cursor-pointer;
     }
 
     > .btns-container {
       .flex(row, flex-end, center);
-      position: relative;
-      flex-shrink: 0;
+      @apply relative flex-shrink-0;
 
       > .more-action-btns-wrapper {
         .flex(column, flex-start, center);
-        position: absolute;
-        flex-wrap: nowrap;
+        @apply absolute flex-nowrap;
         top: calc(100% - 8px);
         right: -16px;
         width: auto;
@@ -49,10 +47,7 @@
           z-index: 1;
 
           > .btn {
-            width: 100%;
-            padding: 8px 0;
-            padding-left: 24px;
-            border-radius: 4px;
+            @apply w-full py-2 px-3 rounded;
             height: unset;
             line-height: unset;
             justify-content: flex-start;
@@ -70,24 +65,14 @@
 
       .btn {
         .flex(row, center, center);
-        width: 100%;
-        height: 28px;
-        font-size: 13px;
-        border-radius: 4px;
-
-        &:hover {
-          background-color: @bg-whitegray;
-        }
+        @apply px-2 leading-6 text-sm rounded hover:bg-gray-100;
 
         &.more-action-btn {
-          width: 28px;
+          @apply w-8 -mr-2 opacity-60;
           cursor: unset;
-          margin-right: -6px;
-          opacity: 0.8;
 
           > .icon-img {
-            width: 16px;
-            height: 16px;
+            @apply w-4 h-auto;
           }
 
           &:hover {
diff --git a/web/src/less/my-account-section.less b/web/src/less/my-account-section.less
index 47d2aaf6..9abc9dfa 100644
--- a/web/src/less/my-account-section.less
+++ b/web/src/less/my-account-section.less
@@ -4,6 +4,10 @@
   > .form-label {
     min-height: 28px;
 
+    > .normal-text {
+      @apply first:mr-2;
+    }
+
     &.username-label {
       > input {
         flex-grow: 0;
@@ -92,19 +96,14 @@
 
   > .usage-guide-container {
     .flex(column, flex-start, flex-start);
-    margin-top: 8px;
+    @apply mt-2 w-full;
 
     > .title-text {
       line-height: 2;
     }
 
     > pre {
-      background-color: @bg-whitegray;
-      padding: 8px 12px;
-      border-radius: 4px;
-      line-height: 1.4;
-      word-break: break-all;
-      white-space: pre-wrap;
+      @apply w-full bg-gray-50 py-2 px-3 text-sm rounded whitespace-pre-wrap;
     }
   }
 }
diff --git a/web/src/less/setting-dialog.less b/web/src/less/setting-dialog.less
index b9db59a1..2ad44115 100644
--- a/web/src/less/setting-dialog.less
+++ b/web/src/less/setting-dialog.less
@@ -3,11 +3,11 @@
 
 .setting-dialog {
   > .dialog-container {
-    @apply w-3/5 max-w-full mb-8;
+    @apply w-168 max-w-full mb-8;
 
     > .dialog-content-container {
       .flex(column, flex-start, flex-start);
-      @apply w-full overflow-y-scroll;
+      @apply w-full overflow-y-scroll px-3;
       .hide-scroll-bar();
 
       > .section-container {
diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less
index ca0aa215..6d4fb125 100644
--- a/web/src/less/shortcut-list.less
+++ b/web/src/less/shortcut-list.less
@@ -27,10 +27,10 @@
 
   > .create-shortcut-btn-container {
     .flex(row, center, center);
-    @apply w-full mt-2 mb-3;
+    @apply w-full mt-4 mb-2;
 
     > .btn {
-      @apply flex py-1 px-2 rounded-lg text-xs border border-dashed border-blue-600;
+      @apply flex p-2 px-4 rounded-lg text-sm border border-dashed border-blue-600;
 
       &:hover {
         @apply bg-blue-600 text-white;
diff --git a/web/src/less/toast.less b/web/src/less/toast.less
index 5e2052cf..be7db2a3 100644
--- a/web/src/less/toast.less
+++ b/web/src/less/toast.less
@@ -8,7 +8,6 @@
     .flex(column, flex-start, flex-start);
     @apply relative left-full invisible text-base cursor-pointer shadow rounded bg-white mt-6 py-2 px-4;
     min-width: 6em;
-    min-height: 40px;
     transition: all 0.4s ease;
 
     &.showup {
@@ -22,17 +21,9 @@
 
     > .toast-container {
       > .content-text {
-        @apply text-base whitespace-pre-wrap;
-        max-width: 160px;
+        @apply text-sm whitespace-pre-wrap leading-6;
+        max-width: 240px;
       }
     }
-
-    &::before {
-      content: "";
-      @apply absolute top-3 -right-2;
-      border-left: 8px solid white;
-      border-top: 8px solid transparent;
-      border-bottom: 8px solid transparent;
-    }
   }
 }
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index bb97cd0d..3e9e9192 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -5,6 +5,7 @@ module.exports = {
     extend: {
       spacing: {
         128: "32rem",
+        168: "42rem",
       },
       zIndex: {
         100: "100",