chore: update copy button style

web/src/less/memo-detail.less

@@ -8,7 +8,7 @@
     @apply relative w-full min-h-screen mx-auto flex flex-col justify-start items-center pb-8;
 
     > .page-header {
-      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 sm:pr-6 pt-6 mb-2;
+      @apply sticky top-0 z-10 max-w-2xl w-full min-h-full flex flex-row justify-between items-center px-4 pt-6 mb-2;
       background-color: #f6f5f4;
 
       > .title-container {
@@ -35,55 +35,45 @@
     }
 
     > .memos-wrapper {
-      @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4 sm:pr-6;
+      @apply relative flex-grow max-w-2xl w-full min-h-full flex flex-col justify-start items-start px-4;
 
       > .memo-container {
-        @apply flex flex-col justify-start items-start w-full p-4 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
+        @apply flex flex-col justify-start items-start w-full p-4 pt-3 mt-2 bg-white rounded-lg border border-white hover:border-gray-200;
 
         > .memo-header {
-          @apply mb-2 w-full flex flex-row justify-between items-center text-sm font-mono text-gray-400;
+          @apply mb-2 w-full flex flex-row justify-between items-center;
 
           > .status-container {
-            @apply flex flex-row justify-start items-center;
+            @apply flex flex-row justify-start items-center text-sm font-mono text-gray-400;
 
             > .split-text {
               @apply mx-2;
             }
-  
+
             > .name-text {
               @apply hover:text-green-600 hover:underline;
             }
-  
+
             > .visibility-selector {
+              @apply ml-2;
+
               > .status-text {
                 @apply flex flex-row justify-start items-center leading-5 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;
                 }
               }
-  
+
               .action-button {
                 @apply px-2 leading-7 w-full rounded text-gray-600 hover:bg-gray-100;
               }
             }
           }
-
-          .btns-container {
-            .flex(row, flex-start, center);
-
-            > .btn {
-              @apply rounded;
-            }
-
-            > .copy-btn {
-              @apply hover:bg-gray-100;
-            }
-          }
         }
 
         > .memo-content {

web/src/pages/MemoDetail.tsx

@@ -132,11 +132,20 @@ const MemoDetail = () => {
                     </>
                   )}
                 </div>
-                <div className="btns-container">
-                  <button className="btn copy-btn" onClick={handleCopyContent}>
-                    <Icon.Clipboard className="icon-img" />
-                  </button>
-                </div>
+                <Dropdown
+                  trigger={<Icon.MoreHorizontal className="ml-2 w-4 h-auto cursor-pointer text-gray-500" />}
+                  actionsClassName="!w-32"
+                  actions={
+                    <>
+                      <button
+                        className="w-full flex flex-row justify-start items-center px-3 whitespace-nowrap text-sm text-left leading-8 cursor-pointer rounded hover:bg-gray-100"
+                        onClick={handleCopyContent}
+                      >
+                        <Icon.Clipboard className="w-4 h-auto mr-2" /> {t("memo.copy")}
+                      </button>
+                    </>
+                  }
+                />
               </div>
               <MemoContent className="memo-content" content={state.memo.content} onMemoContentClick={() => undefined} />
               <MemoResources memo={state.memo} />