From 02c04ca252ff4785db5aeb93f83095e802681786 Mon Sep 17 00:00:00 2001
From: 0xmegalodon <stephen@newbitcoincity.com>
Date: Sat, 20 Jan 2024 06:52:44 +0700
Subject: [PATCH 1/4] update style mobile

---
 src/modules/Whitelist/stepsEco/Step/index.tsx | 76 +++++++++----------
 src/modules/Whitelist/styles.module.scss      |  2 +
 2 files changed, 40 insertions(+), 38 deletions(-)

diff --git a/src/modules/Whitelist/stepsEco/Step/index.tsx b/src/modules/Whitelist/stepsEco/Step/index.tsx
index 6678a01d2..b83c9fe15 100644
--- a/src/modules/Whitelist/stepsEco/Step/index.tsx
+++ b/src/modules/Whitelist/stepsEco/Step/index.tsx
@@ -53,7 +53,7 @@ export default function ItemCommunity({
           alt="ic-section"
         />
         <Flex direction="column" gap="8px" flex={1}>
-          <Flex justifyContent="space-between" gap="16px">
+          <Flex direction={["column", "row"]} justifyContent="space-between" gap={[1, 4]}>
             <Flex direction="column" w="100%">
               <div className={s.itemCommunity__project}>{content?.project}</div>
               <div className={s.itemCommunity__title}>{content?.title}</div>
@@ -65,44 +65,8 @@ export default function ItemCommunity({
                   }}
                 />
               )}
-              {!!content?.actionText && (
-                <Flex direction="column" w="100%" mt="8px">
-                  <Flex gap="8px" flexDirection="column" w="100%">
-                    <Button
-                      className={s.itemCommunity__btnCTA}
-                      onClick={() => {
-                        if (content?.actionHandle && isRunning && !isLoading) {
-                          content?.actionHandle();
-                        }
-                      }}
-                      isLoading={isLoading}
-                    >
-                      {content?.actionText}
-                    </Button>
-                    {!!content.actionHandleSecondary && (
-                      <Button
-                        className={cs(
-                          s.itemCommunity__btnCTA,
-                          s.itemCommunity__btnSecondary,
-                        )}
-                        onClick={() => {
-                          if (
-                            content?.actionHandleSecondary &&
-                            isRunning &&
-                            !isLoading
-                          ) {
-                            content?.actionHandleSecondary();
-                          }
-                        }}
-                      >
-                        {content?.actionTextSecondary}
-                      </Button>
-                    )}
-                  </Flex>
-                </Flex>
-              )}
             </Flex>
-            <Flex direction="column">
+            <Flex direction={["row", 'column']} justifyContent={["space-between", "flex-start"]}>
               <div className={s.itemCommunity__point}>
                 {content?.right.title}
                 {content?.right.tooltip && <>{content?.right.tooltip}</>}
@@ -114,6 +78,42 @@ export default function ItemCommunity({
               )}
             </Flex>
           </Flex>
+          {!!content?.actionText && (
+            <Flex direction="column" w="100%" mt="8px">
+              <Flex gap="8px" flexDirection="column" w="100%">
+                <Button
+                  className={s.itemCommunity__btnCTA}
+                  onClick={() => {
+                    if (content?.actionHandle && isRunning && !isLoading) {
+                      content?.actionHandle();
+                    }
+                  }}
+                  isLoading={isLoading}
+                >
+                  {content?.actionText}
+                </Button>
+                {!!content.actionHandleSecondary && (
+                  <Button
+                    className={cs(
+                      s.itemCommunity__btnCTA,
+                      s.itemCommunity__btnSecondary,
+                    )}
+                    onClick={() => {
+                      if (
+                        content?.actionHandleSecondary &&
+                        isRunning &&
+                        !isLoading
+                      ) {
+                        content?.actionHandleSecondary();
+                      }
+                    }}
+                  >
+                    {content?.actionTextSecondary}
+                  </Button>
+                )}
+              </Flex>
+            </Flex>
+          )}
         </Flex>
       </div>
     </>
