fix: timer border

lfglabs-dev · Aug 11, 2023 · e06be27 · e06be27
1 parent e2ed8d6
commit e06be27
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 31 deletions.
diff --git a/components/quests/timer.tsx b/components/quests/timer.tsx
@@ -25,27 +25,30 @@ const Timer: FunctionComponent<TimerProps> = ({ expiry, fixed = true }) => {
   const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000);
 
   return (
-    <div className={`${fixed ? `${styles.timerFixed}` : `${styles.timer}`}`}>
-      <div className={styles.title}>Expires in</div>
-      <div className={styles.categories}>
-        <div>days</div>
-        <div>hours</div>
-        <div>minutes</div>
-        <div>seconds</div>
-      </div>
-      <div className={styles.dates}>
-        <div>
-          <span className={styles.day}>{days}</span>:
-        </div>
-        <div>
-          <span className={styles.hour}>{hours}</span>:
+    <>
+      {fixed ? <div className={styles.timerBackground} /> : null}
+      <div className={`${fixed ? `${styles.timerFixed}` : `${styles.timer}`}`}>
+        <div className={styles.title}>Expires in</div>
+        <div className={styles.categories}>
+          <div>days</div>
+          <div>hours</div>
+          <div>minutes</div>
+          <div>seconds</div>
         </div>
-        <div>
-          <span className={styles.minute}>{minutes}</span>:
+        <div className={styles.dates}>
+          <div>
+            <span className={styles.day}>{days}</span>:
+          </div>
+          <div>
+            <span className={styles.hour}>{hours}</span>:
+          </div>
+          <div>
+            <span className={styles.minute}>{minutes}</span>:
+          </div>
+          <div className={styles.second}>{seconds}</div>
         </div>
-        <div className={styles.second}>{seconds}</div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/styles/components/timer.module.css b/styles/components/timer.module.css
@@ -44,19 +44,7 @@
     z-index: -1;
   }
 
-.timerFixed::after {
-    content: "";
-    position: absolute;
-    border-radius: 8px;
-    z-index: -1;
-    top: -10px;
-    right: -10px;
-    left: 0;
-    bottom: 0;
-    background: linear-gradient(5deg, var(--background) 98%, transparent);
-}
-
-.timer::before, .timerFixed::before {
+.timer::before {
     content: "";
     position: absolute;
     top: -1px;
@@ -73,6 +61,24 @@
     );
     border-radius: 8px;
     z-index: -1;
+  } 
+
+  .timerBackground {
+    position: absolute;
+    right: 23px;
+    bottom: 25px;
+    border-radius: 8px;
+    background: linear-gradient(
+      90deg,
+      #437aba 0%,
+      #59c2e8 45%,
+      #00ff77 60%,
+      #59c2e8 70%,
+      #437aba50 100%
+    );
+    width: 298px;
+    height: 84px;
+    mask: linear-gradient(3deg, transparent 80%, black);
   }
 
 .title {