From fcf2f559bee66117e29a2745252ac18028d2b9df Mon Sep 17 00:00:00 2001
From: Sam Bao <sam.b5687@gmail.com>
Date: Thu, 8 Feb 2024 23:08:35 -0700
Subject: [PATCH] more renovation, forcing artist name search in lower case
 becasue unable to find some artist on spotify when arrtist name contained
 upper case

---
 src/App.js                        |  4 ++--
 src/AuthorizeSpotify.js           | 10 +++++++-
 src/BaseInput.js                  | 39 +++++++++++++++++++------------
 src/SharePageList.js              |  2 +-
 src/YourFavoriteSpotifyArtists.js | 28 +++++++++++++++-------
 5 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/src/App.js b/src/App.js
index 787264b..cc8485f 100644
--- a/src/App.js
+++ b/src/App.js
@@ -48,7 +48,7 @@ function App() {
           className="App-header"
           container
           spacing={2}>
-          <Stack item xs={4} md={4} spacing={3}>
+          <Stack item xs={6} md={6} spacing={3}>
             <Box>
               <img src={window.location.origin + '/Taver.png'} alt="Taver" />
             </Box>
@@ -64,7 +64,7 @@ function App() {
             </Router>
             <ConcertList setConcerts={setConcerts} setAllConcerts={setAllConcerts} concerts={concerts}></ConcertList>
           </Stack>
-          <Grid sx={{ height: '100vh' }} item xs={8} md={8}>
+          <Grid sx={{ height: '100vh' }} item xs={6} md={6}>
             <SharePage concerts={concerts} userLocation={userLocation} mapStyle={mapStyle} />
           </Grid>
         </Grid>
diff --git a/src/AuthorizeSpotify.js b/src/AuthorizeSpotify.js
index 7076948..b016701 100644
--- a/src/AuthorizeSpotify.js
+++ b/src/AuthorizeSpotify.js
@@ -1,3 +1,4 @@
+import { Button } from "@mui/material";
 
 function AuthorizeSpotify() {
 
@@ -38,7 +39,14 @@ function AuthorizeSpotify() {
     return (
         <div>
             <p>Authorize Spotify: </p>
-            <button onClick={handleSpotifySignIn}>Sign in to Spotify</button>
+            <Button
+                sx={{ background: "limegreen" }}
+                type="submit"
+                variant="contained"
+                color="success"
+                onClick={handleSpotifySignIn}>
+                Sign in to Spotify
+            </Button>
         </div>
     );
 }
diff --git a/src/BaseInput.js b/src/BaseInput.js
index 081ad05..29ec435 100644
--- a/src/BaseInput.js
+++ b/src/BaseInput.js
@@ -1,6 +1,6 @@
 import { useState, forwardRef, useImperativeHandle, useEffect } from "react";
 import * as React from 'react';
-import { TextField, Button, Stack } from '@mui/material';
+import { TextField, Button, Stack, FormControl, InputLabel, NativeSelect } from '@mui/material';
 
 const mapStyles = [
   { mapId: "1fc21c527f198d4e", displayName: "Default Theme", buttonColorCss: "0070d2" },
@@ -62,7 +62,7 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
           "content-type": "application/json;charset=utf-8",
         },
         body: JSON.stringify({
-          artistName: incomingArtistName,
+          artistName: incomingArtistName.toLowerCase(),
           startDate: startDate,
           endDate: endDate
         }),
@@ -147,9 +147,6 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
             value={artistName} onChange={(e) => setArtistName(e.target.value)}
           />
           <Button
-            sx={{
-              cursor: 'pointer',
-            }}
             type="submit"
             variant="contained"
             color="primary">
@@ -159,16 +156,28 @@ const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, start
 
       </form>
 
-      <div>
-        Map Style:{" "}
-        <select name="mapStyle" id="mapStyle" onChange={(event) => setMapStyle(event.target.value)}>
-          {mapStyles.map((mapStyle) => (
-            <option key={mapStyle.mapId} value={mapStyle.mapId}>
-              {mapStyle.displayName}
-            </option>
-          ))}
-        </select>
-      </div>
+      <FormControl fullWidth>
+          <InputLabel
+          sx={{
+            color: 'white'
+          }}
+            variant="standard" htmlFor="mapStyle">
+            Map Style:
+          </InputLabel>
+          <NativeSelect
+            sx={{
+              color: 'white'
+            }}
+            defaultValue={mapStyles[0]}
+            id="mapStyle"
+            onChange={(event) => setMapStyle(event.target.value)}>
+            {mapStyles.map((mapStyle) => (
+              <option style={{backgroundColor: 'darkgrey'}} key={mapStyle.mapId} value={mapStyle.mapId}>
+                {mapStyle.displayName}
+              </option >
+            ))}
+          </NativeSelect>
+        </FormControl>
     </Stack>
   );
 });
diff --git a/src/SharePageList.js b/src/SharePageList.js
index 533ac1c..7505a92 100644
--- a/src/SharePageList.js
+++ b/src/SharePageList.js
@@ -12,7 +12,7 @@ const SharePageList = ({ concerts }) => {
     return (
         <List dense>
             {concerts.map((concert, index) => (
-                <Grid item  key={index}>
+                <Grid item key={index}>
                     <ListItem
                         key={index}
                         disablePadding
diff --git a/src/YourFavoriteSpotifyArtists.js b/src/YourFavoriteSpotifyArtists.js
index 8ca781d..fdc546c 100644
--- a/src/YourFavoriteSpotifyArtists.js
+++ b/src/YourFavoriteSpotifyArtists.js
@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Grid, Chip, Stack } from '@mui/material';
+import { Grid, Chip, Button, Box } from '@mui/material';
 import { useLocation } from "react-router-dom";
 
 function YourFavoriteSpotifyArtists({ onChildClick, startDate, endDate }) {
@@ -19,7 +19,7 @@ function YourFavoriteSpotifyArtists({ onChildClick, startDate, endDate }) {
     return (
 
       <Grid item key={index}>
-        <Chip sx={{ background: "limegreen" }} label={artistName} color="primary" onClick={() => handleClick(artistName)} />
+        <Chip sx={{ background: "limegreen" }} label={artistName} color="success" onClick={() => handleClick(artistName)} />
       </Grid>
 
     );
@@ -103,15 +103,27 @@ function YourFavoriteSpotifyArtists({ onChildClick, startDate, endDate }) {
 
   // Display spotify token 
   return (
-    <div>
+    <Grid>
       <p>Top Artists: </p>
       {disableButton ? (
-        <div>
-          <Stack xs={4} md={4} container spacing={1} direction="row">
+        <Box
+        display="flex"
+  justifyContent="center"
+  alignItems="center"
+        
+        >
+          <Grid xs={6} md={6}  container spacing={1} direction="row" justifyContent="center">
             {commaSeparatedfollowedArtists}
-          </Stack>
-        </div>) : (<Chip color="primary" label="Get your top artists" sx={{ background: "limegreen" }} onClick={getSpotifyArtist}></Chip>)}
-    </div>
+          </Grid>
+        </Box>) : (
+        <Button
+          sx={{ background: "limegreen" }}
+          variant="contained"
+          color="success"
+          onClick={getSpotifyArtist}>
+          Get your top artists
+        </Button>)}
+    </Grid>
   );
 }