Improved PWA installatiton message on Home #164

stylesuxx · Feb 7, 2022 · cf7fa28 · cf7fa28
1 parent aaa8ddc
commit cf7fa28
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 95 deletions.
diff --git a/src/Components/Home/index.jsx b/src/Components/Home/index.jsx
@@ -7,10 +7,13 @@ import React, {
 } from 'react';
 import ReactMarkdown from 'react-markdown';
 
+import { useTheme } from '@mui/material/styles';
+
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import Fade from '@mui/material/Fade';
 import Grid from '@mui/material/Grid';
 import Link from '@mui/material/Link';
 import List from '@mui/material/List';
@@ -40,28 +43,39 @@ function Install() {
   }, [deferredPrompt]);
 
   return(
-    <div className={`install-wrapper ${showInstall ? 'active' : ''}`}>
-      <div className="install">
-        <Typography className="description">
+    <Fade
+      in={showInstall}
+      timeout={1500}
+    >
+      <Stack
+        sx={{
+          p: 2,
+          m: 1,
+          marginRight: 5,
+          background: 'rgba(211, 211, 211, 0.25)',
+        }}
+      >
+        <Typography>
           <ReactMarkdown components={{ p: 'span' }}>
             {t('homeInstallLine1')}
           </ReactMarkdown>
         </Typography>
 
-        <Typography className="description">
+        <Typography paragraph>
           <ReactMarkdown components={{ p: 'span' }}>
             {t('homeInstallLine2')}
           </ReactMarkdown>
         </Typography>
 
         <Button
+          fullWidth
           onClick={handleInstallToHomescreen}
           variant="contained"
         >
           {t('addToHomeScreen')}
         </Button>
-      </div>
-    </div>
+      </Stack>
+    </Fade>
   );
 }
 
@@ -349,22 +363,57 @@ function HomeColumnRight() {
 
 function Home({ onOpenMelodyEditor }) {
   const { t } = useTranslation('common');
+  const theme = useTheme();
 
   return (
     <div id="content">
       <div id="tab-landing">
         <Box>
-          <div className="content_top">
-            <div className="logowrapper">
-              <Typography align="center">
-                <ReactMarkdown components={{ p: 'span' }}>
-                  {t('homeWelcome')}
-                </ReactMarkdown>
-              </Typography>
+          <Grid
+            alignItems="center"
+            className="content_top"
+            container
+            spacing={2}
+            sx={{
+              background: theme.palette.primary.main,
+              color: 'white',
+            }}
+          >
+            <Grid
+              item
+              md={3}
+              xs={12}
+            />
 
+            <Grid
+              item
+              md={6}
+              xs={12}
+            >
+              <div className="content_top">
+                <div className="logowrapper">
+                  <Typography
+                    align="center"
+                  >
+                    <ReactMarkdown components={{ p: 'span' }}>
+                      {t('homeWelcome')}
+                    </ReactMarkdown>
+                  </Typography>
+
+
+                </div>
+              </div>
+            </Grid>
+
+            <Grid
+              item
+              md={3}
+              xs={12}
+            >
               <Install />
-            </div>
-          </div>
+            </Grid>
+
+          </Grid>
 
           <Grid
             container

diff --git a/src/Components/Home/style.scss b/src/Components/Home/style.scss
@@ -1,18 +1,4 @@
 #tab-landing {
-  min-height: 100%;
-  overflow: hidden;
-
-  /* Needed so we can have p elements in the translations */
-  .MuiTypography-paragraph {
-    p {
-      margin-bottom: 16px
-    }
-
-    p:last-child {
-      margin-bottom: 0px;
-    }
-  }
-
   .MuiAlert-message {
     a {
       color: rgb(102, 60, 0);
@@ -23,70 +9,4 @@
   a {
     text-decoration: underline;
   }
-
-  .install-wrapper {
-    position: absolute;
-    top: 142px;
-    right: 100px;
-    height: 0;
-    overflow: hidden;
-
-    @media only screen and (min-width: 1660px) {
-      &.active {
-        animation: slide 1s ease 0.5s forwards;
-      }
-    }
-  }
-
-  @keyframes slide {
-    from {height: 0;}
-    to {height: 180px;}
-  }
-
-  .install {
-    max-width: 400px;
-    padding: 8px;
-    background: rgba(211, 211, 211, 0.25);
-
-    .description {
-
-      p {
-        padding-bottom: 10px;
-      }
-    }
-
-    .default-btn {
-      margin: auto;
-      button {
-        max-width: 200px;
-      }
-    }
-  }
-
-  .content_top {
-    min-height: 140px;
-    background: var(--color-primary);
-    padding: 20px;
-    display: flex;
-
-    @media only screen and (max-width: 600px) {
-      padding-left: 30px;
-      padding-right: 30px;
-    }
-  }
-
-  .logowrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-around;
-    margin-left: auto;
-    margin-right: auto;
-    width: 800px;
-    color: white;
-
-    img {
-      width: 420px;
-      margin: 5px;
-    }
-  }
 }