From 3a19106ddf04ab4c98921ffa64f0bdbfd8598ebc Mon Sep 17 00:00:00 2001
From: Saksham Gupta <90046016+0xSaksham@users.noreply.github.com>
Date: Wed, 28 Aug 2024 16:52:35 +0530
Subject: [PATCH] ui(sweep): add cooking pot sprite (#825)

---
 public/sprite.svg                   | 36 +++++++++++++++++
 src/components/ScheduleProgress.tsx | 60 +++++++++++++++--------------
 2 files changed, 68 insertions(+), 28 deletions(-)

diff --git a/public/sprite.svg b/public/sprite.svg
index 61caf4245..7149a30b5 100644
--- a/public/sprite.svg
+++ b/public/sprite.svg
@@ -367,4 +367,40 @@
     <symbol id="unmixed" fill="none" viewBox="0 0 24 24" stroke="currentColor">
         <path stroke-linecap="round" stroke-linejoin="round" d="M18 17.5H5M15.602 21L19 17.5 15.602 14M18 6.5H5M15.602 10L19 6.5 15.602 3"></path>
     </symbol>
+    <symbol id="jampot" fill="none" viewBox="0 0 156 117">
+      <path stroke="currentColor" stroke-width="2" d="M138 50.531h10.75a5.25 5.25 0 0 0 0-10.5H138v59c0 8.837-7.163 16-16 16H34c-8.837 0-16-7.163-16-16v-59H7.25a5.25 5.25 0 1 0 0 10.5H18"/>
+      <mask id="a" width="115" height="53" x="22" y="60" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+        <path fill="currentColor" d="M80 73.38c-35.735-27.017-58-3.142-58-3.142v30s.5 5.5 4 8.5 10 4 10 4h85.5s9-1 12-4 3-8.5 3-8.5v-21S115.735 100.4 80 73.381Z"/>
+      </mask>
+      <g mask="url(#a)">
+        <rect width="2" height="71.321" x="123.198" y="57.903" fill="currentColor" rx="1" transform="rotate(45 123.198 57.903)"/>
+        <rect width="2" height="71.293" x="116.132" y="57.898" fill="currentColor" rx="1" transform="rotate(45 116.132 57.898)"/>
+        <rect width="2" height="71.293" x="109.067" y="57.894" fill="currentColor" rx="1" transform="rotate(45 109.067 57.894)"/>
+        <rect width="2" height="15.127" x="132.991" y="97.608" fill="currentColor" rx="1" transform="rotate(45 132.991 97.608)"/>
+        <rect width="2" height="71.311" x="101.992" y="57.897" fill="currentColor" rx="1" transform="rotate(45 101.992 57.897)"/>
+        <rect width="2" height="25.18" x="133.021" y="90.507" fill="currentColor" rx="1" transform="rotate(45 133.021 90.507)"/>
+        <rect width="2" height="71.311" x="94.925" y="57.893" fill="currentColor" rx="1" transform="rotate(45 94.925 57.893)"/>
+        <rect width="2" height="35.115" x="132.954" y="83.503" fill="currentColor" rx="1" transform="rotate(45 132.954 83.503)"/>
+        <rect width="2" height="71.283" x="87.853" y="57.895" fill="currentColor" rx="1" transform="rotate(45 87.853 57.895)"/>
+        <rect width="2" height="45.17" x="133.003" y="76.382" fill="currentColor" rx="1" transform="rotate(45 133.003 76.382)"/>
+        <rect width="2" height="71.335" x="80.817" y="57.856" fill="currentColor" rx="1" transform="rotate(45 80.817 57.856)"/>
+        <rect width="2" height="55.138" x="132.996" y="69.32" fill="currentColor" rx="1" transform="rotate(45 132.996 69.32)"/>
+        <rect width="2" height="68.395" x="73.703" y="57.902" fill="currentColor" rx="1" transform="rotate(45 73.703 57.902)"/>
+        <rect width="2" height="65.204" x="133.006" y="62.238" fill="currentColor" rx="1" transform="rotate(45 133.006 62.238)"/>
+        <rect width="2" height="60.874" x="66.631" y="57.9" fill="currentColor" rx="1" transform="rotate(45 66.631 57.9)"/>
+        <rect width="2" height="71.338" x="130.298" y="57.875" fill="currentColor" rx="1" transform="rotate(45 130.298 57.875)"/>
+        <rect width="2" height="50.905" x="59.574" y="57.889" fill="currentColor" rx="1" transform="rotate(45 59.574 57.889)"/>
+        <rect width="2" height="40.939" x="52.518" y="57.873" fill="currentColor" rx="1" transform="rotate(45 52.518 57.873)"/>
+        <rect width="2" height="30.945" x="45.422" y="57.897" fill="currentColor" rx="1" transform="rotate(45 45.422 57.897)"/>
+        <rect width="2" height="20.912" x="38.359" y="57.89" fill="currentColor" rx="1" transform="rotate(45 38.36 57.89)"/>
+        <rect width="2" height="10.869" x="31.268" y="57.909" fill="currentColor" rx="1" transform="rotate(45 31.268 57.91)"/>
+      </g>
+      <mask id="b" width="126" height="76" x="22" y="12" maskUnits="userSpaceOnUse" style="mask-type:alpha">
+        <path fill="currentColor" d="M80 73.381c-35.735-27.018-58-3.143-58-3.143V40c88.722 0 62.764-23 124.5-27 4.5-.291-7.001 46.986-10 66.238 0 0-20.765 21.161-56.5-5.857Z"/>
+      </mask>
+      <g mask="url(#b)">
+        <rect width="3" height="83.725" x="142.897" y="13.817" fill="currentColor" rx="1.5" transform="rotate(20.732 142.897 13.817)"/>
+      </g>
+      <path fill="currentColor" fill-rule="evenodd" d="M67.953 17.895a6.052 6.052 0 0 1 5.238-5.623l6.339-.848a6.058 6.058 0 0 1 6.535 4.045l-18.112 2.426Zm-2.01.27a8.051 8.051 0 0 1 6.982-7.875l6.339-.848a8.059 8.059 0 0 1 8.812 5.757l37.292-4.995a11.954 11.954 0 0 1 13.449 10.305l.169 1.29a1.005 1.005 0 0 1-.862 1.124L19.198 38.853a.996.996 0 0 1-1.121-.858l-.169-1.29c-.858-6.57 3.77-12.611 10.34-13.491l37.694-5.05ZM19.89 36.44c-.716-5.476 3.142-10.51 8.616-11.243l97.121-13.01a9.961 9.961 0 0 1 11.207 8.588l.039.297L19.93 36.738l-.04-.298Z" clip-rule="evenodd"/>
+    </symbol>
 </svg>
diff --git a/src/components/ScheduleProgress.tsx b/src/components/ScheduleProgress.tsx
index 1c992ce38..c8e5f8f0e 100644
--- 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>
   )
 }