From f58477385b8903611d901c5bfbcf57f72378c8ec Mon Sep 17 00:00:00 2001
From: Angela Zheng <92692008+AngelaZQ1@users.noreply.github.com>
Date: Thu, 19 Oct 2023 19:34:55 -0400
Subject: [PATCH] decrease font size (#632)

---
 .../components/Sidebar/SectionRequirement.tsx      | 14 ++++++++------
 .../components/Sidebar/SidebarSection.tsx          | 14 ++++++++++----
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/packages/frontend-v2/components/Sidebar/SectionRequirement.tsx b/packages/frontend-v2/components/Sidebar/SectionRequirement.tsx
index 23a859bc5..e546477ed 100644
--- a/packages/frontend-v2/components/Sidebar/SectionRequirement.tsx
+++ b/packages/frontend-v2/components/Sidebar/SectionRequirement.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/react";
+import { Box, Text } from "@chakra-ui/react";
 import {
   IAndCourse2,
   ICourseRange2,
@@ -50,7 +50,9 @@ const SectionRequirement: React.FC<SidebarRequirementProps> = ({
   const renderXOM = (requirement: IXofManyCourse) => {
     return (
       <div>
-        <p>Complete {requirement.numCreditsMin} credits from the following</p>
+        <Text fontSize="sm">
+          Complete {requirement.numCreditsMin} credits from the following
+        </Text>
         {requirement.courses.map((course, index) => (
           <SectionRequirement
             requirement={course}
@@ -66,7 +68,7 @@ const SectionRequirement: React.FC<SidebarRequirementProps> = ({
   const renderAND = (requirement: IAndCourse2) => {
     return (
       <div>
-        <p>Complete all of the following</p>
+        <Text fontSize="sm">Complete all of the following</Text>
         {requirement.courses.map((course, index) => (
           <SectionRequirement
             requirement={course}
@@ -82,7 +84,7 @@ const SectionRequirement: React.FC<SidebarRequirementProps> = ({
   const renderOR = (requirement: IOrCourse2) => {
     return (
       <div>
-        <p>Complete one of the following</p>
+        <Text fontSize="sm">Complete one of the following</Text>
         {requirement.courses.map((course, index) => (
           <SectionRequirement
             requirement={course}
@@ -97,7 +99,7 @@ const SectionRequirement: React.FC<SidebarRequirementProps> = ({
 
   const renderRange = (requirement: ICourseRange2) => {
     return (
-      <p>
+      <Text fontSize="sm">
         Complete any course in range {requirement.subject}
         {requirement.idRangeStart} to {requirement.subject}
         {requirement.idRangeEnd}{" "}
@@ -110,7 +112,7 @@ const SectionRequirement: React.FC<SidebarRequirementProps> = ({
               .slice(0, -1)}
           </>
         )}
-      </p>
+      </Text>
     );
   };
 
diff --git a/packages/frontend-v2/components/Sidebar/SidebarSection.tsx b/packages/frontend-v2/components/Sidebar/SidebarSection.tsx
index 6520e5dfc..2eafef705 100644
--- a/packages/frontend-v2/components/Sidebar/SidebarSection.tsx
+++ b/packages/frontend-v2/components/Sidebar/SidebarSection.tsx
@@ -114,14 +114,18 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
             */}
             <CheckIcon
               position="absolute"
-              opacity={validationStatus === SidebarValidationStatus.Complete ? 1 : 0}
+              opacity={
+                validationStatus === SidebarValidationStatus.Complete ? 1 : 0
+              }
               transition="opacity 0.25s ease"
               transitionDelay="0.1s"
               boxSize="9px"
             />
             <SmallCloseIcon
               position="absolute"
-              opacity={validationStatus === SidebarValidationStatus.Error ? 1 : 0}
+              opacity={
+                validationStatus === SidebarValidationStatus.Error ? 1 : 0
+              }
               transition="opacity 0.25s ease"
               transitionDelay="0.1s"
               boxSize="13px"
@@ -130,7 +134,9 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
               size="xs"
               color="grey"
               position="absolute"
-              opacity={validationStatus === SidebarValidationStatus.Loading ? 1 : 0}
+              opacity={
+                validationStatus === SidebarValidationStatus.Loading ? 1 : 0
+              }
               transition="opacity 0.25s ease"
               transitionDelay="0.1s"
             />
@@ -167,7 +173,7 @@ const SidebarSection: React.FC<SidebarSectionProps> = ({
         {opened && !loading && (
           <>
             {section.minRequirementCount < section.requirements.length && (
-              <Text>
+              <Text fontSize="sm">
                 Complete {section.minRequirementCount} of the following
               </Text>
             )}