fix: adjust home page on larger screens

cardano-foundation · Aug 28, 2023 · 1f996d6 · 1f996d6
1 parent a843100
commit 1f996d6
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 7 deletions.
diff --git a/ui/summit-2023/src/App.scss b/ui/summit-2023/src/App.scss
@@ -17,6 +17,11 @@ html,
   align-items: center;
   justify-content: center;
 }
+.big-container {
+  @media (min-width: 1921px) {
+    max-width: 2800px !important;
+  }
+}
 .background-shape-1 {
   position: absolute;
   width: 750px;

diff --git a/ui/summit-2023/src/App.tsx b/ui/summit-2023/src/App.tsx
@@ -19,7 +19,10 @@ function App() {
         <div className="App">
           <Header />
           <div className="main-content">
-            <Container maxWidth="xl">
+            <Container
+              maxWidth="xl"
+              className="big-container"
+            >
               <Box my={2}>
                 <PageRouter />
               </Box>

diff --git a/ui/summit-2023/src/components/common/Header/Header.scss b/ui/summit-2023/src/components/common/Header/Header.scss
@@ -29,12 +29,12 @@
   gap: 8px;
   border-radius: 8px;
   .MuiSnackbarContent-root {
-    background-color: var(--color-ultra-dark-blue);;
+    background-color: var(--color-ultra-dark-blue);
   }
 }
 .header-toast-error {
   .MuiSnackbarContent-root {
-    background-color:  var(--color-light-red) !important;
+    background-color: var(--color-light-red) !important;
   }
 }
 .button-container {

diff --git a/ui/summit-2023/src/components/common/Header/Header.tsx b/ui/summit-2023/src/components/common/Header/Header.tsx
@@ -250,9 +250,11 @@ const Header: React.FC = () => {
         autoHideDuration={3000}
         onClose={handleToastClose}
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
-        message={<span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
-            {toastIsError ? <DoNotDisturbAltIcon/>: <CheckCircleOutlineIcon />} {toastMessage}
-      </span>}
+        message={
+          <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            {toastIsError ? <DoNotDisturbAltIcon /> : <CheckCircleOutlineIcon />} {toastMessage}
+          </span>
+        }
         action={
           <>
             <div style={{ background: 'lightgray', width: '1px', height: '24px', marginRight: '8px' }}></div>

diff --git a/ui/summit-2023/src/pages/Home/Home.tsx b/ui/summit-2023/src/pages/Home/Home.tsx
@@ -5,10 +5,12 @@ import { useMediaQuery, useTheme } from '@mui/material';
 const Home = () => {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
+  const isLarger = useMediaQuery(theme.breakpoints.up('xl'));
+
   return (
     <>
       <Hero />
-      <div style={{ marginTop: isMobile ? '0px' : '15%' }} />
+      <div style={{ marginTop: isMobile ? '0px' : isLarger ? '25%' : '15%' }} />
     </>
   );
 };