fix: styles update

package.json

@@ -211,6 +211,7 @@
     "react-helmet-async": "^2.0.3",
     "react-hook-form": "^7.45.2",
     "react-hooks-visible": "^1.1.1",
+    "react-intersection-observer": "^9.8.2",
     "react-intl": "^6.6.1",
     "react-modal": "^3.15.1",
     "react-popper": "^2.3.0",

src/components/common/Extensions/UserHubButton/UserHubButton.tsx

@@ -141,7 +141,7 @@ const UserHubButton: FC = () => {
     splitWalletAddress(walletAddress ?? ADDRESS_ZERO);
 
   return (
-    <div ref={ref}>
+    <div ref={ref} className="flex-shrink-0">
       <Button
         mode="tertiary"
         size="large"
@@ -155,11 +155,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}

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>

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

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];

src/components/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx

@@ -77,7 +77,7 @@ const PermissionSidebar: FC<PermissionSidebarProps> = ({ transactionId }) => {
           id: 'action.executed.permissions.description',
         }),
         iconAlignment: 'top',
-        textClassName: 'text-4',
+        textClassName: 'text-4 text-gray-900',
       }}
       sections={[
         {

src/components/v5/common/ActionSidebar/partials/Motions/Motions.tsx

@@ -1,6 +1,6 @@
 import { MotionState as NetworkMotionState } from '@colony/colony-js';
 import { ThumbsDown, ThumbsUp } from '@phosphor-icons/react';
-import { left as LeftPlacementType } from '@popperjs/core';
+import { right as RightPlacementType } from '@popperjs/core';
 import clsx from 'clsx';
 import { BigNumber } from 'ethers';
 import React, { type FC, useEffect, useMemo, useState } from 'react';
@@ -114,7 +114,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -145,7 +145,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -180,7 +180,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -244,7 +244,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },
@@ -269,7 +269,7 @@ const Motions: FC<MotionsProps> = ({ transactionId }) => {
               networkMotionState,
               motionData,
             ),
-            placement: LeftPlacementType,
+            placement: RightPlacementType,
             className: 'z-10',
           },
         },

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={[

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 />

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>
           ),
         },

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,
   };
 };

src/components/v5/common/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx

@@ -28,10 +28,10 @@ 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]', {
@@ -51,8 +51,8 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
             </span>
             <ProgressBar
               progress={progress}
+              progressLabel={`${progress}%`}
               max={100}
-              additionalText="%"
               barClassName={clsx({
                 'bg-purple-200': status === MotionVote.Yay,
                 'bg-negative-300': status === MotionVote.Nay,
@@ -72,7 +72,7 @@ const VoteStatuses: FC<VoteStatusesProps> = ({ items, voters }) => {
               size={26}
             />
           )}
-        </div>
+        </React.Fragment>
       ))}
     </div>
   );