(mobile) ui clean up

taver-ca · Dec 1, 2024 · 2fa8023 · 2fa8023
1 parent a730f69
commit 2fa8023
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 26 deletions.
diff --git a/src/Odyssey/Odyssey.js b/src/Odyssey/Odyssey.js
@@ -96,7 +96,7 @@ const Odyssey = ({
     };
 
     return (
-        <Grid sx={{ container: true }} >
+        <Grid sx={{ container: true, mb: 10  }}  >
             <div id="sharepage">
                 <SharePage
                     concerts={concerts}
@@ -108,11 +108,9 @@ const Odyssey = ({
 
             <Stack
                 container
-                sx={{
-                    justifyContent: { xs: 'flex-start', sm: 'center' },
-                    flexDirection: { xs: 'column', sm: 'row' }, // Change direction based on screen size
-                    gap: 2
-                }}
+                spacing={0}
+                direction="column"
+                alignItems="center"
             >
                 <Button
                     id="sharelinkbutton"

diff --git a/src/TaleSetup/BaseInput.js b/src/TaleSetup/BaseInput.js
@@ -293,9 +293,14 @@ const BaseInput = forwardRef(({ setConcerts,
         />
       </Stack>
 
-      <Stack direction={'column'} spacing={2}>
+      <Stack
+        direction={'column'}
+        spacing={2}>
         <form onSubmit={handleSubmit}>
-          <Stack direction={'column'} spacing={2}>
+          <Stack direction={'column'}
+            spacing={2}
+            container
+            alignItems="center">
             <TextField
               sx={{
                 "& input": {
@@ -304,6 +309,7 @@ const BaseInput = forwardRef(({ setConcerts,
                 "& label": {
                   color: "white",
                 },
+                width:{xs:'100%'}
               }}
               label="Enter Artist Name:"
               value={artistName} onChange={(e) => {

diff --git a/src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js b/src/TaleSetup/GetSpotifyPlaylistArtistsWithShows.js
@@ -52,9 +52,13 @@ function GetSpotifyPlaylistArtistsWithShows({ followedArtists, setFollowedArtist
 
     return (
         <Stack spacing={2}>
-            <Typography>Find concerts from playlist </Typography>
+            <Typography>Find concerts from playlist</Typography>
             <form onSubmit={handleSubmit}>
-                <Stack direction={'column'} spacing={2}>
+                <Stack
+                    direction={'column'}
+                    spacing={2}
+                    container
+                    alignItems="center">
                     <TextField
                         sx={{
                             "& input": {
@@ -63,6 +67,7 @@ function GetSpotifyPlaylistArtistsWithShows({ followedArtists, setFollowedArtist
                             "& label": {
                                 color: "white",
                             },
+                            width:{xs:'100%'}
                         }}
                         label="Spotify Playlist URL:"
                         value={spotifyPlayList} onChange={(e) => setSpotifyPlaylist(e.target.value)}
@@ -71,6 +76,8 @@ function GetSpotifyPlaylistArtistsWithShows({ followedArtists, setFollowedArtist
                     />
 
                     <Button
+
+
                         disabled={(spotifyPlayList.length === 0 || !spotifyPlayList.includes(initialSpotifyURL)) ? true : false}
                         type="submit"
                         variant="contained"

diff --git a/src/TaleSetup/YourSpotifyArtistsWithShows.js b/src/TaleSetup/YourSpotifyArtistsWithShows.js
@@ -39,7 +39,7 @@ function YourSpotifyArtistsWithShows({ artists, onChildClick, isRequestTriggered
   });
 
   return (
-    <Grid>
+    <Grid spacing={2}>
       <Typography>Artists from your playlist</Typography>
 
       {artists.length > 25 ? (<SwipeableTextMobileStepper groupedNames={groupedNames} handleArtistClick={handleClick} />) : (<Box
@@ -51,7 +51,7 @@ function YourSpotifyArtistsWithShows({ artists, onChildClick, isRequestTriggered
           {commaSeparatedfollowedArtists}
         </Grid>
       </Box>)}
-      {isLoading && <CircularProgress />}
+      {isLoading && <CircularProgress sx={{ mt: 5 }}/>}
     </Grid>
   );
 }

diff --git a/src/Voyage/Voyage.js b/src/Voyage/Voyage.js
@@ -93,24 +93,22 @@ const Voyage = ({
     const concerts2 = concerts.slice(middleIndex);
 
     return (
-        <Stack spacing={3} sx={{ width: { xs: '100%', sm: '90%', md: '50%' } }}>
+        <Stack spacing={3} sx={{ width: { xs: '100%', sm: '90%', md: '50%' }, mb: 10 }}>
             <Stack disablePadding spacing={3} id="sharepage">
-                    {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={style} /> : null}
-                    <Typography
-                        variant="h3"
-                    >{posterName}</Typography>
-                    <Stack justifyContent="center" container sx={{ flexDirection: { xs: "column", sm: "row", md: "row" } }} >
-                        <SharePageList concerts={concerts1} />
-                        <SharePageList concerts={concerts2} />
-                    </Stack>
+                {isLoaded ? <Map concerts={concerts} userLocation={userLocation} mapStyle={style} /> : null}
+                <Typography
+                    variant="h3"
+                >{posterName}</Typography>
+                <Stack justifyContent="center" container sx={{ flexDirection: { xs: "column", sm: "row", md: "row" } }} >
+                    <SharePageList concerts={concerts1} />
+                    <SharePageList concerts={concerts2} />
                 </Stack>
+            </Stack>
             <Stack
                 container
-                sx={{
-                    justifyContent: { xs: 'flex-start', sm: 'center' },
-                    flexDirection: { xs: 'column', sm: 'row' }, // Change direction based on screen size
-                    gap: 2
-                }}
+                spacing={0}
+                direction="column"
+                alignItems="center"
             >
                 <Button
                     id="sharebutton"