From 67672408977d28cf42e66876e78b2a4c88c5894c Mon Sep 17 00:00:00 2001
From: Joanna <joanna.dyszkiewicz@pagepro.pl>
Date: Wed, 3 Apr 2024 15:40:04 +0200
Subject: [PATCH] fix: styles update

fix: icon color, tooltips, outcome step

fix: style fixes

fix: types

fix: progress bar fonts, button margin

fix: removed not needed ifs

fix: margin

reverse config

bar width, reputation on mobile, scroll

fix: timer position, avatar shrink

reverse config
---
 package-lock.json                             | 15 +++
 package.json                                  |  1 +
 .../UserHubButton/UserHubButton.tsx           |  5 +-
 .../MemberReputation/MemberReputation.tsx     |  4 +-
 .../shared/Extensions/Tooltip/Tooltip.tsx     |  2 +
 .../shared/Extensions/Tooltip/types.ts        |  1 +
 .../partials/PermissionSidebar.tsx            |  2 +-
 .../ExitRecoveryStep/ExitRecoveryStep.tsx     | 39 ++++----
 .../steps/FinalizeStep/FinalizeStep.tsx       |  2 +-
 .../Motions/steps/OutcomeStep/OutcomeStep.tsx | 10 +-
 .../Motions/steps/OutcomeStep/hooks.ts        | 49 ++++++++++
 .../partials/VoteStatuses/VoteStatuses.tsx    | 16 ++--
 .../Motions/steps/RevealStep/RevealStep.tsx   | 94 +++++++++++--------
 .../Motions/steps/StakingStep/StakingStep.tsx | 10 +-
 .../Motions/steps/VotingStep/VotingStep.tsx   | 75 +++++++++------
 .../Motions/steps/VotingStep/hooks.tsx        |  1 +
 .../partials/ProgressContent.tsx              |  2 +-
 .../v5/common/ObjectiveBox/ObjectiveBox.tsx   |  5 +-
 .../partials/Objective/Objective.tsx          |  3 +-
 .../MenuWithSections/MenuWithSections.tsx     | 13 +--
 .../v5/shared/MenuWithSections/types.ts       |  2 -
 .../MenuWithStatusText/MenuWithStatusText.tsx | 10 +-
 .../v5/shared/ProgressBar/ProgressBar.tsx     | 19 ++--
 src/components/v5/shared/ProgressBar/types.ts |  3 +-
 .../v5/shared/StatusText/StatusText.tsx       |  9 +-
 src/components/v5/shared/Stepper/Stepper.tsx  | 32 ++++++-
 .../partials/StepperButton/StepperButton.tsx  | 14 ++-
 src/i18n/en.json                              |  5 +-
 src/stories/shared/ProgressBar.stories.tsx    | 14 ---
 29 files changed, 292 insertions(+), 165 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f6bcbf134f3..0748e976882 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -75,6 +75,7 @@
         "react-dropzone": "^14.2.1",
         "react-helmet-async": "^2.0.3",
         "react-hook-form": "^7.45.2",
+        "react-intersection-observer": "^9.8.2",
         "react-intl": "^6.6.1",
         "react-modal": "^3.15.1",
         "react-popper": "^2.3.0",
@@ -45430,6 +45431,20 @@
         "react": "^16.8.0 || ^17 || ^18"
       }
     },
