fixing form colors

taver-ca · Feb 3, 2024 · 2bd5838 · 2bd5838
1 parent 6795bc0
commit 2bd5838
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 13 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,6 @@
 /*import logo from './logo.svg';*/
 import "./App.css";
-import Input from "./Input.js";
+import BaseInput from "./BaseInput.js";
 import Map from "./map";
 import { useState, useRef, useLayoutEffect } from "react";
 import { useLoadScript } from "@react-google-maps/api";
@@ -52,7 +52,8 @@ function App() {
           spacing={2}>
           <Grid item xs={12} md={6}>
             <PickDate updateStartDateInParent={setStartDate} updateEndDateInParent={setEndDate} />
-            <Input setConcerts={setConcerts} setUserLocation={setUserLocation} setMapStyle={setMapStyle} startDate={startDate} endDate={endDate} ref={childRef} />
+            <p/>
+            <BaseInput setConcerts={setConcerts} setUserLocation={setUserLocation} setMapStyle={setMapStyle} startDate={startDate} endDate={endDate} ref={childRef} />
             <Router>
             <Routes>
                 <Route path="/" element={<AuthorizeSpotify />} />
@@ -74,7 +75,7 @@ function App() {
           spacing={2}>
           <Grid item xs={12} md={6} sx={{ display: { xs: 'none', md: 'flex' } }}>
             <PickDate updateStartDateInParent={setStartDate} updateEndDateInParent={setEndDate} />
-            <Input setConcerts={setConcerts} setUserLocation={setUserLocation} setMapStyle={setMapStyle} startDate={startDate} endDate={endDate} ref={childRef} />
+            <BaseInput setConcerts={setConcerts} setUserLocation={setUserLocation} setMapStyle={setMapStyle} startDate={startDate} endDate={endDate} ref={childRef} />
             <Router>
             <Routes>
                 <Route path="/" element={<AuthorizeSpotify />} />

diff --git a/src/Input.js → src/BaseInput.js b/src/Input.js → src/BaseInput.js
@@ -1,7 +1,6 @@
 import { useState, forwardRef, useImperativeHandle, useEffect } from "react";
 import * as React from 'react';
-import Button from '@mui/material/Button';
-import TextField from '@mui/material/TextField';
+import { TextField, Button } from '@mui/material';
 
 const mapStyles = [
   { mapId: "1fc21c527f198d4e", displayName: "Default Theme", buttonColorCss: "0070d2" },
@@ -11,7 +10,7 @@ const mapStyles = [
 
 
 
-const Input = forwardRef(({ setConcerts, setUserLocation, setMapStyle, startDate, endDate }, ref) => {
+const BaseInput = forwardRef(({ setConcerts, setUserLocation, setMapStyle, startDate, endDate }, ref) => {
 
   useEffect(() => {
     function showPosition(position) {
@@ -69,11 +68,22 @@ const Input = forwardRef(({ setConcerts, setUserLocation, setMapStyle, startDate
   return (
     <div>
       <form onSubmit={handleSubmit}>
-        <label>Enter Artist Name:</label>
-        <div>
-          <TextField type="text" value={artistName} onChange={(e) => setArtistName(e.target.value)} />
-        </div>
-        <Button type="submit">Submit</Button>
+        <TextField
+        sx= { {
+          "& input": {
+            color: "white",
+          },
+          "& label": {
+            color: "white",
+          },
+        }}
+          label="Enter Artist Name:"
+          value={artistName} onChange={(e) => setArtistName(e.target.value)}
+        />
+        <p/>
+        <Button type="submit" variant="contained" color="primary">
+          Submit
+        </Button>
       </form>
       <div>
         Map Style:{" "}
@@ -84,9 +94,9 @@ const Input = forwardRef(({ setConcerts, setUserLocation, setMapStyle, startDate
             </option>
           ))}
         </select>
-      </div>      
+      </div>
     </div>
   );
 });
 
-export default Input;
+export default BaseInput;