From a323689ee6b479265d0f6b7b786af1c493e81dd9 Mon Sep 17 00:00:00 2001 From: steven Date: Wed, 5 Oct 2022 20:55:04 +0800 Subject: [PATCH] chore: update copy button style --- web/src/less/memo-detail.less | 34 ++++++++++++---------------------- web/src/pages/MemoDetail.tsx | 19 ++++++++++++++----- 2 files changed, 26 insertions(+), 27 deletions(-) diff --git a/web/src/less/memo-detail.less b/web/src/less/memo-detail.less index 513041a8..94e9f0c7 100644 --- a/web/src/less/memo-detail.less +++ b/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 { diff --git a/web/src/pages/MemoDetail.tsx b/web/src/pages/MemoDetail.tsx index 3daa036a..e921b632 100644 --- a/web/src/pages/MemoDetail.tsx +++ b/web/src/pages/MemoDetail.tsx @@ -132,11 +132,20 @@ const MemoDetail = () => { )} -
- -
+ } + actionsClassName="!w-32" + actions={ + <> + + + } + /> undefined} />