From 18fc93789b2361dedbd94081f519513d28ba8930 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Tue, 17 May 2022 18:25:36 +0800
Subject: [PATCH] chore: update button style

---
 web/src/components/CreateShortcutDialog.tsx   |  4 +-
 web/src/less/common/selector.less             | 32 ++--------
 web/src/less/create-shortcut-dialog.less      | 62 +++----------------
 web/src/less/dialog.less                      |  2 +-
 web/src/less/editor.less                      | 57 +++--------------
 web/src/less/memo-editor.less                 |  4 +-
 web/src/less/search-bar.less                  | 13 +---
 web/src/less/settings/my-account-section.less |  5 +-
 web/src/less/shortcut-list.less               |  2 +-
 9 files changed, 35 insertions(+), 146 deletions(-)

diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index 7fe606a6..a1156097 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -89,7 +89,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
     <>
       <div className="dialog-header-container">
         <p className="title-text">
-          <span className="icon-text">🎯</span>
+          <span className="icon-text">🚀</span>
           {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
         </p>
         <button className="btn close-btn" onClick={destroy}>
@@ -99,7 +99,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
       <div className="dialog-content-container">
         <div className="form-item-container input-form-container">
           <span className="normal-text">Title</span>
-          <input className="title-input" type="text" value={title} onChange={handleTitleInputChange} />
+          <input className="title-input" type="text" placeholder="shortcut title" value={title} onChange={handleTitleInputChange} />
         </div>
         <div className="form-item-container filter-form-container">
           <span className="normal-text">Filters</span>
diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less
index b24d4bbe..bb763d4f 100644
--- a/web/src/less/common/selector.less
+++ b/web/src/less/common/selector.less
@@ -2,8 +2,7 @@
 
 .selector-wrapper {
   .flex(column, flex-start, flex-start);
-  position: relative;
-  height: 28px;
+  @apply relative h-7;
 
   > .current-value-container {
     .flex(row, space-between, center);
@@ -11,48 +10,29 @@
 
     &:hover,
     &.active {
-      background-color: @bg-whitegray;
+      @apply bg-gray-100;
     }
 
     > .value-text {
-      margin-right: 0px;
-      font-size: 13px;
-      line-height: 32px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      @apply text-sm mr-0 truncate;
       width: calc(100% - 20px);
     }
 
     > .arrow-text {
       .flex(row, center, center);
-      width: 16px;
-      flex-shrink: 0;
+      @apply w-4 shrink-0;
 
       > .icon-img {
-        width: 16px;
-        height: auto;
-        opacity: 0.6;
-        transform: rotate(90deg);
+        @apply w-4 h-auto opacity-80 rotate-90;
       }
     }
   }
 
   > .items-wrapper {
     .flex(column, flex-start, flex-start);
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: auto;
+    @apply absolute top-full left-0 w-auto p-1 mt-1 -ml-2 bg-white rounded-md overflow-y-auto;
     min-width: calc(100% + 16px);
     max-height: 256px;
-    padding: 4px;
-    overflow-y: auto;
-    margin-top: 2px;
-    margin-left: -8px;
-    z-index: 1;
-    background-color: white;
-    border-radius: 8px;
     box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
     .hide-scroll-bar();
 
diff --git a/web/src/less/create-shortcut-dialog.less b/web/src/less/create-shortcut-dialog.less
index f1275b59..e496c195 100644
--- a/web/src/less/create-shortcut-dialog.less
+++ b/web/src/less/create-shortcut-dialog.less
@@ -17,7 +17,7 @@
         }
 
         > .title-input {
-          @apply w-full px-2 text-base leading-8 rounded border resize-none;
+          @apply w-full py-1 px-2 h-9 text-sm rounded border shadow-inner;
         }
 
         > .filters-wrapper {
@@ -25,7 +25,7 @@
           @apply w-full;
 
           > .create-filter-btn {
-            @apply text-sm leading-8 cursor-pointer text-green-500 hover:text-green-600;
+            @apply text-sm py-1 px-2 rounded shadow flex flex-row justify-start items-center border cursor-pointer text-blue-500 hover:opacity-80;
           }
         }
       }
@@ -39,32 +39,17 @@
         .flex(row, flex-start, center);
 
         > .tip-text {
-          font-size: 13px;
-          color: gray;
-          margin-right: 8px;
+          @apply text-sm text-gray-400 mr-2;
         }
 
         > .btn {
-          padding: 6px 16px;
-          font-size: 13px;
-          border-radius: 4px;
-
-          &:hover {
-            opacity: 0.8;
-          }
-
-          &.disabled {
-            color: lightgray;
-            cursor: not-allowed;
-          }
+          @apply text-base px-4 py-1 leading-7 rounded shadow hover:opacity-80;
 
           &.save-btn {
-            background-color: @text-green;
-            color: white;
+            @apply bg-green-600 text-white;
 
             &.requesting {
-              cursor: wait;
-              opacity: 0.8;
+              @apply cursor-wait opacity-80;
             }
           }
         }
@@ -75,19 +60,10 @@
 
 .memo-filter-input-wrapper {
   .flex(row, flex-start, center);
-  width: 100%;
-  margin-top: 8px;
-  flex-shrink: 0;
-
-  &:first-of-type {
-    margin-top: 0;
-  }
+  @apply w-full mb-3 shrink-0;
 
   > .selector-wrapper {
-    margin-right: 4px;
-    height: 34px;
-    flex-grow: 0;
-    flex-shrink: 0;
+    @apply mr-1 h-9 grow-0 shrink-0;
 
     &.relation-selector {
       @apply w-16;
@@ -109,28 +85,10 @@
 
   > input.value-inputer {
     max-width: calc(100% - 152px);
-    height: 34px;
-    padding: 0 8px;
-    flex-shrink: 0;
-    flex-grow: 1;
-    margin-right: 4px;
-    border-radius: 4px;
-    border: 1px solid @bg-gray;
-    background-color: transparent;
-
-    &:hover {
-      background-color: @bg-whitegray;
-    }
+    @apply h-9 px-2 shrink-0 grow mr-1 text-sm rounded border bg-transparent hover:bg-gray-50;
   }
 
   > .remove-btn {
-    width: 16px;
-    height: auto;
-    cursor: pointer;
-    opacity: 0.8;
-
-    &:hover {
-      opacity: 0.6;
-    }
+    @apply w-4 h-auto cursor-pointer opacity-80 hover:opacity-60;
   }
 }
diff --git a/web/src/less/dialog.less b/web/src/less/dialog.less
index 07634827..a7aac121 100644
--- a/web/src/less/dialog.less
+++ b/web/src/less/dialog.less
@@ -29,7 +29,7 @@
 
       .btn {
         .flex(column, center, center);
-        @apply w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
+        @apply w-6 h-6 rounded hover:bg-gray-100 hover:shadow;
 
         > .icon-img {
           @apply w-5 h-5;
diff --git a/web/src/less/editor.less b/web/src/less/editor.less
index 576aee2b..a81b2446 100644
--- a/web/src/less/editor.less
+++ b/web/src/less/editor.less
@@ -5,18 +5,11 @@
   @apply relative w-full h-auto bg-white;
 
   > .common-editor-inputer {
-    @apply w-full h-full mt-1 mb-1;
+    @apply w-full h-full mt-1 mb-1 text-base resize-none overflow-x-hidden overflow-y-auto bg-transparent whitespace-pre-wrap;
     min-height: 40px;
     max-height: 300px;
     .pretty-scroll-bar(2px, 0);
-    font-size: 15px;
-    line-height: 24px;
-    resize: none;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    background-color: transparent;
     z-index: 1;
-    white-space: pre-wrap;
 
     &::placeholder {
       padding-left: 2px;
@@ -30,64 +23,32 @@
   }
 
   > .common-tools-wrapper {
-    .flex(row, space-between, center);
-    width: 100%;
+    @apply w-full flex flex-row justify-between items-center;
 
     > .common-tools-container {
-      .flex(row, flex-start, center);
+      @apply flex flex-row justify-start items-center;
 
       > .action-btn {
-        width: 18px;
-        height: auto;
-        margin-right: 8px;
-        user-select: none;
-        cursor: pointer;
-        opacity: 0.5;
-
-        &:hover {
-          opacity: 0.8;
-        }
+        @apply p-1 w-7 h-auto mr-1 select-none rounded cursor-pointer opacity-60 hover:opacity-80 hover:bg-gray-300 hover:shadow;
       }
     }
 
     > .btns-container {
-      .flex(row, flex-end, center);
-      flex-grow: 0;
-      flex-shrink: 0;
+      @apply grow-0 shrink-0 flex flex-row justify-end items-center;
 
       > .action-btn {
-        border: none;
-        user-select: none;
-        cursor: pointer;
-        padding: 6px 12px;
-        border-radius: 6px;
-        font-size: 13px;
-        line-height: 32px;
-
-        &:hover {
-          opacity: 0.8;
-        }
+        @apply border-none select-none cursor-pointer py-1 px-3 rounded text-sm hover:opacity-80;
       }
 
       > .cancel-btn {
-        color: gray;
-        background-color: transparent;
-        margin-right: 8px;
+        @apply text-gray-500 bg-transparent mr-2;
       }
 
       > .confirm-btn {
-        cursor: pointer;
-        padding: 0 12px;
-        background-color: @text-green;
-        color: white;
-
-        &:disabled {
-          cursor: not-allowed;
-          opacity: 0.6;
-        }
+        @apply shadow cursor-pointer px-3 py-0 leading-8 bg-green-600 text-white text-sm hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-60;
 
         > .icon-text {
-          margin-left: 4px;
+          @apply text-base ml-1;
         }
       }
     }
diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
index af800c16..6d6c7e2c 100644
--- a/web/src/less/memo-editor.less
+++ b/web/src/less/memo-editor.less
@@ -8,9 +8,7 @@
   }
 
   > .tip-text {
-    font-size: 12px;
-    line-height: 20px;
-    color: @text-lightgray;
+    @apply text-xs leading-5 text-gray-400;
   }
 
   > .memo-editor {
diff --git a/web/src/less/search-bar.less b/web/src/less/search-bar.less
index da03afbb..3847e0aa 100644
--- a/web/src/less/search-bar.less
+++ b/web/src/less/search-bar.less
@@ -5,21 +5,14 @@
 
   > .search-bar-inputer {
     .flex(row, flex-start, center);
-    background-color: @bg-lightgray;
-    width: 100%;
-    padding: 8px 16px;
-    border-radius: 8px;
+    @apply w-full py-2 px-4 rounded-lg flex flex-row justify-start items-center bg-gray-200;
 
     > .icon-img {
-      margin-right: 8px;
-      width: 14px;
-      height: auto;
-      opacity: 0.6;
+      @apply mr-2 w-4 h-auto opacity-80;
     }
 
     > .text-input {
-      width: 100%;
-      font-size: 15px;
+      @apply grow text-sm;
     }
 
     &:hover {
diff --git a/web/src/less/settings/my-account-section.less b/web/src/less/settings/my-account-section.less
index 56af4d33..f6b63233 100644
--- a/web/src/less/settings/my-account-section.less
+++ b/web/src/less/settings/my-account-section.less
@@ -14,14 +14,13 @@
       }
 
       > .btns-container {
-        .flex(row, flex-start, center);
-        @apply ml-2 shrink-0;
+        @apply ml-2 shrink-0 flex flex-row justify-start items-center;
 
         > .btn {
           @apply text-sm shadow px-4 py-1 leading-6 rounded border hover:opacity-80 bg-gray-50;
 
           &.cancel-btn {
-            @apply shadow-none bg-transparent;
+            @apply shadow-none border-none bg-transparent;
           }
 
           &.confirm-btn {
diff --git a/web/src/less/shortcut-list.less b/web/src/less/shortcut-list.less
index 6777b2e2..79cae72c 100644
--- a/web/src/less/shortcut-list.less
+++ b/web/src/less/shortcut-list.less
@@ -15,7 +15,7 @@
 
     > .btn {
       .flex(column, center, center);
-      @apply w-5 h-5 bg-gray-200 rounded ml-2 hover:opacity-80;
+      @apply w-5 h-5 bg-gray-200 rounded ml-2 shadow hover:opacity-80;
 
       > img {
         @apply w-4 h-4 opacity-80;