refactored colors and text components, added scrollbar to card column

src/app/cases/page.tsx

@@ -5,7 +5,8 @@ import { UUID } from 'crypto';
 import { CaseListing } from '../../types/schemaTypes';
 import { getNCases } from '../../api/supabase/queries/cases';
 import ListingCard from '../../components/ListingCard/ListingCard';
-import { CardColumn, MainDisplay, PageContainer, PageTitle } from './styles';
+import { CardColumn, MainDisplay, PageContainer } from './styles';
+import { H1 } from '../../styles/text';
 
 export default function Page() {
   const [caseData, setCaseData] = useState<CaseListing[]>([]);
@@ -18,23 +19,18 @@ export default function Page() {
     });
   }, []);
 
-  // onclicks
-  function onCardClick(id: UUID) {
-    setSelectedCard(id);
-  }
-
   // page structure
   return (
     <PageContainer>
-      <PageTitle>Browse Available Cases</PageTitle>
+      <H1>Browse Available Cases</H1>
       <MainDisplay>
         <CardColumn>
           {caseData.map(c => (
             <ListingCard
               key={c.id}
               caseData={c}
               isSelected={c.id === selectedCard}
-              onClick={() => onCardClick(c.id)}
+              onClick={() => setSelectedCard(c.id)}
             />
           ))}
         </CardColumn>

src/app/cases/styles.tsx

@@ -7,13 +7,6 @@ export const PageContainer = styled.div`
   padding: 2rem;
 `;
 
-export const PageTitle = styled.h1`
-  font-size: 2rem;
-  text-align: left;
-  margin: 0;
-  margin-right: auto;
-`;
-
 export const MainDisplay = styled.main`
   display: grid;
   grid-template-columns: 5fr 10fr;
@@ -26,5 +19,8 @@ export const CardColumn = styled.div`
   flex-direction: column;
   gap: 2rem;
   border-right: 1px solid black;
+  padding-top: 0.5rem;
   padding-right: 2rem;
+  overflow-y: scroll;
+  max-height: 80vh;
 `;

src/components/ListingCard/ListingCard.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 import { UUID } from 'crypto';
 import { CaseListing } from '../../types/schemaTypes';
 import timestampStringToDate from '../../utils/helpers';
-import { CardBody, CardTitle, TagRow, CardTag } from './styles';
+import { CardBody, TagRow, CardTag } from './styles';
+import { H2 } from '../../styles/text';
+import COLORS from '../../styles/colors';
 
 export default function ListingCard({
   caseData,
@@ -22,17 +24,13 @@ export default function ListingCard({
   const parseDate = (d: Date): string =>
     `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
 
-  // temporary solution
-  const attorneyColor = '#85b4d2';
-  const interpreterColor = '#8dd89f';
-
   return (
     <CardBody
       $selected={isSelected}
       onClick={onClick ? () => onClick(caseData.id) : undefined}
     >
       {/* hard-coded for now */}
-      <CardTitle>Case title.</CardTitle>
+      <H2>Case title.</H2>
       <p>
         <strong>Languages: </strong>
         {caseData.languages.join(', ')}
@@ -45,7 +43,11 @@ export default function ListingCard({
         {rolesNeeded.map(r => (
           <CardTag
             key={r}
-            color={r === 'Interpreter' ? interpreterColor : attorneyColor}
+            color={
+              r === 'Interpreter'
+                ? COLORS.interpreterColor
+                : COLORS.attorneyColor
+            }
           >
             {r}
           </CardTag>

src/components/ListingCard/styles.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-// styled components
+// the card itself
 export const CardBody = styled.div<{ $selected?: boolean }>`
   display: flex;
   flex-direction: column;
@@ -19,11 +19,6 @@ export const CardBody = styled.div<{ $selected?: boolean }>`
   }
 `;
 
-export const CardTitle = styled.h2`
-  font-size: 1.5rem;
-  margin: 0;
-`;
-
 export const TagRow = styled.div`
   display: flex;
   gap: 1rem;

src/styles/colors.ts

@@ -0,0 +1,6 @@
+const COLORS = {
+  attorneyColor: '#85b4d2',
+  interpreterColor: '#8dd89f',
+};
+
+export default COLORS;

src/styles/text.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components';
+
+export const H1 = styled.h1`
+  display: block;
+  font-size: 2rem;
+  margin: 0;
+  margin-right: auto;
+`;
+
+export const H2 = styled.h2`
+  font-size: 1.5rem;
+  margin: 0;
+`;