fix: progress bar ui

JoinColony · May 28, 2024 · 9eea0e7 · 9eea0e7
1 parent ec31489
commit 9eea0e7
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 42 deletions.
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
@@ -69,26 +69,30 @@ const RevealStep: FC<RevealStepProps> = ({
         status: StatusTypes.Info,
         iconAlignment: 'top',
         textClassName: 'w-full',
+        children: (
+          <p className="text-gray-900 text-4">
+            {formatText({ id: 'motion.revealStep.statusText' })}
+          </p>
+        ),
         content: (
           <>
-            <p className="text-gray-900 text-4">
-              {formatText({ id: 'motion.revealStep.statusText' })}
-            </p>
-            <ProgressBar
-              className="mt-2"
-              progress={revealProgress}
-              labelClassName="!text-xs"
-              progressLabel={formatText(
-                {
-                  id: 'motion.revealStep.votesRevealed',
-                },
-                {
-                  votes: revealProgress,
-                },
-              )}
-              max={totalVoters}
-              isTall
-            />
+            <div className="ml-[1.375rem] mt-1">
+              <ProgressBar
+                className="mt-2"
+                progress={revealProgress}
+                labelClassName="!text-xs"
+                progressLabel={formatText(
+                  {
+                    id: 'motion.revealStep.votesRevealed',
+                  },
+                  {
+                    votes: revealProgress,
+                  },
+                )}
+                max={totalVoters}
+                isTall
+              />
+            </div>
             {!revealPhaseEnded && canInteract && (
               <StatusText
                 status={StatusTypes.Warning}

diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
@@ -67,32 +67,32 @@ const VotingStep: FC<VotingStepProps> = ({
       statusTextSectionProps={{
         status: StatusTypes.Info,
         textClassName: 'text-4 text-gray-900 w-full',
+        children: (
+          <p className="text-4">
+            {formatText(
+              { id: 'motion.votingStep.statusText' },
+              { thresholdPercent },
+            )}
+          </p>
+        ),
         content: (
-          <>
-            <p className="text-4">
-              {formatText(
-                { id: 'motion.votingStep.statusText' },
-                { thresholdPercent },
+          <div className="ml-[1.375rem] mt-1">
+            <ProgressBar
+              className="mt-2"
+              progress={currentReputationPercent}
+              threshold={thresholdPercent}
+              labelClassName="!text-xs"
+              progressLabel={formatText(
+                {
+                  id: 'motion.votingStep.additionalText',
+                },
+                {
+                  progress: currentReputationPercent,
+                },
               )}
-            </p>
-            <div className="ml-[1.375rem] mt-1">
-              <ProgressBar
-                className="mt-2"
-                progress={currentReputationPercent}
-                threshold={thresholdPercent}
-                labelClassName="!text-xs"
-                progressLabel={formatText(
-                  {
-                    id: 'motion.votingStep.additionalText',
-                  },
-                  {
-                    progress: currentReputationPercent,
-                  },
-                )}
-                isTall
-              />
-            </div>
-          </>
+              isTall
+            />
+          </div>
         ),
         iconAlignment: 'top',
       }}