feat: Implement a dark theme and modern UI components with improved layout and styling.
This commit is contained in:
parent
0c3c9e61b6
commit
deae3a106b
@ -2,41 +2,79 @@
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
background-color: var(--secondary-bg);
|
||||
padding: 2rem;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
.navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 2rem;
|
||||
padding-bottom: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-muted);
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.nav-link:hover, .nav-link.active {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--secondary-alt-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--border-color);
|
||||
}
|
||||
|
||||
.list-item {
|
||||
background-color: var(--secondary-alt-bg);
|
||||
padding: 1rem;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.list-item:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: var(--accent-color);
|
||||
}
|
||||
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
@ -44,33 +44,18 @@ function App() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<div className="card">
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
justifyContent: "space-between",
|
||||
alignItems: "center",
|
||||
marginBottom: "1rem",
|
||||
}}
|
||||
>
|
||||
<h2>
|
||||
<Link
|
||||
to="/"
|
||||
style={{
|
||||
textDecoration: "none",
|
||||
color: "inherit",
|
||||
marginRight: "1rem",
|
||||
}}
|
||||
>
|
||||
<div className="navbar">
|
||||
<div className="nav-links">
|
||||
<Link to="/" className="nav-link">
|
||||
People List
|
||||
</Link>
|
||||
<Link
|
||||
to="/games"
|
||||
style={{ textDecoration: "none", color: "inherit" }}
|
||||
>
|
||||
<Link to="/games" className="nav-link">
|
||||
Games
|
||||
</Link>
|
||||
</h2>
|
||||
<button onClick={handleLogout}>Logout</button>
|
||||
</div>
|
||||
<button onClick={handleLogout} className="btn-secondary">
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<Routes>
|
||||
<Route path="/" element={<PersonList people={people} />} />
|
||||
|
||||
@ -70,27 +70,30 @@ export function GameList() {
|
||||
return (
|
||||
<div>
|
||||
<h2>Add New Game</h2>
|
||||
{message && <p>{message}</p>}
|
||||
{message && (
|
||||
<p
|
||||
style={{ color: message.includes("success") ? "#4caf50" : "#f44336" }}
|
||||
>
|
||||
{message}
|
||||
</p>
|
||||
)}
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "1rem",
|
||||
maxWidth: "400px",
|
||||
}}
|
||||
className="form-group"
|
||||
style={{ maxWidth: "500px" }}
|
||||
>
|
||||
<label>
|
||||
Title:
|
||||
<div className="form-group">
|
||||
<label>Title</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
required
|
||||
placeholder="Game Title"
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Source:
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Source</label>
|
||||
<select
|
||||
value={source}
|
||||
onChange={(e) => setSource(Number(e.target.value))}
|
||||
@ -98,56 +101,92 @@ export function GameList() {
|
||||
<option value={Source.STEAM}>Steam</option>
|
||||
<option value={Source.ROBLOX}>Roblox</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Multiplayer:
|
||||
</div>
|
||||
<div
|
||||
className="form-group"
|
||||
style={{ flexDirection: "row", alignItems: "center" }}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={multiplayer}
|
||||
onChange={(e) => setMultiplayer(e.target.checked)}
|
||||
id="multiplayer"
|
||||
/>
|
||||
<label
|
||||
htmlFor="multiplayer"
|
||||
style={{ marginBottom: 0, cursor: "pointer" }}
|
||||
>
|
||||
Multiplayer
|
||||
</label>
|
||||
<label>
|
||||
Min Players:
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<div className="form-group">
|
||||
<label>Min Players</label>
|
||||
<input
|
||||
type="number"
|
||||
value={minPlayers}
|
||||
onChange={(e) => setMinPlayers(Number(e.target.value))}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Max Players:
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Max Players</label>
|
||||
<input
|
||||
type="number"
|
||||
value={maxPlayers}
|
||||
onChange={(e) => setMaxPlayers(Number(e.target.value))}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Price:
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
display: "grid",
|
||||
gridTemplateColumns: "1fr 1fr",
|
||||
gap: "1rem",
|
||||
}}
|
||||
>
|
||||
<div className="form-group">
|
||||
<label>Price</label>
|
||||
<input
|
||||
type="number"
|
||||
value={price}
|
||||
onChange={(e) => setPrice(Number(e.target.value))}
|
||||
/>
|
||||
</label>
|
||||
<label>
|
||||
Remote ID:
|
||||
</div>
|
||||
<div className="form-group">
|
||||
<label>Remote ID</label>
|
||||
<input
|
||||
type="number"
|
||||
value={remoteId}
|
||||
onChange={(e) => setRemoteId(Number(e.target.value))}
|
||||
/>
|
||||
</label>
|
||||
<button type="submit">Add Game</button>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" style={{ marginTop: "1rem" }}>
|
||||
Add Game
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div style={{ marginTop: "2rem" }}>
|
||||
<div style={{ marginTop: "3rem" }}>
|
||||
<h3>Existing Games</h3>
|
||||
<ul>
|
||||
<ul className="grid-container">
|
||||
{games.map((game) => (
|
||||
<li key={game.title}>
|
||||
{game.title} ({game.source === Source.STEAM ? "Steam" : "Roblox"})
|
||||
<li key={game.title} className="list-item">
|
||||
<strong>{game.title}</strong>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "0.9em",
|
||||
color: "var(--text-muted)",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
{game.source === Source.STEAM ? "Steam" : "Roblox"}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
@ -41,37 +41,36 @@ export function Login({ onLogin }: LoginProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<h2>Login</h2>
|
||||
<form
|
||||
onSubmit={handleSubmit}
|
||||
style={{ display: "flex", flexDirection: "column", gap: "1rem" }}
|
||||
>
|
||||
<div>
|
||||
<label style={{ display: "block", marginBottom: "0.5rem" }}>
|
||||
Username:{" "}
|
||||
</label>
|
||||
<div className="card" style={{ maxWidth: "400px", margin: "4rem auto" }}>
|
||||
<h2 style={{ textAlign: "center", marginBottom: "2rem" }}>Login</h2>
|
||||
<form onSubmit={handleSubmit} className="form-group">
|
||||
<div className="form-group">
|
||||
<label>Username</label>
|
||||
<input
|
||||
type="text"
|
||||
value={username}
|
||||
onChange={(e) => setUsername(e.target.value)}
|
||||
style={{ padding: "0.5rem" }}
|
||||
placeholder="Enter your username"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label style={{ display: "block", marginBottom: "0.5rem" }}>
|
||||
Password:{" "}
|
||||
</label>
|
||||
<div className="form-group">
|
||||
<label>Password</label>
|
||||
<input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
style={{ padding: "0.5rem" }}
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit">Login</button>
|
||||
<button type="submit" style={{ marginTop: "1rem" }}>
|
||||
Login
|
||||
</button>
|
||||
</form>
|
||||
{error && <p style={{ color: "red", marginTop: "1rem" }}>{error}</p>}
|
||||
{error && (
|
||||
<p style={{ color: "#ff6b6b", marginTop: "1rem", textAlign: "center" }}>
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -75,28 +75,52 @@ export const PersonDetails = () => {
|
||||
if (!person) return <div>Loading...</div>;
|
||||
|
||||
return (
|
||||
<div className="card">
|
||||
<div>
|
||||
<div style={{ marginBottom: "2rem" }}>
|
||||
<h2>{person.name}</h2>
|
||||
<ul>
|
||||
<ul className="grid-container">
|
||||
{person.opinion.map((op, i) => (
|
||||
<li key={i}>
|
||||
{op.title} - {op.wouldPlay ? "Would Play" : "Would Not Play"}
|
||||
<li
|
||||
key={i}
|
||||
className="list-item"
|
||||
style={{ borderColor: op.wouldPlay ? "#4caf50" : "#f44336" }}
|
||||
>
|
||||
<strong>{op.title}</strong>
|
||||
<div
|
||||
style={{
|
||||
color: op.wouldPlay ? "#4caf50" : "#f44336",
|
||||
marginTop: "0.5rem",
|
||||
}}
|
||||
>
|
||||
{op.wouldPlay ? "Would Play" : "Would Not Play"}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div
|
||||
style={{
|
||||
marginTop: "2rem",
|
||||
borderTop: "1px solid #ccc",
|
||||
paddingTop: "1rem",
|
||||
borderTop: "1px solid var(--border-color)",
|
||||
paddingTop: "2rem",
|
||||
}}
|
||||
>
|
||||
<h3>Add Opinion</h3>
|
||||
<div style={{ display: "flex", gap: "1rem", alignItems: "center" }}>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: "1rem",
|
||||
alignItems: "flex-end",
|
||||
flexWrap: "wrap",
|
||||
}}
|
||||
>
|
||||
<div className="form-group" style={{ marginBottom: 0, flex: 1 }}>
|
||||
<label>Game</label>
|
||||
<select
|
||||
value={gameTitle}
|
||||
onChange={(e) => setGameTitle(e.target.value)}
|
||||
style={{ width: "100%" }}
|
||||
>
|
||||
{games.map((g) => (
|
||||
<option key={g.title} value={g.title}>
|
||||
@ -104,15 +128,32 @@ export const PersonDetails = () => {
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<label>
|
||||
</div>
|
||||
<div
|
||||
className="form-group"
|
||||
style={{
|
||||
marginBottom: 0,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingBottom: "0.5rem",
|
||||
}}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={wouldPlay}
|
||||
onChange={(e) => setWouldPlay(e.target.checked)}
|
||||
id="wouldPlay"
|
||||
/>
|
||||
<label
|
||||
htmlFor="wouldPlay"
|
||||
style={{ marginBottom: 0, cursor: "pointer" }}
|
||||
>
|
||||
Would Play
|
||||
</label>
|
||||
<button onClick={handleAddOpinion}>Add</button>
|
||||
</div>
|
||||
<button onClick={handleAddOpinion} style={{ marginBottom: "2px" }}>
|
||||
Add
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,23 +7,18 @@ interface Props {
|
||||
|
||||
export const PersonList = ({ people }: Props) => {
|
||||
return (
|
||||
<div>
|
||||
<div className="grid-container">
|
||||
{people.map((person, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{
|
||||
marginBottom: "1rem",
|
||||
padding: "1rem",
|
||||
border: "1px solid #ccc",
|
||||
borderRadius: "8px",
|
||||
}}
|
||||
>
|
||||
<div key={index} className="list-item">
|
||||
<h3>
|
||||
<Link to={`/person/${person.name}`}>{person.name}</Link>
|
||||
</h3>
|
||||
<ul>
|
||||
{person.opinion.map((op, i) => (
|
||||
<li key={i}>
|
||||
<li
|
||||
key={i}
|
||||
style={{ color: op.wouldPlay ? "#4caf50" : "#f44336" }}
|
||||
>
|
||||
{op.title} - {op.wouldPlay ? "Would Play" : "Would Not Play"}
|
||||
</li>
|
||||
))}
|
||||
|
||||
@ -1,11 +1,20 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
--primary-bg: #23283d;
|
||||
--secondary-bg: #1e2233;
|
||||
--secondary-alt-bg: #191f2e;
|
||||
--tertiary-bg: #101320;
|
||||
--accent-color: #096dc0;
|
||||
--text-color: #ffffff;
|
||||
--text-muted: #a0a0a0;
|
||||
--border-color: #2a3045;
|
||||
|
||||
font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.6;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
color-scheme: dark;
|
||||
color: var(--text-color);
|
||||
background-color: var(--primary-bg);
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
@ -13,26 +22,29 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
background-color: var(--primary-bg);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--text-color);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: var(--accent-color);
|
||||
text-decoration: inherit;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #4da3ff;
|
||||
}
|
||||
|
||||
button {
|
||||
@ -42,27 +54,41 @@ button {
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
background-color: var(--accent-color);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
transition: background-color 0.25s, transform 0.1s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
background-color: #0b7dda;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
input, select {
|
||||
background-color: var(--secondary-alt-bg);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-color);
|
||||
padding: 0.6em;
|
||||
border-radius: 6px;
|
||||
font-size: 1em;
|
||||
font-family: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
|
||||
input:focus, select:focus {
|
||||
outline: 2px solid var(--accent-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
@ -17,7 +17,7 @@
|
||||
"opinion": [
|
||||
{
|
||||
"title": "Naramo Nuclear Plant V2",
|
||||
"would_play": true
|
||||
"would_play": false
|
||||
},
|
||||
{
|
||||
"title": "Test2",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user