(ui):Added Cooking Pot Svg and cooking time

joinmarket-webui · Jul 8, 2024 · c950d39 · c950d39
1 parent 4a5bf20
commit c950d39
Show file tree

Hide file tree

Showing 4 changed files with 224 additions and 1 deletion.
diff --git a/src/components/JamPotSvg.module.css b/src/components/JamPotSvg.module.css
@@ -0,0 +1,31 @@
+.jamPot {
+  margin: 1rem;
+  width: 9.688rem;
+  /*155px */
+  height: 7.813rem;
+  /*125px */
+}
+
+.cooking-time-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+}
+
+.clock-svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  margin-right: 0.5rem;
+}
+
+.cooking-time {
+  font-size: 1rem;
+  font-weight: 500;
+  color: #4a4a4a;
+}
+
+.paragraph {
+  margin-bottom: 0;
+  text-align: center;
+}
diff --git a/src/components/JamPotSvg.tsx b/src/components/JamPotSvg.tsx
@@ -0,0 +1,175 @@
+import { SVGProps } from 'react'
+import style from './JamPotSvg.module.css'
+import Sprite from './Sprite'
+
+export const JamPotSvg = (props: SVGProps<SVGSVGElement>) => (
+  <>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" {...props} className={style['jamPot']}>
+      <path
+        stroke="#fff"
+        strokeWidth={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={{
+          maskType: 'alpha',
+        }}
+      >
+        <path
+          fill="#fff"
+          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="#fff"
+          rx={1}
+          transform="rotate(45 123.198 57.903)"
+        />
+        <rect
+          width={2}
+          height={71.293}
+          x={116.132}
+          y={57.898}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 116.132 57.898)"
+        />
+        <rect
+          width={2}
+          height={71.293}
+          x={109.067}
+          y={57.894}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 109.067 57.894)"
+        />
+        <rect
+          width={2}
+          height={15.127}
+          x={132.991}
+          y={97.608}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 132.991 97.608)"
+        />
+        <rect
+          width={2}
+          height={71.311}
+          x={101.992}
+          y={57.897}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 101.992 57.897)"
+        />
+        <rect
+          width={2}
+          height={25.18}
+          x={133.021}
+          y={90.507}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 133.021 90.507)"
+        />
+        <rect width={2} height={71.311} x={94.925} y={57.893} fill="#fff" rx={1} transform="rotate(45 94.925 57.893)" />
+        <rect
+          width={2}
+          height={35.115}
+          x={132.954}
+          y={83.503}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 132.954 83.503)"
+        />
+        <rect width={2} height={71.283} x={87.853} y={57.895} fill="#fff" rx={1} transform="rotate(45 87.853 57.895)" />
+        <rect
+          width={2}
+          height={45.17}
+          x={133.003}
+          y={76.382}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 133.003 76.382)"
+        />
+        <rect width={2} height={71.335} x={80.817} y={57.856} fill="#fff" rx={1} transform="rotate(45 80.817 57.856)" />
+        <rect width={2} height={55.138} x={132.996} y={69.32} fill="#fff" rx={1} transform="rotate(45 132.996 69.32)" />
+        <rect width={2} height={68.395} x={73.703} y={57.902} fill="#fff" rx={1} transform="rotate(45 73.703 57.902)" />
+        <rect
+          width={2}
+          height={65.204}
+          x={133.006}
+          y={62.238}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 133.006 62.238)"
+        />
+        <rect width={2} height={60.874} x={66.631} y={57.9} fill="#fff" rx={1} transform="rotate(45 66.631 57.9)" />
+        <rect
+          width={2}
+          height={71.338}
+          x={130.298}
+          y={57.875}
+          fill="#fff"
+          rx={1}
+          transform="rotate(45 130.298 57.875)"
+        />
+        <rect width={2} height={50.905} x={59.574} y={57.889} fill="#fff" rx={1} transform="rotate(45 59.574 57.889)" />
+        <rect width={2} height={40.939} x={52.518} y={57.873} fill="#fff" rx={1} transform="rotate(45 52.518 57.873)" />
+        <rect width={2} height={30.945} x={45.422} y={57.897} fill="#fff" rx={1} transform="rotate(45 45.422 57.897)" />
+        <rect width={2} height={20.912} x={38.359} y={57.89} fill="#fff" rx={1} transform="rotate(45 38.36 57.89)" />
+        <rect width={2} height={10.869} x={31.268} y={57.909} fill="#fff" rx={1} transform="rotate(45 31.268 57.91)" />
+      </g>
+      <mask
+        id="b"
+        width={126}
+        height={76}
+        x={22}
+        y={12}
+        maskUnits="userSpaceOnUse"
+        style={{
+          maskType: 'alpha',
+        }}
+      >
+        <path
+          fill="#fff"
+          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="#fff"
+          rx={1.5}
+          transform="rotate(20.732 142.897 13.817)"
+        />
+      </g>
+      <path
+        fill="#fff"
+        fillRule="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"
+        clipRule="evenodd"
+      />
+    </svg>
+
+    <div className={style['cooking-time-div']}>
+      <Sprite symbol="clock" className={style['clock-svg']} />
+      <div className={style['cooking-time']}>
+        <p className={style['paragraph']}>Cooking Time</p>
+        <p className={style['paragraph']}></p>
+      </div>
+    </div>
+  </>
+)
diff --git a/src/components/ScheduleProgress.module.css b/src/components/ScheduleProgress.module.css
@@ -28,7 +28,8 @@
   width: 100%;
   height: var(--progress-bar-height);
   background-color: var(--progress-track-color);
-  border-radius: var(--progress-bar-corner-radius);
+  /* border-radius: var(--progress-bar-corner-radius); */
+  border-radius: 25%;
   z-index: -1;
   top: 0rem;
 }
@@ -110,13 +111,24 @@
   border-radius: 0 var(--progress-bar-corner-radius) var(--progress-bar-corner-radius) 0;
 }
 
+.jamPot {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
 @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 +138,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 { JamPotSvg } from './JamPotSvg'
 
 const scheduleToSteps = (schedule: Schedule) => {
   // Example Schedule:
@@ -119,6 +120,9 @@ const ScheduleProgress = ({ schedule }: ScheduleProgressProps) => {
         </p>
         <p className="text-secondary text-small">{t('scheduler.progress_description')}</p>
       </div>
+      <div className={styles['jamPot']}>
+        <JamPotSvg />
+      </div>
       <div className={styles['schedule-progress']}>
         <div className={styles['progress-container']}>
           <div className={styles['progress-track']}></div>