Compare commits

...

2 commits

Author SHA1 Message Date
Nikhil Nawgiri 6e1113770c Improve styling - WIP 2024-10-27 03:33:33 +01:00
Nikhil Nawgiri d19e059a51 Update HTML 2024-10-27 03:12:57 +01:00
5 changed files with 16 additions and 22 deletions

View file

@ -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>

View file

@ -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 {
}

View file

@ -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>
)
}

View file

@ -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}
/>

View file

@ -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;
}
}