Henry-Hiles/movie-react-app
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

topbar improvements

Browse source
This commit is contained in:
Henry Hiles 2023-03-12 14:12:45 -04:00
parent 87ca027277
commit e4821889d2
2 changed files with 66 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/components/TopBar.jsx
View file

@ -27,11 +27,11 @@ const TopBar = ({ search, setSearch, absolute }) => {
return ( return (
<div <div
className={`${styles.Container} ${ className={`${styles.Container} ${
absolute && width > 1000 ? styles.Absolute : "" absolute ? styles.Absolute : ""
} ${setSearch ? styles.HasSearch : ""}`} } ${setSearch ? styles.HasSearch : ""}`}
> >
<Link to="/"> <Link to="/" className={styles.Title}>
<h1 className={styles.Title}>React Movie Finder</h1> <h1>React Movie Finder</h1>
</Link> </Link>
{setSearch && width > 1000 && Search} {setSearch && width > 1000 && Search}

11
src/styles/TopBar.module.css
View file

@ -33,16 +33,11 @@
.Container.Absolute { .Container.Absolute {
position: absolute; position: absolute;
background: linear-gradient(to bottom, #00000090, #00000010); background: linear-gradient(to bottom, #00000099, #00000050);
} }
.Container a { .Container a {
color: white; color: white;
text-decoration: none;
}
.Container a::hover {
text-decoration: underline;
} }
.Search { .Search {
@ -55,3 +50,7 @@
border-radius: 10px; border-radius: 10px;
background-color: var(--secondary); background-color: var(--secondary);
} }
.Title {
text-decoration: none;
}