From 287e684424c6526fd6599280ec13570fcf4d9a78 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Mon, 23 Oct 2023 18:19:11 -0700
Subject: [PATCH 01/11] interest form input components done

---
 src/app/cases/page.tsx                 | 26 ++++----
 src/app/interest/page.tsx              | 48 ---------------
 src/components/Button.tsx              | 20 +++++++
 src/components/CaseDetails/index.tsx   | 35 +++++++++++
 src/components/CaseDetails/styles.tsx  | 42 +++++++++++++
 src/components/InterestForm/index.tsx  | 83 ++++++++++++++++++++++++++
 src/components/InterestForm/styles.tsx | 66 ++++++++++++++++++++
 src/components/ListingCard/index.tsx   |  4 +-
 src/components/Radio.tsx               |  8 +++
 9 files changed, 268 insertions(+), 64 deletions(-)
 delete mode 100644 src/app/interest/page.tsx
 create mode 100644 src/components/Button.tsx
 create mode 100644 src/components/CaseDetails/index.tsx
 create mode 100644 src/components/CaseDetails/styles.tsx
 create mode 100644 src/components/InterestForm/index.tsx
 create mode 100644 src/components/InterestForm/styles.tsx
 create mode 100644 src/components/Radio.tsx

diff --git a/src/app/cases/page.tsx b/src/app/cases/page.tsx
index 7b84cf79..b94f7694 100644
--- a/src/app/cases/page.tsx
+++ b/src/app/cases/page.tsx
@@ -2,19 +2,18 @@
 
 import { useEffect, useState } from 'react';
 import { UUID } from 'crypto';
-import { CaseListing } from '@/types/schema';
-import { getNCases } from '@/api/supabase/queries/cases';
 import ListingCard from '@/components/ListingCard';
-import { H1, H2 } from '@/styles/text';
 import FilterDropdown from '@/components/FilterDropdown';
+import { CaseListing } from '../../types/schema';
+import { getNCases } from '../../api/supabase/queries/cases';
+import CaseDetailDisplay from '../../components/CaseDetails';
 import {
   CardColumn,
-  CaseDetailDisplay,
-  CaseDetails,
-  FiltersContainer,
   MainDisplay,
   PageContainer,
+  FiltersContainer,
 } from './styles';
