From fb34bf3458183ad1c41ba1553c8ce88cc861a223 Mon Sep 17 00:00:00 2001
From: Kiana McCullough <kianamccu@gmail.com>
Date: Fri, 28 Feb 2025 09:19:59 -0800
Subject: [PATCH] login and create an account mobile updates

---
 apps/SageAccountWeb/src/LoginPage.tsx         | 20 ++++++++++++++-----
 .../src/components/RegisterAccount1.tsx       | 15 ++++++++++----
 .../SystemUseNotification.tsx                 |  2 +-
 3 files changed, 27 insertions(+), 10 deletions(-)

diff --git a/apps/SageAccountWeb/src/LoginPage.tsx b/apps/SageAccountWeb/src/LoginPage.tsx
index e439ef4de78..c437f37df84 100644
--- a/apps/SageAccountWeb/src/LoginPage.tsx
+++ b/apps/SageAccountWeb/src/LoginPage.tsx
@@ -55,7 +55,15 @@ function LoginPage(props: LoginPageProps) {
 
   return (
     <StyledOuterContainer>
-      <StyledInnerContainer>
+      <StyledInnerContainer
+        sx={theme => ({
+          [theme.breakpoints.down('sm')]: {
+            '& > div:nth-of-type(1), & > div:nth-of-type(2)': {
+              padding: '40px',
+            },
+          },
+        })}
+      >
         <Box
           sx={{
             py: 10,
@@ -67,7 +75,7 @@ function LoginPage(props: LoginPageProps) {
         >
           <Box
             sx={{
-              minHeight: '600px',
+              minHeight: { xs: '100%', md: '600px' },
             }}
           >
             <div className={'panel-logo'}>
@@ -100,14 +108,16 @@ function LoginPage(props: LoginPageProps) {
         </Box>
         <Box
           sx={{
-            background:
-              "url('https://s3.amazonaws.com/static.synapse.org/images/login-panel-bg.svg') no-repeat right bottom 20px",
+            background: {
+              sm: 'none',
+              md: "url('https://s3.amazonaws.com/static.synapse.org/images/login-panel-bg.svg') no-repeat right bottom 20px",
+            },
           }}
         >
           <Typography
             className="headline"
             variant="headline2"
-            sx={{ marginTop: '95px' }}
+            sx={{ marginTop: { xs: '45px', md: '95px' } }}
           >
             Sign in to your account
           </Typography>
diff --git a/apps/SageAccountWeb/src/components/RegisterAccount1.tsx b/apps/SageAccountWeb/src/components/RegisterAccount1.tsx
index 99b18e1f9db..62f8e5ef306 100644
--- a/apps/SageAccountWeb/src/components/RegisterAccount1.tsx
+++ b/apps/SageAccountWeb/src/components/RegisterAccount1.tsx
@@ -233,7 +233,9 @@ export const RegisterAccount1 = () => {
                 <Box
                   display="flex"
                   flexDirection="column"
-                  sx={{ minHeight: '530px' }}
+                  sx={{
+                    minHeight: { xs: '100%', md: '530px' },
+                  }}
                 >
                   <div className="panel-logo logo-wrapper">
                     <SourceAppLogo />
@@ -363,11 +365,16 @@ export const RegisterAccount1 = () => {
               </Box>
               <Box
                 sx={{
-                  background:
-                    "url('https://s3.amazonaws.com/static.synapse.org/images/login-panel-bg.svg') no-repeat right bottom 20px",
+                  background: {
+                    xs: 'none',
+                    md: "url('https://s3.amazonaws.com/static.synapse.org/images/login-panel-bg.svg') no-repeat right bottom 20px",
+                  },
                 }}
               >
-                <Typography variant="headline2" sx={{ marginTop: '95px' }}>
+                <Typography
+                  variant="headline2"
+                  sx={{ marginTop: { xs: '45px', md: '95px' } }}
+                >
                   Create an Account
                 </Typography>
                 {page !== Pages.GOOGLE_REGISTRATION && (
diff --git a/packages/synapse-react-client/src/components/SystemUseNotification/SystemUseNotification.tsx b/packages/synapse-react-client/src/components/SystemUseNotification/SystemUseNotification.tsx
index f253fe1471c..80b4544278b 100644
--- a/packages/synapse-react-client/src/components/SystemUseNotification/SystemUseNotification.tsx
+++ b/packages/synapse-react-client/src/components/SystemUseNotification/SystemUseNotification.tsx
@@ -8,7 +8,7 @@ export function SystemUseNotification() {
     <Box
       sx={{
         color: 'grey.700',
-        maxHeight: '110px',
+        maxHeight: { xs: '170px', md: '110px' },
         overflow: 'auto',
         margin: '20px 0px',
       }}