fix(campaign): add spacing to the bottom of campaign detail page

src/components/ArticleComment/FooterActions/index.tsx

@@ -228,7 +228,7 @@ const BaseFooterActions = ({
       <section ref={formWrapperRef}>
         {showForm && (
           <>
-            <Spacer size="base" />
+            <Spacer size="sp16" />
             <ArticleCommentForm
               articleId={article?.id!}
               setEditor={setEditor}

src/components/Dialogs/RssFeedDialog/Content.tsx

@@ -90,7 +90,7 @@ const BaseRssFeedDialogContent: React.FC<RssFeedDialogContentProps> = ({
                     />
                   </p>
                 </section>
-                <Spacer size="loose" />
+                <Spacer size="sp24" />
               </>
             ) : null}
 
@@ -139,7 +139,7 @@ const BaseRssFeedDialogContent: React.FC<RssFeedDialogContentProps> = ({
                 </section>
               ) : (
                 <>
-                  <Spacer size="base" />
+                  <Spacer size="sp16" />
                   <section className={styles.warningInput}>
                     <TextIcon
                       icon={<Icon icon={IconInfo} size={24} />}
@@ -157,9 +157,9 @@ const BaseRssFeedDialogContent: React.FC<RssFeedDialogContentProps> = ({
               )}
             </section>
 
-            <Spacer size="base" />
+            <Spacer size="sp16" />
             <hr />
-            <Spacer size="base" />
+            <Spacer size="sp16" />
 
             {/* gateways */}
             <section className={styles.gateways}>

src/components/Dialogs/SetPasswordDialog/Content.tsx

@@ -150,7 +150,7 @@ const SetPasswordDialogContent: React.FC<FormProps> = ({ closeDialog }) => {
               description="src/components/Dialogs/SetPasswordDialog/Content.tsx"
             />
           </p>
-          <Spacer size="base" />
+          <Spacer size="sp16" />
         </Dialog.Content.Message>
         {InnerForm}
       </Dialog.Content>

src/components/Dialogs/TagEditorDialog/List/index.tsx

@@ -137,7 +137,7 @@ const TagEditorList = ({ id, closeDialog, toAddStep, toRemoveStep }: Props) => {
           ))}
         </List>
 
-        <Spacer size="base" />
+        <Spacer size="sp16" />
 
         <Dialog.Content>
           <Dialog.Content.Message smUpAlign="center">
@@ -176,7 +176,7 @@ const TagEditorList = ({ id, closeDialog, toAddStep, toRemoveStep }: Props) => {
           </Dialog.Content.Message>
         </Dialog.Content>
 
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Dialog.Content>
 
       {isAllowAdd && (

src/components/Editor/ToggleAccess/SupportSettingDialog/SupportPreview.tsx

@@ -33,7 +33,7 @@ const SupportPreview = ({
                   id="Myrqtn"
                 />
               </p>
-              <Spacer size="xtight" />
+              <Spacer size="sp8" />
               <p>
                 <FormattedMessage
                   defaultMessage="With your support, I will be able to accumulate more energy to create."
@@ -52,7 +52,7 @@ const SupportPreview = ({
                 <FormattedMessage defaultMessage="says: " id="M05PcB" />
               </TextIcon>
             </p>
-            <Spacer size="xtight" />
+            <Spacer size="sp8" />
           </>
         )}
 

src/components/Forms/PaymentForm/AddCredit/index.tsx

@@ -272,7 +272,7 @@ const BaseAddCredit: React.FC<FormProps> = ({
         <ConfirmTable.Row type="balance">
           <Balance currency={currency} amount={balance} showTopUp={false} />
         </ConfirmTable.Row>
-        <Spacer size="xtight" />
+        <Spacer size="sp8" />
       </ConfirmTable>
       {InnerForm}
       <StripeCheckout error={checkoutError} onChange={onCheckoutChange} />
@@ -283,7 +283,7 @@ const BaseAddCredit: React.FC<FormProps> = ({
     return (
       <section className={styles.container}>
         {Content}
-        <Spacer size="loose" />
+        <Spacer size="sp24" />
         <Dialog.RoundedButton
           text={
             <FormattedMessage
@@ -302,7 +302,7 @@ const BaseAddCredit: React.FC<FormProps> = ({
           }
           loading={isSubmitting || waiting}
         />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
         <Dialog.RoundedButton
           color="black"
           onClick={switchToSetAmount}

src/components/Forms/PaymentForm/ConnectStripeAccount/Request.tsx

@@ -65,7 +65,7 @@ const Request: React.FC<Props> = ({ back, nextStep, closeDialog }) => {
 
       <Dialog.Content>
         <SelectCountry country={country} onChange={setCountry} />
-        <Spacer size="xxloose" />
+        <Spacer size="sp40" />
       </Dialog.Content>
 
       <Dialog.Footer

src/components/Forms/PaymentForm/PayTo/Confirm/index.tsx

@@ -283,7 +283,7 @@ const Confirm: React.FC<FormProps> = ({
               </TextIcon>
             }
           />
-          <Spacer size="base" />
+          <Spacer size="sp16" />
         </>
       )}
 

src/components/Forms/PaymentForm/PayTo/SetAmount/index.tsx

@@ -250,7 +250,7 @@ const SetAmount: React.FC<FormProps> = ({
   const ComposedAmountInputHint = () => {
     const hkdHint = isHKD ? (
       <section>
-        <Spacer size="xxtight" />
+        <Spacer size="sp4" />
         <FormattedMessage
           defaultMessage="Payment will be processed by Stripe, allowing your support to be unrestricted by region."
           id="TX5UzL"
@@ -394,7 +394,7 @@ const SetAmount: React.FC<FormProps> = ({
     <section className={styles.container}>
       {InnerForm}
 
-      <Spacer size="loose" />
+      <Spacer size="sp24" />
       <SubmitButton mode="rounded" {...submitButtonProps} />
 
       {isUSDT && hasEthAddress && !isConnectedAddress && (

src/components/Forms/PaymentForm/Processing/index.tsx

@@ -179,7 +179,7 @@ const OthersProcessingForm: React.FC<Props> = ({
 
       {error && (
         <>
-          <Spacer size="loose" />
+          <Spacer size="sp24" />
           <Dialog.RoundedButton
             color="black"
             onClick={prevStep}
@@ -362,7 +362,7 @@ const USDTProcessingForm: React.FC<Props> = ({
         </PaymentInfo>
         {isError && (
           <>
-            <Spacer size="loose" />
+            <Spacer size="sp24" />
             <Dialog.RoundedButton
               color="black"
               onClick={switchToConfirm}

src/components/Forms/PaymentForm/StripeCheckout/index.tsx

@@ -67,7 +67,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({ error, onChange }) => {
         </Form.Field.Content>
 
         <Form.Field.Footer fieldMsgId={fieldMsgId} error={error} />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
         <Form.Field.Footer
           fieldMsgId={fieldMsgId}
           hint={

src/components/Spacer/index.tsx

@@ -1,17 +1,9 @@
 import styles from './styles.module.css'
 
 interface SpacerProps {
-  size?:
-    | 'xxtight'
-    | 'xtight'
-    | 'base'
-    | 'baseLoose'
-    | 'loose'
-    | 'xloose'
-    | 'xxloose'
-    | 'xxxloose'
+  size?: 'sp4' | 'sp8' | 'sp16' | 'sp20' | 'sp24' | 'sp32' | 'sp40' | 'sp64'
 }
 
-export const Spacer: React.FC<SpacerProps> = ({ size = 'loose' }) => (
+export const Spacer: React.FC<SpacerProps> = ({ size = 'sp24' }) => (
   <div className={styles[size]} aria-hidden></div>
 )

src/components/Spacer/styles.module.css

@@ -1,31 +1,31 @@
-.xxtight {
+.sp4 {
   padding-bottom: var(--sp4);
 }
 
-.xtight {
+.sp8 {
   padding-bottom: var(--sp8);
 }
 
-.base {
+.sp16 {
   padding-bottom: var(--sp16);
 }
 
-.baseLoose {
+.sp20 {
   padding-bottom: var(--sp20);
 }
 
-.loose {
+.sp24 {
   padding-bottom: var(--sp24);
 }
 
-.xloose {
+.sp32 {
   padding-bottom: var(--sp32);
 }
 
-.xxloose {
+.sp40 {
   padding-bottom: var(--sp40);
 }
 
-.xxxloose {
+.sp64 {
   padding-bottom: var(--sp64);
 }

src/views/ArticleDetail/Collection/index.tsx

@@ -102,7 +102,7 @@ const Collection: React.FC<{
                 })
               }
             />
-            <Spacer size="xtight" />
+            <Spacer size="sp8" />
             <UserDigest.Mini
               user={node.author}
               avatarSize={16}

src/views/ArticleDetail/Comments/CommentsDialog/ListContent.tsx

@@ -34,7 +34,7 @@ const CommentsDialogListContent = ({
     <>
       <Dialog.Content fixedHeight>
         <LatestComments id={id} lock={lock} />
-        <Spacer size="baseLoose" />
+        <Spacer size="sp20" />
         <section className={styles.fixedToolbar}>
           <FixedToolbar
             articleDetails={articleDetails}

src/views/ArticleDetail/Comments/LatestComments/index.tsx

@@ -141,7 +141,7 @@ const LatestComments = ({ id, lock }: { id: string; lock: boolean }) => {
           isFallbackEditor
           showClear
         />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Media>
       {!comments || (comments.length <= 0 && <EmptyComment />)}
       {!!comments && comments.length > 0 && (
@@ -151,7 +151,7 @@ const LatestComments = ({ id, lock }: { id: string; lock: boolean }) => {
           loader={
             <>
               <Placeholder />
-              <Spacer size="loose" />
+              <Spacer size="sp24" />
             </>
           }
           eof={

src/views/ArticleDetail/Placeholder/index.tsx

@@ -11,7 +11,7 @@ const Placeholder = () => {
         <div className={styles.line}></div>
         <div className={styles.line}></div>
       </section>
-      <Spacer size="base" />
+      <Spacer size="sp16" />
       <section className={styles.image}></section>
       <section className={styles.text}>
         <div className={styles.line}></div>

src/views/ArticleDetail/Support/SupportAuthor/index.tsx

@@ -275,7 +275,7 @@ const SupportAuthor = (props: SupportAuthorProps) => {
       )}
       {isWalletSelect && (
         <>
-          <Spacer size="xxloose" />
+          <Spacer size="sp40" />
           <AuthWalletFeed
             submitCallback={() => forward('networkSelect')}
             isInSupport
@@ -284,7 +284,7 @@ const SupportAuthor = (props: SupportAuthorProps) => {
       )}
       {isNetworkSelect && (
         <>
-          <Spacer size="xxloose" />
+          <Spacer size="sp40" />
           <DynamicSwitchNetworkForm
             submitCallback={() => forward('setAmount')}
           />

src/views/ArticleDetail/Support/SupportWidget/index.tsx

@@ -172,7 +172,7 @@ const SupportWidget = ({
                           />
                         </TextIcon>
                       </p>
-                      <Spacer size="xtight" />
+                      <Spacer size="sp8" />
                       <p data-test-id={TEST_ID.ARTICLE_SUPPORT_REPLY}>
                         {replyToDonator}
                       </p>
@@ -188,7 +188,7 @@ const SupportWidget = ({
                           />
                         </TextIcon>
                       </p>
-                      <Spacer size="xtight" />
+                      <Spacer size="sp8" />
                       <p data-test-id={TEST_ID.ARTICLE_SUPPORT_REPLY}>
                         <FormattedMessage
                           defaultMessage="With your support, I will be able to accumulate more energy to create."

src/views/ArticleDetail/index.tsx

@@ -417,7 +417,7 @@ const BaseArticleDetail = ({
       </section>
 
       <Media at="sm">
-        <Spacer size="xxxloose" />
+        <Spacer size="sp64" />
         <CommentsDialog
           id={article.id}
           articleDetails={article}

src/views/CampaignDetail/Description/index.tsx

@@ -1,7 +1,7 @@
 import gql from 'graphql-tag'
 import { useContext } from 'react'
 
-import { LanguageContext, Layout } from '~/components'
+import { LanguageContext, Layout, Spacer } from '~/components'
 import { DescriptionCampaignFragment } from '~/gql/graphql'
 
 import styles from './styles.module.css'
@@ -28,6 +28,8 @@ const Description = ({
             ],
         }}
       />
+
+      <Spacer size="sp40" />
     </Layout.Main.Spacing>
   )
 }

src/views/Follow/index.tsx

@@ -75,7 +75,7 @@ const Follow = () => {
         />
       </Media>
       <Media greaterThan="sm">
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Media>
 
       <Layout.Main.Spacing hasVertical={false}>

src/views/Me/Notifications/index.tsx

@@ -132,10 +132,10 @@ const Notifications = () => {
             </Layout.Header.Title>
           }
         />
-        <Spacer size="base" />
+        <Spacer size="sp16" />
       </Media>
       <Media greaterThan="sm">
-        <Spacer size="xloose" />
+        <Spacer size="sp32" />
       </Media>
 
       <Head

src/views/Me/Settings/Misc/index.tsx

@@ -44,7 +44,7 @@ const SettingsMisc = () => {
         </TableView>
       </section>
 
-      <Spacer size="xloose" />
+      <Spacer size="sp32" />
     </Layout.Main>
   )
 }

src/views/Me/Settings/Notifications/CircleSettings/index.tsx

@@ -438,7 +438,7 @@ const NotificationsCircleSettings = () => {
         <BaseNotificationSettings />
       </section>
 
-      <Spacer size="xloose" />
+      <Spacer size="sp32" />
     </Layout.Main>
   )
 }

src/views/Me/Settings/Notifications/index.tsx

@@ -36,7 +36,7 @@ const NotificationSettings = () => {
         <GeneralSettings />
       </section>
 
-      <Spacer size="xloose" />
+      <Spacer size="sp32" />
     </Layout.Main>
   )
 }

src/views/User/UserProfile/DropdownActions/ArchiveUser/Dialog.tsx

@@ -85,7 +85,7 @@ const ArchiveUserDialog = ({
 
           {!isPreConfirm && (
             <>
-              <Spacer size="xtight" />
+              <Spacer size="sp8" />
               <Form.Input
                 type="password"
                 name="password"