ui(sweep): add cooking pot sprite (#825)

joinmarket-webui · Aug 28, 2024 · 3a19106 · 3a19106
1 parent 768b03c
commit 3a19106
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 28 deletions.
diff --git a/public/sprite.svg b/public/sprite.svg
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,37 +120,33 @@ 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="d-flex justify-content-center">
+        <Sprite symbol="jampot" width="180" />
       </div>
-      <div className={[styles.text, 'text-secondary'].join(' ')}>
+
+      <div className="d-flex justify-content-center text-secondary">
         <div>
           {steps.completedTxs < steps.txs.length ? (
-            <>
-              <div>
-                <rb.Spinner
-                  as="span"
-                  animation="border"
-                  size="sm"
-                  role="status"
-                  aria-hidden="true"
-                  className="ms-1 me-2"
-                />
-                <Trans
-                  i18nKey="scheduler.progress_current_state"
-                  values={{
-                    current: steps.completedTxs + 1,
-                    total: steps.txs.length,
-                  }}
-                >
-                  Waiting for transaction <strong>current</strong> of
-                  <strong>total</strong> to process...
-                </Trans>
-              </div>
-            </>
+            <div>
+              <rb.Spinner
+                as="span"
+                animation="border"
+                size="sm"
+                role="status"
+                aria-hidden="true"
+                className="ms-1 me-2"
+              />
+              <Trans
+                i18nKey="scheduler.progress_current_state"
+                values={{
+                  current: steps.completedTxs + 1,
+                  total: steps.txs.length,
+                }}
+              >
+                Waiting for transaction <strong>current</strong> of
+                <strong>total</strong> to process...
+              </Trans>
+            </div>
           ) : (
             <div>
               <rb.Spinner
@@ -165,6 +162,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>
   )
 }