+import { H1 } from '../../styles/text';
 
 type FilterType = {
   remote: string;
@@ -27,6 +26,7 @@ type FilterType = {
 export default function Page() {
   const [caseData, setCaseData] = useState<CaseListing[]>([]);
   const [selectedCard, setSelectedCard] = useState<UUID>();
+  const [caseInfo, setCaseInfo] = useState<CaseListing>();
   const [caseFilters, setCaseFilters] = useState<FilterType>({
     remote: 'Remote/In Person',
     role: 'Attorney/Interpreter',
@@ -39,10 +39,10 @@ export default function Page() {
   useEffect(() => {
     getNCases(20).then(casesData => {
       setCaseData(casesData);
+      setCaseInfo(casesData[0]);
     });
   }, []);
 
-  // page structure
   return (
     <PageContainer>
       <H1>Browse Available Cases</H1>
@@ -126,16 +126,14 @@ export default function Page() {
                 key={c.id}
                 caseData={c}
                 isSelected={c.id === selectedCard}
-                onClick={() => setSelectedCard(c.id)}
+                onClick={() => {
+                  setSelectedCard(c.id);
+                  setCaseInfo(c);
+                }}
               />
             ))}
         </CardColumn>
-        <CaseDetailDisplay>
-          {/* proof of concept -- to turn into component later */}
-          <CaseDetails>
-            <H2>Case details.</H2>
-          </CaseDetails>
-        </CaseDetailDisplay>
+        {caseInfo && <CaseDetailDisplay caseData={caseInfo} />}
       </MainDisplay>
     </PageContainer>
   );
diff --git a/src/app/interest/page.tsx b/src/app/interest/page.tsx
deleted file mode 100644
index 44e8e6ff..00000000
--- a/src/app/interest/page.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { UUID } from 'crypto';
-import { insertInterest } from '../../api/supabase/queries/interest';
-import { Interest } from '../../types/schema';
-import styles from '../page.module.css';
-
-export default function Interest() {
-  const [reason, setReason] = useState<string>('');
-
-  const handleInsert = async () => {
-    if (reason !== '') {
-      const newInterest: Interest = {
-        // hardcoded values for now
-        id: crypto.randomUUID() as UUID,
-        listing_id: '36b8f84d-df4e-4d49-b662-bcde71a8764f',
-        listing_type: 100,
-        user_id: '36b8f84d-df4e-4d49-b662-bcde71a8764f',
-        form_response: {
-          interestType: 'IJP-6-test',
-          interestReason: reason,
-          start_date: 'Jan 1 2020 8:00:00 PM UTC-7',
-        },
-      };
-      await insertInterest(newInterest);
-      setReason('');
-    } else {
-      // console.log('cannot create an empty interest');
-    }
-  };
-
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>Interest Form</div>
-      <form>
-        <textarea
-          required
-          value={reason}
-          onChange={event => setReason(event.target.value)}
-        />
-        <button type="button" onClick={handleInsert}>
-          Submit
-        </button>
-      </form>
-    </main>
-  );
-}
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 00000000..11bd0a0a
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+import COLORS from '../styles/colors';
+
+export const Button = styled.button<{ $secondary?: boolean }>`
+  /* Adapt the colors based on the primary prop */
+  color: ${props => (props.$secondary ? 'black' : 'white')};
+  background: ${props => (props.$secondary ? 'white' : COLORS.blueMid)};
+
+  appearance: none;
+  align-self: flex-end;
+  padding: 10px 20px;
+  border-radius: 5px;
+  border: 2px solid ${COLORS.blueMid};
+`;
+
+export const ErrorButton = styled(Button)<{ $secondary?: boolean }>`
+  /* Adapt the colors based on the primary prop for error buttons */
+  background: ${props => (props.$secondary ? 'white' : COLORS.blueMid)};
+  border: 2px solid ${COLORS.blueMid};
+`;
diff --git a/src/components/CaseDetails/index.tsx b/src/components/CaseDetails/index.tsx
new file mode 100644
index 00000000..87a56ad9
--- /dev/null
+++ b/src/components/CaseDetails/index.tsx
@@ -0,0 +1,35 @@
+/* eslint-disable react/jsx-no-comment-textnodes */
+import React from 'react';
+import {
+  CaseInterestContainer,
+  CaseDisplay,
+  InfoContainer,
+  Line,
+} from './styles';
+import { H1 } from '../../styles/text';
+import { CaseListing } from '../../types/schema';
+import InterestForm from '../InterestForm';
+
+export default function CaseDetails({ caseData }: { caseData: CaseListing }) {
+  return (
+    <CaseDisplay>
+      <CaseInterestContainer>
+        <InfoContainer>
+          <H1>Guatemalan mother and two children seeking protection</H1>
+          <p>
+            <strong>Languages: </strong>
+            {caseData.languages}
+          </p>
+          <p>
+            <strong>Next Court/Filing Date:</strong>
+            {caseData.upcoming_date}
+          </p>
+
+          <p>{caseData.summary}</p>
+        </InfoContainer>
+        <Line />
+        <InterestForm caseData={caseData} />
+      </CaseInterestContainer>
+    </CaseDisplay>
+  );
+}
diff --git a/src/components/CaseDetails/styles.tsx b/src/components/CaseDetails/styles.tsx
new file mode 100644
index 00000000..04e3c6aa
--- /dev/null
+++ b/src/components/CaseDetails/styles.tsx
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import COLORS from '../../styles/colors';
+
+// case detail
+export const CaseDisplay = styled.aside`
+  position: relative;
+  width: 100%;
+`;
+
+export const CaseTitle = styled.h1`
+  margin: 0.4rem 4rem;
+`;
+
+export const CaseInterestContainer = styled.div`
+  position: sticky;
+  top: 4rem;
+  width: 95%;
+  height: 85vh;
+  border-radius: 10px;
+  margin: 0 auto;
+  padding: 2rem;
+  border: 2px solid ${COLORS.blueMid};
+  justify-content: space-between;
+  flex-direction: column;
+  gap: 1.4rem;
+  display: block;
+`;
+
+export const InfoContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 50%;
+  gap: 0.5rem;
+  padding: 0.2rem;
+`;
+
+export const Line = styled.hr`
+  color: 'black';
+  background-color: 'black';
+  border-color: 'black';
+`;
diff --git a/src/components/InterestForm/index.tsx b/src/components/InterestForm/index.tsx
new file mode 100644
index 00000000..56e2de41
--- /dev/null
+++ b/src/components/InterestForm/index.tsx
@@ -0,0 +1,83 @@
+'use client';
+
+import { useState } from 'react';
+import { UUID } from 'crypto';
+import { insertInterest } from '../../api/supabase/queries/interest';
+import { Interest, CaseListing } from '../../types/schema';
+import { Button } from '../Button';
+import {
+  FormContainer,
+  FormTextArea,
+  FormInput,
+  RadioGroup,
+  RadioLabel,
+  RadioInput,
+} from './styles';
+
+const radioOptions = ['Attorney', 'Interpreter', 'Both Interpreter & Attorney'];
+
+export default function InterestForm({ caseData }: { caseData: CaseListing }) {
+  const [reason, setReason] = useState<string>('');
+  const [rolesInterested, setRolesInterested] = useState<string>('');
+  const [startDate, setStartDate] = useState<string>('');
+
+  const handleInsert = async () => {
+    if (reason !== '') {
+      const newInterest: Interest = {
+        // hardcoded values for now
+        id: crypto.randomUUID() as UUID,
+        listing_id: caseData.id,
+        listing_type: 1,
+        user_id: '36b8f84d-df4e-4d49-b662-bcde71a8764f',
+        form_response: {
+          interestType: rolesInterested,
+          interestReason: reason,
+          start_date: startDate,
+        },
+      };
+      await insertInterest(newInterest);
+      setReason('');
+    } else {
+      // console.log('cannot create an empty interest');
+    }
+  };
+
+  return (
+    <FormContainer>
+      {/* <input type="text" /> */}
+      <strong>Submit Interest</strong>
+      <div>What role(s) are you applying for?</div>
+      <RadioGroup>
+        {radioOptions.map(option => (
+          <RadioLabel key={option}>
+            <RadioInput
+              id="radio"
+              type="radio"
+              name="radioOptions"
+              value={option}
+              checked={rolesInterested === option}
+              onClick={() => setRolesInterested(option)}
+            />
+            {option}
+          </RadioLabel>
+        ))}
+      </RadioGroup>
+
+      <p>What is the earliest date you are willing to contact the client?</p>
+      <FormInput
+        id="startDate"
+        placeholder="mm/dd/yyyy"
+        onChange={event => setStartDate(event.target.value)}
+      />
+
+      <p>Why are you interested in this case?</p>
+      <FormTextArea
+        id="reason"
+        required
+        value={reason}
+        onChange={event => setReason(event.target.value)}
+      />
+      <Button onClick={handleInsert}>Submit Interest</Button>
+    </FormContainer>
+  );
+}
diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
new file mode 100644
index 00000000..3a5f9252
--- /dev/null
+++ b/src/components/InterestForm/styles.tsx
@@ -0,0 +1,66 @@
+import styled from 'styled-components';
+import COLORS from '../../styles/colors';
+
+export const FormContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  width: 65%;
+  float: right;
+  margin-top: 1rem;
+  gap: 0.5rem;
+  height: 50%;
+`;
+
+export const FormTextArea = styled.textarea`
+  height: 16vh;
+  resize: none;
+  border-radius: 5px;
+  border: 1px solid var(--mid-grey, #ccc);
+  padding: 0.5rem;
+`;
+
+export const FormInput = styled.input`
+  border-radius: 5px;
+  border: 1px solid var(--mid-grey, #ccc);
+  padding: 0.5rem;
+  margin-bottom: 0.6rem;
+`;
+
+export const RadioGroup = styled.div`
+  display: flex;
+  flex-direction: row;
+  margin-bottom: 0.6rem;
+  gap: 4rem;
+`;
+
+export const RadioLabel = styled.label`
+  display: flex;
+  font-size: 14px;
+`;
+
+export const RadioInput = styled.input`
+  display: flex;
+  margin-right: 0.5rem;
+  appearance: none;
+  width: 1rem;
+  height: 1rem;
+  border: 1px solid ${COLORS.blueMid};
+  border-radius: 50%;
+  position: relative; /* Added to establish a positioning context */
+  &:after {
+    content: '';
+    display: block;
+    border-radius: 50%;
+    width: 0.73rem;
+    height: 0.73rem;
+    margin-left: 0.08rem;
+    margin-top: 0.08rem;
+    position: absolute; /* Position absolutely within the radio input */
+  }
+  &:checked {
+    &:after {
+      background-color: ${COLORS.blueMid};
+    }
+  }
+`;
diff --git a/src/components/ListingCard/index.tsx b/src/components/ListingCard/index.tsx
index d7bbf026..6e28b8d9 100644
--- a/src/components/ListingCard/index.tsx
+++ b/src/components/ListingCard/index.tsx
@@ -31,8 +31,8 @@ export default function ListingCard({
         {caseData.languages.join(', ')}
       </p>
       <p>
-        <strong>Upcoming Date: </strong>
-        {parseDate(timestampStringToDate(caseData.upcoming_date))}
+        <strong>Case Deadline: </strong>
+        {/* {parseDate(timestampStringToDate(caseData.time_to_complete))} */}
       </p>
       <TagRow>
         {caseData.needs_interpreter && (
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
new file mode 100644
index 00000000..8803dc99
--- /dev/null
+++ b/src/components/Radio.tsx
@@ -0,0 +1,8 @@
+import styled from 'styled-components';
+import COLORS from '../styles/colors';
+
+export const FormRadio = styled.input`
+  border: 1px solid ${COLORS.blueMid};
+`;
+
+export const Radio = styled.input``;

From 25d3c6ee0d3b0cd7dd56332bed62cefd0cba5567 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Tue, 24 Oct 2023 14:05:29 -0700
Subject: [PATCH 02/11] fix: fixed interest form frontend bugs

---
 src/app/cases/styles.tsx               | 14 +---------
 src/components/Button.tsx              | 16 ++++++++---
 src/components/CaseDetails/styles.tsx  |  7 +++--
 src/components/InterestForm/index.tsx  |  2 +-
 src/components/InterestForm/styles.tsx | 37 +++++++++++++-------------
 src/components/ListingCard/index.tsx   |  1 +
 6 files changed, 36 insertions(+), 41 deletions(-)

diff --git a/src/app/cases/styles.tsx b/src/app/cases/styles.tsx
index ae8a4ad6..47e899a5 100644
--- a/src/app/cases/styles.tsx
+++ b/src/app/cases/styles.tsx
@@ -29,6 +29,7 @@ export const CardColumn = styled.div`
   border-right: 1px solid black;
   padding-top: 3px;
   padding-right: 2rem;
+  /* overflow: scroll; */
 `;
 
 // case detail
@@ -36,16 +37,3 @@ export const CaseDetailDisplay = styled.aside`
   position: relative;
   width: 100%;
 `;
-
-export const CaseDetails = styled.div`
-  position: sticky;
-  top: 4rem;
-  background: white;
-  width: 90%;
-  height: 80vh;
-  border-radius: 20px;
-  margin: 0 auto;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
-  padding: 2rem;
-  border: 1px solid lightgray;
-`;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 11bd0a0a..179e779c 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -2,7 +2,7 @@ import styled from 'styled-components';
 import COLORS from '../styles/colors';
 
 export const Button = styled.button<{ $secondary?: boolean }>`
-  /* Adapt the colors based on the primary prop */
+  /* Adapt the colors based on the secondary prop */
   color: ${props => (props.$secondary ? 'black' : 'white')};
   background: ${props => (props.$secondary ? 'white' : COLORS.blueMid)};
 
@@ -11,10 +11,18 @@ export const Button = styled.button<{ $secondary?: boolean }>`
   padding: 10px 20px;
   border-radius: 5px;
   border: 2px solid ${COLORS.blueMid};
+  &:hover {
+    background: ${props => (props.$secondary ? '#f2f2f2' : '#004773')};
+    border-color: '#004773';
+  }
 `;
 
 export const ErrorButton = styled(Button)<{ $secondary?: boolean }>`
-  /* Adapt the colors based on the primary prop for error buttons */
-  background: ${props => (props.$secondary ? 'white' : COLORS.blueMid)};
-  border: 2px solid ${COLORS.blueMid};
+  /* Adapt the colors based on the secondary prop for error buttons */
+  background: ${props => (props.$secondary ? 'white' : COLORS.redMid)};
+  border: 2px solid ${COLORS.redMid};
+  &:hover {
+    background: ${props => (props.$secondary ? '#f2f2f2' : '#a83133')};
+    border-color: '#a83133';
+  }
 `;
diff --git a/src/components/CaseDetails/styles.tsx b/src/components/CaseDetails/styles.tsx
index 04e3c6aa..66ca106c 100644
--- a/src/components/CaseDetails/styles.tsx
+++ b/src/components/CaseDetails/styles.tsx
@@ -15,7 +15,6 @@ export const CaseInterestContainer = styled.div`
   position: sticky;
   top: 4rem;
   width: 95%;
-  height: 85vh;
   border-radius: 10px;
   margin: 0 auto;
   padding: 2rem;
@@ -24,19 +23,19 @@ export const CaseInterestContainer = styled.div`
   flex-direction: column;
   gap: 1.4rem;
   display: block;
+  overflow: scroll;
 `;
 
 export const InfoContainer = styled.div`
   display: flex;
   flex-direction: column;
   width: 100%;
-  height: 50%;
+  min-height: 50%;
   gap: 0.5rem;
+  margin-bottom: 1rem;
   padding: 0.2rem;
 `;
 
 export const Line = styled.hr`
   color: 'black';
-  background-color: 'black';
-  border-color: 'black';
 `;
diff --git a/src/components/InterestForm/index.tsx b/src/components/InterestForm/index.tsx
index 56e2de41..3af81c41 100644
--- a/src/components/InterestForm/index.tsx
+++ b/src/components/InterestForm/index.tsx
@@ -14,7 +14,7 @@ import {
   RadioInput,
 } from './styles';
 
-const radioOptions = ['Attorney', 'Interpreter', 'Both Interpreter & Attorney'];
+const radioOptions = ['Attorney', 'Interpreter', 'Both Attorney & Interpreter'];
 
 export default function InterestForm({ caseData }: { caseData: CaseListing }) {
   const [reason, setReason] = useState<string>('');
diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
index 3a5f9252..13a61dd5 100644
--- a/src/components/InterestForm/styles.tsx
+++ b/src/components/InterestForm/styles.tsx
@@ -1,15 +1,14 @@
 import styled from 'styled-components';
 import COLORS from '../../styles/colors';
 
-export const FormContainer = styled.div`
+export const FormContainer = styled.form`
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  width: 65%;
+  width: 60%;
   float: right;
   margin-top: 1rem;
   gap: 0.5rem;
-  height: 50%;
 `;
 
 export const FormTextArea = styled.textarea`
@@ -18,6 +17,10 @@ export const FormTextArea = styled.textarea`
   border-radius: 5px;
   border: 1px solid var(--mid-grey, #ccc);
   padding: 0.5rem;
+  &:focus {
+    border-color: ${COLORS.blueMid};
+    outline: none;
+  }
 `;
 
 export const FormInput = styled.input`
@@ -25,13 +28,19 @@ export const FormInput = styled.input`
   border: 1px solid var(--mid-grey, #ccc);
   padding: 0.5rem;
   margin-bottom: 0.6rem;
+  &:focus {
+    border-color: ${COLORS.blueMid};
+    outline: none;
+  }
 `;
 
 export const RadioGroup = styled.div`
   display: flex;
   flex-direction: row;
   margin-bottom: 0.6rem;
-  gap: 4rem;
+  column-gap: 4rem;
+  row-gap: 0.4rem;
+  flex-wrap: wrap;
 `;
 
 export const RadioLabel = styled.label`
@@ -40,27 +49,17 @@ export const RadioLabel = styled.label`
 `;
 
 export const RadioInput = styled.input`
-  display: flex;
+  display: grid;
+  place-items: center;
   margin-right: 0.5rem;
   appearance: none;
   width: 1rem;
   height: 1rem;
   border: 1px solid ${COLORS.blueMid};
   border-radius: 50%;
-  position: relative; /* Added to establish a positioning context */
-  &:after {
-    content: '';
-    display: block;
-    border-radius: 50%;
-    width: 0.73rem;
-    height: 0.73rem;
-    margin-left: 0.08rem;
-    margin-top: 0.08rem;
-    position: absolute; /* Position absolutely within the radio input */
-  }
+  position: relative;
+
   &:checked {
-    &:after {
-      background-color: ${COLORS.blueMid};
-    }
+    box-shadow: 0 0 0 0.1rem white inset, 0 0 0 0.5rem ${COLORS.blueMid} inset;
   }
 `;
diff --git a/src/components/ListingCard/index.tsx b/src/components/ListingCard/index.tsx
index 6e28b8d9..b7ea630b 100644
--- a/src/components/ListingCard/index.tsx
+++ b/src/components/ListingCard/index.tsx
@@ -32,6 +32,7 @@ export default function ListingCard({
       </p>
       <p>
         <strong>Case Deadline: </strong>
+        {/* PLEASE UNCOMMENT THE LINE BELOW AFTER NEW SCHEMA CHANGES */}
         {/* {parseDate(timestampStringToDate(caseData.time_to_complete))} */}
       </p>
       <TagRow>

From faaccd1d91c5a802b12374272a5b0765faef4622 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Tue, 24 Oct 2023 17:10:10 -0700
Subject: [PATCH 03/11] style: fixing small details with components

---
 src/components/Button.tsx              | 10 ++++++----
 src/components/CaseDetails/index.tsx   |  5 +++--
 src/components/InterestForm/styles.tsx |  5 +++--
 src/components/ListingCard/index.tsx   | 12 ++++++------
 src/utils/helpers.ts                   |  3 +++
 5 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 179e779c..85ca159d 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -12,8 +12,9 @@ export const Button = styled.button<{ $secondary?: boolean }>`
   border-radius: 5px;
   border: 2px solid ${COLORS.blueMid};
   &:hover {
-    background: ${props => (props.$secondary ? '#f2f2f2' : '#004773')};
-    border-color: '#004773';
+    background: ${props =>
+      props.$secondary ? '#f2f2f2' : COLORS.ijpBlueClicked};
+    border-color: ${COLORS.ijpBlueClicked};
   }
 `;
 
@@ -22,7 +23,8 @@ export const ErrorButton = styled(Button)<{ $secondary?: boolean }>`
   background: ${props => (props.$secondary ? 'white' : COLORS.redMid)};
   border: 2px solid ${COLORS.redMid};
   &:hover {
-    background: ${props => (props.$secondary ? '#f2f2f2' : '#a83133')};
-    border-color: '#a83133';
+    background: ${props =>
+      props.$secondary ? '#f2f2f2' : COLORS.errorColorClicked};
+    border-color: ${COLORS.errorColorClicked};
   }
 `;
diff --git a/src/components/CaseDetails/index.tsx b/src/components/CaseDetails/index.tsx
index 87a56ad9..9cec1456 100644
--- a/src/components/CaseDetails/index.tsx
+++ b/src/components/CaseDetails/index.tsx
@@ -6,6 +6,7 @@ import {
   InfoContainer,
   Line,
 } from './styles';
+import { timestampStringToDate, parseDate } from '../../utils/helpers';
 import { H1 } from '../../styles/text';
 import { CaseListing } from '../../types/schema';
 import InterestForm from '../InterestForm';
@@ -21,8 +22,8 @@ export default function CaseDetails({ caseData }: { caseData: CaseListing }) {
             {caseData.languages}
           </p>
           <p>
-            <strong>Next Court/Filing Date:</strong>
-            {caseData.upcoming_date}
+            <strong>Next Court/Filing Date: </strong>
+            {parseDate(timestampStringToDate(caseData.upcoming_date))}
           </p>
 
           <p>{caseData.summary}</p>
diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
index 13a61dd5..0848bad3 100644
--- a/src/components/InterestForm/styles.tsx
+++ b/src/components/InterestForm/styles.tsx
@@ -16,6 +16,7 @@ export const FormTextArea = styled.textarea`
   resize: none;
   border-radius: 5px;
   border: 1px solid var(--mid-grey, #ccc);
+  margin-bottom: 0.6rem;
   padding: 0.5rem;
   &:focus {
     border-color: ${COLORS.blueMid};
@@ -38,7 +39,7 @@ export const RadioGroup = styled.div`
   display: flex;
   flex-direction: row;
   margin-bottom: 0.6rem;
-  column-gap: 4rem;
+  column-gap: 3rem;
   row-gap: 0.4rem;
   flex-wrap: wrap;
 `;
@@ -51,7 +52,7 @@ export const RadioLabel = styled.label`
 export const RadioInput = styled.input`
   display: grid;
   place-items: center;
-  margin-right: 0.5rem;
+  margin-right: 0.4rem;
   appearance: none;
   width: 1rem;
   height: 1rem;
diff --git a/src/components/ListingCard/index.tsx b/src/components/ListingCard/index.tsx
index b7ea630b..2aa259be 100644
--- a/src/components/ListingCard/index.tsx
+++ b/src/components/ListingCard/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { UUID } from 'crypto';
 import { CaseListing } from '@/types/schema';
-import { timestampStringToDate } from '@/utils/helpers';
 import { H2 } from '@/styles/text';
 import COLORS from '@/styles/colors';
+import { timestampStringToDate, parseDate } from '../../utils/helpers';
 import { CardBody, TagRow, CardTag } from './styles';
 
 export default function ListingCard({
@@ -15,9 +15,10 @@ export default function ListingCard({
   isSelected?: boolean;
   onClick?: (id: UUID) => void;
 }) {
-  // helper functions
-  const parseDate = (d: Date): string =>
-    `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;
+  // setup
+  const rolesNeeded = ['Attorney'].concat(
+    caseData.needs_interpreter ? ['Interpreter'] : [],
+  );
 
   return (
     <CardBody
@@ -32,8 +33,7 @@ export default function ListingCard({
       </p>
       <p>
         <strong>Case Deadline: </strong>
-        {/* PLEASE UNCOMMENT THE LINE BELOW AFTER NEW SCHEMA CHANGES */}
-        {/* {parseDate(timestampStringToDate(caseData.time_to_complete))} */}
+        {parseDate(timestampStringToDate(caseData.upcoming_date))}
       </p>
       <TagRow>
         {caseData.needs_interpreter && (
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 7564d8cb..9d502128 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -153,3 +153,6 @@ pSBC.pSBCr = (color: string) => {
   }
   return x;
 };
+  // helper functions
+export const parseDate = (d: Date): string =>
+  `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;

From 636ea1dc6d194c392fbd67d0246b52afa4da5752 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Tue, 24 Oct 2023 17:14:45 -0700
Subject: [PATCH 04/11] fix: eslint + prettier fixes

---
 src/utils/helpers.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 9d502128..78a26105 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -154,5 +154,6 @@ pSBC.pSBCr = (color: string) => {
   return x;
 };
   // helper functions
+// helper functions
 export const parseDate = (d: Date): string =>
   `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;

From 6ef3d6cb1e6c02c9021f75345ffdf20557224efc Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Tue, 31 Oct 2023 11:35:28 -0700
Subject: [PATCH 05/11] fix: fixes functionality of interest form & radio
 button

---
 src/api/supabase/queries/interest.ts   |  1 -
 src/components/Button.tsx              |  2 +-
 src/components/CaseDetails/styles.tsx  |  3 +-
 src/components/InterestForm/index.tsx  | 32 +++++++++++++++-----
 src/components/InterestForm/styles.tsx | 41 ++++++++++++++++++++++----
 src/components/Radio.tsx               |  8 -----
 src/components/TextInput/styles.tsx    |  2 +-
 7 files changed, 64 insertions(+), 25 deletions(-)
 delete mode 100644 src/components/Radio.tsx

diff --git a/src/api/supabase/queries/interest.ts b/src/api/supabase/queries/interest.ts
index f7ca5dad..09df49aa 100644
--- a/src/api/supabase/queries/interest.ts
+++ b/src/api/supabase/queries/interest.ts
@@ -14,7 +14,6 @@ export async function getAllInterests() {
 /** Insert a new interest object into supabase interest table. */
 export async function insertInterest(interest: Interest) {
   const { error } = await supabase.from('interests').insert(interest).select();
-
   if (error) {
     throw new Error(`An error occurred trying to insert an interest: ${error}`);
   }
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 85ca159d..d6b3dbf1 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -8,7 +8,7 @@ export const Button = styled.button<{ $secondary?: boolean }>`
 
   appearance: none;
   align-self: flex-end;
-  padding: 10px 20px;
+  padding: 0.625rem 1.25rem;
   border-radius: 5px;
   border: 2px solid ${COLORS.blueMid};
   &:hover {
diff --git a/src/components/CaseDetails/styles.tsx b/src/components/CaseDetails/styles.tsx
index 66ca106c..bfda2365 100644
--- a/src/components/CaseDetails/styles.tsx
+++ b/src/components/CaseDetails/styles.tsx
@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { H1 } from '@/styles/text';
 import COLORS from '../../styles/colors';
 
 // case detail
@@ -7,7 +8,7 @@ export const CaseDisplay = styled.aside`
   width: 100%;
 `;
 
-export const CaseTitle = styled.h1`
+export const CaseTitle = styled(H1)`
   margin: 0.4rem 4rem;
 `;
 
diff --git a/src/components/InterestForm/index.tsx b/src/components/InterestForm/index.tsx
index 3af81c41..f26942ff 100644
--- a/src/components/InterestForm/index.tsx
+++ b/src/components/InterestForm/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { UUID } from 'crypto';
 import { insertInterest } from '../../api/supabase/queries/interest';
 import { Interest, CaseListing } from '../../types/schema';
@@ -12,6 +12,8 @@ import {
   RadioGroup,
   RadioLabel,
   RadioInput,
+  FormFooter,
+  FormWarning,
 } from './styles';
 
 const radioOptions = ['Attorney', 'Interpreter', 'Both Attorney & Interpreter'];
@@ -21,6 +23,13 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
   const [rolesInterested, setRolesInterested] = useState<string>('');
   const [startDate, setStartDate] = useState<string>('');
 
+  useEffect(() => {
+    // Reset form fields when caseData changes
+    setReason('');
+    setStartDate('');
+    setRolesInterested('');
+  }, [caseData]);
+
   const handleInsert = async () => {
     if (reason !== '') {
       const newInterest: Interest = {
@@ -35,18 +44,16 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
           start_date: startDate,
         },
       };
+
       await insertInterest(newInterest);
       setReason('');
-    } else {
-      // console.log('cannot create an empty interest');
     }
   };
 
   return (
     <FormContainer>
-      {/* <input type="text" /> */}
       <strong>Submit Interest</strong>
-      <div>What role(s) are you applying for?</div>
+      <p>What role(s) are you applying for?</p>
       <RadioGroup>
         {radioOptions.map(option => (
           <RadioLabel key={option}>
@@ -56,7 +63,7 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
               name="radioOptions"
               value={option}
               checked={rolesInterested === option}
-              onClick={() => setRolesInterested(option)}
+              onChange={event => setRolesInterested(event.target.value)}
             />
             {option}
           </RadioLabel>
@@ -66,7 +73,9 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
       <p>What is the earliest date you are willing to contact the client?</p>
       <FormInput
         id="startDate"
-        placeholder="mm/dd/yyyy"
+        required
+        placeholder="MM/DD/YYYY"
+        value={startDate}
         onChange={event => setStartDate(event.target.value)}
       />
 
@@ -77,7 +86,14 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
         value={reason}
         onChange={event => setReason(event.target.value)}
       />
-      <Button onClick={handleInsert}>Submit Interest</Button>
+      <FormFooter>
+        <FormWarning>
+          Your interest form is not saved!
+          <br />
+          Please submit before leaving this page.
+        </FormWarning>
+        <Button onClick={handleInsert}>Submit Interest</Button>
+      </FormFooter>
     </FormContainer>
   );
 }
diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
index 0848bad3..e0a3bfd2 100644
--- a/src/components/InterestForm/styles.tsx
+++ b/src/components/InterestForm/styles.tsx
@@ -1,7 +1,10 @@
 import styled from 'styled-components';
+import { Open_Sans as OpenSans } from 'next/font/google';
 import COLORS from '../../styles/colors';
 
-export const FormContainer = styled.form`
+const openSans = OpenSans({ subsets: ['latin'] });
+
+export const FormContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
@@ -12,10 +15,13 @@ export const FormContainer = styled.form`
 `;
 
 export const FormTextArea = styled.textarea`
+  ${openSans.style}
   height: 16vh;
   resize: none;
+  font-size: 1rem; // 16px;
+  font-weight: 400;
   border-radius: 5px;
-  border: 1px solid var(--mid-grey, #ccc);
+  border: 2px solid ${COLORS.greyLight};
   margin-bottom: 0.6rem;
   padding: 0.5rem;
   &:focus {
@@ -25,8 +31,11 @@ export const FormTextArea = styled.textarea`
 `;
 
 export const FormInput = styled.input`
+  ${openSans.style}
+  font-size: 1rem;
+  font-weight: 400;
   border-radius: 5px;
-  border: 1px solid var(--mid-grey, #ccc);
+  border: 2px solid ${COLORS.greyLight};
   padding: 0.5rem;
   margin-bottom: 0.6rem;
   &:focus {
@@ -46,7 +55,7 @@ export const RadioGroup = styled.div`
 
 export const RadioLabel = styled.label`
   display: flex;
-  font-size: 14px;
+  font-size: 0.875rem; //14px
 `;
 
 export const RadioInput = styled.input`
@@ -56,11 +65,33 @@ export const RadioInput = styled.input`
   appearance: none;
   width: 1rem;
   height: 1rem;
-  border: 1px solid ${COLORS.blueMid};
+  border: 2px solid ${COLORS.greyMid};
   border-radius: 50%;
   position: relative;
 
   &:checked {
     box-shadow: 0 0 0 0.1rem white inset, 0 0 0 0.5rem ${COLORS.blueMid} inset;
+    border-color: ${COLORS.blueMid};
   }
+  &:hover {
+    border-color: ${COLORS.blueMid};
+  }
+`;
+
+export const FormFooter = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+  align-self: stretch;
+`;
+
+export const FormWarning = styled.p`
+  padding-bottom: 0.375rem; // 6px
+  color: ${COLORS.greyMid};
+  font-size: 0.75rem; // 12px
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  max-width: 50%;
+  height: 100%;
 `;
diff --git a/src/components/Radio.tsx b/src/components/Radio.tsx
deleted file mode 100644
index 8803dc99..00000000
--- a/src/components/Radio.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-import styled from 'styled-components';
-import COLORS from '../styles/colors';
-
-export const FormRadio = styled.input`
-  border: 1px solid ${COLORS.blueMid};
-`;
-
-export const Radio = styled.input``;
diff --git a/src/components/TextInput/styles.tsx b/src/components/TextInput/styles.tsx
index c9dacea5..62456fde 100644
--- a/src/components/TextInput/styles.tsx
+++ b/src/components/TextInput/styles.tsx
@@ -11,7 +11,7 @@ export const InputText = styled(P)<{ $error: boolean }>`
   padding: 0.625rem 1.25rem; // 10px 20px 10px 20px;
   border-radius: 5px;
   border: 2px solid
-    ${({ $error }) => ($error ? COLORS.redMid : COLORS.placeholderText)};
+    ${({ $error }) => ($error ? COLORS.redMid : COLORS.greyDark)};
   justify-content: flex-start;
   align-items: flex-start;
   outline: none;

From 8c1e74fd1e8f5bb845ebc02f0d481b9bb5960d36 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Tue, 31 Oct 2023 11:42:14 -0700
Subject: [PATCH 06/11] fix: prettier & lint fixes

---
 src/components/Button.tsx | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index d6b3dbf1..e658a49b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -12,9 +12,8 @@ export const Button = styled.button<{ $secondary?: boolean }>`
   border-radius: 5px;
   border: 2px solid ${COLORS.blueMid};
   &:hover {
-    background: ${props =>
-      props.$secondary ? '#f2f2f2' : COLORS.ijpBlueClicked};
-    border-color: ${COLORS.ijpBlueClicked};
+    background: ${props => (props.$secondary ? '#f2f2f2' : COLORS.blueMid)};
+    border-color: ${COLORS.blueMid};
   }
 `;
 
@@ -23,8 +22,7 @@ export const ErrorButton = styled(Button)<{ $secondary?: boolean }>`
   background: ${props => (props.$secondary ? 'white' : COLORS.redMid)};
   border: 2px solid ${COLORS.redMid};
   &:hover {
-    background: ${props =>
-      props.$secondary ? '#f2f2f2' : COLORS.errorColorClicked};
-    border-color: ${COLORS.errorColorClicked};
+    background: ${props => (props.$secondary ? '#f2f2f2' : COLORS.redDark)};
+    border-color: ${COLORS.redDark};
   }
 `;

From 19d670f7cb06c87476e2094f09d78997a7ee08d3 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Wed, 1 Nov 2023 04:52:09 -0700
Subject: [PATCH 07/11] refactor: updates Button component + other changes
 based on feedback

---
 src/components/Button.tsx              | 54 +++++++++++++++++---------
 src/components/InterestForm/index.tsx  | 36 ++++++++++++-----
 src/components/InterestForm/styles.tsx | 11 ++++--
 src/components/ListingCard/index.tsx   |  2 +-
 src/styles/text.tsx                    |  2 +
 5 files changed, 73 insertions(+), 32 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index e658a49b..39a9a141 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,28 +1,46 @@
 import styled from 'styled-components';
-import COLORS from '../styles/colors';
 
-export const Button = styled.button<{ $secondary?: boolean }>`
-  /* Adapt the colors based on the secondary prop */
-  color: ${props => (props.$secondary ? 'black' : 'white')};
-  background: ${props => (props.$secondary ? 'white' : COLORS.blueMid)};
+/* 
+  FOR PRIMARY BUTTON USAGE:
 
+    Props: 
+      primaryColor (Required) - This color will determine the default background color of the button
+      secondaryColor (Required) - This color will determine the border color and background color on hover
+   
+    Example:
+      <Button primaryColor={COLORS.primaryBlue} secondaryColor={COLORS.primaryBlueClicked} onClick={...}>
+        [Button text here]
+      </Button>
+
+  FOR SECONDARY BUTTON USAGE:
+
+    Props:
+      primaryColor (Omit) - IMPORTANT: DO NOT PASS IN A primaryColor PROP!!! The background color will be white by default
+      secondaryColor (Required) - This color will determine the border color and background color on hover
+
+    Example: 
+      <Button secondaryColor={COLORS.primaryBlue} onClick={...}>
+        [Button text here]
+      </Button>
+ */
+// I think a jinkang PR, not on this branch, removes the error
+// that the line below disables (this is a temp fix for now)
+// eslint-disable-next-line import/prefer-default-export
+export const Button = styled.button<{
+  primaryColor?: string;
+  secondaryColor: string;
+}>`
   appearance: none;
+  color: ${props => (props.primaryColor ? 'white' : 'black')};
+  background: ${props => (props.primaryColor ? props.primaryColor : 'white')};
   align-self: flex-end;
   padding: 0.625rem 1.25rem;
   border-radius: 5px;
-  border: 2px solid ${COLORS.blueMid};
-  &:hover {
-    background: ${props => (props.$secondary ? '#f2f2f2' : COLORS.blueMid)};
-    border-color: ${COLORS.blueMid};
-  }
-`;
-
-export const ErrorButton = styled(Button)<{ $secondary?: boolean }>`
-  /* Adapt the colors based on the secondary prop for error buttons */
-  background: ${props => (props.$secondary ? 'white' : COLORS.redMid)};
-  border: 2px solid ${COLORS.redMid};
+  border: 2px solid
+    ${props => (props.primaryColor ? props.primaryColor : props.secondaryColor)};
   &:hover {
-    background: ${props => (props.$secondary ? '#f2f2f2' : COLORS.redDark)};
-    border-color: ${COLORS.redDark};
+    background: ${props => props.secondaryColor};
+    color: white;
+    border-color: ${props => props.secondaryColor};
   }
 `;
diff --git a/src/components/InterestForm/index.tsx b/src/components/InterestForm/index.tsx
index f26942ff..002c7e1c 100644
--- a/src/components/InterestForm/index.tsx
+++ b/src/components/InterestForm/index.tsx
@@ -1,9 +1,11 @@
 'use client';
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { UUID } from 'crypto';
-import { insertInterest } from '../../api/supabase/queries/interest';
-import { Interest, CaseListing } from '../../types/schema';
+import { insertInterest } from '@/api/supabase/queries/interest';
+import { Interest, CaseListing } from '@/types/schema';
+import { H4 } from '@/styles/text';
+import COLORS from '@/styles/colors';
 import { Button } from '../Button';
 import {
   FormContainer,
@@ -14,9 +16,14 @@ import {
   RadioInput,
   FormFooter,
   FormWarning,
+  FormTitle,
 } from './styles';
 
-const radioOptions = ['Attorney', 'Interpreter', 'Both Attorney & Interpreter'];
+const radioOptions = [
+  'Attorney',
+  'Interpreter',
+  'Either Attorney or Interpreter',
+];
 
 export default function InterestForm({ caseData }: { caseData: CaseListing }) {
   const [reason, setReason] = useState<string>('');
@@ -31,7 +38,8 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
   }, [caseData]);
 
   const handleInsert = async () => {
-    if (reason !== '') {
+    // will improve this in the next sprint
+    if (reason !== '' && startDate !== '' && rolesInterested !== '') {
       const newInterest: Interest = {
         // hardcoded values for now
         id: crypto.randomUUID() as UUID,
@@ -47,13 +55,15 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
 
       await insertInterest(newInterest);
       setReason('');
+      setStartDate('');
+      setRolesInterested('');
     }
   };
 
   return (
     <FormContainer>
-      <strong>Submit Interest</strong>
-      <p>What role(s) are you applying for?</p>
+      <FormTitle>Submit Interest</FormTitle>
+      <H4>What role(s) are you applying for?</H4>
       <RadioGroup>
         {radioOptions.map(option => (
           <RadioLabel key={option}>
@@ -70,7 +80,7 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
         ))}
       </RadioGroup>
 
-      <p>What is the earliest date you are willing to contact the client?</p>
+      <H4>What is the earliest date you can contact the client?</H4>
       <FormInput
         id="startDate"
         required
@@ -79,7 +89,7 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
         onChange={event => setStartDate(event.target.value)}
       />
 
-      <p>Why are you interested in this case?</p>
+      <H4>Why are you interested in this case?</H4>
       <FormTextArea
         id="reason"
         required
@@ -92,7 +102,13 @@ export default function InterestForm({ caseData }: { caseData: CaseListing }) {
           <br />
           Please submit before leaving this page.
         </FormWarning>
-        <Button onClick={handleInsert}>Submit Interest</Button>
+        <Button
+          primaryColor={COLORS.blueMid}
+          secondaryColor={COLORS.blueDark}
+          onClick={handleInsert}
+        >
+          Submit Interest
+        </Button>
       </FormFooter>
     </FormContainer>
   );
diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
index e0a3bfd2..49216752 100644
--- a/src/components/InterestForm/styles.tsx
+++ b/src/components/InterestForm/styles.tsx
@@ -1,6 +1,7 @@
 import styled from 'styled-components';
 import { Open_Sans as OpenSans } from 'next/font/google';
-import COLORS from '../../styles/colors';
+import COLORS from '@/styles/colors';
+import { H3 } from '@/styles/text';
 
 const openSans = OpenSans({ subsets: ['latin'] });
 
@@ -11,12 +12,16 @@ export const FormContainer = styled.div`
   width: 60%;
   float: right;
   margin-top: 1rem;
-  gap: 0.5rem;
+  gap: 0.6rem;
+`;
+
+export const FormTitle = styled(H3)`
+  margin-bottom: 0.2rem;
 `;
 
 export const FormTextArea = styled.textarea`
   ${openSans.style}
-  height: 16vh;
+  min-height: 10rem;
   resize: none;
   font-size: 1rem; // 16px;
   font-weight: 400;
diff --git a/src/components/ListingCard/index.tsx b/src/components/ListingCard/index.tsx
index 2aa259be..7e7cd415 100644
--- a/src/components/ListingCard/index.tsx
+++ b/src/components/ListingCard/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { UUID } from 'crypto';
 import { CaseListing } from '@/types/schema';
+import { timestampStringToDate, parseDate } from '@/utils/helpers';
 import { H2 } from '@/styles/text';
 import COLORS from '@/styles/colors';
-import { timestampStringToDate, parseDate } from '../../utils/helpers';
 import { CardBody, TagRow, CardTag } from './styles';
 
 export default function ListingCard({
diff --git a/src/styles/text.tsx b/src/styles/text.tsx
index f4e6ecd5..6cfaa29e 100644
--- a/src/styles/text.tsx
+++ b/src/styles/text.tsx
@@ -4,6 +4,8 @@ import COLORS from './colors';
 
 const openSans = OpenSans({ subsets: ['latin'] });
 
+// 1 rem = 16 px
+
 export const H1 = styled.h1<{ $color?: string }>`
   ${openSans.style}
   display: block;

From a5fda0a01133269a8beda236957222b444c37012 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Wed, 1 Nov 2023 04:57:41 -0700
Subject: [PATCH 08/11] chore: fixes imports

---
 src/app/cases/page.tsx                | 10 +++++-----
 src/components/CaseDetails/index.tsx  |  8 ++++----
 src/components/InterestForm/index.tsx |  2 +-
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/app/cases/page.tsx b/src/app/cases/page.tsx
index b94f7694..c7a3d3c4 100644
--- a/src/app/cases/page.tsx
+++ b/src/app/cases/page.tsx
@@ -2,18 +2,18 @@
 
 import { useEffect, useState } from 'react';
 import { UUID } from 'crypto';
-import ListingCard from '@/components/ListingCard';
+import { CaseListing } from '@/types/schema';
 import FilterDropdown from '@/components/FilterDropdown';
-import { CaseListing } from '../../types/schema';
-import { getNCases } from '../../api/supabase/queries/cases';
-import CaseDetailDisplay from '../../components/CaseDetails';
+import { getNCases } from '@/api/supabase/queries/cases';
+import ListingCard from '@/components/ListingCard';
+import CaseDetailDisplay from '@/components/CaseDetails';
+import { H1 } from '@/styles/text';
 import {
   CardColumn,
   MainDisplay,
   PageContainer,
   FiltersContainer,
 } from './styles';
-import { H1 } from '../../styles/text';
 
 type FilterType = {
   remote: string;
diff --git a/src/components/CaseDetails/index.tsx b/src/components/CaseDetails/index.tsx
index 9cec1456..dd8aa55c 100644
--- a/src/components/CaseDetails/index.tsx
+++ b/src/components/CaseDetails/index.tsx
@@ -1,15 +1,15 @@
 /* eslint-disable react/jsx-no-comment-textnodes */
 import React from 'react';
+import { timestampStringToDate, parseDate } from '@/utils/helpers';
+import { H1 } from '@/styles/text';
+import { CaseListing } from '@/types/schema';
+import InterestForm from '../InterestForm';
 import {
   CaseInterestContainer,
   CaseDisplay,
   InfoContainer,
   Line,
 } from './styles';
-import { timestampStringToDate, parseDate } from '../../utils/helpers';
-import { H1 } from '../../styles/text';
-import { CaseListing } from '../../types/schema';
-import InterestForm from '../InterestForm';
 
 export default function CaseDetails({ caseData }: { caseData: CaseListing }) {
   return (
diff --git a/src/components/InterestForm/index.tsx b/src/components/InterestForm/index.tsx
index 002c7e1c..381ed41b 100644
--- a/src/components/InterestForm/index.tsx
+++ b/src/components/InterestForm/index.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { useState, useEffect, useRef } from 'react';
+import { useState, useEffect } from 'react';
 import { UUID } from 'crypto';
 import { insertInterest } from '@/api/supabase/queries/interest';
 import { Interest, CaseListing } from '@/types/schema';

From 5dd35afd312fb70bdcb0968f41bc2ce1cd3b9824 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Thu, 2 Nov 2023 14:45:34 -0700
Subject: [PATCH 09/11] refactor: fixes exports & removes comment

---
 src/app/cases/styles.tsx              | 1 -
 src/components/Button.tsx             | 7 +++----
 src/components/InterestForm/index.tsx | 2 +-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/app/cases/styles.tsx b/src/app/cases/styles.tsx
index 47e899a5..643a407e 100644
--- a/src/app/cases/styles.tsx
+++ b/src/app/cases/styles.tsx
@@ -29,7 +29,6 @@ export const CardColumn = styled.div`
   border-right: 1px solid black;
   padding-top: 3px;
   padding-right: 2rem;
-  /* overflow: scroll; */
 `;
 
 // case detail
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 39a9a141..317cd87b 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -23,10 +23,7 @@ import styled from 'styled-components';
         [Button text here]
       </Button>
  */
-// I think a jinkang PR, not on this branch, removes the error
-// that the line below disables (this is a temp fix for now)
-// eslint-disable-next-line import/prefer-default-export
-export const Button = styled.button<{
+const Button = styled.button<{
   primaryColor?: string;
   secondaryColor: string;
 }>`
@@ -44,3 +41,5 @@ export const Button = styled.button<{
     border-color: ${props => props.secondaryColor};
   }
 `;
+
+export default Button;
diff --git a/src/components/InterestForm/index.tsx b/src/components/InterestForm/index.tsx
index 381ed41b..d5b98445 100644
--- a/src/components/InterestForm/index.tsx
+++ b/src/components/InterestForm/index.tsx
@@ -6,7 +6,7 @@ import { insertInterest } from '@/api/supabase/queries/interest';
 import { Interest, CaseListing } from '@/types/schema';
 import { H4 } from '@/styles/text';
 import COLORS from '@/styles/colors';
-import { Button } from '../Button';
+import Button from '../Button';
 import {
   FormContainer,
   FormTextArea,

From 3078d38d6b24103ab193975f06d586181b1fb5a7 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Sun, 5 Nov 2023 23:18:19 -0800
Subject: [PATCH 10/11] chore: minor width update & prettier fixes

---
 src/components/InterestForm/styles.tsx | 2 +-
 src/components/ListingCard/index.tsx   | 5 -----
 src/utils/helpers.ts                   | 2 +-
 3 files changed, 2 insertions(+), 7 deletions(-)

diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
index 49216752..25d1b98e 100644
--- a/src/components/InterestForm/styles.tsx
+++ b/src/components/InterestForm/styles.tsx
@@ -9,7 +9,7 @@ export const FormContainer = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  width: 60%;
+  width: 61%;
   float: right;
   margin-top: 1rem;
   gap: 0.6rem;
diff --git a/src/components/ListingCard/index.tsx b/src/components/ListingCard/index.tsx
index 7e7cd415..6529530b 100644
--- a/src/components/ListingCard/index.tsx
+++ b/src/components/ListingCard/index.tsx
@@ -15,11 +15,6 @@ export default function ListingCard({
   isSelected?: boolean;
   onClick?: (id: UUID) => void;
 }) {
-  // setup
-  const rolesNeeded = ['Attorney'].concat(
-    caseData.needs_interpreter ? ['Interpreter'] : [],
-  );
-
   return (
     <CardBody
       $selected={isSelected}
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 78a26105..b5c34f98 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -153,7 +153,7 @@ pSBC.pSBCr = (color: string) => {
   }
   return x;
 };
-  // helper functions
+// helper functions
 // helper functions
 export const parseDate = (d: Date): string =>
   `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;

From 7e3e5a6521d2e0a92d373135ee56e5bf28622dd7 Mon Sep 17 00:00:00 2001
From: Alvaro Ortiz <varortz@berkeley.edu>
Date: Mon, 6 Nov 2023 22:25:01 -0800
Subject: [PATCH 11/11] chore: updating border-radius to rem units

---
 src/components/Button.tsx              | 2 +-
 src/components/InterestForm/styles.tsx | 4 ++--
 src/components/TextInput/styles.tsx    | 2 +-
 src/utils/helpers.ts                   | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Button.tsx b/src/components/Button.tsx
index 317cd87b..5d34ccfe 100644
--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -32,7 +32,7 @@ const Button = styled.button<{
   background: ${props => (props.primaryColor ? props.primaryColor : 'white')};
   align-self: flex-end;
   padding: 0.625rem 1.25rem;
-  border-radius: 5px;
+  border-radius: 0.313rem; // 5px
   border: 2px solid
     ${props => (props.primaryColor ? props.primaryColor : props.secondaryColor)};
   &:hover {
diff --git a/src/components/InterestForm/styles.tsx b/src/components/InterestForm/styles.tsx
index 25d1b98e..86e6d673 100644
--- a/src/components/InterestForm/styles.tsx
+++ b/src/components/InterestForm/styles.tsx
@@ -25,7 +25,7 @@ export const FormTextArea = styled.textarea`
   resize: none;
   font-size: 1rem; // 16px;
   font-weight: 400;
-  border-radius: 5px;
+  border-radius: 0.313rem; // 5px
   border: 2px solid ${COLORS.greyLight};
   margin-bottom: 0.6rem;
   padding: 0.5rem;
@@ -39,7 +39,7 @@ export const FormInput = styled.input`
   ${openSans.style}
   font-size: 1rem;
   font-weight: 400;
-  border-radius: 5px;
+  border-radius: 0.313rem; // 5px
   border: 2px solid ${COLORS.greyLight};
   padding: 0.5rem;
   margin-bottom: 0.6rem;
diff --git a/src/components/TextInput/styles.tsx b/src/components/TextInput/styles.tsx
index 62456fde..b0fb4eb6 100644
--- a/src/components/TextInput/styles.tsx
+++ b/src/components/TextInput/styles.tsx
@@ -9,7 +9,7 @@ export const InputText = styled(P)<{ $error: boolean }>`
   // pass in as='input' when using as a tag, since this is supposed to be an input
   color: ${COLORS.greyDarker};
   padding: 0.625rem 1.25rem; // 10px 20px 10px 20px;
-  border-radius: 5px;
+  border-radius: 0.313rem; // 5px
   border: 2px solid
     ${({ $error }) => ($error ? COLORS.redMid : COLORS.greyDark)};
   justify-content: flex-start;
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index b5c34f98..9a139a28 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -153,7 +153,7 @@ pSBC.pSBCr = (color: string) => {
   }
   return x;
 };
-// helper functions
+
 // helper functions
 export const parseDate = (d: Date): string =>
   `${d.getMonth() + 1}/${d.getDate()}/${d.getFullYear()}`;