From 93ba2f4fab0cdb150ffa2561888f21ba30b276c7 Mon Sep 17 00:00:00 2001
From: boojack <imrealleonardo@gmail.com>
Date: Sun, 17 Jul 2022 10:29:12 +0800
Subject: [PATCH] chore: fix icon style

---
 web/src/components/AboutSiteDialog.tsx          |  2 +-
 web/src/components/ArchivedMemoDialog.tsx       |  2 +-
 web/src/components/ChangePasswordDialog.tsx     |  2 +-
 web/src/components/ConfirmResetOpenIdDialog.tsx |  2 +-
 web/src/components/CreateShortcutDialog.tsx     |  2 +-
 web/src/components/DailyReviewDialog.tsx        |  2 +-
 web/src/components/MemoCardDialog.tsx           |  4 ++--
 web/src/components/PreviewImageDialog.tsx       |  2 +-
 web/src/components/SettingDialog.tsx            |  2 +-
 web/src/components/ShareMemoImageDialog.tsx     |  2 +-
 web/src/components/Sidebar.tsx                  |  2 +-
 web/src/components/common/Selector.tsx          |  2 +-
 web/src/less/common/selector.less               |  2 +-
 web/src/less/create-shortcut-dialog.less        |  2 +-
 web/src/less/dialog.less                        |  4 ----
 web/src/less/memo-card-dialog.less              |  6 +-----
 web/src/less/setting-dialog.less                | 13 +++----------
 web/src/less/siderbar.less                      |  6 +-----
 18 files changed, 20 insertions(+), 39 deletions(-)

