From 793f50be206b4ba816ef911ec67b5c6c276685d8 Mon Sep 17 00:00:00 2001
From: Sam Bao <sam.b5687@gmail.com>
Date: Sun, 10 Nov 2024 11:35:59 -0700
Subject: [PATCH] optimizing for mobile screen size

---
 src/TaleSetup/ConcertList.js                        | 6 +++---
 src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js | 2 +-
 src/TaleSetup/YourSpotifyArtistsWithShows.js        | 5 ++---
 src/Voyage/Voyage.js                                | 2 +-
 4 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/TaleSetup/ConcertList.js b/src/TaleSetup/ConcertList.js
index 329f1ec..94b6e1c 100644
--- a/src/TaleSetup/ConcertList.js
+++ b/src/TaleSetup/ConcertList.js
@@ -6,7 +6,7 @@ import ListItemText from "@mui/material/ListItemText";
 import ListItemAvatar from "@mui/material/ListItemAvatar";
 import Avatar from "@mui/material/Avatar";
 import Chip from "@mui/material/Chip";
-import { Stack } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import IconButton from "@mui/material/IconButton";
 import DeleteIcon from "@mui/icons-material/Delete";
 import moment from "moment";
@@ -144,9 +144,9 @@ class ConcertList extends React.Component {
     return (
       <div>
         {hasConcerts && (
-          <p>
+          <Typography>
             Upcoming Concerts <br />({this.state.concerts.length} / 5):
-          </p>
+          </Typography>
         )}
         {hasConcerts && (
           <Button onClick={onClearAllPress} variant="outlined" color="warning">
diff --git a/src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js b/src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js
index fc5386b..be3b935 100644
--- a/src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js
+++ b/src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js
@@ -51,7 +51,7 @@ function GetSpotifyPlaylistArtistsWithShows({ followedArtists, setFollowedArtist
     };
 
     return (<Grid>
-        <p>Find concerts from playlist </p>
+        <Typography>Find concerts from playlist </Typography>
         <form onSubmit={handleSubmit}>
             <Stack direction={'column'} spacing={2}>
                 <TextField
diff --git a/src/TaleSetup/YourSpotifyArtistsWithShows.js b/src/TaleSetup/YourSpotifyArtistsWithShows.js
index 7e215d6..5280d41 100644
--- a/src/TaleSetup/YourSpotifyArtistsWithShows.js
+++ b/src/TaleSetup/YourSpotifyArtistsWithShows.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Grid, Chip, Box, CircularProgress } from '@mui/material';
+import { Grid, Chip, Box, CircularProgress,Typography } from '@mui/material';
 import SwipeableTextMobileStepper from './ArtistsCarrousel'
 
 function YourSpotifyArtistsWithShows({ artists, onChildClick, isRequestTriggered }) {
@@ -40,7 +40,7 @@ function YourSpotifyArtistsWithShows({ artists, onChildClick, isRequestTriggered
 
   return (
     <Grid>
-      <p>Artists from your playlist</p>
+      <Typography>Artists from your playlist</Typography>
 
       {artists.length > 25 ? (<SwipeableTextMobileStepper groupedNames={groupedNames} handleArtistClick={handleClick} />) : (<Box
         display="flex"
@@ -51,7 +51,6 @@ function YourSpotifyArtistsWithShows({ artists, onChildClick, isRequestTriggered
           {commaSeparatedfollowedArtists}
         </Grid>
       </Box>)}
-      <p></p>
       {isLoading && <CircularProgress />}
     </Grid>
   );
diff --git a/src/Voyage/Voyage.js b/src/Voyage/Voyage.js
index 3030fe4..9fbbfc6 100644
--- a/src/Voyage/Voyage.js
+++ b/src/Voyage/Voyage.js
@@ -74,7 +74,7 @@ const Voyage = ({
     const concerts1 = concerts.slice(0, middleIndex);
     const concerts2 = concerts.slice(middleIndex);
 
-    return (<Stack disablePadding spacing={3}>
+    return (<Stack spacing={3} sx={{ width:{xs:'100%', sm:'90%', md:'80%'}}}>
         {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={style} /> : null}
         <Typography
             variant="h2"