chore: address pr comments

src/components/Common/Typography/Text.css

@@ -2,10 +2,22 @@
   font-stretch: normal;
 }
 
-.Text.Text--uppercase {
+.Text.Text--transform-none {
+  text-transform: none;
+}
+
+.Text.Text--transform-uppercase {
   text-transform: uppercase;
 }
 
+.Text.Text--transform-lowercase {
+  text-transform: lowercase;
+}
+
+.Text.Text--transform-capitalize {
+  text-transform: capitalize;
+}
+
 .Text.Text--size-xs {
   font-size: 11px;
   line-height: 16px;

src/components/Common/Typography/Text.tsx

@@ -12,6 +12,7 @@ export type FontSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 export type FontWeight = 'bold' | 'semi-bold' | 'normal' | 'medium' | 'light'
 type TextColor = 'default' | 'primary' | 'secondary' | 'error' | 'white-900'
 type FontStyle = 'normal' | 'italic'
+type TransformOptions = 'uppercase' | 'lowercase' | 'capitalize' | 'none'
 
 interface Props {
   children?: React.ReactNode
@@ -22,7 +23,7 @@ interface Props {
   style?: FontStyle
   as?: 'span'
   title?: string
-  uppercase?: boolean
+  transform?: TransformOptions
 }
 
 const Text = React.forwardRef<HTMLParagraphElement, Props>(
@@ -36,7 +37,7 @@ const Text = React.forwardRef<HTMLParagraphElement, Props>(
       className,
       as,
       title,
-      uppercase = false,
+      transform = 'none',
     },
     ref
   ) => {
@@ -46,7 +47,7 @@ const Text = React.forwardRef<HTMLParagraphElement, Props>(
       `Text--weight-${weight}`,
       `Text--color-${color}`,
       `Text--style-${style}`,
-      uppercase && `Text--uppercase`,
+      `Text--transform-${transform}`,
       className
     )
     const Component = as ?? 'p'

src/components/GrantRequest/BreakdownAccordion.tsx

@@ -10,7 +10,7 @@ import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
 import './BreakdownAccordion.css'
 
 export interface BreakdownItem {
-  title: string
+  title: React.ReactNode
   subtitle: string
   value?: string
   content: React.ReactNode

src/components/Projects/EditablePersonnelView.tsx

@@ -2,22 +2,28 @@ import { useMemo } from 'react'
 
 import useFormatMessage from '../../hooks/useFormatMessage.ts'
 import { TeamMember } from '../../types/grants.ts'
+import Username from '../Common/Username.tsx'
 import { BreakdownItem } from '../GrantRequest/BreakdownAccordion.tsx'
 
 import EditableBreakdownContent from './EditableBreakdownContent.tsx'
 import ExpandableBreakdownItem from './ExpandableBreakdownItem.tsx'
-import ProjectSidebarTitle from './ProjectSidebarTitle.tsx'
+import ProjectSidebarSectionTitle from './ProjectSidebarSectionTitle.tsx'
 
 interface Props {
   members: TeamMember[]
 }
 
 function EditablePersonnelView({ members }: Props) {
   const t = useFormatMessage()
+
+  function getTitle(name: string, address?: string) {
+    return address && address.length > 0 ? <Username address={address} size="sm" linked variant="address" /> : name
+  }
+
   const items = useMemo(
     () =>
       members.map<BreakdownItem>(({ name, role, about, relevantLink, address }) => ({
-        title: name + (address || ''), //TODO: how do we display the address?
+        title: getTitle(name, address),
         subtitle: role,
         content: <EditableBreakdownContent about={about} onClick={() => {}} relevantLink={relevantLink} />,
       })),
@@ -26,7 +32,7 @@ function EditablePersonnelView({ members }: Props) {
 
   return (
     <>
-      <ProjectSidebarTitle text={t('page.proposal_view.grant.personnel_title')} />
+      <ProjectSidebarSectionTitle text={t('page.proposal_view.grant.personnel_title')} />
       {items.map((item, key) => {
         return <ExpandableBreakdownItem key={key} item={item} />
       })}

src/components/Projects/ExpandableBreakdownItem.tsx

@@ -6,14 +6,14 @@ import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline.tsx'
 
 import './ExpandableBreakdownItem.css'
 
-export interface BreakdownItem {
-  title: string
+interface ExpandableBreakdownItemProps {
+  title: React.ReactNode
   subtitle: string
   content: React.ReactNode
 }
 
 interface Props {
-  item: BreakdownItem
+  item: ExpandableBreakdownItemProps
   initiallyExpanded?: boolean
 }
 

src/components/Projects/ProjectSidebarSectionTitle.tsx

@@ -0,0 +1,15 @@
+import Text from '../Common/Typography/Text.tsx'
+
+interface Props {
+  text: string
+}
+
+function ProjectSidebarSectionTitle({ text }: Props) {
+  return (
+    <Text size="sm" color="default" weight="semi-bold" transform="uppercase">
+      {text}
+    </Text>
+  )
+}
+
+export default ProjectSidebarSectionTitle

src/types/proposals.ts

@@ -803,14 +803,8 @@ export type PriorityProposal = Pick<
 export type PersonnelAttributes = TeamMember & {
   id: string
   project_id: string
-  status: PersonnelStatus
+  deleted: boolean
   updated_by?: string
   updated_at?: Date
   created_at: Date
 }
-
-export enum PersonnelStatus {
-  Deleted = 'deleted',
-  Unassigned = 'unassigned',
-  Assigned = 'assigned',
-}