topbar improvements

src/components/TopBar.jsx

@@ -3,46 +3,46 @@ import { Link } from "react-router-dom"
 import styles from "styles/TopBar.module.css"
 
 const TopBar = ({ search, setSearch, absolute }) => {
-    const [width, setWidth] = useState(window.innerWidth)
+	const [width, setWidth] = useState(window.innerWidth)
 
-    useEffect(() => {
-        const handleResize = () => setWidth(window.innerWidth)
+	useEffect(() => {
+		const handleResize = () => setWidth(window.innerWidth)
 
-        window.addEventListener("resize", handleResize)
+		window.addEventListener("resize", handleResize)
 
-        return () => window.removeEventListener("resize", handleResize)
-    }, [])
+		return () => window.removeEventListener("resize", handleResize)
+	}, [])
 
-    const Search = (
-        <input
-            type="text"
-            className={styles.Search}
-            value={search}
-            autoFocus
-            placeholder="Search for movies..."
-            onChange={({ target }) => setSearch(target.value)}
-        />
-    )
+	const Search = (
+		<input
+			type="text"
+			className={styles.Search}
+			value={search}
+			autoFocus
+			placeholder="Search for movies..."
+			onChange={({ target }) => setSearch(target.value)}
+		/>
+	)
 
-    return (
-        <div
-            className={`${styles.Container} ${
-                absolute && width > 1000 ? styles.Absolute : ""
-            } ${setSearch ? styles.HasSearch : ""}`}
-        >
-            <Link to="/">
-                <h1 className={styles.Title}>React Movie Finder</h1>
-            </Link>
+	return (
+		<div
+			className={`${styles.Container} ${
+				absolute ? styles.Absolute : ""
+			} ${setSearch ? styles.HasSearch : ""}`}
+		>
+			<Link to="/" className={styles.Title}>
+				<h1>React Movie Finder</h1>
+			</Link>
 
-            {setSearch && width > 1000 && Search}
+			{setSearch && width > 1000 && Search}
 
-            <Link to="/ratings" className={styles.Ratings}>
-                <h1>Your ratings</h1>
-            </Link>
+			<Link to="/ratings" className={styles.Ratings}>
+				<h1>Your ratings</h1>
+			</Link>
 
-            {setSearch && width <= 1000 && Search}
-        </div>
-    )
+			{setSearch && width <= 1000 && Search}
+		</div>
+	)
 }
 
 export default TopBar

src/styles/TopBar.module.css

@@ -1,57 +1,56 @@
 .Container.HasSearch {
-    --cols: 3;
+	--cols: 3;
 }
 
 .Container {
-    display: grid;
-    width: 100%;
-    grid-template-columns: 1fr;
-    padding: 20px 30px;
-    gap: 10px;
-    background: #00000050;
-    color: white;
+	display: grid;
+	width: 100%;
+	grid-template-columns: 1fr;
+	padding: 20px 30px;
+	gap: 10px;
+	background: #00000050;
+	color: white;
 }
 
 .Container h1 {
-    margin: 0;
+	margin: 0;
 }
 
 @media (min-width: 1000px) {
-    .Container {
-        grid-template-columns: repeat(var(--cols, 2), 1fr);
-    }
+	.Container {
+		grid-template-columns: repeat(var(--cols, 2), 1fr);
+	}
 
-    .Ratings {
-        justify-self: end;
-    }
+	.Ratings {
+		justify-self: end;
+	}
 
-    .Search {
-        justify-self: center;
-        width: 20em;
-    }
+	.Search {
+		justify-self: center;
+		width: 20em;
+	}
 }
 
 .Container.Absolute {
-    position: absolute;
-    background: linear-gradient(to bottom, #00000090, #00000010);
+	position: absolute;
+	background: linear-gradient(to bottom, #00000099, #00000050);
 }
 
 .Container a {
-    color: white;
-    text-decoration: none;
-}
-
-.Container a::hover {
-    text-decoration: underline;
+	color: white;
 }
 
 .Search {
-    padding: 0.5em;
-    border: 2px solid white;
-    color: white;
-    font: inherit;
-    width: 100%;
-    height: 3em;
-    border-radius: 10px;
-    background-color: var(--secondary);
+	padding: 0.5em;
+	border: 2px solid white;
+	color: white;
+	font: inherit;
+	width: 100%;
+	height: 3em;
+	border-radius: 10px;
+	background-color: var(--secondary);
+}
+
+.Title {
+	text-decoration: none;
 }