+    "node_modules/react-intersection-observer": {
+      "version": "9.8.2",
+      "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-9.8.2.tgz",
+      "integrity": "sha512-901naEiiZmse3p+AmtbQ3NL9xx+gQ8TXLiGDc+8GiE3JKJkNV3vP737aGuWTAXBA+1QqxPrDDE+fIEgYpGDlrQ==",
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-intl": {
       "version": "6.6.1",
       "license": "BSD-3-Clause",
diff --git a/package.json b/package.json
index 074b1f54739..f5e5ec1b1ef 100644
--- a/package.json
+++ b/package.json
@@ -205,6 +205,7 @@
     "react-dropzone": "^14.2.1",
     "react-helmet-async": "^2.0.3",
     "react-hook-form": "^7.45.2",
+    "react-intersection-observer": "^9.8.2",
     "react-intl": "^6.6.1",
     "react-modal": "^3.15.1",
     "react-popper": "^2.3.0",
diff --git a/src/components/common/Extensions/UserHubButton/UserHubButton.tsx b/src/components/common/Extensions/UserHubButton/UserHubButton.tsx
index 708183aacd4..8dfc7bcdee1 100644
--- a/src/components/common/Extensions/UserHubButton/UserHubButton.tsx
+++ b/src/components/common/Extensions/UserHubButton/UserHubButton.tsx
@@ -122,7 +122,7 @@ const UserHubButton: FC = () => {
     splitWalletAddress(walletAddress ?? ADDRESS_ZERO);
 
   return (
-    <div ref={ref}>
+    <div ref={ref} className="flex-shrink-0">
       <Button
         mode="tertiary"
         size="large"
@@ -136,11 +136,12 @@ const UserHubButton: FC = () => {
         )}
         onClick={handleButtonClick}
       >
-        <div className="flex items-center">
+        <div className="flex flex-shrink-0 items-center">
           {/* If there's a user, there's a wallet */}
           {walletAddress ? (
             <>
               <UserAvatar
+                className="flex-shrink-0"
                 userAvatarSrc={user?.profile?.avatar ?? undefined}
                 userName={userName}
                 userAddress={wallet.address}
diff --git a/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx b/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx
index 71bd7bf2d29..0c9141a1c6a 100644
--- a/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx
+++ b/src/components/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx
@@ -43,7 +43,9 @@ const MemberReputation: FC<MemberReputationProps> = ({
         {percentageReputation === ZeroValue.NearZero && percentageReputation}
         {percentageReputation &&
           percentageReputation !== ZeroValue.NearZero && (
-            <Numeral value={percentageReputation} suffix=" %" />
+            <>
+              <Numeral value={percentageReputation} />%
+            </>
           )}
       </span>
     </div>
diff --git a/src/components/shared/Extensions/Tooltip/Tooltip.tsx b/src/components/shared/Extensions/Tooltip/Tooltip.tsx
index 031f48159c1..cae7514e49e 100644
--- a/src/components/shared/Extensions/Tooltip/Tooltip.tsx
+++ b/src/components/shared/Extensions/Tooltip/Tooltip.tsx
@@ -11,6 +11,7 @@ const displayName = 'Extensions.Tooltip';
 const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
   children,
   tooltipContent,
+  tooltipStyle,
   placement = 'auto',
   popperOptions,
   interactive,
@@ -68,6 +69,7 @@ const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
                 'bg-gray-900 [&_a]:underline': !isSuccess,
               },
             ),
+            style: tooltipStyle,
           })}
         >
           <div
diff --git a/src/components/shared/Extensions/Tooltip/types.ts b/src/components/shared/Extensions/Tooltip/types.ts
index 190162e4427..411d3e2ea5f 100644
--- a/src/components/shared/Extensions/Tooltip/types.ts
+++ b/src/components/shared/Extensions/Tooltip/types.ts
@@ -4,6 +4,7 @@ import { type PopperOptions, type TriggerType } from 'react-popper-tooltip';
 
 export interface TooltipProps {
   tooltipContent: ReactNode;
+  tooltipStyle?: React.CSSProperties;
   trigger?: TriggerType | TriggerType[] | null;
   placement?: PlacementType;
   offset?: [number, number];
diff --git a/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx b/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx
index 8d994af872d..7596d968190 100644
--- a/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx
@@ -22,7 +22,7 @@ const PermissionSidebar: FC<PermissionSidebarProps> = ({ transactionId }) => {
           id: 'action.executed.permissions.description',
         }),
         iconAlignment: 'top',
-        textClassName: 'text-4',
+        textClassName: 'text-4 text-gray-900',
       }}
       sections={[
         {
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx
index dbb061b7c4d..2a489ee75f4 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx
@@ -24,25 +24,28 @@ const ExitRecoveryStep: FC = () => {
       <MenuWithStatusText
         statusTextSectionProps={{
           status: StatusTypes.Info,
-          children: formatText(
-            { id: 'motion.exitRecovery.statusText' },
-            { signatures: 2 },
+          children: (
+            <>
+              <p className="text-4">
+                {formatText(
+                  { id: 'motion.exitRecovery.statusText' },
+                  { signatures: 2 },
+                )}
+              </p>
+              <ProgressBar
+                progress={0}
+                progressLabel={formatText(
+                  {
+                    id: 'motion.exitRecovery.additionalText',
+                  },
+                  { signatures: 2 },
+                )}
+                max={2}
+                className="mt-2"
+              />
+            </>
           ),
-          textClassName: 'text-4',
           iconAlignment: 'top',
-          content: (
-            <ProgressBar
-              progress={0}
-              additionalText={formatText(
-                {
-                  id: 'motion.exitRecovery.additionalText',
-                },
-                { signatures: 2 },
-              )}
-              max={2}
-              className="ml-1"
-            />
-          ),
         }}
         sections={[
           {
@@ -107,7 +110,7 @@ const ExitRecoveryStep: FC = () => {
           children: formatText({
             id: 'motion.exitRecovery.storageSlots.statusText',
           }),
-          textClassName: 'text-4',
+          textClassName: 'text-4 text-gray-900',
           iconAlignment: 'top',
         }}
         sections={[
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx
index c16260ef4e3..b740110fdcb 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/FinalizeStep/FinalizeStep.tsx
@@ -119,7 +119,7 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
             ? 'motion.finalizeStep.failed.statusText'
             : 'motion.finalizeStep.statusText',
         }),
-        textClassName: 'text-4',
+        textClassName: 'text-4 text-gray-900',
         iconAlignment: 'top',
         content: (
           <div />
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx
index eb7c9d4ced2..37a64ef733e 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/OutcomeStep.tsx
@@ -55,7 +55,8 @@ const getOutcomeStepTitle = (
 
 const OutcomeStep: FC<OutcomeStepProps> = ({ motionData }) => {
   const { wallet } = useAppContext();
-  const { voteStatuses } = useOutcomeStep(motionData);
+  const { voteStatuses, stakingData } = useOutcomeStep(motionData);
+  const { stakers, stakeVoteStatuses } = stakingData || {};
 
   const voters: UserAvatarsItem[] =
     motionData?.voterRecord.map((voter) => ({
@@ -73,6 +74,8 @@ const OutcomeStep: FC<OutcomeStepProps> = ({ motionData }) => {
     ? MotionVote.Yay
     : MotionVote.Nay;
 
+  const showVotingData = voters.length !== 0;
+
   return (
     <MenuWithSections
       sections={[
@@ -83,7 +86,10 @@ const OutcomeStep: FC<OutcomeStepProps> = ({ motionData }) => {
               <h3 className="mb-4 text-center text-1">
                 {formatText(getOutcomeStepTitle(currentUserVote, winningSide))}
               </h3>
-              <VoteStatuses items={voteStatuses} voters={voters} />
+              <VoteStatuses
+                items={showVotingData ? voteStatuses : stakeVoteStatuses || []}
+                voters={showVotingData ? voters : stakers || []}
+              />
             </div>
           ),
         },
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts
index 4e3cbd192e5..2adc31fad96 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/hooks.ts
@@ -2,6 +2,7 @@ import { useMemo } from 'react';
 
 import { type ColonyMotion } from '~types/graphql.ts';
 import { MotionVote } from '~utils/colonyMotions.ts';
+import { type UserAvatarsItem } from '~v5/shared/UserAvatars/types.ts';
 
 import { supportOption, opposeOption } from '../../consts.ts';
 
@@ -34,7 +35,55 @@ export const useOutcomeStep = (motionData: ColonyMotion | null | undefined) => {
     ];
   }, [motionData]);
 
+  const stakingData = useMemo(() => {
+    if (!motionData) return undefined;
+
+    const { usersStakes } = motionData;
+
+    const stakers = usersStakes.flatMap((userStakes) => {
+      const { address, stakes } = userStakes;
+
+      const yay = Number(stakes.percentage.yay);
+      const nay = Number(stakes.percentage.nay);
+      const addresses: UserAvatarsItem[] = [];
+
+      if (yay > 0) {
+        addresses.push({ address, voteCount: '1', vote: MotionVote.Yay });
+      }
+
+      if (nay > 0) {
+        addresses.push({ address, voteCount: '1', vote: MotionVote.Nay });
+      }
+
+      return addresses;
+    });
+
+    // 100 is hardcoded because in userStakes total wasn't 100% (it was like 98%). Probably because of rounding.
+    const stakeVoteStatuses: VoteStatuses[] = [
+      {
+        key: supportOption.id,
+        icon: supportOption.icon,
+        label: supportOption.label || '',
+        progress: 100,
+        status: MotionVote.Yay,
+      },
+      {
+        key: opposeOption.id,
+        icon: opposeOption.icon,
+        label: opposeOption.label || '',
+        progress: 100,
+        status: MotionVote.Nay,
+      },
+    ];
+
+    return {
+      stakers,
+      stakeVoteStatuses,
+    };
+  }, [motionData]);
+
   return {
     voteStatuses,
+    stakingData,
   };
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx
index cc2eb7aaaa2..92e181294d3 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx
@@ -28,22 +28,22 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
   );
 
   return (
-    <div className="flex flex-col gap-5">
+    <div className="grid grid-cols-[1fr_auto] gap-8">
       {items.map(({ key, icon: Icon, label, progress, status }) => (
-        <div key={key} className="flex w-full items-center gap-8">
-          <div className="flex max-w-[182px] grow flex-col gap-1">
+        <React.Fragment key={key}>
+          <div className="flex w-full grow flex-col gap-1">
             <span className="flex items-start gap-[0.375rem]">
               <Icon
                 className={clsx('h-[1em] w-[1em] text-[1.125rem]', {
                   'text-purple-400': status === MotionVote.Yay,
-                  'text-red-400': status === MotionVote.Nay,
+                  'text-negative-400': status === MotionVote.Nay,
                 })}
                 size={20}
               />
               <span
                 className={clsx('text-3', {
                   'text-purple-400': status === MotionVote.Yay,
-                  'text-red-400': status === MotionVote.Nay,
+                  'text-negative-400': status === MotionVote.Nay,
                 })}
               >
                 {label}
@@ -51,11 +51,11 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
             </span>
             <ProgressBar
               progress={progress}
+              progressLabel={`${progress}%`}
               max={100}
-              additionalText="%"
               barClassName={clsx({
                 'bg-purple-200': status === MotionVote.Yay,
-                'bg-red-300': status === MotionVote.Nay,
+                'bg-negative-300': status === MotionVote.Nay,
               })}
             />
           </div>
@@ -72,7 +72,7 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
               size={26}
             />
           )}
-        </div>
+        </React.Fragment>
       ))}
     </div>
   );
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
index adcaf00ed36..0420b3b14d7 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/RevealStep/RevealStep.tsx
@@ -67,33 +67,41 @@ const RevealStep: FC<RevealStepProps> = ({
     <MenuWithStatusText
       statusTextSectionProps={{
         status: StatusTypes.Info,
-        children: formatText({ id: 'motion.revealStep.statusText' }),
-        textClassName: 'text-4',
-        content: (
-          <div className="mt-1 flex flex-col gap-2">
+        iconAlignment: 'top',
+        textClassName: 'w-full',
+        children: (
+          <>
+            <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}
-              additionalText={formatText({
-                id:
-                  revealProgress === 1
-                    ? 'motion.revealStep.voteRevealed'
-                    : 'motion.revealStep.votesRevealed',
-              })}
-              className="ml-1"
               isTall
             />
-            {!revealPhaseEnded && canInteract && (
-              <StatusText
-                status={StatusTypes.Warning}
-                textClassName="text-4 text-gray-900"
-                iconAlignment="top"
-              >
-                {formatText({ id: 'motion.revealStep.warning' })}
-              </StatusText>
-            )}
-          </div>
+          </>
         ),
+        content:
+          !revealPhaseEnded && canInteract ? (
+            <StatusText
+              status={StatusTypes.Warning}
+              textClassName="text-4 text-gray-900"
+              iconAlignment="top"
+              className="mt-2"
+            >
+              {formatText({ id: 'motion.revealStep.warning' })}
+            </StatusText>
+          ) : undefined,
       }}
       sections={[
         {
@@ -146,23 +154,35 @@ const RevealStep: FC<RevealStepProps> = ({
             </ActionForm>
           ),
         },
+        {
+          key: '2',
+          content: (
+            <AccordionItem
+              title={formatText({
+                id: isInformationAccordionOpen
+                  ? 'motion.revealStep.buttonHide'
+                  : 'motion.revealStep.buttonShow',
+              })}
+              isOpen={isInformationAccordionOpen}
+              onToggle={toggleInformationAccordion}
+              className={clsx(
+                `
+                  [&_.accordion-toggler]:text-sm
+                  [&_.accordion-toggler]:text-gray-500
+                `,
+                {
+                  '[&_.accordion-toggler]:text-blue-500':
+                    isInformationAccordionOpen,
+                },
+              )}
+              icon={CaretDown}
+              iconSize={16}
+            >
+              <RevealInformationList items={voters} />
+            </AccordionItem>
+          ),
+        },
       ]}
-      footer={
-        <AccordionItem
-          className="text-sm text-gray-500"
-          isOpen={isInformationAccordionOpen}
-          onToggle={toggleInformationAccordion}
-          title={formatText({
-            id: isInformationAccordionOpen
-              ? 'motion.revealStep.buttonHide'
-              : 'motion.revealStep.buttonShow',
-          })}
-          icon={CaretDown}
-          iconSize={16}
-        >
-          <RevealInformationList items={voters} />
-        </AccordionItem>
-      }
     />
   );
 };
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx
index 189cb46348a..1c1a3a39f1e 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/StakingStep/StakingStep.tsx
@@ -132,7 +132,7 @@ const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
                       )}
                     </p>
                   ),
-                  className: 'bg-negative-100 text-negative-400',
+                  className: 'bg-negative-100 text-negative-400 py-3',
                 },
               ]
             : []),
@@ -141,14 +141,14 @@ const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
           canInteract
             ? [
                 {
-                  key: '1',
+                  key: '2',
                   content: <NotEnoughTokensInfo />,
-                  className: 'bg-negative-100 text-negative-400',
+                  className: 'bg-negative-100 text-negative-400 py-3',
                 },
               ]
             : []),
           {
-            key: '2',
+            key: '3',
             content:
               isFullyStaked || !isActive ? (
                 <StakingChart
@@ -174,7 +174,7 @@ const StakingStep: FC<StakingStepProps> = ({ className, isActive }) => {
           ...(isStaked
             ? [
                 {
-                  key: '3',
+                  key: '4',
                   content: (
                     <AccordionItem
                       title={formatText({
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
index 1067b7b3b95..601e126d464 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/VotingStep.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx';
 import React, { type FC } from 'react';
 import { defineMessages } from 'react-intl';
 
@@ -55,10 +56,8 @@ const VotingStep: FC<VotingStepProps> = ({
   );
 
   const { wallet, user } = useAppContext();
-  const canVote =
-    !!wallet &&
-    !!user &&
-    !actionData.motionData.motionStateHistory.inRevealPhase;
+  const isRevealPhase = actionData.motionData.motionStateHistory.inRevealPhase;
+  const canVote = !!wallet && !!user && !isRevealPhase;
 
   const isSupportVote = currentUserVote === MotionVote.Yay;
   const isOpposeVote = currentUserVote === MotionVote.Nay;
@@ -67,22 +66,33 @@ const VotingStep: FC<VotingStepProps> = ({
     <MenuWithStatusText
       statusTextSectionProps={{
         status: StatusTypes.Info,
-        children: formatText(
-          { id: 'motion.votingStep.statusText' },
-          { thresholdPercent },
+        textClassName: 'text-4 text-gray-900 w-full',
+        children: (
+          <>
+            <p className="text-4">
+              {formatText(
+                { id: 'motion.votingStep.statusText' },
+                { thresholdPercent },
+              )}
+            </p>
+            <ProgressBar
+              className="mt-2"
+              progress={currentReputationPercent}
+              threshold={thresholdPercent}
+              labelClassName="!text-xs"
+              progressLabel={formatText(
+                {
+                  id: 'motion.votingStep.additionalText',
+                },
+                {
+                  progress: currentReputationPercent,
+                },
+              )}
+              isTall
+            />
+          </>
         ),
-        textClassName: 'text-4',
         iconAlignment: 'top',
-        content: (
-          <ProgressBar
-            progress={currentReputationPercent}
-            threshold={thresholdPercent}
-            additionalText={formatText({
-              id: 'motion.votingStep.additionalText',
-            })}
-            isTall
-          />
-        ),
       }}
       sections={[
         {
@@ -97,16 +107,15 @@ const VotingStep: FC<VotingStepProps> = ({
             >
               <div>
                 {hasUserVoted && (isSupportVote || isOpposeVote) && (
-                  <div className="mb-3">
-                    <div className="mb-6 flex items-center justify-between gap-2">
+                  <div className="w-full">
+                    <div className="flex items-center justify-between gap-2">
                       <h4 className="text-2">
                         {formatText({ id: 'motion.votingStep.voted' })}
                       </h4>
                       <MotionVoteBadge vote={currentUserVote} />
                     </div>
-                    {!actionData.motionData.motionStateHistory
-                      .inRevealPhase && (
-                      <>
+                    {!isRevealPhase && (
+                      <div className="mt-4 w-full">
                         <h4 className="mb-1 text-2">
                           {formatText({ id: 'motion.votingStep.changeVote' })}
                         </h4>
@@ -115,12 +124,16 @@ const VotingStep: FC<VotingStepProps> = ({
                             id: 'motion.votingStep.changeVoteDescription',
                           })}
                         </p>
-                      </>
+                      </div>
                     )}
                   </div>
                 )}
                 {canVote && (
-                  <>
+                  <div
+                    className={clsx('w-full', {
+                      'mt-4': hasUserVoted,
+                    })}
+                  >
                     {!hasUserVoted && (
                       <h4 className="mb-3 text-center text-1">
                         {formatText({ id: 'motion.votingStep.title' })}
@@ -133,19 +146,19 @@ const VotingStep: FC<VotingStepProps> = ({
                       )}
                       name="vote"
                     />
-                  </>
+                  </div>
                 )}
               </div>
-              {(hasUserVoted || canVote) && (
-                <div className="mt-7 border-t border-gray-200 pt-6" />
-              )}
-              <DescriptionList items={items} className="my-1" />
+              <DescriptionList
+                items={items}
+                className="mt-6 border-t border-gray-200 pt-6"
+              />
               {canVote && (
                 <Button
                   mode="primarySolid"
                   isFullSize
                   type="submit"
-                  className="mt-8"
+                  className="mt-6"
                   text={formatText(
                     hasUserVoted ? MSG.changeVote : MSG.submitVote,
                   )}
diff --git a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx
index 1099e771933..fb3b32a83be 100644
--- a/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx
+++ b/src/components/v5/common/ActionSidebar/partials/Motions/steps/VotingStep/hooks.tsx
@@ -158,6 +158,7 @@ export const useVotingStep = (
             rootHash={rootHash}
             textClassName="text-sm"
             walletAddress={user?.walletAddress ?? ''}
+            hideOnMobile={false}
           />
         ),
       },
diff --git a/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx b/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx
index e4b5cdbe294..f26a117d4b1 100644
--- a/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx
+++ b/src/components/v5/common/AvatarUploader/partials/ProgressContent.tsx
@@ -57,7 +57,7 @@ const ProgressContent: FC<ProgressContentProps> = ({
           </div>
         </div>
         <span className="text-sm text-gray-600">{fileSize}</span>
-        <ProgressBar progress={progress} additionalText="%" />
+        <ProgressBar progress={progress} progressLabel={`${progress}%`} />
       </div>
     </div>
   );
diff --git a/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx b/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx
index 13af4e79676..6f74a8ff27f 100644
--- a/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx
+++ b/src/components/v5/common/ObjectiveBox/ObjectiveBox.tsx
@@ -37,7 +37,10 @@ const ObjectiveBox: FC<ObjectiveBoxProps> = ({ objective }) => {
             )
           : formatMessage(MSG.noObjectiveBoxDescription)}
       </p>
-      <ProgressBar progress={objective?.progress || 0} additionalText="%" />
+      <ProgressBar
+        progress={objective?.progress || 0}
+        progressLabel={`${objective?.progress || 0}%`}
+      />
     </div>
   );
 };
diff --git a/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx b/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx
index d6ba027e90f..4e50b06d3cd 100644
--- a/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx
+++ b/src/components/v5/frame/ColonyHome/partials/Objective/Objective.tsx
@@ -53,8 +53,7 @@ const Objective = () => {
             </p>
             <ProgressBar
               progress={objective.progress || 0}
-              className="ml-0"
-              additionalText="%"
+              progressLabel={`${objective.progress || 0}%`}
               isTall
               barClassName={selectedDomain ? teamColor : 'bg-blue-400'}
             />
diff --git a/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx b/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx
index a7bd8f7fc98..ca37ba391f0 100644
--- a/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx
+++ b/src/components/v5/shared/MenuWithSections/MenuWithSections.tsx
@@ -7,11 +7,7 @@ import { type MenuWithSectionsProps } from './types.ts';
 
 const displayName = 'v5.shared.MenuWithSections';
 
-const MenuWithSections: React.FC<MenuWithSectionsProps> = ({
-  sections,
-  footer,
-  footerClassName,
-}) =>
+const MenuWithSections: React.FC<MenuWithSectionsProps> = ({ sections }) =>
   sections.length ? (
     <MenuContainer className="w-full overflow-hidden" withPadding={false}>
       {sections.map(({ key, content, className }) => (
@@ -19,17 +15,12 @@ const MenuWithSections: React.FC<MenuWithSectionsProps> = ({
           key={key}
           className={clsx(
             className,
-            'border-b border-gray-200 px-[1.125rem] py-3 last:border-b-0',
+            'border-b border-gray-200 p-[1.125rem] last:border-b-0',
           )}
         >
           {content}
         </div>
       ))}
-      {footer && (
-        <div className={clsx(footerClassName, 'px-[1.125rem] py-3')}>
-          {footer}
-        </div>
-      )}
     </MenuContainer>
   ) : null;
 
diff --git a/src/components/v5/shared/MenuWithSections/types.ts b/src/components/v5/shared/MenuWithSections/types.ts
index 56fd884cfb3..2510ee94c81 100644
--- a/src/components/v5/shared/MenuWithSections/types.ts
+++ b/src/components/v5/shared/MenuWithSections/types.ts
@@ -6,6 +6,4 @@ export interface MenuWithSectionsItem {
 
 export interface MenuWithSectionsProps {
   sections: MenuWithSectionsItem[];
-  footer?: React.ReactNode;
-  footerClassName?: string;
 }
diff --git a/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx b/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx
index 89c72aa293b..a0edbc30b75 100644
--- a/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx
+++ b/src/components/v5/shared/MenuWithStatusText/MenuWithStatusText.tsx
@@ -10,8 +10,6 @@ const displayName = 'v5.shared.MenuWithStatusText';
 const MenuWithStatusText: React.FC<MenuWithStatusTextProps> = ({
   statusTextSectionProps,
   sections,
-  footer,
-  footerClassName,
 }) => {
   const { content, ...restStatusTextSectionProps } = statusTextSectionProps;
 
@@ -29,13 +27,7 @@ const MenuWithStatusText: React.FC<MenuWithStatusTextProps> = ({
     ...sections,
   ];
 
-  return (
-    <MenuWithSections
-      sections={sectionsWithStatusText}
-      footer={footer}
-      footerClassName={footerClassName}
-    />
-  );
+  return <MenuWithSections sections={sectionsWithStatusText} />;
 };
 
 MenuWithStatusText.displayName = displayName;
diff --git a/src/components/v5/shared/ProgressBar/ProgressBar.tsx b/src/components/v5/shared/ProgressBar/ProgressBar.tsx
index 16015d393c9..6f6f605f334 100644
--- a/src/components/v5/shared/ProgressBar/ProgressBar.tsx
+++ b/src/components/v5/shared/ProgressBar/ProgressBar.tsx
@@ -5,19 +5,20 @@ import { type ProgressBarProps } from './types.ts';
 
 const ProgressBar: FC<ProgressBarProps> = ({
   progress,
+  progressLabel,
   isTall,
-  additionalText,
   threshold = null,
   max = 100,
   barClassName,
   className,
+  labelClassName,
 }) => {
   if (progress > max || progress < 0) {
     throw new Error(`Progress bar value must be between between 0 and ${max}`);
   }
 
   return (
-    <div className="flex items-center">
+    <div className={clsx(className, 'flex items-center')}>
       <div
         className={clsx('relative w-full rounded bg-gray-200', {
           'h-2.5 rounded-lg': isTall,
@@ -42,14 +43,14 @@ const ProgressBar: FC<ProgressBarProps> = ({
           />
         )}
       </div>
-      <span className="ml-3 text-xs font-medium leading-3 text-gray-600">
-        {progress}
+      <span
+        className={clsx(
+          labelClassName,
+          'ml-3 flex-shrink-0 text-sm font-medium leading-3 text-gray-600',
+        )}
+      >
+        {progressLabel || progress}
       </span>
-      {additionalText && (
-        <span className={clsx(className, 'flex-shrink-0 text-gray-600 text-3')}>
-          {additionalText}
-        </span>
-      )}
     </div>
   );
 };
diff --git a/src/components/v5/shared/ProgressBar/types.ts b/src/components/v5/shared/ProgressBar/types.ts
index bd2108b0fd3..79a30d40266 100644
--- a/src/components/v5/shared/ProgressBar/types.ts
+++ b/src/components/v5/shared/ProgressBar/types.ts
@@ -1,9 +1,10 @@
 export interface ProgressBarProps {
   progress: number;
+  progressLabel?: string;
   isTall?: boolean;
-  additionalText?: React.ReactNode;
   threshold?: number;
   max?: number;
   barClassName?: string;
   className?: string;
+  labelClassName?: string;
 }
diff --git a/src/components/v5/shared/StatusText/StatusText.tsx b/src/components/v5/shared/StatusText/StatusText.tsx
index 4b3c949eca5..fed9beda42a 100644
--- a/src/components/v5/shared/StatusText/StatusText.tsx
+++ b/src/components/v5/shared/StatusText/StatusText.tsx
@@ -30,7 +30,7 @@ const StatusText: FC<PropsWithChildren<StatusTextProps>> = ({
   return (
     <div
       className={clsx(className, 'flex', {
-        'text-gray-900': status === StatusTypes.Info,
+        'text-gray-500': status === StatusTypes.Info,
         'text-success-400': status === StatusTypes.Success,
         'text-warning-400': status === StatusTypes.Warning,
         'text-negative-400': status === StatusTypes.Error,
@@ -45,7 +45,12 @@ const StatusText: FC<PropsWithChildren<StatusTextProps>> = ({
           className={clsx(iconClassName, 'flex-shrink-0')}
         />
       )}
-      <p className={textClassName}>{children}</p>
+      {children && typeof children === 'string' && (
+        <p className={textClassName}>{children}</p>
+      )}
+      {children && typeof children !== 'string' && (
+        <div className={textClassName}>{children}</div>
+      )}
     </div>
   );
 };
diff --git a/src/components/v5/shared/Stepper/Stepper.tsx b/src/components/v5/shared/Stepper/Stepper.tsx
index 686885f8dbd..e3a93088e19 100644
--- a/src/components/v5/shared/Stepper/Stepper.tsx
+++ b/src/components/v5/shared/Stepper/Stepper.tsx
@@ -2,6 +2,7 @@ import { CaretLeft, CaretRight } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import { motion } from 'framer-motion';
 import React, { useEffect, useState } from 'react';
+import { InView } from 'react-intersection-observer';
 
 import { accordionAnimation } from '~constants/accordionAnimation.ts';
 import { useMobile } from '~hooks/index.ts';
@@ -19,6 +20,7 @@ function Stepper<TKey extends React.Key>({
   items,
 }: StepperProps<TKey>): JSX.Element | null {
   const activeItemIndex = items.findIndex(({ key }) => key === activeStepKey);
+  const [hiddenItem, setHiddenItem] = useState<TKey | undefined>(undefined);
   const [openItemIndex, setOpenItemIndex] = useState(activeItemIndex);
   const isMobile = useMobile();
   const withArrowsOnMobile =
@@ -66,6 +68,27 @@ function Stepper<TKey extends React.Key>({
     setOpenItemIndex(activeItemIndex);
   }, [activeItemIndex]);
 
+  const handleChange = (name: TKey, inView: boolean) => {
+    if (!inView) {
+      setHiddenItem(name);
+    } else {
+      setHiddenItem(undefined);
+    }
+  };
+
+  useEffect(() => {
+    if (hiddenItem && listRef.current && isMobile && isScrollableList) {
+      const index = items.findIndex(({ key }) => key === hiddenItem);
+      if (index > -1) {
+        listRef.current.scrollBy({
+          left: 70 * index,
+          behavior: 'smooth',
+        });
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [openItemIndex, isMobile]);
+
   return items.length ? (
     <>
       <div className="flex w-full items-center gap-1">
@@ -143,7 +166,11 @@ function Stepper<TKey extends React.Key>({
                     },
                   )}
                 >
-                  <div className="flex flex-col items-start gap-[.375rem] sm:flex-row sm:items-center">
+                  <InView
+                    as="div"
+                    onChange={(inView) => handleChange(key, inView)}
+                    className="flex flex-col items-start gap-[.375rem] sm:flex-row sm:items-center"
+                  >
                     <StepperButton
                       stage={
                         (index < activeItemIndex &&
@@ -155,6 +182,7 @@ function Stepper<TKey extends React.Key>({
                       }
                       onClick={() => {
                         setOpenItemIndex(index);
+                        setHiddenItem(undefined);
 
                         if (index > activeItemIndex) {
                           setActiveStepKey(key);
@@ -166,7 +194,7 @@ function Stepper<TKey extends React.Key>({
                       {...restHeading}
                     />
                     {decor || null}
-                  </div>
+                  </InView>
                   {!isMobile && !itemDisabled && (
                     <div
                       className={clsx(
diff --git a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
index d2734e08c49..3877b7af11f 100644
--- a/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
+++ b/src/components/v5/shared/Stepper/partials/StepperButton/StepperButton.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import { useMobile } from '~hooks';
 import Tooltip from '~shared/Extensions/Tooltip/index.ts';
@@ -21,12 +21,21 @@ const StepperButton: React.FC<StepperButtonProps> = ({
   tooltipProps,
   ...rest
 }) => {
+  const [buttonWidth, setButtonWidth] = useState<number>(0);
   const Icon = icon || ICON_NAME_MAP[stage];
   const isMobile = useMobile();
+  const buttonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (buttonRef.current) {
+      setButtonWidth(buttonRef.current.offsetWidth);
+    }
+  }, []);
 
   const content = (
     <button
       type="button"
+      ref={buttonRef}
       className={clsx(
         className,
         `
@@ -66,8 +75,9 @@ const StepperButton: React.FC<StepperButtonProps> = ({
         </StepperTooltip>
       ) : (
         <Tooltip
-          placement={isMobile ? 'bottom' : 'right'}
+          placement="right"
           className="!inline-flex"
+          tooltipStyle={{ maxWidth: `calc(100% - ${buttonWidth}px - 20px)` }}
           {...tooltipProps}
         >
           {content}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3d6e3747e45..d9f8c975113 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1349,8 +1349,7 @@
     "motion.revealStep.title": "You voted:",
     "motion.revealStep.statusText": "Ends when timer ends; or all voters have revealed.",
     "motion.revealStep.warning": "You must reveal your vote for it to count and to claim your reward.",
-    "motion.revealStep.votesRevealed": "votes revealed",
-    "motion.revealStep.voteRevealed": "vote revealed",
+    "motion.revealStep.votesRevealed": "{votes} {votes, plural, one {vote} other {votes}} revealed",
     "motion.revealStep.submit": "Reveal vote",
     "motion.revealStep.buttonHide": "Hide reveal information",
     "motion.revealStep.buttonShow": "Show reveal information",
@@ -1358,7 +1357,7 @@
     "motion.revealStep.emptyDescription": "You did not vote so do not need to reveal. Please wait for all required voters to reveal or the reveal stage to end.",
     "motion.votingStep.statusText": "Voting ends when either time runs out, or {thresholdPercent}% of reputation in this domain has voted.",
     "motion.votingStep.title": "Vote to support or oppose?",
-    "motion.votingStep.additionalText": "% Rep",
+    "motion.votingStep.additionalText": "{progress}% Rep",
     "motion.votingStep.votingMethod": "Voting method",
     "motion.votingStep.teamReputation": "Team reputation",
     "motion.votingStep.rewardRange": "Reward range",
diff --git a/src/stories/shared/ProgressBar.stories.tsx b/src/stories/shared/ProgressBar.stories.tsx
index bf34d5c06ab..17a8efa07d1 100644
--- a/src/stories/shared/ProgressBar.stories.tsx
+++ b/src/stories/shared/ProgressBar.stories.tsx
@@ -24,12 +24,6 @@ const meta: Meta<typeof ProgressBar> = {
         type: 'range',
       },
     },
-    additionalText: {
-      name: 'Additional text',
-      control: {
-        type: 'text',
-      },
-    },
     isTall: {
       name: 'Is tall?',
       control: {
@@ -53,11 +47,3 @@ export const WithData: Story = {
     progress: 40,
   },
 };
-
-export const WithAdditionalText: Story = {
-  args: {
-    progress: 50,
-    additionalText: 'Rep',
-    isTall: true,
-  },
-};