chore: update search bar styles

web/src/components/Memo.tsx

@@ -189,7 +189,7 @@ const Memo: React.FC<Props> = (props: Props) => {
                   <span className="tip-text">{memo.pinned ? "Unpin" : "Pin"}</span>
                 </div>
                 <div className="btn" onClick={handleEditMemoClick}>
-                  <Icon.Edit className="icon-img" />
+                  <Icon.Edit3 className="icon-img" />
                   <span className="tip-text">Edit</span>
                 </div>
                 <div className="btn" onClick={handleGenMemoImageBtnClick}>

web/src/components/MemoCardDialog.tsx

@@ -129,7 +129,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
       <Only when={!userService.isVisitorMode()}>
         <div className="card-header-container">
           <div className="visibility-selector-container">
-            <Icon.Eye className="mr-2" />
+            <Icon.Eye className="icon-img" />
             <Selector
               className="visibility-selector"
               dataSource={visibilityList}
@@ -146,7 +146,7 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
             <Only when={!userService.isVisitorMode()}>
               <>
                 <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
-                  <Icon.Edit className="icon-img" />
+                  <Icon.Edit3 className="icon-img" />
                 </button>
                 <span className="split-line">/</span>
               </>

web/src/less/daily-review-dialog.less

@@ -4,7 +4,7 @@
   @apply p-0 sm:py-16;
 
   > .dialog-container {
-    @apply w-112 max-w-full grow sm:grow-0 bg-white p-0 rounded-none sm:rounded-lg;
+    @apply w-full sm:w-112 max-w-full grow sm:grow-0 bg-white p-0 rounded-none sm:rounded-lg;
 
     > .dialog-header-container {
       @apply relative flex flex-row justify-between items-center w-full p-6 pb-0 mb-0;

web/src/less/memo-card-dialog.less

@@ -12,6 +12,10 @@
       > .visibility-selector-container {
         @apply bg-white px-2 pl-3 py-1 rounded-lg flex flex-row justify-start items-center;
 
+        > .icon-img {
+          @apply mr-1 w-4 h-auto;
+        }
+
         > .visibility-selector {
           @apply w-32;
 
@@ -41,7 +45,7 @@
 
           > .btn {
             .flex(row, center, center);
-            @apply w-6 h-6 ml-2 rounded text-gray-600 hover:bg-white;
+            @apply w-6 h-6 p-1 ml-2 rounded text-gray-600 hover:bg-white;
           }
 
           > .split-line {

web/src/less/preview-image-dialog.less

@@ -2,6 +2,8 @@
 
 .preview-image-dialog {
   @apply p-0;
+  z-index: 101;
+  background-color: rgba(0, 0, 0, 0.6);
 
   > .dialog-container {
     @apply flex flex-col justify-center items-center relative w-full h-full p-0;

web/src/less/search-bar.less

@@ -3,6 +3,17 @@
 .search-bar-container {
   @apply relative w-auto;
 
+  &:hover,
+  &:active {
+    > .search-bar-inputer > .text-input {
+      @apply flex;
+    }
+
+    > .quickly-action-wrapper {
+      @apply flex;
+    }
+  }
+
   > .search-bar-inputer {
     @apply h-9 flex flex-row justify-start items-center w-full py-2 px-3 sm:px-4 rounded-full sm:rounded-lg bg-zinc-200;
 
@@ -13,83 +24,46 @@
     > .text-input {
       @apply hidden sm:flex ml-2 w-24 grow text-sm;
     }
-
-    &:hover,
-    &:active {
-      > .text-input {
-        @apply flex;
-      }
-
-      + .quickly-action-wrapper {
-        display: flex;
-      }
-    }
   }
 
   > .quickly-action-wrapper {
     @apply hidden absolute top-9 -right-2 p-2 w-80 z-10;
 
     > .quickly-action-container {
-      .flex(column, flex-start, flex-start);
+      @apply flex flex-col justify-start items-start w-full bg-white px-4 py-3 rounded-lg;
-      width: 100%;
-      background-color: white;
-      padding: 12px 16px;
-      border-radius: 8px;
       box-shadow: 0 0 8px 0 rgb(0 0 0 / 20%);
 
       > .title-text {
-        color: gray;
+        @apply text-gray-600 text-xs;
-        font-size: 12px;
       }
 
       > .types-container {
-        .flex(row, flex-start, flex-start);
+        @apply flex flex-row justify-start items-start w-full text-xs mt-2;
-        width: 100%;
-        font-size: 13px;
-        margin-top: 8px;
 
         > .section-text {
-          color: gray;
+          @apply text-gray-600 mr-1 shrink-0 leading-6;
-          margin-right: 4px;
-          flex-shrink: 0;
-          line-height: 26px;
         }
 
         > .values-container {
-          .flex(row, flex-start, flex-start);
+          @apply flex flex-row justify-start items-start flex-wrap select-none;
-          flex-wrap: wrap;
-          user-select: none;
 
           > div {
-            .flex(row, flex-start, center);
+            @apply flex flex-row justify-start items-center leading-6;
-            line-height: 26px;
 
             .type-item {
-              cursor: pointer;
+              @apply cursor-pointer px-1 rounded hover:bg-gray-100;
-              padding: 0 4px;
-              border-radius: 6px;
-
-              &:hover {
-                background-color: @bg-whitegray;
-              }
 
               &.selected {
-                background-color: @text-green;
+                @apply bg-green-600 text-white;
-                color: white;
               }
             }
 
             .split-text {
-              color: lightgray;
+              @apply text-gray-400 mx-1;
-              margin: 0 2px;
             }
           }
         }
       }
     }
-
-    &:hover {
-      display: flex;
-    }
   }
 }