chore: fix icon style

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">

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">

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">

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">

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">

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

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>

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>

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>

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">

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 />

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>
 

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;
       }
     }
   }

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;
   }
 }

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;
-        }
       }
     }
 

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;
+            @apply w-6 h-6 ml-2 rounded hover:bg-white;
-
-            > .icon-img {
-              @apply w-5 h-5;
-            }
           }
         }
       }

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 flex flex-col sm:flex-row justify-start items-start relative w-full overflow-y-scroll p-0;
-      @apply relative w-full overflow-y-scroll p-0 flex flex-col sm:flex-row justify-start items-start;
       .hide-scroll-bar();
 
       > .close-btn {
-        .flex(column, center, center);
+        @apply flex flex-col justify-center items-center absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
-        @apply absolute top-4 right-4 w-6 h-6 rounded hover:bg-gray-200 hover:shadow;
-
-        > .icon-img {
-          @apply w-5 h-5;
-        }
       }
 
       > .section-selector-container {
@@ -49,8 +43,7 @@
         .hide-scroll-bar();
 
         > .section-container {
-          .flex(column, flex-start, flex-start);
+          @apply flex flex-col justify-start items-start w-full my-2;
-          @apply w-full my-2;
 
           > .title-text {
             @apply text-sm mb-3 font-mono text-gray-500;

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;
+      @apply p-1 bg-gray-100 rounded shadow w-7 h-7 flex flex-row justify-center items-center;
-
-      > .icon-img {
-        @apply w-4 h-auto;
-      }
     }
   }