diff --git a/src/modules/Whitelist/styles.module.scss b/src/modules/Whitelist/styles.module.scss
index 22b7867f2..73e3ed04a 100644
--- a/src/modules/Whitelist/styles.module.scss
+++ b/src/modules/Whitelist/styles.module.scss
@@ -87,12 +87,14 @@
       .chakra-tabs__tablist {
         position: relative;
         width: 100%;
+        overflow-x: auto;
 
         button {
           font-size: 24px;
           color: #494846;
           border-bottom-width: 0px !important;
           text-align: left;
+          white-space: nowrap;
 
           @include w-max(720px) {
             font-size: 15px;

From d8019c03f0b2392f6bd9573d45c163c3993c0568 Mon Sep 17 00:00:00 2001
From: 0xmegalodon <stephen@newbitcoincity.com>
Date: Sat, 20 Jan 2024 07:02:04 +0700
Subject: [PATCH 2/4] update style mobile

---
 .../Whitelist/stepAirdrop/Step/index.tsx      | 97 +++++++++----------
 1 file changed, 45 insertions(+), 52 deletions(-)

diff --git a/src/modules/Whitelist/stepAirdrop/Step/index.tsx b/src/modules/Whitelist/stepAirdrop/Step/index.tsx
index d27d3eb7d..5b8fdd1d9 100644
--- a/src/modules/Whitelist/stepAirdrop/Step/index.tsx
+++ b/src/modules/Whitelist/stepAirdrop/Step/index.tsx
@@ -68,7 +68,7 @@ export default function ItemCommunity({
           alt="ic-section"
         />
         <Flex direction="column" gap="8px" flex={1}>
-          <Flex justifyContent="space-between" gap="16px">
+          <Flex direction={["column", "row"]} justifyContent="space-between" gap={[1, 4]}>
             <Flex direction="column" w="100%">
               <Flex gap={2}>
                 <div className={cx(s.itemCommunity__tag, s[AirdropText[content?.airdropType].toLowerCase()])}>{AirdropText[content?.airdropType]}</div>
@@ -94,60 +94,11 @@ export default function ItemCommunity({
                   }
                 </Flex>
               }
-              {!!content?.actionText && (
-                <Flex direction="column" w="100%" mt="8px">
-                  <Flex gap="8px" flexDirection="column" w="100%">
-                    <Button
-                      className={s.itemCommunity__btnCTA}
-                      onClick={() => {
-                        if (content?.actionHandle && isRunning && !isLoading) {
-                          content?.actionHandle();
-                        }
-                      }}
-                      isLoading={isLoading}
-                      isDisabled={isDisable}
-                    >
-                      {
-                        !content?.showExpireTime && !!content?.expiredTime ? (
-                          <Flex direction={"column"} justifyContent={"center"} gap={1} mt={2} mb={2}>
-                            <Countdown className={s.itemCommunity__countdown_button} expiredTime={dayjs.utc(content?.expiredTime, 'YYYY-MM-DD HH:mm:ss').toString()} hideIcon={true} />
-                          </Flex>
-                        ) : (content?.actionText)
-                      }
-                    </Button>
-                    {!!content.actionHandleSecondary && (
-                      <Button
-                        className={cs(
-                          s.itemCommunity__btnCTA,
-                          s.itemCommunity__btnSecondary,
-                        )}
-                        onClick={() => {
-                          if (
-                            content?.actionHandleSecondary &&
-                            isRunning &&
-                            !isLoading
-                          ) {
-                            content?.actionHandleSecondary();
-                          }
-                        }}
-                      >
-                        {content?.actionTextSecondary}
-                      </Button>
-                    )}
-                  </Flex>
-                </Flex>
-              )}
             </Flex>
-            <Flex direction="column">
+            <Flex direction={["row", 'column']} justifyContent={["space-between", "flex-start"]}>
               <div className={s.itemCommunity__point}>
                 {content?.right.title}
-                {
-                  content?.right.tooltip && (
-                    <>
-                      {content?.right.tooltip}
-                    </>
-                  )
-                }
+                {content?.right.tooltip && <>{content?.right.tooltip}</>}
               </div>
               {!!content?.desc && (
                 <div className={s.itemCommunity__pointNote}>
@@ -156,6 +107,48 @@ export default function ItemCommunity({
               )}
             </Flex>
           </Flex>
+          {!!content?.actionText && (
+            <Flex direction="column" w="100%" mt="8px">
+              <Flex gap="8px" flexDirection="column" w="100%">
+                <Button
+                  className={s.itemCommunity__btnCTA}
+                  onClick={() => {
+                    if (content?.actionHandle && isRunning && !isLoading) {
+                      content?.actionHandle();
+                    }
+                  }}
+                  isLoading={isLoading}
+                >
+                  {
+                    !content?.showExpireTime && !!content?.expiredTime ? (
+                      <Flex direction={"column"} justifyContent={"center"} gap={1} mt={2} mb={2}>
+                        <Countdown className={s.itemCommunity__countdown_button} expiredTime={dayjs.utc(content?.expiredTime, 'YYYY-MM-DD HH:mm:ss').toString()} hideIcon={true} />
+                      </Flex>
+                    ) : (content?.actionText)
+                  }
+                </Button>
+                {!!content.actionHandleSecondary && (
+                  <Button
+                    className={cs(
+                      s.itemCommunity__btnCTA,
+                      s.itemCommunity__btnSecondary,
+                    )}
+                    onClick={() => {
+                      if (
+                        content?.actionHandleSecondary &&
+                        isRunning &&
+                        !isLoading
+                      ) {
+                        content?.actionHandleSecondary();
+                      }
+                    }}
+                  >
+                    {content?.actionTextSecondary}
+                  </Button>
+                )}
+              </Flex>
+            </Flex>
+          )}
         </Flex>
       </div>
     </>

From f916dc507246b9d11f8decd7c0cd8238cd7e8804 Mon Sep 17 00:00:00 2001
From: 0xmegalodon <stephen@newbitcoincity.com>
Date: Sat, 20 Jan 2024 07:06:10 +0700
Subject: [PATCH 3/4] update style mobile

---
 src/modules/Whitelist/steps/Step/index.tsx | 114 ++++++++++-----------
 1 file changed, 57 insertions(+), 57 deletions(-)

diff --git a/src/modules/Whitelist/steps/Step/index.tsx b/src/modules/Whitelist/steps/Step/index.tsx
index 0a5517b8e..dc13c1216 100644
--- a/src/modules/Whitelist/steps/Step/index.tsx
+++ b/src/modules/Whitelist/steps/Step/index.tsx
@@ -63,71 +63,71 @@ export default function ItemCommunity({
       <div className={cx(s.itemCommunity, isRunning ? '' : s.isDone)}>
         <Image className={s.itemCommunity__logo} width={48} height={48} src={`${CDN_URL_ICONS}/${image}`} alt="ic-section" />
         <Flex direction="column" gap="8px" flex={1}>
-          <Flex justifyContent="space-between" gap="16px">
+          <Flex direction={["column", "row"]} justifyContent="space-between" gap={[1, 4]}>
             <Flex direction="column" w="100%">
               <div className={s.itemCommunity__title}>{content?.title}</div>
               {!!content?.desc && (<div className={s.itemCommunity__desc}>{content?.desc}</div>)}
-              {!!content?.actionText && (
-                <Flex direction="column" w="100%" mt="8px">
-                  <Flex gap="8px" flexDirection="column" w="100%">
-                    <Button
-                      className={s.itemCommunity__btnCTA}
-                      onClick={() => {
-                        if (content?.actionHandle && isRunning && !isLoading) {
-                          content?.actionHandle();
-                          if (step === MultiplierStep.authen) {
-                            setTimeout(() => {
-                              setShowManualCheck(true);
-                            }, 15000);
-                          }
-                        }
-                      }}
-                      isLoading={isLoading}
-                    >
-                      {content?.actionText}
-                    </Button>
-                    {!!content.actionHandleSecondary && (
-                      <Button
-                        className={cs(s.itemCommunity__btnCTA, s.itemCommunity__btnSecondary)}
-                        onClick={() => {
-                          if (content?.actionHandleSecondary && isRunning && !isLoading) {
-                            content?.actionHandleSecondary();
-                          }
-                        }}
-                      >
-                        {content?.actionTextSecondary}
-                      </Button>
-                    )}
-                    {step === MultiplierStep.signMessage && (
-                      <AllowBTCMessage />
-                    )}
-                    {step === MultiplierStep.modular && (
-                      <AllowCelestiaMessage />
-                    )}
-                  </Flex>
-                  {
-                    step === MultiplierStep.authen && showManualCheck && (
-                      <Text
-                        cursor={"pointer"}
-                        fontSize={"14px"}
-                        fontWeight={400}
-                        color={"#000000"}
-                        textDecoration={"underline"}
-                        onClick={content?.handleShowManualPopup}
-                        mt={1}
-                      >
-                        Missing from the Leaderboard?
-                      </Text>
-                    )
-                  }
-                </Flex>
-              )}
             </Flex>
-            <Flex direction="column">
+            <Flex direction={["row", 'column']} justifyContent={["space-between", "flex-start"]}>
               <div className={s.itemCommunity__point}>{content?.right.title}</div>
               {!!content?.desc && (<div className={s.itemCommunity__pointNote}>{content?.right.desc}</div>)}
             </Flex>
           </Flex>
+          {!!content?.actionText && (
+            <Flex direction="column" w="100%" mt="8px">
+              <Flex gap="8px" flexDirection="column" w="100%">
+                <Button
+                  className={s.itemCommunity__btnCTA}
+                  onClick={() => {
+                    if (content?.actionHandle && isRunning && !isLoading) {
+                      content?.actionHandle();
+                      if (step === MultiplierStep.authen) {
+                        setTimeout(() => {
+                          setShowManualCheck(true);
+                        }, 15000);
+                      }
+                    }
+                  }}
+                  isLoading={isLoading}
+                >
+                  {content?.actionText}
+                </Button>
+                {!!content.actionHandleSecondary && (
+                  <Button
+                    className={cs(s.itemCommunity__btnCTA, s.itemCommunity__btnSecondary)}
+                    onClick={() => {
+                      if (content?.actionHandleSecondary && isRunning && !isLoading) {
+                        content?.actionHandleSecondary();
+                      }
+                    }}
+                  >
+                    {content?.actionTextSecondary}
+                  </Button>
+                )}
+                {step === MultiplierStep.signMessage && (
+                  <AllowBTCMessage />
+                )}
+                {step === MultiplierStep.modular && (
+                  <AllowCelestiaMessage />
+                )}
+              </Flex>
+              {
+                step === MultiplierStep.authen && showManualCheck && (
+                  <Text
+                    cursor={"pointer"}
+                    fontSize={"14px"}
+                    fontWeight={400}
+                    color={"#000000"}
+                    textDecoration={"underline"}
+                    onClick={content?.handleShowManualPopup}
+                    mt={1}
+                  >
+                    Missing from the Leaderboard?
+                  </Text>
+                )
+              }
+            </Flex>
+          )}
         </Flex>
       </div>
     </>

From 348dae52dee71c0671dc9d1bb6c0a55da4af1c8e Mon Sep 17 00:00:00 2001
From: 0xmegalodon <stephen@newbitcoincity.com>
Date: Sat, 20 Jan 2024 07:09:11 +0700
Subject: [PATCH 4/4] update style mobile

---
 src/modules/Whitelist/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/modules/Whitelist/index.tsx b/src/modules/Whitelist/index.tsx
index a02692587..613a1bfbe 100644
--- a/src/modules/Whitelist/index.tsx
+++ b/src/modules/Whitelist/index.tsx
@@ -55,7 +55,7 @@ const Whitelist = () => {
         ) : (
           <AppLoading />
         )}
-        <Box mt="40px" />
+        <Box mt={['0px', '40px']} />
       </>
     );
   };