cleaned up share UI a bit

taver-ca · Nov 11, 2024 · 7dec4c7 · 7dec4c7
1 parent 1205b35
commit 7dec4c7
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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,