From c3bb8780f30bfd66d5f8cfb1de704869bb566192 Mon Sep 17 00:00:00 2001
From: teodorus-nathaniel <nathankurnia26@gmail.com>
Date: Fri, 16 Feb 2024 23:51:28 +0700
Subject: [PATCH] Update UI for screenshotted progress modal

---
 .../images/creators/diamonds/diamond-right.svg   |  4 ++--
 .../creators/diamonds/diamond-top-left.svg       |  3 ---
 .../leaderboard/ProgressModal.module.sass        | 14 +++++++-------
 src/components/leaderboard/ProgressModal.tsx     | 16 +++++++++-------
 4 files changed, 18 insertions(+), 19 deletions(-)
 delete mode 100644 public/images/creators/diamonds/diamond-top-left.svg

diff --git a/public/images/creators/diamonds/diamond-right.svg b/public/images/creators/diamonds/diamond-right.svg
index 262873b21..5fccdf77f 100644
--- a/public/images/creators/diamonds/diamond-right.svg
+++ b/public/images/creators/diamonds/diamond-right.svg
@@ -1,3 +1,3 @@
-<svg width="55" height="73" viewBox="0 0 55 73" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.1" d="M16.1694 13.6636L15.6449 13.7594L15.4321 14.2483L8.98165 29.0743L8.23345 30.7939L10.0783 30.457L18.7074 28.8807L19.2319 28.7849L19.4447 28.296L25.8952 13.47L26.6434 11.7503L24.7985 12.0873L16.1694 13.6636ZM32.7875 10.628L32.2629 10.7238L32.0502 11.2128L25.5997 26.0387L24.8515 27.7584L26.6963 27.4214L47.512 23.6191L49.3568 23.2821L48.049 21.938L36.7736 10.35L36.4017 9.96783L35.8772 10.0636L32.7875 10.628ZM43.8661 8.60434L42.0213 8.94133L43.3291 10.2854L54.6045 21.8735L54.9764 22.2557L55.5009 22.1598L64.13 20.5836L65.9749 20.2466L64.667 18.9025L53.3916 7.31446L53.0198 6.9323L52.4952 7.02811L43.8661 8.60434ZM65.1399 26.8597L66.2002 24.9962L64.091 25.3815L56.7092 26.7299L56.0774 26.8453L55.9195 27.4677L50.5977 48.4458L52.4361 49.1863L65.1399 26.8597ZM41.8846 56.7512L43.1362 58.5428L43.6736 56.4244L50.5565 29.2933L50.9394 27.7838L49.4075 28.0636L26.4945 32.249L24.9626 32.5289L25.8545 33.8054L41.8846 56.7512ZM20.1923 33.9938L19.8246 33.4674L19.1929 33.5828L11.811 34.9312L9.70178 35.3165L11.3525 36.6848L31.129 53.0783L32.587 51.7357L20.1923 33.9938ZM12.2896 9.58151L54.6813 1.83805L73.7049 21.3892L45.4274 71.0861L1.4065 34.5955L12.2896 9.58151Z" fill="white" stroke="white" stroke-width="2"/>
+<svg width="62" height="66" viewBox="0 0 62 66" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path opacity="0.15" d="M30.9792 -8.30901L30.5376 -8.60794L30.0434 -8.40788L12.3238 -1.23542L10.5855 -0.531768L12.1384 0.5196L20.7265 6.33378L21.168 6.63271L21.6623 6.43264L39.3818 -0.739812L41.1202 -1.44346L39.5673 -2.49483L30.9792 -8.30901ZM47.5182 2.88804L47.0767 2.5891L46.5824 2.78917L28.8629 9.96163L27.1245 10.6653L28.6775 11.7166L49.3941 25.742L50.9471 26.7934L50.9547 24.918L51.0327 5.80202L51.0348 5.2688L50.5933 4.96986L47.5182 2.88804ZM58.5443 10.3527L56.9913 9.30137L56.9836 11.1767L56.9057 30.2927L56.9036 30.8259L57.3451 31.1249L65.9332 36.939L67.4861 37.9904L67.4938 36.115L67.5717 16.9991L67.5739 16.4658L67.1323 16.1669L58.5443 10.3527ZM61.4369 43.0479L63.4989 42.4602L61.7234 41.2581L54.3766 36.2843L53.8449 35.9243L53.2963 36.2581L31.4356 49.5574L32.2294 51.3735L61.4369 43.0479ZM17.2902 49.2275L16.929 51.383L18.7961 50.2471L47.0688 33.0469L48.3992 32.2375L47.1097 31.3645L24.3057 15.926L23.0161 15.053L22.7588 16.5889L17.2902 49.2275ZM17.4643 11.9996L17.5704 11.3662L17.0387 11.0062L9.69189 6.03241L7.91642 4.8304L8.13657 6.96316L11.2549 37.1736L13.2359 37.2361L17.4643 11.9996ZM31.2083 -15.323L73.5595 13.349L73.4271 45.8353L8.07279 64.4644L1.09515 -3.13392L31.2083 -15.323Z" fill="white" stroke="white" stroke-width="2"/>
 </svg>
diff --git a/public/images/creators/diamonds/diamond-top-left.svg b/public/images/creators/diamonds/diamond-top-left.svg
deleted file mode 100644
index b49695ab3..000000000
--- a/public/images/creators/diamonds/diamond-top-left.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg width="85" height="102" viewBox="0 0 85 102" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path opacity="0.15" 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" stroke-width="2"/>
-</svg>
diff --git a/src/components/leaderboard/ProgressModal.module.sass b/src/components/leaderboard/ProgressModal.module.sass
index 53b555a72..becd56e98 100644
--- 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
index ffae78350..6e9d6c887 100644
--- 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}>