From f9cc3af8eb0eed8996df4f3e4226d2e469578f9e Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Mon, 8 Jan 2024 15:52:16 +0800
Subject: [PATCH 1/5] fix(ArticleDetail): fix button spacing

---
 .../ArticleDetail/AppreciationButton/AppreciateButton.tsx   | 2 +-
 src/views/ArticleDetail/Toolbar/DonationButton/index.tsx    | 6 +++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/views/ArticleDetail/AppreciationButton/AppreciateButton.tsx b/src/views/ArticleDetail/AppreciationButton/AppreciateButton.tsx
index 493c91852c..8d87bd96dc 100644
--- a/src/views/ArticleDetail/AppreciationButton/AppreciateButton.tsx
+++ b/src/views/ArticleDetail/AppreciationButton/AppreciateButton.tsx
@@ -76,7 +76,7 @@ const AppreciateButton: React.FC<AppreciateButtonProps> = ({
       >
         <TextIcon
           weight={textWeight}
-          spacing={textIconSpacing}
+          spacing={total > 0 || showText ? textIconSpacing : 0}
           size="sm"
           icon={
             <span
diff --git a/src/views/ArticleDetail/Toolbar/DonationButton/index.tsx b/src/views/ArticleDetail/Toolbar/DonationButton/index.tsx
index 82c85cb04f..8e6dba00e8 100644
--- a/src/views/ArticleDetail/Toolbar/DonationButton/index.tsx
+++ b/src/views/ArticleDetail/Toolbar/DonationButton/index.tsx
@@ -114,7 +114,11 @@ const DonationButton = ({
           <TextIcon
             icon={<IconMoney20 size={iconSize} />}
             weight={textWeight}
-            spacing={textIconSpacing}
+            spacing={
+              showText || article.donationsToolbar.totalCount > 0
+                ? textIconSpacing
+                : 0
+            }
             size="sm"
           >
             {!showText && article.donationsToolbar.totalCount > 0

From 257ad8e5d591c44f503aef9e4daccd65f23a04bc Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:06:54 +0800
Subject: [PATCH 2/5] fix(ArticleDetail): fix comment button spacing

---
 src/common/styles/variables/spacing.css       |  1 -
 src/components/Button/index.tsx               |  1 -
 src/components/Button/styles.module.css       | 24 -------------------
 .../Toolbar/FixedToolbar/index.tsx            |  2 +-
 4 files changed, 1 insertion(+), 27 deletions(-)

diff --git a/src/common/styles/variables/spacing.css b/src/common/styles/variables/spacing.css
index 99155ee754..7372ef9985 100644
--- a/src/common/styles/variables/spacing.css
+++ b/src/common/styles/variables/spacing.css
@@ -6,7 +6,6 @@
   --spacing-base-xx-tight: 0.375rem; /* 6px */
   --spacing-x-tight: 0.5rem; /* 8px */
   --spacing-base-tight: 0.625rem; /* 10px */
-  --spacing-tighter: 0.6875rem; /* 11px */
   --spacing-tight: 0.75rem; /* 12px */
   --spacing-x-base: 0.875rem; /* 14px */
   --spacing-base: 1rem; /* 16px */
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 3de66b1a19..def37c0f96 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -51,7 +51,6 @@ export type ButtonSpacingX =
   | 'xxtight'
   | 'xtight'
   | 'baseTight'
-  | 'tighter'
   | 'tight'
   | 'base'
   | 'loose'
diff --git a/src/components/Button/styles.module.css b/src/components/Button/styles.module.css
index 47a739c09b..45008080b9 100644
--- a/src/components/Button/styles.module.css
+++ b/src/components/Button/styles.module.css
@@ -170,18 +170,6 @@ span.container {
   }
 }
 
-.spacingYTighter {
-  &:not(.isTransparent) {
-    padding-top: var(--spacing-tighter);
-    padding-bottom: var(--spacing-tighter);
-  }
-
-  & .hotarea {
-    margin-top: calc(var(--spacing-tighter) * -1);
-    margin-bottom: calc(var(--spacing-tighter) * -1);
-  }
-}
-
 .spacingYTight {
   &:not(.isTransparent) {
     padding-top: var(--spacing-tight);
@@ -230,18 +218,6 @@ span.container {
   }
 }
 
-.spacingXTighter {
-  &:not(.isTransparent) {
-    padding-right: var(--spacing-tighter);
-    padding-left: var(--spacing-tighter);
-  }
-
-  & .hotarea {
-    margin-right: calc(var(--spacing-tighter) * -1);
-    margin-left: calc(var(--spacing-tighter) * -1);
-  }
-}
-
 .spacingXTight {
   &:not(.isTransparent) {
     padding-right: var(--spacing-tight);
diff --git a/src/views/ArticleDetail/Toolbar/FixedToolbar/index.tsx b/src/views/ArticleDetail/Toolbar/FixedToolbar/index.tsx
index c6ad5a3b7e..7eead0c561 100644
--- a/src/views/ArticleDetail/Toolbar/FixedToolbar/index.tsx
+++ b/src/views/ArticleDetail/Toolbar/FixedToolbar/index.tsx
@@ -109,7 +109,7 @@ const FixedToolbar = ({
             bgColor="greyLighter"
             borderRadius="0.5rem"
             textColor="greyDarker"
-            spacing={['tighter', 'tighter']}
+            spacing={['baseTight', 'baseTight']}
             onClick={() => {
               // TODO: open comment drawer
               console.log('comment...')

From 4fbd1c2b2d0363f3e3a8168ce512378c906ffd93 Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Mon, 8 Jan 2024 16:23:02 +0800
Subject: [PATCH 3/5] fix(ArticleDetail): revert <TurnStile />

---
 src/views/ArticleDetail/AppreciationButton/index.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/views/ArticleDetail/AppreciationButton/index.tsx b/src/views/ArticleDetail/AppreciationButton/index.tsx
index 8bd89fe716..e4057eeecf 100644
--- a/src/views/ArticleDetail/AppreciationButton/index.tsx
+++ b/src/views/ArticleDetail/AppreciationButton/index.tsx
@@ -14,7 +14,7 @@ import {
   toast,
   Tooltip,
   Translate,
-  // Turnstile,
+  Turnstile,
   // TURNSTILE_DEFAULT_SCRIPT_ID,
   // TURNSTILE_SCRIPT_URL,
   TurnstileInstance,
@@ -264,14 +264,14 @@ const AppreciationButton = ({
     )
   }
 
-  // const siteKey = process.env
-  //   .NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY as string
+  const siteKey = process.env
+    .NEXT_PUBLIC_CLOUDFLARE_TURNSTILE_SITE_KEY as string
 
   // Appreciable
   if (canAppreciate && !disabled) {
     return (
       <section>
-        {/* <Turnstile
+        <Turnstile
           ref={turnstileRef}
           options={{
             action: 'appreciate',
@@ -285,7 +285,7 @@ const AppreciationButton = ({
             compat: 'recaptcha',
             appendTo: 'body',
           }}
-        /> */}
+        />
         <AppreciateButton
           onClick={appreciate}
           count={appreciatedCount > 0 ? appreciatedCount : undefined}

From 246ecf2fb3e20d68ac41bf815684178f2a77d54a Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Mon, 8 Jan 2024 17:32:17 +0800
Subject: [PATCH 4/5] fix(ArticleDetail): fix background color

---
 src/components/Button/styles.module.css                 | 6 ++++++
 src/views/ArticleDetail/SupportWidget/styles.module.css | 2 ++
 2 files changed, 8 insertions(+)

diff --git a/src/components/Button/styles.module.css b/src/components/Button/styles.module.css
index 45008080b9..4ec9c50d16 100644
--- a/src/components/Button/styles.module.css
+++ b/src/components/Button/styles.module.css
@@ -267,6 +267,12 @@ span.container {
 }
 
 /* Background */
+.bgWhite {
+  & .hotarea {
+    background: var(--color-white);
+  }
+}
+
 .bgGreyDarkest {
   & .hotarea {
     background: var(--color-grey-darkest);
diff --git a/src/views/ArticleDetail/SupportWidget/styles.module.css b/src/views/ArticleDetail/SupportWidget/styles.module.css
index e038ed6b02..0a68af8acf 100644
--- a/src/views/ArticleDetail/SupportWidget/styles.module.css
+++ b/src/views/ArticleDetail/SupportWidget/styles.module.css
@@ -26,6 +26,8 @@
 
   & .donationButton {
     margin-top: var(--spacing-loose);
+    background: var(--color-white);
+    border-radius: 5rem;
   }
 
   & .donators {

From dba0601c2b397986a2f6ba1dc03c1e90b00a0217 Mon Sep 17 00:00:00 2001
From: bluecloud <96812901+pitb2022@users.noreply.github.com>
Date: Mon, 8 Jan 2024 17:41:12 +0800
Subject: [PATCH 5/5] fix(ArticleDetail): add todo

---
 .../ArticleDetail/MetaInfo/FingerprintButton/index.tsx    | 8 +++++++-
 src/views/ArticleDetail/Toolbar/DesktopToolbar/index.tsx  | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/views/ArticleDetail/MetaInfo/FingerprintButton/index.tsx b/src/views/ArticleDetail/MetaInfo/FingerprintButton/index.tsx
index 006ae8933f..198b5dbe7c 100644
--- a/src/views/ArticleDetail/MetaInfo/FingerprintButton/index.tsx
+++ b/src/views/ArticleDetail/MetaInfo/FingerprintButton/index.tsx
@@ -9,7 +9,13 @@ interface FingerprintButtonProps {
 
 const FingerprintButton = ({ article }: FingerprintButtonProps) => {
   return (
-    <Button textColor="black" textActiveColor="greyDarker">
+    <Button
+      textColor="black"
+      textActiveColor="greyDarker"
+      onClick={() => {
+        // TODO: redirect to IPFS page
+      }}
+    >
       <FormattedMessage defaultMessage="IPFS" id="tio9Gt" />
     </Button>
   )
diff --git a/src/views/ArticleDetail/Toolbar/DesktopToolbar/index.tsx b/src/views/ArticleDetail/Toolbar/DesktopToolbar/index.tsx
index 90b5f27936..78ac69a2c5 100644
--- a/src/views/ArticleDetail/Toolbar/DesktopToolbar/index.tsx
+++ b/src/views/ArticleDetail/Toolbar/DesktopToolbar/index.tsx
@@ -113,6 +113,7 @@ const DesktopToolbar = ({
         </ReCaptchaProvider>
 
         <section className={styles.commentBar}>
+          {/* TODO: open comment drawer */}
           <CommentButton
             article={article}
             disabled={!article.canComment}