Merge pull request #1606 from kianamcc/SWC-7182

SWC-7182: SageAccountWeb: LoginPage updates on mobile
Sage-Bionetworks · Feb 28, 2025 · 883286d · 883286d
2 parents 85d3e7f + fb34bf3
commit 883286d
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 10 deletions.
diff --git 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
@@ -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
@@ -8,7 +8,7 @@ export function SystemUseNotification() {
     <Box
       sx={{
         color: 'grey.700',
-        maxHeight: '110px',
+        maxHeight: { xs: '170px', md: '110px' },
         overflow: 'auto',
         margin: '20px 0px',
       }}