chore: update visibility selector style

web/src/components/Memo.tsx

@@ -172,11 +172,8 @@ const Memo: React.FC<Props> = (props: Props) => {
       <div className="memo-top-wrapper">
         <div className="status-text-container" onClick={handleShowMemoStoryDialog}>
           <span className="time-text">{createdAtStr}</span>
-          <Only when={memo.pinned}>
-            <span className="status-text">PINNED</span>
-          </Only>
           <Only when={memo.visibility !== "PRIVATE" && !isVisitorMode}>
-            <span className="status-text">{memo.visibility}</span>
+            <span className={`status-text ${memo.visibility.toLocaleLowerCase()}`}>{memo.visibility}</span>
           </Only>
         </div>
         <div className={`btns-container ${userService.isVisitorMode() ? "!hidden" : ""}`}>

web/src/components/MemoCardDialog.tsx

@@ -126,21 +126,27 @@ const MemoCardDialog: React.FC<Props> = (props: Props) => {
 
   return (
     <>
+      <Only when={!userService.isVisitorMode()}>
+        <div className="visibility-selector-container">
+          <i className="fa-solid fa-eye text-white mr-2"></i>
+          <Selector
+            className="w-32"
+            dataSource={visibilityList}
+            value={memo.visibility}
+            handleValueChanged={(value) => handleVisibilitySelectorChange(value as Visibility)}
+          />
+        </div>
+      </Only>
       <div className="memo-card-container">
         <div className="header-container">
           <p className="time-text">{utils.getDateTimeString(memo.createdTs)}</p>
           <div className="btns-container">
             <Only when={!userService.isVisitorMode()}>
               <>
-                <Selector
-                  className="w-24"
-                  dataSource={visibilityList}
-                  value={memo.visibility}
-                  handleValueChanged={(value) => handleVisibilitySelectorChange(value as Visibility)}
-                />
                 <button className="btn edit-btn" onClick={handleEditMemoBtnClick}>
                   <i className="fa-solid fa-pen-to-square icon-img"></i>
                 </button>
+                <span className="split-line">/</span>
               </>
             </Only>
             <button className="btn close-btn" onClick={props.destroy}>

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

@@ -6,16 +6,19 @@
   > .dialog-container {
     @apply w-full p-0 bg-transparent flex flex-col justify-start items-center;
 
+    > .visibility-selector-container {
+      @apply z-10 w-128 mb-2 flex flex-row justify-start items-center;
+    }
+
     > .memo-card-container {
-      .flex(column, flex-start, flex-start);
+      @apply flex flex-col justify-start items-start relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200;
-      @apply relative w-128 max-w-full py-3 px-6 mb-3 rounded-lg bg-yellow-200;
 
       > * {
         z-index: 1;
       }
 
       > .header-container {
-        @apply flex flex-row justify-between items-center w-full h-auto z-10 pb-0 my-0;
+        @apply flex flex-row justify-between items-center w-full h-auto pb-0 my-0;
 
         > .time-text {
           @apply text-sm text-gray-500 font-mono;
@@ -28,6 +31,10 @@
             .flex(row, center, center);
             @apply w-6 h-6 ml-2 rounded text-gray-600 hover:bg-white;
           }
+
+          > .split-line {
+            @apply font-mono text-gray-300 ml-2;
+          }
         }
       }
 

web/src/less/memo.less

@@ -24,7 +24,15 @@
       }
 
       > .status-text {
-        @apply text-xs cursor-pointer ml-2 rounded border border-green-600 px-1 text-green-600;
+        @apply text-xs cursor-pointer ml-2 rounded border px-1;
+
+        &.public {
+          @apply border-green-600 text-green-600;
+        }
+
+        &.protected {
+          @apply border-gray-400 text-gray-400;
+        }
       }
     }