feat: project sidebar title using Text

src/components/Common/Typography/Text.css

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

src/components/Common/Typography/Text.tsx

@@ -22,6 +22,7 @@ interface Props {
   style?: FontStyle
   as?: 'span'
   title?: string
+  uppercase?: boolean
 }
 
 const Text = React.forwardRef<HTMLParagraphElement, Props>(
@@ -35,6 +36,7 @@ const Text = React.forwardRef<HTMLParagraphElement, Props>(
       className,
       as,
       title,
+      uppercase = false,
     },
     ref
   ) => {
@@ -44,6 +46,7 @@ const Text = React.forwardRef<HTMLParagraphElement, Props>(
       `Text--weight-${weight}`,
       `Text--color-${color}`,
       `Text--style-${style}`,
+      uppercase && `Text--uppercase`,
       className
     )
     const Component = as ?? 'p'

src/components/GrantRequest/PersonnelView.tsx

@@ -2,11 +2,11 @@ import { useMemo } from 'react'
 
 import useFormatMessage from '../../hooks/useFormatMessage'
 import { TeamMember } from '../../types/grants'
-import ProposalMarkdown from '../Proposal/View/ProposalMarkdown'
+import EditableBreakdownContent from '../Projects/EditableBreakdownContent.tsx'
+import ExpandableBreakdownItem from '../Projects/ExpandableBreakdownItem.tsx'
+import ProjectSidebarTitle from '../Projects/ProjectSidebarTitle.tsx'
 
 import { BreakdownItem } from './BreakdownAccordion'
-import EditableBreakdownContent from './EditableBreakdownContent.tsx'
-import ExpandableBreakdownItem from './ExpandableBreakdownItem.tsx'
 
 interface Props {
   members: TeamMember[]
@@ -26,7 +26,7 @@ function PersonnelView({ members }: Props) {
 
   return (
     <>
-      <ProposalMarkdown text={`## ${t('page.proposal_view.grant.personnel_title')}`} />
+      <ProjectSidebarTitle text={t('page.proposal_view.grant.personnel_title')} />
       {items.map((item, key) => {
         return <ExpandableBreakdownItem key={key} item={item} />
       })}

src/components/GrantRequest/ExpandableBreakdownItem.css → src/components/Projects/ExpandableBreakdownItem.css

@@ -4,7 +4,7 @@
   align-items: center;
   justify-content: space-between;
   background: var(--white-900);
-  margin-bottom: 23px;
+  margin-bottom: 16px;
   padding: 16px;
   min-height: 64px;
   border: 1px solid var(--black-300);

src/components/GrantRequest/ExpandableBreakdownItem.tsx → src/components/Projects/ExpandableBreakdownItem.tsx

@@ -2,7 +2,7 @@ import { useState } from 'react'
 
 import classNames from 'classnames'
 
-import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline'
+import ChevronRightCircleOutline from '../Icon/ChevronRightCircleOutline.tsx'
 
 import './ExpandableBreakdownItem.css'
 

src/components/Projects/ProjectSidebarTitle.tsx

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