optimizing for mobile screen size

taver-ca · Nov 10, 2024 · 793f50b · 793f50b
1 parent 357803a
commit 793f50b
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"