From f49c9d4009817c04edfab5f6b0e5adfcc0321a03 Mon Sep 17 00:00:00 2001
From: howitsjade <jade@cc.snxdao.io>
Date: Wed, 11 Sep 2024 14:09:15 +1000
Subject: [PATCH 1/3] tag style

---
 .../ui/src/components/MyVoteRow/MyVoteRow.tsx |  2 +-
 .../UserProfileForm/UserProfileForm.tsx       |  6 +++---
 .../UserTableView/UserTableView.tsx           |  8 +++++++-
 governance/ui/src/pages/MyVotes.tsx           | 19 +++++++++++++++++--
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx b/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx
index 896aec577..f11d597f0 100644
--- a/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx
+++ b/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx
@@ -63,7 +63,7 @@ export default function MyVoteRow({
       {ballot?.votedCandidates.includes(voteAddressState) ? (
         <Badge mr="2">Your Vote</Badge>
       ) : voteAddressState ? (
-        <Badge color="gray" mr="2" data-cy="selected-badge-my-row">
+        <Badge color="gray" variant="outline" mr="2" data-cy="selected-badge-my-row">
           Selected
         </Badge>
       ) : null}
diff --git a/governance/ui/src/components/UserProfileForm/UserProfileForm.tsx b/governance/ui/src/components/UserProfileForm/UserProfileForm.tsx
index ba7b4ffee..ed12fdc2f 100644
--- a/governance/ui/src/components/UserProfileForm/UserProfileForm.tsx
+++ b/governance/ui/src/components/UserProfileForm/UserProfileForm.tsx
@@ -361,7 +361,7 @@ export function UserProfileForm() {
                 flexDirection="column"
                 bg="navy.700"
                 minW="100%"
-                borderColor="cyan.500"
+                borderColor="gray.900"
                 borderWidth="1px"
                 borderStyle="solid"
                 rounded="base"
@@ -379,8 +379,8 @@ export function UserProfileForm() {
                   colorScheme="whiteAlpha"
                   color="white"
                   position="absolute"
-                  top="10px"
-                  right="10px"
+                  top="16px"
+                  right="16px"
                 />
                 <Heading fontSize="md">You have unsaved changes</Heading>
                 <Text fontSize="sm" color="gray.500" mb="auto">
diff --git a/governance/ui/src/components/UserTableView/UserTableView.tsx b/governance/ui/src/components/UserTableView/UserTableView.tsx
index d41025f93..a66cb5151 100644
--- a/governance/ui/src/components/UserTableView/UserTableView.tsx
+++ b/governance/ui/src/components/UserTableView/UserTableView.tsx
@@ -143,7 +143,13 @@ export default function UserTableView({
               Your Vote
             </Badge>
           ) : isSelectedForVoting ? (
-            <Badge color="gray" w="fit-content" data-cy="selected-badge-table">
+            <Badge
+              color="gray"
+              variant="outline"
+              lineHeight="14px"
+              w="fit-content"
+              data-cy="selected-badge-table"
+            >
               Selected
             </Badge>
           ) : null}
diff --git a/governance/ui/src/pages/MyVotes.tsx b/governance/ui/src/pages/MyVotes.tsx
index a7dd94e8a..8a5b4855e 100644
--- a/governance/ui/src/pages/MyVotes.tsx
+++ b/governance/ui/src/pages/MyVotes.tsx
@@ -9,7 +9,9 @@ import {
   ModalOverlay,
   Text,
   useDisclosure,
+  IconButton,
 } from '@chakra-ui/react';
+import { CloseIcon } from '@chakra-ui/icons';
 import councils, { CouncilSlugs } from '../utils/councils';
 import { useNavigate } from 'react-router-dom';
 import { WarningIcon } from '@chakra-ui/icons';
@@ -264,7 +266,7 @@ export default function MyVotes() {
             flexDirection="column"
             bg="navy.700"
             minW="100%"
-            borderColor="cyan.500"
+            borderColor="gray.900"
             borderWidth="1px"
             borderStyle="solid"
             rounded="base"
@@ -273,7 +275,20 @@ export default function MyVotes() {
             h="500px"
             gap="2"
           >
-            <Heading fontSize="md">Your haven&apos;t complete your selection</Heading>
+            <IconButton
+              onClick={() => onClose()}
+              size="xs"
+              aria-label="close button"
+              icon={<CloseIcon />}
+              variant="ghost"
+              colorScheme="whiteAlpha"
+              color="white"
+              position="absolute"
+              top="16px"
+              right="16px"
+            />
+
+            <Heading fontSize="md">You haven&apos;t completed your selection</Heading>
             <Text color="gray.500" fontSize="sm">
               You can now vote for multiple councils and cast all your votes in one unique
               transaction:

From 101476db0304483a95cc5f78a4f29de8a29a657a Mon Sep 17 00:00:00 2001
From: howitsjade <jade@cc.snxdao.io>
Date: Wed, 18 Sep 2024 10:38:14 +1000
Subject: [PATCH 2/3] adding nominee badge

---
 .../ui/src/components/MyVoteRow/MyVoteRow.tsx |  4 +-
 .../src/components/MyVotesBox/MyVotesBox.tsx  |  4 +-
 .../UserProfileCard/UserProfileCard.tsx       |  5 ++-
 .../UserProfileCard/UserProfileDetails.tsx    | 43 ++++++++++++++++++-
 .../UserTableView/UserTableView.tsx           |  7 ++-
 5 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx b/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx
index 11adfc07c..a24161eb1 100644
--- a/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx
+++ b/governance/ui/src/components/MyVoteRow/MyVoteRow.tsx
@@ -116,7 +116,9 @@ export default function MyVoteRow({
       </Flex>
 
       {hasVoted ? (
-        <Badge mr="2">Your Vote</Badge>
+        <Badge variant="outline" mr="2">
+          Your Vote
+        </Badge>
       ) : voteAddressState ? (
         <Badge color="gray" variant="outline" mr="2" data-cy="selected-badge-my-row">
           Selected
diff --git a/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx b/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx
index 043bad61a..f2552bbd6 100644
--- a/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx
+++ b/governance/ui/src/components/MyVotesBox/MyVotesBox.tsx
@@ -21,9 +21,9 @@ export default function MyVotesBox({
     <Fade in={true}>
       <Flex
         w="424px"
-        h="310px"
+        h="330px"
         position="absolute"
-        bottom="-320px"
+        bottom="-340px"
         right="0px"
         border="1px solid"
         borderColor="gray.900"
diff --git a/governance/ui/src/components/UserProfileCard/UserProfileCard.tsx b/governance/ui/src/components/UserProfileCard/UserProfileCard.tsx
index 5f154c60a..95b3563f8 100644
--- a/governance/ui/src/components/UserProfileCard/UserProfileCard.tsx
+++ b/governance/ui/src/components/UserProfileCard/UserProfileCard.tsx
@@ -28,7 +28,6 @@ export function UserProfileCard({
   );
 
   const isLoading = useDataLoading || councilPeriodLoading || isNominatedLoading;
-
   return (
     <Flex
       flexDir="column"
@@ -55,7 +54,9 @@ export function UserProfileCard({
           councilPeriod={councilPeriod}
           walletAddress={walletAddress}
           isOwn={isOwn}
-          isNominated={!!isNominated?.isNominated}
+          isNominated={
+            isNominated?.council.slug === activeCouncil ? !!isNominated?.isNominated : false
+          }
           userData={userData}
         />
       )}
diff --git a/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx b/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx
index f3bd9081f..c653a3979 100644
--- a/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx
+++ b/governance/ui/src/components/UserProfileCard/UserProfileDetails.tsx
@@ -1,5 +1,6 @@
 import { CloseIcon, CopyIcon } from '@chakra-ui/icons';
 import { Flex, IconButton, Button, Text, Tooltip, Box } from '@chakra-ui/react';
+import { Badge } from '../Badge';
 import { prettyString } from '@snx-v3/format';
 import { Socials } from '../Socials';
 import { GetUserDetails } from '../../queries/useGetUserDetailsQuery';
@@ -147,8 +148,8 @@ export const UserProfileDetails = ({
           />
         )}
         <ProfilePicture address={userData?.address} />
-        <Flex flexDir="column" w="100%" ml="2">
-          <Flex justifyContent="space-between">
+        <Flex flexDir="column" ml="2">
+          <Flex justifyContent="flex-start">
             <Text
               fontSize="16px"
               fontWeight="700"
@@ -157,9 +158,47 @@ export const UserProfileDetails = ({
               textOverflow="ellipsis"
               whiteSpace="nowrap"
               overflow="hidden"
+              mr="2"
             >
               {userData?.username ? userData.username : prettyString(userData?.address || '')}
             </Text>
+            {isAlreadyVoted ? (
+              <Badge
+                color="cyan"
+                variant="outline"
+                lineHeight="14px"
+                h="fit-content"
+                w="fit-content"
+                alignSelf="center"
+                data-cy="your-vote-badge-table"
+              >
+                Your Vote
+              </Badge>
+            ) : isSelected ? (
+              <Badge
+                color="gray"
+                variant="outline"
+                lineHeight="14px"
+                h="fit-content"
+                w="fit-content"
+                alignSelf="center"
+                data-cy="selected-badge-table"
+              >
+                Selected
+              </Badge>
+            ) : isNominated ? (
+              <Badge
+                color="green"
+                variant="outline"
+                lineHeight="14px"
+                h="fit-content"
+                w="fit-content"
+                alignSelf="center"
+                data-cy="selected-badge-table"
+              >
+                Nominee
+              </Badge>
+            ) : null}
           </Flex>
           <Text
             fontSize="12px"
diff --git a/governance/ui/src/components/UserTableView/UserTableView.tsx b/governance/ui/src/components/UserTableView/UserTableView.tsx
index 94a48188d..0b2bc5a8a 100644
--- a/governance/ui/src/components/UserTableView/UserTableView.tsx
+++ b/governance/ui/src/components/UserTableView/UserTableView.tsx
@@ -140,7 +140,12 @@ export default function UserTableView({
           fontWeight={700}
         >
           {ballot?.votedCandidates.includes(user.address) ? (
-            <Badge w="fit-content" data-cy="your-vote-badge-table">
+            <Badge
+              variant="outline"
+              lineHeight="14px"
+              w="fit-content"
+              data-cy="your-vote-badge-table"
+            >
               Your Vote
             </Badge>
           ) : isSelectedForVoting ? (

From 0fa463a2764a944acd8ff26402e12146d9f88808 Mon Sep 17 00:00:00 2001
From: howitsjade <jade@cc.snxdao.io>
Date: Wed, 18 Sep 2024 12:04:48 +1000
Subject: [PATCH 3/3] font size nav bar

---
 .../ui/src/components/CouncilTabs/CouncilSelect.tsx   |  3 +--
 .../src/components/MyVotesSummary/MyVotesSummary.tsx  | 11 ++++++++---
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/governance/ui/src/components/CouncilTabs/CouncilSelect.tsx b/governance/ui/src/components/CouncilTabs/CouncilSelect.tsx
index 83d2c8e1d..7dcd65cf3 100644
--- a/governance/ui/src/components/CouncilTabs/CouncilSelect.tsx
+++ b/governance/ui/src/components/CouncilTabs/CouncilSelect.tsx
@@ -22,12 +22,11 @@ export const CouncilsSelect = ({ activeCouncil }: { activeCouncil: CouncilSlugs
               borderColor="gray.900"
               alignItems="center"
               data-cy="menu-button-flex-council-select"
-              w="100%"
             >
               <CouncilImage imageUrl={slugToImageUrl(activeCouncil)} mr="10px" />
               <Text
                 fontFamily="heading"
-                fontSize={{ base: 'xs', md: 'md' }}
+                fontSize={{ base: 'sm', md: 'md' }}
                 lineHeight="28px"
                 fontWeight={700}
                 mr="12px"
diff --git a/governance/ui/src/components/MyVotesSummary/MyVotesSummary.tsx b/governance/ui/src/components/MyVotesSummary/MyVotesSummary.tsx
index aab329e3c..c52828e47 100644
--- a/governance/ui/src/components/MyVotesSummary/MyVotesSummary.tsx
+++ b/governance/ui/src/components/MyVotesSummary/MyVotesSummary.tsx
@@ -123,7 +123,7 @@ export const MyVotesSummary = ({
       }}
       rounded="base"
       w="100%"
-      maxW={{ base: '220px', xl: '300px' }}
+      maxW={{ base: 'fit-content', xl: '300px' }}
       borderColor={isInMyVotesPage ? 'cyan.500' : 'gray.900'}
       borderWidth="1px"
       py={2}
@@ -135,11 +135,16 @@ export const MyVotesSummary = ({
         bg: 'linear-gradient(0deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.06) 100%), #0B0B22;',
       }}
     >
-      <Text fontSize="sm" fontWeight="bold" mr="auto" data-cy="my-votes-summary-text">
+      <Text
+        fontSize={{ base: 'sm', md: 'md', xl: 'sm' }}
+        fontWeight="bold"
+        mr="auto"
+        data-cy="my-votes-summary-text"
+      >
         My Votes
       </Text>
       <Show above="md">
-        <Text fontSize="small" ml={8} fontWeight="bold">
+        <Text fontSize="sm" ml={8} fontWeight="bold">
           {councilPeriod === '2' && (
             <>
               {Object.values(stateFromCouncils).filter((vote) => !!vote).length}/{councils.length}