From a36b1ce828caec7d7cfc4a5d3cf6b68cfe7001b4 Mon Sep 17 00:00:00 2001
From: Chris L <stylesuxx@gmail.com>
Date: Sat, 5 Feb 2022 20:47:41 +0100
Subject: [PATCH] Improved styling of Bluejay section #164

---
 src/Components/Home/index.jsx | 53 ++++++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 20 deletions(-)

diff --git a/src/Components/Home/index.jsx b/src/Components/Home/index.jsx
index aa60383fa..720a3af8f 100644
--- 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' }}>