Merge pull request #127 from TrustlessComputer/feat/whitelist_munual

Feat/whitelist munual
TrustlessComputer · Jan 30, 2024 · a8b47cf · a8b47cf
2 parents 0cb6947 + a3d06c8
commit a8b47cf
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 57 deletions.
diff --git a/public/public-sale/textblur.png b/public/public-sale/textblur.png
diff --git a/src/modules/PublicSale/BuyForm/index.tsx b/src/modules/PublicSale/BuyForm/index.tsx
@@ -178,7 +178,7 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
             alignItems={'center'}
             bg={'linear-gradient(90deg, rgba(0, 245, 160, 0.15) 0%, rgba(0, 217, 245, 0.15) 100%)'}
             borderRadius={'100px'}
-            p={'2px 10px'}
+            p={'4px 8px'}
           >
             <svg width='16' height='17' viewBox='0 0 16 17' fill='none' xmlns='http://www.w3.org/2000/svg'>
               <path d='M13.3334 7.04474H8.96978L9.93947 1.22656L2.66675 9.95383H7.03038L6.06069 15.772L13.3334 7.04474Z'
@@ -236,8 +236,7 @@ const PrivateSaleForm = ({ vcInfo }: { vcInfo?: VCInfo }) => {
               true,
             )}
           </Text>
-          <Box mt={'32px'} />
-
+          <Box mt={'24px'} />
           <div className={s.grid}>
             <div>
               <div className={s.backer}  onClick={() => setShowContributorModal(true)}>

diff --git a/src/modules/PublicSale/BuyForm/styles.module.scss b/src/modules/PublicSale/BuyForm/styles.module.scss
@@ -2,7 +2,7 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 32px 24px 32px;
+  padding: 24px;
   width: 100%;
   max-width: 826px;
   margin: 0 auto;
