From 7dec4c78c4443d84c4c6287bf22c6ee97b23cbab Mon Sep 17 00:00:00 2001
From: Sam Bao <sam.b5687@gmail.com>
Date: Mon, 11 Nov 2024 11:39:11 -0700
Subject: [PATCH] cleaned up share UI a bit

---
 src/Odyssey/Odyssey.js       | 50 +++++++++++++++++++++---------------
 src/Odyssey/SharePageList.js |  3 ++-
 src/Odyssey/map.js           |  2 +-
 3 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/Odyssey/Odyssey.js b/src/Odyssey/Odyssey.js
index 335e847..0c0d6c9 100644
--- a/src/Odyssey/Odyssey.js
+++ b/src/Odyssey/Odyssey.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid, Button } from "@mui/material";
+import { Grid, Button, Stack, Container } from "@mui/material";
 // Import other components
 import SharePage from "./SharePage.js";
 import html2canvas from "html2canvas";
@@ -87,26 +87,34 @@ const Odyssey = ({
                     setPosterName={setPosterName}
                 />
             </div>
-            <Grid spacing={2} direction={"row"}>
-                <Grid item>
-                    <Button
-                        id="sharelinkbutton"
-                        color="primary"
-                        disabled={concerts.length === 0}
-                        onClick={handleShareAsLink}
-                        variant="contained">Share As Link To Clipboard</Button>
-                </Grid>
-                <Grid item>
-                    <Button
-                        id="sharebutton"
-                        color="primary"
-                        onClick={handleDownloadImage}
-                        variant="contained"
-                    >
-                        Share As Image
-                    </Button>
-                </Grid>
-            </Grid>
+
+            <Stack
+                container
+                sx={{
+                    justifyContent: { xs: 'flex-start', sm: 'center' },
+                    flexDirection: { xs: 'column', sm: 'row' }, // Change direction based on screen size
+                    gap: 2
+                }}
+            >
+                <Button
+                    id="sharelinkbutton"
+                    color="primary"
+                    disabled={concerts.length === 0}
+                    onClick={handleShareAsLink}
+                    variant="contained">
+                    Share As Link
+                </Button>
+
+                <Button
+                    id="sharebutton"
+                    color="primary"
+                    disabled={concerts.length === 0}
+                    onClick={handleDownloadImage}
+                    variant="contained"
+                >
+                    Share As Image
+                </Button>
+            </Stack>
         </Grid>
     );
 };
diff --git a/src/Odyssey/SharePageList.js b/src/Odyssey/SharePageList.js
index 783af23..0271377 100644
--- a/src/Odyssey/SharePageList.js
+++ b/src/Odyssey/SharePageList.js
@@ -10,9 +10,10 @@ function formattedDate(incomingDate) {
 
 const SharePageList = ({ concerts }) => {
     return (
-        <List dense>
+        <List >
             {concerts.map((concert, index) => (
                 <ListItem
+                
                     key={index}
                     disablePadding>
                     <ListItemButton>
diff --git a/src/Odyssey/map.js b/src/Odyssey/map.js
index eedd20d..c1dc860 100644
--- a/src/Odyssey/map.js
+++ b/src/Odyssey/map.js
@@ -7,7 +7,7 @@ const concertToMarker = (concert) => {
     id: concert.title + concert.date,
     name: concert.title,
     artistImageUrl: concert.image.url,
-    address: concert.location.address,
+    address: concert.location.name,
     position: {
       lat: concert.location.gpsCoordinate.coords.latitude,
       lng: concert.location.gpsCoordinate.coords.longitude,