Update UI for screenshotted progress modal

dappforce · Feb 16, 2024 · c3bb878 · c3bb878
1 parent f31a611
commit c3bb878
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/public/images/creators/diamonds/diamond-right.svg b/public/images/creators/diamonds/diamond-right.svg
diff --git a/public/images/creators/diamonds/diamond-top-left.svg b/public/images/creators/diamonds/diamond-top-left.svg
diff --git a/src/components/leaderboard/ProgressModal.module.sass b/src/components/leaderboard/ProgressModal.module.sass
@@ -34,11 +34,11 @@
   .Content
     overflow: visible !important
 
-  .OutsideDiamondLeft
+  .OutsideDiamondRight
     position: absolute
-    top: -15px
-    left: 0px
-    width: 70px
+    top: 0px
+    right: 0px
+    width: 80px
 
   .ProgressModalContent
     border-radius: $border_radius_huge
@@ -81,11 +81,11 @@
           transform: translate(35%, -50%) rotate(20deg)
 
 .MutedText
-  color: rgba(255, 255, 255, 0.75)
+  color: rgba(255, 255, 255, 0.86)
 
 .GhostButton
-  border-color: rgba(255, 255, 255, .75)
-  color: rgba(255, 255, 255, .75)
+  border-color: rgba(255, 255, 255, .86)
+  color: rgba(255, 255, 255, .86)
   &:hover, &:focus
     border-color: white !important
     color: white !important

diff --git a/src/components/leaderboard/ProgressModal.tsx b/src/components/leaderboard/ProgressModal.tsx
@@ -185,8 +185,8 @@ function InnerProgressModal() {
             style={{ paddingTop: '2.6rem', paddingBottom: '3rem' }}
           >
             <img
-              src='/images/creators/diamonds/diamond-top-left.svg'
-              className={clsx(styles.OutsideDiamondLeft)}
+              src='/images/creators/diamonds/diamond-right.svg'
+              className={clsx(styles.OutsideDiamondRight)}
             />
             <div style={{ maxWidth: '410px', margin: '0 auto' }}>
               <ProgressPanel forPostImage hasAvatarLoaded={hasAvatarLoaded} />
@@ -409,11 +409,13 @@ function RewardCard({
 }) {
   return (
     <div className={clsx(styles.RewardCard)}>
-      <DfImage
-        preview={false}
-        src='/images/creators/diamonds/diamond.png'
-        className={clsx(styles.Diamond, forPostImage && styles.DiamondRight)}
-      />
+      {!forPostImage && (
+        <DfImage
+          preview={false}
+          src='/images/creators/diamonds/diamond.png'
+          className={clsx(styles.Diamond)}
+        />
+      )}
       <div className={clsx('d-flex align-items-center w-100')}>
         {contents.map(({ title, content }) => (
           <div className={styles.RewardCardContent} style={{ flex: '1' }} key={title}>