diff --git a/web/src/components/AboutSiteDialog.tsx b/web/src/components/AboutSiteDialog.tsx
index 0f9915e1..f43cd89e 100644
--- a/web/src/components/AboutSiteDialog.tsx
+++ b/web/src/components/AboutSiteDialog.tsx
@@ -37,7 +37,7 @@ const AboutSiteDialog: React.FC<Props> = ({ destroy }: Props) => {
           <span className="icon-text">🤠</span>About <b>Memos</b>
         </p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark"></i>
+          <i className="fa-solid fa-xmark fa-lg"></i>
         </button>
       </div>
       <div className="dialog-content-container">
diff --git a/web/src/components/ArchivedMemoDialog.tsx b/web/src/components/ArchivedMemoDialog.tsx
index 8b61fbb2..f3c3177e 100644
--- a/web/src/components/ArchivedMemoDialog.tsx
+++ b/web/src/components/ArchivedMemoDialog.tsx
@@ -37,7 +37,7 @@ const ArchivedMemoDialog: React.FC<Props> = (props: Props) => {
           Archived Memos
         </p>
         <button className="btn close-btn" onClick={destroy}>
-          <i className="fa-solid fa-xmark icon-img"></i>
+          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
         </button>
       </div>
       <div className="dialog-content-container">
diff --git a/web/src/components/ChangePasswordDialog.tsx b/web/src/components/ChangePasswordDialog.tsx
index 8bb2ee7b..6f42c75d 100644
--- a/web/src/components/ChangePasswordDialog.tsx
+++ b/web/src/components/ChangePasswordDialog.tsx
@@ -70,7 +70,7 @@ const ChangePasswordDialog: React.FC<Props> = ({ destroy }: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">Change Password</p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark"></i>
+          <i className="fa-solid fa-xmark fa-lg"></i>
         </button>
       </div>
       <div className="dialog-content-container">
diff --git a/web/src/components/ConfirmResetOpenIdDialog.tsx b/web/src/components/ConfirmResetOpenIdDialog.tsx
index 517da141..617ecf08 100644
--- a/web/src/components/ConfirmResetOpenIdDialog.tsx
+++ b/web/src/components/ConfirmResetOpenIdDialog.tsx
@@ -41,7 +41,7 @@ const ConfirmResetOpenIdDialog: React.FC<Props> = ({ destroy }: Props) => {
       <div className="dialog-header-container">
         <p className="title-text">Reset Open API</p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark"></i>
+          <i className="fa-solid fa-xmark fa-lg"></i>
         </button>
       </div>
       <div className="dialog-content-container">
diff --git a/web/src/components/CreateShortcutDialog.tsx b/web/src/components/CreateShortcutDialog.tsx
index b88fcc47..e2265c0b 100644
--- a/web/src/components/CreateShortcutDialog.tsx
+++ b/web/src/components/CreateShortcutDialog.tsx
@@ -100,7 +100,7 @@ const CreateShortcutDialog: React.FC<Props> = (props: Props) => {
           {shortcutId ? "Edit Shortcut" : "Create Shortcut"}
         </p>
         <button className="btn close-btn" onClick={destroy}>
-          <i className="fa-solid fa-xmark"></i>
+          <i className="fa-solid fa-xmark fa-lg"></i>
         </button>
       </div>
       <div className="dialog-content-container">
diff --git a/web/src/components/DailyReviewDialog.tsx b/web/src/components/DailyReviewDialog.tsx
index 92b636ee..73225b90 100644
--- a/web/src/components/DailyReviewDialog.tsx
+++ b/web/src/components/DailyReviewDialog.tsx
@@ -73,7 +73,7 @@ const DailyReviewDialog: React.FC<Props> = (props: Props) => {
             <i className="fa-solid fa-share-nodes icon-img"></i>
           </button>
           <button className="btn-text" onClick={() => props.destroy()}>
-            <i className="fa-solid fa-xmark icon-img"></i>
+            <i className="fa-solid fa-xmark fa-lg icon-img"></i>
           </button>
         </div>
         <DatePicker
diff --git a/web/src/components/MemoCardDialog.tsx b/web/src/components/MemoCardDialog.tsx
index ce738001..209b39d8 100644
--- a/web/src/components/MemoCardDialog.tsx
+++ b/web/src/components/MemoCardDialog.tsx
@@ -139,7 +139,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
                   <i className={`fa-solid fa-thumbtack icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
                 </button>
                 <button className="btn" onClick={handleVisibilityClick}>
-                  <i className={`fa-solid fa-eye icon-img ${memo.pinned ? "" : "opacity-20"}`}></i>
+                  <i className={`fa-solid fa-eye icon-img ${memo.visibility === "PUBLIC" ? "" : "opacity-20"}`}></i>
                 </button>
                 <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
                   <i className="fa-solid fa-pen-to-square icon-img"></i>
@@ -147,7 +147,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
               </>
             </Only>
             <button className="btn close-btn" onClick={props.destroy}>
-              <i className="fa-solid fa-xmark icon-img"></i>
+              <i className="fa-solid fa-xmark fa-lg icon-img"></i>
             </button>
           </div>
         </div>
diff --git a/web/src/components/PreviewImageDialog.tsx b/web/src/components/PreviewImageDialog.tsx
index f61f09b7..41a3ca0d 100644
--- a/web/src/components/PreviewImageDialog.tsx
+++ b/web/src/components/PreviewImageDialog.tsx
@@ -22,7 +22,7 @@ const PreviewImageDialog: React.FC<Props> = ({ destroy, imgUrl }: Props) => {
     <>
       <div className="btns-container">
         <button className="btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark icon-img"></i>
+          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
         </button>
         <button className="btn" onClick={handleDownloadBtnClick}>
           <i className="fa-solid fa-download icon-img"></i>
diff --git a/web/src/components/SettingDialog.tsx b/web/src/components/SettingDialog.tsx
index 6df44b27..b092583f 100644
--- a/web/src/components/SettingDialog.tsx
+++ b/web/src/components/SettingDialog.tsx
@@ -30,7 +30,7 @@ const SettingDialog: React.FC<Props> = (props: Props) => {
   return (
     <div className="dialog-content-container">
       <button className="btn close-btn" onClick={destroy}>
-        <i className="fa-solid fa-xmark icon-img"></i>
+        <i className="fa-solid fa-xmark fa-lg icon-img"></i>
       </button>
       <div className="section-selector-container">
         <span className="section-title">Basic</span>
diff --git a/web/src/components/ShareMemoImageDialog.tsx b/web/src/components/ShareMemoImageDialog.tsx
index d59824fd..8ae8d3f4 100644
--- a/web/src/components/ShareMemoImageDialog.tsx
+++ b/web/src/components/ShareMemoImageDialog.tsx
@@ -75,7 +75,7 @@ const ShareMemoImageDialog: React.FC<Props> = (props: Props) => {
           <span className="icon-text">🌄</span>Share Memo
         </p>
         <button className="btn close-btn" onClick={handleCloseBtnClick}>
-          <i className="fa-solid fa-xmark icon-img"></i>
+          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
         </button>
       </div>
       <div className="dialog-content-container">
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index b7bc3d48..a8155d86 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -27,7 +27,7 @@ const Sidebar: React.FC<Props> = () => {
     <aside className="sidebar-wrapper">
       <div className="close-container">
         <span className="action-btn" onClick={toggleSiderbar}>
-          <i className="fa-solid fa-xmark icon-img"></i>
+          <i className="fa-solid fa-xmark fa-lg icon-img"></i>
         </span>
       </div>
       <UserBanner />
diff --git a/web/src/components/common/Selector.tsx b/web/src/components/common/Selector.tsx
index c9071153..958202d8 100644
--- a/web/src/components/common/Selector.tsx
+++ b/web/src/components/common/Selector.tsx
@@ -64,7 +64,7 @@ const Selector: React.FC<Props> = (props: Props) => {
       <div className={`current-value-container ${showSelector ? "active" : ""}`} onClick={handleCurrentValueClick}>
         <span className="value-text">{currentItem.text}</span>
         <span className="arrow-text">
-          <i className="fa-solid fa-chevron-right icon-img"></i>
+          <i className="fa-solid fa-chevron-down fa-sm icon-img"></i>
         </span>
       </div>
 
diff --git a/web/src/less/common/selector.less b/web/src/less/common/selector.less
index bb763d4f..d2611625 100644
--- a/web/src/less/common/selector.less
+++ b/web/src/less/common/selector.less
@@ -23,7 +23,7 @@
       @apply w-4 shrink-0;
 
       > .icon-img {
-        @apply w-4 h-auto opacity-80 rotate-90;
+        @apply w-4 h-auto opacity-40;
       }
     }
   }
diff --git a/web/src/less/create-shortcut-dialog.less b/web/src/less/create-shortcut-dialog.less
index e496c195..280f2467 100644
--- a/web/src/less/create-shortcut-dialog.less
+++ b/web/src/less/create-shortcut-dialog.less
@@ -89,6 +89,6 @@
   }
 
   > .remove-btn {
-    @apply w-4 h-auto cursor-pointer opacity-80 hover:opacity-60;
+    @apply w-4 h-auto ml-1 cursor-pointer opacity-60 hover:opacity-80;
   }
 }
diff --git a/web/src/less/dialog.less b/web/src/less/dialog.less
index 246f0634..5b363d2d 100644
--- a/web/src/less/dialog.less
+++ b/web/src/less/dialog.less
@@ -30,10 +30,6 @@
       .btn {
         .flex(column, center, center);
         @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/memo-card-dialog.less b/web/src/less/memo-card-dialog.less
index 1dc95cd3..885f4349 100644
--- a/web/src/less/memo-card-dialog.less
+++ b/web/src/less/memo-card-dialog.less
@@ -27,11 +27,7 @@
 
           > .btn {
             .flex(row, center, center);
-            @apply w-6 h-6 ml-1 rounded hover:bg-white;
-
-            > .icon-img {
-              @apply w-5 h-5;
-            }
+            @apply w-6 h-6 ml-2 rounded hover:bg-white;
           }
         }
       }
diff --git a/web/src/less/setting-dialog.less b/web/src/less/setting-dialog.less
index 91262817..8fdc3ae7 100644
--- a/web/src/less/setting-dialog.less
+++ b/web/src/less/setting-dialog.less
@@ -7,17 +7,11 @@
     @apply w-180 max-w-full mb-8 p-0;
 
     > .dialog-content-container {
-      .flex(column, flex-start, flex-start);
-      @apply relative w-full overflow-y-scroll p-0 flex flex-col sm:flex-row justify-start items-start;
+      @apply flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0;
       .hide-scroll-bar();
 
       > .close-btn {
-        .flex(column, center, center);
-        @apply absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
-
-        > .icon-img {
-          @apply w-5 h-5;
-        }
+        @apply flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
       }
 
       > .section-selector-container {
@@ -49,8 +43,7 @@
         .hide-scroll-bar();
 
         > .section-container {
-          .flex(column, flex-start, flex-start);
-          @apply w-full my-2;
+          @apply flex flex-col justify-start items-start w-full my-2;
 
           > .title-text {
             @apply text-sm mb-3 font-mono text-gray-500;
diff --git a/web/src/less/siderbar.less b/web/src/less/siderbar.less
index 4c345baa..5ae7166b 100644
--- a/web/src/less/siderbar.less
+++ b/web/src/less/siderbar.less
@@ -8,11 +8,7 @@
     @apply w-full pr-6 my-2 flex sm:hidden flex-row justify-end items-center;
 
     > .action-btn {
-      @apply p-1 bg-gray-100 rounded shadow;
-
-      > .icon-img {
-        @apply w-4 h-auto;
-      }
+      @apply p-1 bg-gray-100 rounded shadow w-7 h-7 flex flex-row justify-center items-center;
     }
   }