Merge branch 'New-Article-Page' into feat/Author-Sidebar

thematters · Jan 9, 2024 · 90ea777 · 90ea777
2 parents 8f515ac + 0dab374
commit 90ea777
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 33 deletions.
diff --git 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
@@ -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
@@ -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);
@@ -291,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/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}

diff --git 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/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 {

diff --git 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}

diff --git 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...')