@@ -24,7 +24,7 @@
   }
 
   .fundValue {
-    font-size: 60px;
+    font-size: 52px;
     font-weight: 400;
     line-height: 100%;
     width: 100%;

diff --git a/src/modules/PublicSale/activities/index.tsx b/src/modules/PublicSale/activities/index.tsx
@@ -30,7 +30,7 @@ const Activities = React.memo(() => {
     return [
       {
         key: 0,
-        tag: 'DAY 1',
+        tag: 'Day 1',
         title: 'Fully on-chain gaming on Bitcoin',
         src: 'public-sale/playGame.png',
         ctas: [{
@@ -42,7 +42,7 @@ const Activities = React.memo(() => {
       },
       {
         key: 1,
-        tag: 'DAY 2',
+        tag: 'Day 2',
         title: 'BRC-20 Futures Trading Competition',
         src: 'public-sale/playGame.png',
         ctas: [{
@@ -54,7 +54,7 @@ const Activities = React.memo(() => {
       },
       {
         key: 2,
-        tag: 'DAY 3',
+        tag: 'Day 3',
         title: 'Playing with Lego at BVM network',
         src: 'public-sale/playGame.png',
         ctas: [{
@@ -66,7 +66,7 @@ const Activities = React.memo(() => {
       },
       {
         key: 3,
-        tag: 'DAY 4',
+        tag: 'Day 4',
         title: 'Poker Friday Night on Bitcoin',
         src: 'public-sale/playGame.png',
         ctas: [{
@@ -78,7 +78,7 @@ const Activities = React.memo(() => {
       },
       {
         key: 4,
-        tag: 'DAY 5',
+        tag: 'Day 5',
         title: 'Get Fit & Raise Charity on Bitcoin',
         src: 'public-sale/playGame.png',
         ctas: [{
@@ -90,7 +90,7 @@ const Activities = React.memo(() => {
       },
       {
         key: 5,
-        tag: 'DAY 6',
+        tag: 'Day 6',
         title: 'Get Fit & Raise Charity on Bitcoin',
         src: 'public-sale/playGame.png',
         ctas: [{
@@ -102,7 +102,7 @@ const Activities = React.memo(() => {
       },
       {
         key: 6,
-        tag: 'DAY 7',
+        tag: 'Day 7',
         title: 'Last day',
         src: 'public-sale/playGame.png',
         desc: 'Details of Day 7 will be provided as soon as Day 6 is completed.'
@@ -126,8 +126,8 @@ const Activities = React.memo(() => {
           <a href={item.link} target="_blank" key={item.title}>
             <Flex className={styles.itemWrapper_learnMore} gap="2px">
               <Text>{item.title}</Text>
-              <svg width="30" height="29" viewBox="0 0 30 29" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path d="M13.1144 12.1642C13.0305 12.1672 12.9469 12.1532 12.8685 12.1232C12.7901 12.0931 12.7186 12.0476 12.6582 11.9893C12.5978 11.931 12.5498 11.8611 12.517 11.7839C12.4842 11.7066 12.4673 11.6236 12.4673 11.5396C12.4673 11.4557 12.4842 11.3726 12.517 11.2954C12.5498 11.2181 12.5978 11.1483 12.6582 11.09C12.7186 11.0317 12.7901 10.9861 12.8685 10.9561C12.9469 10.926 13.0305 10.9121 13.1144 10.915L17.8284 10.915C17.994 10.9151 18.1528 10.981 18.2699 11.0981C18.3871 11.2152 18.4529 11.374 18.453 11.5396L18.453 16.2537C18.456 16.3376 18.442 16.4212 18.4119 16.4995C18.3819 16.5779 18.3364 16.6494 18.2781 16.7098C18.2198 16.7702 18.1499 16.8182 18.0727 16.851C17.9954 16.8838 17.9123 16.9007 17.8284 16.9007C17.7445 16.9007 17.6614 16.8838 17.5841 16.851C17.5069 16.8182 17.437 16.7702 17.3787 16.7098C17.3204 16.6494 17.2749 16.5779 17.2448 16.4995C17.2148 16.4212 17.2008 16.3376 17.2038 16.2537L17.2038 13.0481L11.4939 18.758C11.3767 18.8752 11.2177 18.9411 11.052 18.9411C10.8862 18.9411 10.7272 18.8752 10.61 18.758C10.4928 18.6408 10.427 18.4818 10.427 18.3161C10.427 18.1503 10.4928 17.9913 10.61 17.8741L16.3199 12.1642L13.1144 12.1642Z" fill="#FA4E0E"/>
+              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M9.73335 9.34973C9.63255 9.35333 9.53205 9.33653 9.43785 9.30043C9.34365 9.26433 9.25765 9.20953 9.18515 9.13943C9.11255 9.06943 9.05475 8.98543 9.01535 8.89253C8.97595 8.79973 8.95565 8.69983 8.95565 8.59893C8.95565 8.49803 8.97595 8.39823 9.01535 8.30533C9.05475 8.21243 9.11255 8.12853 9.18515 8.05843C9.25765 7.98833 9.34365 7.93363 9.43785 7.89753C9.53205 7.86133 9.63255 7.84453 9.73335 7.84813H15.4C15.599 7.84823 15.7899 7.92743 15.9307 8.06823C16.0715 8.20893 16.1506 8.39983 16.1508 8.59893V14.2654C16.1543 14.3663 16.1375 14.4668 16.1014 14.561C16.0653 14.6552 16.0106 14.7411 15.9405 14.8137C15.8704 14.8863 15.7864 14.944 15.6936 14.9835C15.6007 15.0229 15.5008 15.0432 15.4 15.0432C15.2991 15.0432 15.1992 15.0229 15.1063 14.9835C15.0135 14.944 14.9295 14.8863 14.8594 14.8137C14.7894 14.7411 14.7346 14.6552 14.6985 14.561C14.6624 14.4668 14.6456 14.3663 14.6491 14.2654V10.4122L7.78555 17.2758C7.64465 17.4167 7.45355 17.4958 7.25425 17.4958C7.05505 17.4958 6.86395 17.4167 6.72305 17.2758C6.58215 17.1349 6.50305 16.9438 6.50305 16.7445C6.50305 16.5453 6.58215 16.3542 6.72305 16.2133L13.5867 9.34973H9.73335Z" fill="#FA4E0E"/>
               </svg>
             </Flex>
           </a>
@@ -153,24 +153,24 @@ const Activities = React.memo(() => {
 
   const renderItem = (item: GameItemProps, index: number) => {
     const isDisable = index > currentDay.diffDay;
-    const title = isDisable ? "▧ ❀ ▧ ❀ ⬚ ▧ ▧ ❀ ⬚ ▧ ⬚ ❀ ⬚ ❀ ▧ ♖ ▧" : item.title
+    const title = isDisable ? <img src={'/public-sale/textblur.png'} alt={"textblur"}/> : item.title
     return (
       <AccordionItem isDisabled={index > currentDay.diffDay} className={styles.itemWrapper}>
         {({ isExpanded }) => (
           <>
             <h2>
               <AccordionButton justifyContent={'space-between'} className={cs(styles.itemWrapper_header, {[styles.itemWrapper_header__active]: isExpanded})}>
-                <span className={cs(styles.itemWrapper_title, {[styles.itemWrapper_title__active]: isExpanded})}>{item.tag}: {title}</span>
+                <Flex gap={1} className={cs(styles.itemWrapper_title, {[styles.itemWrapper_title__active]: isExpanded})}>{item.tag}: {title}</Flex>
                 <button>
                   <SvgInset
                     className={isExpanded ? styles.itemWrapper_downArrow : styles.itemWrapper_normalArrow}
                     svgUrl={`${CDN_URL}/icons/chevron-right-ic-32.svg`}
-                    size={24}
+                    size={20}
                   />
                 </button>
               </AccordionButton>
             </h2>
-            <AccordionPanel style={{ padding: '0 0 16px 0' }}>
+            <AccordionPanel style={{ padding: '0 0 10px 0' }}>
               <Flex flex={1} flexDir="column">
                 <div className={styles.itemWrapper_desc} dangerouslySetInnerHTML={{ __html: item.desc }}/>
                 {item.ctas?.map(renderCta)}

diff --git a/src/modules/PublicSale/activities/styles.module.scss b/src/modules/PublicSale/activities/styles.module.scss
@@ -14,11 +14,11 @@
   &__title {
     align-self: stretch;
     color: #FFFFFF;
-    font-size: 24px;
+    font-size: 18px;
     font-style: normal;
     font-weight: 400;
-    line-height: 150%;
-    margin-bottom: 16px;
+    line-height: 28px;
+    margin-bottom: 8px;
   }
 }
 
@@ -28,8 +28,8 @@
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
-    border-width: 0;
-    background-color: rgba(white, .08);
+    background-color: rgba(white, .06);
+    border: 1px solid rgba(255, 255, 255, 0.06);
     button {
       padding: 12px 20px;
 
@@ -40,7 +40,7 @@
   }
 
   :global(.chakra-collapse){
-    padding: 16px 10px !important;
+    padding: 10px 16px !important;
     padding-bottom: 0 !important;
   }
 
@@ -51,20 +51,25 @@
     line-height: 20px;
     letter-spacing: 0em;
     text-align: center;
+    white-space: nowrap;
+
+    img {
+      max-width: 214px;
+    }
 
     @include is-mobile {
       font-size: 14px;
     }
 
     &__active {
       color: #FFFFFF;
-      background-color: rgba(white, .08);
+      //background-color: rgba(white, .08);
     }
   }
   &_desc {
     color: rgba(white, .7);
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 400;
     line-height: 20px;
     letter-spacing: 0em;
     b, strong{
@@ -78,18 +83,23 @@
 
   }
   &_header {
-    padding: 16px 10px !important;
+    padding: 10px 16px !important;
     background-color: rgba(black, .8);
-    border: 1px solid rgba(white, .10);
+    //border: 1px solid rgba(white, .10);
 
     button {
       padding: 0 !important;
+      display: none;
     }
 
     &__active {
       background-color: transparent;
       border: 0 !important;
-      border-bottom: 1px solid rgba(white, .10) !important;
+      border-bottom: 1px solid rgba(white, .07) !important;
+
+      button {
+        display: block;
+      }
     }
 
   }
@@ -113,7 +123,7 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
-    margin-top: 6px;
+    margin-top: 12px;
     align-items: center;
   }
 }
diff --git a/src/modules/PublicSale/leaderBoardSwitch/styles.module.scss b/src/modules/PublicSale/leaderBoardSwitch/styles.module.scss
@@ -1,25 +1,25 @@
 .container {
-  background: #FFFFFF1A;
-  box-shadow: 0px 0px 24px -6px #0000001F;
+  //background: #FFFFFF1A;
+  //box-shadow: 0px 0px 24px -6px #0000001F;
   width: 100%;
   //height: 36px;
-  padding: 4px;
+  //padding: 4px;
   transition: all 0.3s;
   gap: 4px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  //border: 1px solid rgba(255, 255, 255, 0.1);
 
   .btn {
     width: 100%;
     background: transparent;
     color: #FFFFFF80;
     border-radius: 0px;
-    letter-spacing: 0.02rem;
-    font-weight: 400;
+    padding: 0 12px;
+    font-weight: 500;
     font-size: 12px;
-    height: 26px;
+    height: 24px;
     &.active {
-      color: #000000;
-      background: #FFFFFF;
+      color: #FFFFFF;
+      background: rgba(255, 255, 255, 0.1);
       font-weight: 500;
     }
   }

diff --git a/src/modules/PublicSale/topContent/index.tsx b/src/modules/PublicSale/topContent/index.tsx
@@ -14,11 +14,11 @@ const TopContent = () => {
   return (
     <div className={s.container}>
       <div className={s.content}>
-        <Flex direction={'column'} gap={1}>
-          <Text fontSize={16} fontWeight={400} lineHeight={'24px'} className={s.subTitle}>
+        <Flex direction={'column'} gap={3}>
+          <Text fontSize={"16px"} fontWeight={400} lineHeight={'24px'} className={s.subTitle}>
             Bitcoin Virtual Machine
           </Text>
-          <Text fontSize={56} fontWeight={400} lineHeight={1} className={s.title}>Welcome to the future of
+          <Text className={s.title}>Welcome to the future of
             Bitcoin</Text>
           <Text fontSize={16} fontWeight={400} lineHeight={'24px'} className={s.desc}>We’re on a mission to reinvent Bitcoin. And we’re fucking serious about it. Hope you’ll join the ride. LFG.</Text>
         </Flex>

diff --git a/src/modules/PublicSale/topContent/styles.module.scss b/src/modules/PublicSale/topContent/styles.module.scss
@@ -18,11 +18,11 @@
   }
 
   .title {
-    font-size: 44px;
-    line-height: 1;
+    font-size: 56px;
+    line-height: 100%;
     font-weight: 400;
     color: #FFFFFF;
-    margin-bottom: 20px;
+    margin-bottom: 8px;
   }
 
   .desc {
@@ -43,20 +43,33 @@
     align-items: center;
     margin-top: 20px;
 
-    li > a {
-      display: flex;
-      align-items: center;
-      color: white;
-      gap: 6px;
+    li {
       font-size: 14px;
-      font-weight: 500;
-      line-height: 1.4;
+      line-height: 14px;
+      font-weight: 400;
 
-      img {
-        width: 16px;
-        height: 16px;
-        max-width: none;
-        max-height: none;
+      > a {
+        display: flex;
+        align-items: center;
+        color: white;
+        gap: 4px;
+        img {
+          width: 16px;
+          height: 16px;
+          max-width: none;
+          max-height: none;
+        }
+      }
+
+      > div {
+        span {
+          font-weight: inherit !important;
+        }
+
+        svg {
+          width: 16px !important;
+          height: 16px !important;
+        }
       }
     }
   }