static cooking pot

joinmarket-webui · Aug 27, 2024 · 9559527 · 9559527
1 parent 768b03c
commit 9559527
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 5 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
diff --git a/src/components/ScheduleProgress.module.css b/src/components/ScheduleProgress.module.css
@@ -110,13 +110,33 @@
   border-radius: 0 var(--progress-bar-corner-radius) var(--progress-bar-corner-radius) 0;
 }
 
+.jamPot-container {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.jam-pot {
+  width: 157px;
+  height: 120px;
+  margin: 1rem auto;
+}
+
+.text {
+  margin: 0 auto;
+}
+
 @keyframes pulse {
   0% {
     box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.4);
   }
+
   70% {
     box-shadow: 0 0 0 10px rgba(39, 174, 96, 0);
   }
+
   100% {
     box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
   }
@@ -126,6 +146,7 @@
   0% {
     width: 0%;
   }
+
   100% {
     width: 100%;
   }

diff --git a/src/components/ScheduleProgress.tsx b/src/components/ScheduleProgress.tsx
@@ -2,6 +2,7 @@ import * as rb from 'react-bootstrap'
 import { Trans, useTranslation } from 'react-i18next'
 import styles from './ScheduleProgress.module.css'
 import { Schedule } from '../context/ServiceInfoContext'
+import Sprite from './Sprite'
 
 const scheduleToSteps = (schedule: Schedule) => {
   // Example Schedule:
@@ -119,12 +120,10 @@ const ScheduleProgress = ({ schedule }: ScheduleProgressProps) => {
         </p>
         <p className="text-secondary text-small">{t('scheduler.progress_description')}</p>
       </div>
-      <div className={styles['schedule-progress']}>
-        <div className={styles['progress-container']}>
-          <div className={styles['progress-track']}></div>
-          {stepsJsx}
-        </div>
+      <div className={styles['jamPot-container']}>
+        <Sprite symbol="jampot" width={156} />
       </div>
+
       <div className={[styles.text, 'text-secondary'].join(' ')}>
         <div>
           {steps.completedTxs < steps.txs.length ? (
@@ -165,6 +164,13 @@ const ScheduleProgress = ({ schedule }: ScheduleProgressProps) => {
           )}
         </div>
       </div>
+
+      <div className={styles['schedule-progress']}>
+        <div className={styles['progress-container']}>
+          <div className={styles['progress-track']}></div>
+          {stepsJsx}
+        </div>
+      </div>
     </div>
   )
 }