style: change style of progress modal

dappforce · Feb 1, 2024 · 26b5e76 · 26b5e76
1 parent 3c0c0e6
commit 26b5e76
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 39 deletions.
diff --git a/src/components/leaderboard/ProgressModal.module.sass b/src/components/leaderboard/ProgressModal.module.sass
@@ -1,43 +1,56 @@
 @import 'src/styles/subsocial-vars.scss'
 
 .ProgressModal
-  border-radius: $border_radius_huge
-  display: flex
-  flex-direction: column
-  align-items: center
-  padding: $space_large $space_big
-  gap: $space_big
-  color: white
-  position: relative
+  :global(.ant-modal-content)
+    overflow: hidden
+    color: white
+
+  .DiamondIcon
+    font-size: 130px
+    position: absolute
+    top: -$space_tiny
+    left: -$space_tiny
 
   &.Full
-    background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)
+    :global(.ant-modal-content)
+      background: linear-gradient(180deg, #9340E6 0%, #7534A9 100%)
 
   &.Halfway
-    background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)
+    :global(.ant-modal-content)
+      background: linear-gradient(180deg, #F77400 0%, #F57F00 100%)
+
+  :global(.ant-modal-close)
+    color: white
+    top: 8px
+    right: 8px
 
-  .DiamondIcon
-    font-size: 130px
-    position: absolute
-    top: -$space_normal
-    right: -$space_normal
+  .Content
+    overflow: visible !important
 
-  .RewardCard
+  .ProgressModalContent
+    border-radius: $border_radius_huge
     display: flex
     flex-direction: column
     align-items: center
-    border-radius: $border_radius_large
-    background: rgba(248, 250, 252, 0.10)
-    backdrop-filter: blur(24.5px)
-    flex: 1
-    padding: $space_normal
+    gap: $space_big
     position: relative
 
-    .Diamond
-      width: 44px
-      height: 44px
-      position: absolute
-      top: 0
-      right: 0
-      transform: translate(35%, -50%) rotate(-30deg)
-      transform-origin: center
+    .RewardCard
+      display: flex
+      flex-direction: column
+      align-items: center
+      border-radius: $border_radius_large
+      background: rgba(248, 250, 252, 0.10)
+      backdrop-filter: blur(24.5px)
+      flex: 1
+      padding: $space_normal
+      position: relative
+
+      .Diamond
+        width: 44px
+        height: 44px
+        position: absolute
+        top: 0
+        right: 0
+        transform: translate(35%, -50%) rotate(-30deg)
+        transform-origin: center
diff --git a/src/components/leaderboard/ProgressModal.tsx b/src/components/leaderboard/ProgressModal.tsx
@@ -116,17 +116,16 @@ function InnerProgressModal() {
       }}
       title={`Your progress ${isUsingLastWeekData ? 'last week' : 'yesterday'}`}
       closable
+      className={clsx(styles.ProgressModal, statusClassName[status])}
+      contentClassName={styles.Content}
     >
-      <div
-        className={clsx(styles.ProgressModal, statusClassName[status], 'mt-2')}
-        style={{ overflowX: 'clip' }}
-      >
-        <DiamondIcon className={styles.DiamondIcon} />
+      <DiamondIcon className={styles.DiamondIcon} />
+      <div className={clsx(styles.ProgressModalContent, 'mt-2')}>
         <div className='d-flex flex-column align-items-center'>
           <div className='mb-2'>
             <Avatar
               noMargin
-              size={50}
+              size={60}
               asLink={false}
               address={myAddress}
               avatar={profile?.content?.image}
