renati/music-repo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add create file table, insert first user, fully port to tailwind

Browse Source
This commit is contained in:
Szymon Nowakowski
2024-11-19 21:45:10 +01:00
parent 63de1a3b02
commit 5f0b8a69d3
10 changed files with 114 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
packages/frontend/src/routes/Home.css.ts
View File

@@ -1,59 +0,0 @@
export const logout = {
padding: 8,
backgroundColor: "#C0C0C0",
borderWidth: 2,
borderStyle: "solid",
borderTopColor: "#E0E0E0",
borderLeftColor: "#E0E0E0",
borderRightColor: "#404040",
borderBottomColor: "#404040",
borderRadius: 4,
cursor: "pointer",
"selectors": {
"&:focus": {
outlineWidth: 2,
outlineStyle: "solid",
outlineColor: "#8080FF",
"@media": {
"(prefers-color-scheme: dark)": {
outlineColor: "#C0C0FF",
},
},
},
"&:active": {
borderTopColor: "#404040",
borderLeftColor: "#404040",
borderRightColor: "#E0E0E0",
borderBottomColor: "#E0E0E0",
"@media": {
"(prefers-color-scheme: dark)": {
outlineColor: "#C0C0FF",
borderTopColor: "#202020",
borderLeftColor: "#202020",
borderRightColor: "#606060",
borderBottomColor: "#606060",
},
},
},
},
"@media": {
"(prefers-color-scheme: dark)": {
backgroundColor: "#404040",
borderTopColor: "#606060",
borderLeftColor: "#606060",
borderRightColor: "#202020",
borderBottomColor: "#202020",
},
},
};

15
packages/frontend/src/routes/Home.tsx
View File

@@ -2,8 +2,9 @@ import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { client } from "../client";
import { useStore } from "../store";
import { Button } from "../styled/Button";
export const Home = () => {
export function Home() {
const navigate = useNavigate();
@@ -28,7 +29,7 @@ export const Home = () => {
}, []);
const onLogoutClick = async () => {
const { data, error } = await client.logout.post();
const { error } = await client.logout.post();
if (error !== null) {
console.error("Response was not ok");
@@ -53,15 +54,11 @@ export const Home = () => {
Użytkownik: {user.username}
</div>
<div>
<button
className="p-2 bg-stone-300 border-2 border-t-stone-200 border-l-stone-200 border-r-stone-600 border-b-stone-600 rounded"
type="button"
onClick={onLogoutClick}
>
<Button type="button" onClick={onLogoutClick}>
Wyloguj się
</button>
</Button>
</div>
</div>
</div>
);
};
}

59
packages/frontend/src/routes/Login.css.ts
View File

@@ -1,59 +0,0 @@
export const submit = {
padding: 8,
backgroundColor: "#C0C0C0",
borderWidth: 2,
borderStyle: "solid",
borderTopColor: "#E0E0E0",
borderLeftColor: "#E0E0E0",
borderRightColor: "#404040",
borderBottomColor: "#404040",
borderRadius: 4,
cursor: "pointer",
"selectors": {
"&:focus": {
outlineWidth: 2,
outlineStyle: "solid",
outlineColor: "#8080FF",
"@media": {
"(prefers-color-scheme: dark)": {
outlineColor: "#C0C0FF",
},
},
},
"&:active": {
borderTopColor: "#404040",
borderLeftColor: "#404040",
borderRightColor: "#E0E0E0",
borderBottomColor: "#E0E0E0",
"@media": {
"(prefers-color-scheme: dark)": {
outlineColor: "#C0C0FF",
borderTopColor: "#202020",
borderLeftColor: "#202020",
borderRightColor: "#606060",
borderBottomColor: "#606060",
},
},
},
},
"@media": {
"(prefers-color-scheme: dark)": {
backgroundColor: "#404040",
borderTopColor: "#606060",
borderLeftColor: "#606060",
borderRightColor: "#202020",
borderBottomColor: "#202020",
},
},
});

19
packages/frontend/src/routes/Login.tsx
View File

@@ -2,8 +2,10 @@ import { FormEventHandler, useId } from "react";
import { useNavigate } from "react-router-dom";
import { client } from "../client";
import { useStore } from "../store";
import { Button } from "../styled/Button";
import { Input } from "../styled/Input";
export const Login = () => {
export function Login() {
const navigate = useNavigate();
@@ -43,9 +45,8 @@ export const Login = () => {
<form className="p-2 flex flex-col gap-2 border border-black rounded dark:border-white" onSubmit={onSubmit}>
<header className="pb-2 border-b border-black text-center font-bold dark:border-white">Repozytorium muzyczne</header>
<label htmlFor={usernameId}>Nazwa użytkownika</label>
<input
<Input
id={usernameId}
className="w-[32ch] p-2 bg-transparent border border-black rounded focus:outline focus:outline-2 focus:outline-sky-500 focus:dark:outline-sky-200 dark:border-white"
type="text"
value={loginUsername}
autoFocus
@@ -53,21 +54,17 @@ export const Login = () => {
onInput={(e) => setLoginUsername(e.currentTarget.value)}
/>
<label htmlFor={passwordId}>Hasło</label>
<input
<Input
id={passwordId}
className="w-[32ch] p-2 bg-transparent border border-black rounded focus:outline focus:outline-2 focus:outline-sky-500 focus:dark:outline-sky-200 dark:border-white"
type="password"
value={loginPassword}
required
onInput={(e) => setLoginPassword(e.currentTarget.value)}
/>
<button
className="p-2 bg-stone-300 border-2 border-t-stone-200 border-l-stone-200 border-r-stone-600 border-b-stone-600 rounded dark:bg-stone-700 dark:border-t-stone-600 dark:border-l-stone-600 dark:border-r-stone-900 dark:border-b-stone-900"
type="submit"
>
<Button type="submit">
Zaloguj się
</button>
</Button>
</form>
</div>
);
};
}