Brogress bar UI

packages/contracts/diamondABI/localAddresses.json

@@ -1 +1 @@
-{"diamondAddress":"0x8f86403A4DE0BB5791fa46B8e795C547942fE4Cf","dathleteFacetAddress":"0xf5059a5D33d5853360D16C683c16e67980206f36","challengesFacetAddress":"0x95401dc811bb5740090279Ba06cfA8fcF6113778","challengeTransferFacet":"0x998abeb3E57409262aE5b751f60747921B33613E","daoFacetAddress":"0x70e0bA845a1A0F2DA3359C97E0285013525FFC49","shopFacetAddress":"0x4826533B4897376654Bb4d4AD88B7faFD0C98528","prtcleAddress":"0xB5d592f85ab2D955c25720EbE6FF8D4d1E1Be300"}
+{"diamondAddress":"0x9d4454B023096f34B160D6B654540c56A1F81688","dathleteFacetAddress":"0x95401dc811bb5740090279Ba06cfA8fcF6113778","challengesFacetAddress":"0x998abeb3E57409262aE5b751f60747921B33613E","challengeTransferFacet":"0x70e0bA845a1A0F2DA3359C97E0285013525FFC49","daoFacetAddress":"0x4826533B4897376654Bb4d4AD88B7faFD0C98528","shopFacetAddress":"0x99bbA657f2BbC93c02D617f8bA121cB8Fc104Acf","prtcleAddress":"0xB5d592f85ab2D955c25720EbE6FF8D4d1E1Be300"}

packages/web/components/UI/ProgressBar.js

@@ -6,83 +6,32 @@ import { mdiCheckBold } from '@mdi/js';
 
 export const ProgressBar = ({ progressLabels, index }) => {
   return (
-    <Container>
-      <Row>
+    <div className="w-full max-w-3xl bg-slate-500/50 rounded-full overflow-hidden">
+      <div className="flex row justify-around ">
         {progressLabels.map((item, itemIndex) => (
-          <ItemContainer key={item}>
-            <DotContainer>
-              <Dot />
-              {index === itemIndex && <DotFill />}
-              {index > itemIndex && (
-                <IconFrame path={mdiCheckBold} size={5} color={'cyan'} />
+          <div
+            className={`flex items-center justify-center flex-1 py-4 pointer-events-none ${
+              index === itemIndex && 'bg-sky-500 rounded-full shadow-xl'
+            } 
+            `}
+            key={item}
+          >
+            <div className="">
+              {index > itemIndex ? (
+                <Icon
+                  className="m-auto"
+                  path={mdiCheckBold}
+                  size={3}
+                  color={'cyan'}
+                />
+              ) : (
+                <p className="text-3xl font-bold">{item}</p>
               )}
-            </DotContainer>
-
-            <Label>{item}</Label>
-          </ItemContainer>
+            </div>
+          </div>
         ))}
-      </Row>
-      <Divider />
-    </Container>
+      </div>
+      <div />
+    </div>
   );
-};
-
-const Container = styled.div`
-  /* display: flex; */
-  margin-bottom: 6%;
-`;
-
-const Row = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-`;
-
-const ItemContainer = styled.div`
-  display: flex;
-  align-items: center;
-  flex: 1;
-`;
-
-const DotContainer = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-
-const Dot = styled.div`
-  width: 22px;
-  height: 22px;
-  border-radius: 20px;
-  background-color: white;
-`;
-
-const DotFill = styled.div`
-  width: 16px;
-  height: 16px;
-  border-radius: 20px;
-  background-color: cyan;
-  position: absolute;
-`;
-
-const Label = styled.p`
-  color: white;
-  font-size: 16px;
-`;
-
-const IconFrame = styled(Icon)`
-  position: absolute;
-  top: -8px;
-  left: 0px;
-`;
-
-const Divider = styled.div`
-  display: flex;
-  height: 2px;
-  width: 66.666%;
-  background-color: whitesmoke;
-  position: absolute;
-  top: 11px;
-  align-self: center;
-  z-index: -1;
-`;
+};

packages/web/pages/mint.js

@@ -10,7 +10,7 @@ import diamondABI from '../../contracts/diamondABI/diamond.json';
 import dynamic from 'next/dynamic';
 import { Formik, Form, Field } from 'formik';
 import Player from 'react-player';
-import ChallengeTypeScreen from '/components/create/ChallengeTypeScreen';
+import ChallengeTypeScreen from '/components/mint/ChallengeTypeScreen';
 import { ProgressBar } from '/components/UI';
 import { utils } from 'ethers';
 import { calculateGasMargin, GAS_MARGIN } from '../utils';