@@ -169,7 +168,7 @@ function InnerProgressModal() {
         </div>
       </div>
       <Button
-        type='primary'
+        type='default'
         size='large'
         className='mt-4'
         onClick={() =>

diff --git a/src/components/utils/CustomModal/index.module.sass b/src/components/utils/CustomModal/index.module.sass
@@ -5,6 +5,13 @@
     :global(.ant-modal-content)
       height: calc(100vh - 100px)
 
+  &.NoPadding
+    :global(.ant-modal-body)
+      padding: 0
+      > *
+        padding-left: 0
+        padding-right: 0
+
   :global(.ant-modal-content)
     max-height: 700px
     border-radius: $space_normal
@@ -28,7 +35,7 @@
     flex: 1
 
   .CustomModalTitle
+    color: inherit
     font-weight: bold
-    color: #222222
     font-size: $font_big
     margin-bottom: $space_mini
diff --git a/src/components/utils/icons/Diamond.tsx b/src/components/utils/icons/Diamond.tsx
@@ -6,13 +6,13 @@ export default function DiamondIcon(props: ComponentProps<'svg'>) {
       {...props}
       width='1em'
       height='1em'
-      viewBox='0 0 127 126'
+      viewBox='0 0 85 102'
       fill='none'
       xmlns='http://www.w3.org/2000/svg'
     >
       <path
         opacity='0.1'
-        d='M18.9182 30.2914L17.4721 31.4856L19.2695 32.0208L33.8044 36.3492L34.3155 36.5014L34.7266 36.1619L56.2801 18.3616L57.7262 17.1674L55.9288 16.6322L41.3939 12.3038L40.8828 12.1516L40.4717 12.4911L18.9182 30.2914ZM46.9097 38.6271L45.4637 39.8213L47.2611 40.3566L82.3231 50.7978L84.1205 51.3331L83.5634 49.5424L75.2593 22.8507L75.1009 22.3415L74.5898 22.1893L69.3854 20.6395L68.8744 20.4873L68.4633 20.8269L46.9097 38.6271ZM95.1103 54.1438L95.2687 54.653L95.7798 54.8052L110.315 59.1336L112.112 59.6688L111.555 57.8781L103.251 31.1864L103.092 30.6772L102.581 30.5251L88.0465 26.1966L86.2491 25.6614L86.8062 27.4521L95.1103 54.1438ZM93.6469 64.1926L93.0315 64.0093L92.6087 64.4927L67.9767 92.6595L69.2803 94.1524L106.346 69.6884L108.136 68.5073L106.081 67.8954L93.6469 64.1926ZM81.8152 62.1467L82.8404 60.9745L81.3479 60.53L42.7532 49.0367L41.2607 48.5923L41.4775 50.1344L48.2154 98.056L48.5197 100.22L49.9584 98.5751L81.8152 62.1467ZM31.159 46.1933L31.0696 45.5574L30.4542 45.3742L18.0201 41.6714L15.9651 41.0594L16.817 43.027L34.4609 83.7834L36.3688 83.2468L31.159 46.1933ZM38.6542 1.46532L110.804 22.9511L125.093 68.879L41.4042 124.114L1.56745 32.0939L38.6542 1.46532Z'
+        d='M-13.8869 27.9446L-14.3345 28.2344L-14.3434 28.7675L-14.8073 56.7173L-14.8384 58.5924L-13.264 57.5734L-0.532604 49.3327L-0.0849704 49.0429L-0.0761184 48.5098L0.387756 20.56L0.418877 18.6849L-1.15549 19.7039L-13.8869 27.9446ZM10.6315 12.0745L10.1838 12.3643L10.175 12.8974L9.71112 40.8472L9.68 42.7223L11.2544 41.7033L41.9659 21.8245L43.5403 20.8054L41.8168 20.066L16.1278 9.04435L15.6377 8.8341L15.1901 9.12385L10.6315 12.0745ZM26.9771 1.49445L25.4027 2.51349L27.1262 3.25293L52.8152 14.2746L53.3053 14.4848L53.7529 14.1951L66.4843 5.95436L68.0587 4.93532L66.3352 4.19588L40.6461 -6.82576L40.1561 -7.036L39.7085 -6.74626L26.9771 1.49445ZM71.9326 15.8269L72.1968 13.6991L70.3969 14.8642L59.5056 21.9138L58.9665 22.2628L59.0595 22.8982L64.4787 59.9216L66.4605 59.9L71.9326 15.8269ZM55.7473 78.4526L57.5906 79.6268L57.2741 77.4644L50.2655 29.5816L50.0399 28.0407L48.7326 28.8869L14.9267 50.7686L13.6194 51.6148L14.9328 52.4515L55.7473 78.4526ZM5.23443 57.7377L4.69284 57.3927L4.15376 57.7417L-6.73752 64.7913L-8.53746 65.9564L-6.48809 66.5866L35.9614 79.6413L36.7927 77.8421L5.23443 57.7377ZM-23.9075 22.9884L39.29 -17.9178L83.4927 1.04697L71.1376 100.556L-24.7057 71.081L-23.9075 22.9884Z'
         fill='white'
         stroke='white'
         strokeWidth='2'