fix: modify the login page design layout bun1916

https://bigc-b2b.atlassian.net/browse/BUN-1916
bigcommerce · Mar 5, 2024 · e64ef56 · e64ef56
1 parent 05d33a7
commit e64ef56
Showing 1 changed file with 40 additions and 44 deletions.
diff --git a/apps/storefront/src/pages/login/Login.tsx b/apps/storefront/src/pages/login/Login.tsx
@@ -344,26 +344,44 @@ export default function Login(props: RegisteredProps) {
                     </Alert>
                   </Box>
                 )}
+                {logo && loginInfo?.displayStoreLogo && (
+                  <Box sx={{ margin: '20px 0', minHeight: '150px' }}>
+                    <LoginImage>
+                      <ImageListItem
+                        sx={{
+                          maxWidth: isMobile ? '70%' : '250px',
+                        }}
+                        onClick={() => {
+                          window.location.href = '/'
+                        }}
+                      >
+                        <img
+                          src={`${logo}`}
+                          alt={b3Lang('login.registerLogo')}
+                          loading="lazy"
+                        />
+                      </ImageListItem>
+                    </LoginImage>
+                  </Box>
+                )}
+                {loginInfo.widgetHeadText && (
+                  <LoginWidget
+                    sx={{
+                      minHeight: '48px',
+                      width: registerEnabled || isMobile ? '100%' : '50%',
+                    }}
+                    isVisible={loginInfo.isShowWidgetHead}
+                    html={loginInfo.widgetHeadText}
+                  />
+                )}
                 <Box
                   sx={{
-                    padding: isMobile ? 0 : '0 5%',
                     display: 'flex',
                     justifyContent: 'center',
                     alignItems: 'center',
                     flexDirection: 'column',
                   }}
                 >
-                  {loginInfo.widgetHeadText && (
-                    <LoginWidget
-                      sx={{
-                        mt: isMobile ? '20px' : '32px',
-                        minHeight: '48px',
-                        width: registerEnabled || isMobile ? '100%' : '50%',
-                      }}
-                      isVisible={loginInfo.isShowWidgetHead}
-                      html={loginInfo.widgetHeadText}
-                    />
-                  )}
                   <Box
                     sx={{
                       bgcolor: '#FFFFFF',
@@ -375,26 +393,6 @@ export default function Login(props: RegisteredProps) {
                       width: isMobile ? 'auto' : loginAndRegisterContainerWidth,
                     }}
                   >
-                    {logo && loginInfo?.displayStoreLogo && (
-                      <Box sx={{ margin: '20px 0', minHeight: '150px' }}>
-                        <LoginImage>
-                          <ImageListItem
-                            sx={{
-                              maxWidth: isMobile ? '70%' : '250px',
-                            }}
-                            onClick={() => {
-                              window.location.href = '/'
-                            }}
-                          >
-                            <img
-                              src={`${logo}`}
-                              alt={b3Lang('login.registerLogo')}
-                              loading="lazy"
-                            />
-                          </ImageListItem>
-                        </LoginImage>
-                      </Box>
-                    )}
                     <Box
                       sx={{
                         mb: '20px',
@@ -436,19 +434,17 @@ export default function Login(props: RegisteredProps) {
                       )}
                     </Box>
                   </Box>
-
-                  {loginInfo.widgetFooterText && (
-                    <LoginWidget
-                      sx={{
-                        mt: '20px',
-                        minHeight: '48px',
-                        width: registerEnabled || isMobile ? '100%' : '50%',
-                      }}
-                      isVisible={loginInfo.isShowWidgetFooter}
-                      html={loginInfo.widgetFooterText}
-                    />
-                  )}
                 </Box>
+                {loginInfo.widgetFooterText && (
+                  <LoginWidget
+                    sx={{
+                      minHeight: '48px',
+                      width: registerEnabled || isMobile ? '100%' : '50%',
+                    }}
+                    isVisible={loginInfo.isShowWidgetFooter}
+                    html={loginInfo.widgetFooterText}
+                  />
+                )}
               </>
             )}
           </Box>