[ENG-188] Role card updates

src/components/Roles/RoleCard.tsx

@@ -1,19 +1,11 @@
-import { Box, Flex, Icon, Image, Text } from '@chakra-ui/react';
+import { Box, Flex, Icon, Text } from '@chakra-ui/react';
 import { CaretCircleRight, CaretRight } from '@phosphor-icons/react';
-import { formatDuration, intervalToDuration } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { Address, getAddress, zeroAddress } from 'viem';
 import { useNetworkEnsAvatar } from '../../hooks/useNetworkEnsAvatar';
-import { useCopyText } from '../../hooks/utils/useCopyText';
 import { useGetAccountName } from '../../hooks/utils/useGetAccountName';
-import {
-  EditBadgeStatus,
-  RoleEditProps,
-  RoleProps,
-  SablierPaymentFormValues,
-} from '../../types/roles';
+import { EditBadgeStatus, RoleEditProps, RoleProps } from '../../types/roles';
 import { Card } from '../ui/cards/Card';
-import EtherscanLink from '../ui/links/EtherscanLink';
 import Avatar from '../ui/page/Header/Avatar';
 import EditBadge from './EditBadge';
 
@@ -30,7 +22,6 @@ export function AvatarAndRoleName({
 
   const { data: avatarURL } = useNetworkEnsAvatar({ name: wearerAddress || zeroAddress });
   const { t } = useTranslation(['roles']);
-  const copyToClipboard = useCopyText();
 
   return (
     <Flex alignItems="top">
@@ -50,7 +41,7 @@ export function AvatarAndRoleName({
       <Flex
         direction="column"
         ml="1.5rem"
-        mt="-0.125rem"
+        gap="0.25rem"
       >
         <Text
           textStyle="heading-small"
@@ -60,26 +51,19 @@ export function AvatarAndRoleName({
         </Text>
         <Text
           textStyle="labels-large"
-          p="0.25rem 0.5rem"
-          ml="-0.75rem"
-          rounded="1rem"
-          bg="neutral-3"
           color="lilac-0"
           _hover={{
             color: 'white-0',
             bg: 'neutral-4',
           }}
-          cursor="pointer"
           maxW="fit-content"
-          onClick={() => copyToClipboard(wearerAddress)}
         >
           {displayName ?? t('unassigned')}
         </Text>
         {paymentsCount !== undefined && (
           <Flex
-            mt="1rem"
             gap="0.25rem"
-            ml="-0.25rem"
+            mt="0.5rem"
           >
             <Text
               textStyle="labels-large"
@@ -112,79 +96,6 @@ export function AvatarAndRoleName({
   );
 }
 
-function Payment({ payment }: { payment: SablierPaymentFormValues }) {
-  const { t } = useTranslation(['roles']);
-  const format = ['years', 'days', 'hours'];
-  const endDate =
-    payment.endDate &&
-    payment.startDate &&
-    formatDuration(
-      intervalToDuration({
-        start: payment.startDate,
-        end: payment.endDate,
-      }),
-      { format },
-    );
-  const cliffDate =
-    payment.startDate &&
-    payment.cliffDate &&
-    formatDuration(
-      intervalToDuration({
-        start: payment.startDate,
-        end: payment.cliffDate,
-      }),
-      { format },
-    );
-  return (
-    <Flex flexDir="column">
-      <Box
-        mt="0.25rem"
-        ml="4rem"
-      >
-        <Text
-          textStyle="labels-large"
-          color="neutral-7"
-        >
-          {t('payment')}
-        </Text>
-        <Flex
-          color="white-0"
-          gap="0.25rem"
-          alignItems="center"
-          my="0.5rem"
-        >
-          <Image
-            src={payment.asset?.logo}
-            fallbackSrc="/images/coin-icon-default.svg"
-            alt={payment.asset?.symbol}
-            w="1.25rem"
-            h="1.25rem"
-          />
-          {payment.amount?.value}
-          <EtherscanLink
-            color="white-0"
-            _hover={{ bg: 'transparent' }}
-            padding={0}
-            borderWidth={0}
-            value={payment.asset?.address ?? null}
-            type="token"
-            wordBreak="break-word"
-          >
-            {payment.asset?.symbol}
-          </EtherscanLink>
-          <Flex
-            flexDir="column"
-            gap="0.25rem"
-          >
-            <Text>{endDate && `${t('after')} ${endDate}`}</Text>
-          </Flex>
-        </Flex>
-        <Text>{cliffDate && `${t('cliff')} ${t('after')} ${cliffDate}`}</Text>
-      </Box>
-    </Flex>
-  );
-}
-
 export function RoleCard({
   name,
   wearerAddress,
@@ -204,7 +115,9 @@ export function RoleCard({
           name={name}
           paymentsCount={paymentsCount}
         />
-        <EditBadge editStatus={!isCurrentTermActive ? EditBadgeStatus.Inactive : undefined} />
+        <EditBadge
+          editStatus={isCurrentTermActive === false ? EditBadgeStatus.Inactive : undefined}
+        />
       </Flex>
     </Card>
   );
@@ -228,6 +141,7 @@ export function RoleCardEdit({
         <AvatarAndRoleName
           wearerAddress={wearerAddress}
           name={name}
+          paymentsCount={payments?.length}
         />
         <Flex
           alignItems="center"
@@ -240,13 +154,6 @@ export function RoleCardEdit({
           />
         </Flex>
       </Flex>
-      {payments &&
-        payments.map((payment, index) => (
-          <Payment
-            key={index}
-            payment={payment}
-          />
-        ))}
     </Card>
   );
 }

src/components/Roles/RolesTable.tsx

@@ -107,7 +107,7 @@ function MemberColumn({
   const { t } = useTranslation('roles');
 
   // @dev undefined = not termed
-  const memberTextColor = !isCurrentTermActive ? 'neutral-6' : 'white-0';
+  const memberTextColor = isCurrentTermActive === false ? 'neutral-6' : 'white-0';
   const isPendingText = isMemberTermPending ? t('wearerPending') : '';
 
   const wearerAddressText = wearerAddress