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
JoinColony · Apr 12, 2024 · 21043d2 · 21043d2
1 parent 8166508
commit 21043d2
Show file tree

Hide file tree

Showing 24 changed files with 236 additions and 161 deletions.
diff --git a/...omponents/common/Extensions/UserNavigation/partials/MemberReputation/MemberReputation.tsx b/...omponents/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
@@ -11,6 +11,7 @@ const displayName = 'Extensions.Tooltip';
 const Tooltip: FC<PropsWithChildren<TooltipProps>> = ({
   children,
   tooltipContent,
+  tooltipStyle,
   placement = 'auto',
   popperOptions,
   interactive,
@@ -66,6 +67,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
@@ -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/...ents/v5/common/ActionSidebar/partials/ActionSidebarContent/partials/PermissionSidebar.tsx b/...ents/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/...ents/v5/common/ActionSidebar/partials/Motions/steps/ExitRecoveryStep/ExitRecoveryStep.tsx b/...ents/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
@@ -115,7 +115,7 @@ const FinalizeStep: FC<FinalizeStepProps> = ({
       statusTextSectionProps={{
         status: StatusTypes.Info,
         children: formatText({ id: '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
@@ -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
@@ -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/...n/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx b/...n/ActionSidebar/partials/Motions/steps/OutcomeStep/partials/VoteStatuses/VoteStatuses.tsx
@@ -28,34 +28,34 @@ 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}
               </span>
             </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
@@ -67,33 +67,40 @@ 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',
+        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 +153,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>
-      }
     />
   );
 };