Improved styling of Bluejay section #164

stylesuxx · Feb 5, 2022 · a36b1ce · a36b1ce
1 parent 46912e0
commit a36b1ce
Showing 1 changed file with 33 additions and 20 deletions.
diff --git a/src/Components/Home/index.jsx b/src/Components/Home/index.jsx
@@ -215,31 +215,44 @@ function HomeColumnCenter({ onOpenMelodyEditor }) {
         Bluejay
       </Typography>
 
-      <img
-        alt="Bluejay"
-        src={bluejay}
-      />
-
-      <Typography paragraph>
-        <ReactMarkdown components={{ p: 'span' }}>
-          {t('bluejayTextLine1')}
-        </ReactMarkdown>
-      </Typography>
-
-      <Typography paragraph>
-        <ReactMarkdown components={{ p: 'span' }}>
-          {t('bluejayTextLine2')}
-        </ReactMarkdown>
-      </Typography>
+      <Grid container>
+        <Grid
+          item
+          xs={9}
+        >
+          <Typography paragraph>
+            <ReactMarkdown components={{ p: 'span' }}>
+              {t('bluejayTextLine1')}
+            </ReactMarkdown>
+          </Typography>
+
+          <Typography paragraph>
+            <ReactMarkdown components={{ p: 'span' }}>
+              {t('bluejayTextLine2')}
+            </ReactMarkdown>
+          </Typography>
+        </Grid>
+
+        <Grid
+          item
+          xs={3}
+        >
+          <img
+            alt="Bluejay"
+            src={bluejay}
+          />
+        </Grid>
+      </Grid>
 
-      <div className="default-btn melody-editor-button">
-        <button
+      <Stack sx={{ p: 2 }}>
+        <Button
           onClick={onOpenMelodyEditor}
           type="button"
+          variant="outlined"
         >
           {t('openMelodyEditor')}
-        </button>
-      </div>
+        </Button>
+      </Stack>
 
       <Typography paragraph>
         <ReactMarkdown components={{ p: 'span' }}>