From 8086e10e32d1686ef2bc3613dddd785bb6dc9e79 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Mon, 23 Oct 2023 00:59:11 -0700
Subject: [PATCH] fix: CSS Cleanup (#752)

Co-authored-by: Eric Pedley <ericpedley@gmail.com>
---
 .../src/components/Calendar/CalendarRoot.tsx           |  2 +-
 .../src/components/Calendar/CalendarToolbar.tsx        |  9 ++++++++-
 .../RightPane/AddedCourses/AddedCoursePane.tsx         |  2 +-
 .../components/RightPane/CoursePane/CoursePaneRoot.tsx |  2 +-
 .../RightPane/CoursePane/CourseRenderPane.tsx          |  1 +
 .../src/components/RightPane/RightPaneRoot.tsx         | 10 +++++-----
 .../components/RightPane/SectionTable/SectionTable.tsx |  4 ++--
 7 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx
index 7d763dabf..bd3b20ae3 100644
--- a/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx
+++ b/apps/antalmanac/src/components/Calendar/CalendarRoot.tsx
@@ -36,7 +36,7 @@ CalendarRoot
 
 const styles: Styles<Theme, object> = {
     container: {
-        margin: '0px 4px 4px 4px',
+        margin: '0px 4px',
         borderRadius: '1px',
     },
     firstLineContainer: {
diff --git a/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx b/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx
index e7184b732..b30a2a4db 100644
--- a/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx
+++ b/apps/antalmanac/src/components/Calendar/CalendarToolbar.tsx
@@ -273,7 +273,14 @@ function CalendarPaneToolbar(props: CalendarPaneToolbarProps) {
         <Paper
             elevation={0}
             variant="outlined"
-            sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, alignItems: 'center', padding: 1 }}
+            sx={{
+                display: 'flex',
+                flexWrap: 'wrap',
+                gap: 1,
+                alignItems: 'center',
+                padding: 1,
+                borderRadius: '4px 4px 0 0',
+            }}
         >
             <Box gap={1} display="flex" alignItems="center">
                 <SelectSchedulePopover scheduleNames={scheduleNames} />
diff --git a/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx b/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
index 0981b0d82..bebb71fce 100644
--- a/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
+++ b/apps/antalmanac/src/components/RightPane/AddedCourses/AddedCoursePane.tsx
@@ -375,5 +375,5 @@ export default function AddedCoursePaneFunctionComponent() {
         };
     }, []);
 
-    return <Box padding={1}>{skeletonMode ? <SkeletonSchedule /> : <AddedSectionsGrid />}</Box>;
+    return <Box>{skeletonMode ? <SkeletonSchedule /> : <AddedSectionsGrid />}</Box>;
 }
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneRoot.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneRoot.tsx
index f953dda83..ddd4adc6d 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneRoot.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/CoursePaneRoot.tsx
@@ -57,7 +57,7 @@ function RightPane() {
     }, []);
 
     return (
-        <div style={{ height: '100%', padding: 8 }}>
+        <div style={{ height: '100%' }}>
             <CoursePaneButtonRow
                 showSearch={!RightPaneStore.getDoDisplaySearch()}
                 onDismissSearchResults={toggleSearch}
diff --git a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
index f2efc9c49..5ac2e23f3 100644
--- a/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
+++ b/apps/antalmanac/src/components/RightPane/CoursePane/CourseRenderPane.tsx
@@ -42,6 +42,7 @@ function flattenSOCObject(SOCObject: WebsocAPIResponse): (WebsocSchool | WebsocD
         return accumulator;
     }, []);
 }
+
 const RecruitmentBanner = () => {
     const [bannerVisibility, setBannerVisibility] = React.useState<boolean>(true);
 
diff --git a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
index a87d1a61b..5b666f5b7 100644
--- a/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
+++ b/apps/antalmanac/src/components/RightPane/RightPaneRoot.tsx
@@ -48,8 +48,8 @@ export default function Desktop({ style }: DesktopTabsProps) {
     const { activeTab, setActiveTab } = useTabStore();
 
     return (
-        <div style={style}>
-            <Paper elevation={0} variant="outlined" square>
+        <Box style={{ ...style, margin: '0 4px' }}>
+            <Paper elevation={0} variant="outlined" square style={{ borderRadius: '4px 4px 0 0' }}>
                 <Tabs
                     value={activeTab}
                     onChange={(_event, value) => setActiveTab(value)}
@@ -69,12 +69,12 @@ export default function Desktop({ style }: DesktopTabsProps) {
                                 </div>
                             }
                             to={tab.href}
-                            style={{ minHeight: 'auto', height: '44px', padding: 3 }}
+                            style={{ minHeight: 'auto', height: '44px', padding: 3, minWidth: '33%' }}
                         />
                     ))}
                 </Tabs>
             </Paper>
-            <Box height="calc(100% - 54px)" overflow="auto">
+            <Box height="calc(100% - 54px)" overflow="auto" style={{ margin: '8px 4px 0px' }}>
                 {activeTab === 0 && <CoursePane />}
                 {activeTab === 1 && <AddedCoursePane />}
                 {activeTab === 2 && (
@@ -89,6 +89,6 @@ export default function Desktop({ style }: DesktopTabsProps) {
                     </Suspense>
                 )}
             </Box>
-        </div>
+        </Box>
     );
 }
diff --git a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx
index c9e2dd9fd..9905c3f8e 100644
--- a/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx
+++ b/apps/antalmanac/src/components/RightPane/SectionTable/SectionTable.tsx
@@ -13,6 +13,7 @@ import {
     useMediaQuery,
 } from '@material-ui/core';
 import { Assessment, Help, RateReview, ShowChart as ShowChartIcon } from '@material-ui/icons';
+import { GlobalStyles } from '@mui/material';
 import { MOBILE_BREAKPOINT } from '../../../globals';
 import CourseInfoBar from './CourseInfoBar';
 import CourseInfoButton from './CourseInfoButton';
@@ -21,7 +22,6 @@ import { SectionTableProps } from './SectionTable.types';
 import SectionTableBody from './SectionTableBody';
 import useColumnStore, { SECTION_TABLE_COLUMNS, type SectionTableColumn } from '$stores/ColumnStore';
 import analyticsEnum from '$lib/analytics';
-import { GlobalStyles } from '@mui/material';
 
 const TOTAL_NUM_COLUMNS = SECTION_TABLE_COLUMNS.length;
 
@@ -128,7 +128,7 @@ function SectionTable(props: SectionTableProps) {
 
     return (
         <>
-            <GlobalStyles styles={{'*::-webkit-scrollbar': {height: '8px'}}}/>
+            <GlobalStyles styles={{ '*::-webkit-scrollbar': { height: '8px' } }} />
             <Box style={{ display: 'flex', gap: 4, marginTop: 4, marginBottom: 8 }}>
                 <CourseInfoBar
                     deptCode={courseDetails.deptCode}