From f5ec15feaa354b05a8298d394b04540ea7e93baa Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Thu, 10 Oct 2024 17:30:30 -0400
Subject: [PATCH 1/2] fix app container styles

---
 frontends/main/src/app/styled.tsx                    | 12 ++++++++----
 .../ThemeProvider/MITLearnGlobalStyles.tsx           |  9 ---------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/frontends/main/src/app/styled.tsx b/frontends/main/src/app/styled.tsx
index ba2078ad2a..99df8df3be 100644
--- a/frontends/main/src/app/styled.tsx
+++ b/frontends/main/src/app/styled.tsx
@@ -8,13 +8,17 @@ import { styled } from "ol-components"
  * Solution for now is to "use client", though I would expect these to be prerendered
  */
 
-export const PageWrapper = styled.div({
-  height: "calc(100vh - 80px)",
+export const PageWrapper = styled.div(({ theme }) => ({
   display: "flex",
   flexDirection: "column",
-})
+  height: "calc(100vh - 72px)",
+  marginTop: "72px",
+  [theme.breakpoints.down("sm")]: {
+    marginTop: "60px",
+    height: "calc(100vh - 60px)",
+  },
+}))
 
 export const PageWrapperInner = styled.div({
   flex: "1",
-  paddingTop: "60px",
 })
diff --git a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
index 2655f5bdf2..8ef4a1c615 100644
--- a/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
+++ b/frontends/ol-components/src/components/ThemeProvider/MITLearnGlobalStyles.tsx
@@ -38,15 +38,6 @@ const pageCss = css`
     box-sizing: border-box;
   }
 
-  #app-container {
-    height: calc(100vh - 72px);
-    margin-top: 72px;
-    ${theme.breakpoints.down("sm")} {
-      margin-top: 60px;
-      height: calc(100vh - 60px);
-    }
-  }
-
   a {
     text-decoration: none;
     color: inherit;

From 140a67cc91e097d68eb9c3630ca00eaaf319266e Mon Sep 17 00:00:00 2001
From: Carey Gumaer <gumaerc@mit.edu>
Date: Fri, 11 Oct 2024 10:34:06 -0400
Subject: [PATCH 2/2] align styles with main

---
 frontends/main/src/page-components/HeroSearch/HeroSearch.tsx | 4 ++--
 frontends/ol-components/src/components/Input/Input.tsx       | 3 ---
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
index bf68532232..85c9260db2 100644
--- a/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
+++ b/frontends/main/src/page-components/HeroSearch/HeroSearch.tsx
@@ -100,8 +100,8 @@ const ImageContainer = styled.div(({ theme }) => ({
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "center",
-  marginTop: "22px",
-  transform: "translateX(24px)",
+  marginTop: "44px",
+  transform: "translateX(48px)",
   width: "513px",
   aspectRatio: "513 / 522",
   [theme.breakpoints.down("md")]: {
diff --git a/frontends/ol-components/src/components/Input/Input.tsx b/frontends/ol-components/src/components/Input/Input.tsx
index fc8d2c1f9c..f4ff1c5383 100644
--- a/frontends/ol-components/src/components/Input/Input.tsx
+++ b/frontends/ol-components/src/components/Input/Input.tsx
@@ -99,9 +99,6 @@ const baseInputStyles = (theme: Theme) => ({
   borderWidth: "1px",
   borderStyle: "solid",
   borderRadius: "4px",
-  ".MuiInputBase-input": {
-    padding: "0",
-  },
   "&.Mui-disabled": {
     backgroundColor: theme.custom.colors.lightGray1,
   },