Imbus/TTime
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Additional register-layout changes

Browse source
This commit is contained in:
Mattias 2024-03-15 14:52:05 +01:00
parent a388109a8a
commit 4920966388
1 changed files with 14 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
frontend/src/Components/Register.tsx
View file

@ -2,6 +2,7 @@ import { useState } from "react";
import { NewUser } from "../Types/Users"; import { NewUser } from "../Types/Users";
import { api } from "../API/API"; import { api } from "../API/API";
import Logo from "../assets/Logo.svg"; import Logo from "../assets/Logo.svg";
import Button from "./Button";
export default function Register(): JSX.Element { export default function Register(): JSX.Element {
const [username, setUsername] = useState(""); const [username, setUsername] = useState("");
@ -27,16 +28,18 @@ export default function Register(): JSX.Element {
className="logo w-[7vw] mb-10 mt-10" className="logo w-[7vw] mb-10 mt-10"
alt="TTIME Logo" alt="TTIME Logo"
/> />
<h3 className="pb-2 text-center">Register new user</h3> <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
Register New User
</h3>
<div className="mb-4"> <div className="mb-4">
<label <label
className="block text-gray-700 text-sm font-bold mb-2" className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor="username" htmlFor="username"
> >
Username Username
</label> </label>
<input <input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="username" id="username"
type="text" type="text"
placeholder="Username" placeholder="Username"
@ -48,13 +51,13 @@ export default function Register(): JSX.Element {
</div> </div>
<div className="mb-6"> <div className="mb-6">
<label <label
className="block text-gray-700 text-sm font-bold mb-2" className="block text-gray-700 text-sm font-sans font-bold mb-2"
htmlFor="password" htmlFor="password"
> >
Password Password
</label> </label>
<input <input
className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 mb-3 leading-tight focus:outline-none focus:shadow-outline" className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
id="password" id="password"
type="password" type="password"
placeholder="Choose your password" placeholder="Choose your password"
@ -65,12 +68,13 @@ export default function Register(): JSX.Element {
/> />
</div> </div>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<button <Button
className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;" text="Register"
onClick={(): void => {
return;
}}
type="submit" type="submit"
> />
Register
</button>
</div> </div>
</form> </form>
<p className="text-center text-gray-500 text-xs"></p> <p className="text-center text-gray-500 text-xs"></p>