Compare commits
2 commits
a657ff21c1
...
6e1113770c
Author | SHA1 | Date | |
---|---|---|---|
6e1113770c | |||
d19e059a51 |
|
@ -4,7 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + React + TS</title>
|
||||
<title>Wishlist</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
@ -19,9 +19,8 @@ h1 {
|
|||
}
|
||||
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
max-width: 1920px;
|
||||
padding: 0 15px 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
@ -61,3 +60,7 @@ h1:hover {
|
|||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
|
||||
}
|
||||
|
|
|
@ -11,10 +11,14 @@ function App() {
|
|||
const [itemChoiceByUser, setItemChoiceByUser] = useState({});
|
||||
const [count, setCount] = useState(0)
|
||||
|
||||
const handleBackgroundClick = () =>{
|
||||
console.log("clicked");
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div onClick={handleBackgroundClick} className="app-container">
|
||||
<h1>
|
||||
<img src={jellyfin} className="logo" alt="Jellyfin logo" height="50px" width="50px" />
|
||||
<img src={jellyfin} className="logo" alt="Jellyfin logo" height="50px" width="50px" />
|
||||
Wishlist
|
||||
</h1>
|
||||
<Search
|
||||
|
@ -22,7 +26,7 @@ function App() {
|
|||
searchString={searchString}
|
||||
setSearchString={setSearchString}
|
||||
/>
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
@ -42,7 +42,7 @@ const Search = ({ setSearchResults, setSearchString, searchString }: SearchProps
|
|||
value={searchString}
|
||||
type="text"
|
||||
onChange={(e) => setSearchString(e.target.value)}
|
||||
placeholder="Pick a movie or series"
|
||||
placeholder="Search here..."
|
||||
autoFocus
|
||||
ref={inputRef}
|
||||
/>
|
||||
|
|
|
@ -25,7 +25,6 @@ a:hover {
|
|||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
@ -33,6 +32,7 @@ body {
|
|||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
margin: 10px 0 15px;
|
||||
}
|
||||
|
||||
button {
|
||||
|
@ -53,16 +53,3 @@ button:focus,
|
|||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue