fix hover states and add new theme color

Author: sar-mko

src/api/useAuth.jsx

@@ -12,7 +12,7 @@ export const SignInButton = ({ styles }) => (
 	<button
 		type="button"
 		onClick={() => signInWithPopup(auth, new GoogleAuthProvider())}
-		className={`m-0 bg-accent text-black font-bold hover:text-white ${styles}`}
+		className={`m-0 bg-accent text-black font-bold hover:text-black hover:bg-third ${styles}`}
 	>
 		Sign In
 	</button>
@@ -25,7 +25,7 @@ export const SignOutButton = () => (
 	<button
 		type="button"
 		onClick={() => auth.signOut() && window.location.reload()}
-		className="m-0 bg-accent text-black hover:text-white"
+		className="m-0 bg-accent text-black font-bold hover:text-black hover:bg-third  "
 	>
 		Sign Out
 	</button>

src/index.css

@@ -29,7 +29,7 @@
 	}
 	button {
 		@apply btn 
-		text-2xl font-sans font-bold btn-secondary m-2 text-white;
+		text-2xl font-sans font-bold btn-secondary m-2 text-white border-none hover:bg-neutral;
 	}
 	/*temporary for the 'Hello from the [/list] Page' titles */
 	p {

src/views/Home.jsx

@@ -135,7 +135,7 @@ export function Home({ data, setListPath, setAllLists }) {
 						onSubmit={handleSubmit}
 						className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-4 mt-4 justify-center"
 					>
-						<label htmlFor="listName" className="text-white font-medium	">
+						<label htmlFor="listName" className="text-white font-medium">
 							Create a new list:
 						</label>
 						<div className="flex flex-col">
@@ -152,11 +152,11 @@ export function Home({ data, setListPath, setAllLists }) {
 							type="button"
 							onClick={startListening}
 							aria-label="Use microphone to add a new list"
-							className="bg-accent text-black hover:text-white"
+							className="bg-accent text-black hover:bg-third"
 						>
 							{isListening ? 'Listening...' : <KeyboardVoiceIcon />}
 						</button>
-						<button className="bg-accent text-black hover:text-white">
+						<button className="bg-accent text-black hover:bg-third">
 							Submit
 						</button>
 					</form>

src/views/ManageList.jsx

@@ -123,7 +123,7 @@ export function ManageList({ list }) {
 					<button
 						type="button"
 						onClick={handleVoiceTransform}
-						className="bg-accent text-black hover:text-white"
+						className="bg-accent text-black hover:text-black hover:bg-third"
 					>
 						{isListening ? (
 							'Listening...'
@@ -155,7 +155,7 @@ export function ManageList({ list }) {
 					</select>
 					<button
 						type="submit"
-						className="bg-accent text-black hover:text-white"
+						className="bg-accent text-black hover:text-black hover:bg-third"
 					>
 						Submit
 					</button>

src/views/ShareList.jsx

@@ -44,7 +44,7 @@ export function ShareList({ userId }) {
 
 					<button
 						type="submit"
-						className="bg-accent text-black hover:text-white"
+						className="bg-accent text-black hover:text-neutral hover:bg-third"
 					>
 						Share List
 					</button>

tailwind.config.js

@@ -9,6 +9,9 @@ export default {
 				archivo: ['Archivo Narrow', 'sans-serif'],
 				bowlby: ['BowlbyOne Regular', 'Archivo Narrow', 'sans-serif'],
 			},
+			colors: {
+				third: '#bdc100', // This adds it to the Tailwind color palette as wel
+			},
 		},
 	},
 	plugins: [require('daisyui')],
@@ -21,6 +24,7 @@ export default {
 
 					secondary: '#676D16',
 					// accent:"#bec000",
+					third: '#bdc100',
 				},
 			},
 			,