eero/WretchedMachines
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Frontend: Improve global styles, extract footer component

Browse Source
This commit is contained in:
Eero Holmala 2024-06-01 12:30:01 +03:00
parent 6ad4493f42
commit 570342e715
7 changed files with 37 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
wretched-machines-frontend/src/app/(auth)/login/page.tsx
View File

@ -2,6 +2,7 @@
import Form from "@/components/ui/form";
import { FormLabel, FormSubmitInput, FormTextInput } from "@/components/ui/form-input";
import PageTitle from "@/components/ui/page-title";
import { ChangeEvent, useState } from "react";
const Login = () => {
@ -24,16 +25,17 @@ const Login = () => {
}
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<main className="flex min-h-screen flex-col items-center justify-stretch p-24">
<PageTitle title="Login"></PageTitle>
<div className="w-full max-w-xs">
<Form className="shadow-md rounded px-8 pt-6 pb-8 mb-4" formAction={handleAction}>
<div className="mb-4">
<FormLabel className="block text-gray-700 text-sm font-bold mb-2" name={"email"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="email..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}>Test</FormTextInput>
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"email"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="email..." type="email" name="email" value={inputData.email} onChangeHandler={handleChange}>Test</FormTextInput>
</div>
<div className="mb-6">
<FormLabel className="block text-gray-700 text-sm font-bold mb-2" name={"password"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline" placeholder="password..." type="password" name="password" value={inputData.password} onChangeHandler={handleChange}>Test</FormTextInput>
<FormLabel className="block text-eth text-sm font-bold mb-2" name={"password"}></FormLabel>
<FormTextInput className="shadow appearance-none border rounded w-full py-2 px-3 text-eth leading-tight focus:outline-none focus:shadow-outline" placeholder="password..." type="password" name="password" value={inputData.password} onChangeHandler={handleChange}>Test</FormTextInput>
<p className="text-red-500 text-xs italic">Please choose a password.</p>
</div>
<div className="flex items-center justify-between">

12
wretched-machines-frontend/src/app/globals.css
View File

@ -80,9 +80,17 @@
text-shadow: .3rem .3rem 0 #bab5a1;
}
.text-eth {
color: rgba(0, 0, 0, 0.6);
}
.bg-666666 {
background-color: #666666;
opacity: 1;
}
main, footer {
background-color: #d0de9e;
opacity: 0.6;
background-color: rgba(208, 222, 158, 0.6);
background-image: linear-gradient(45deg, #d0d0d0 50%, #d0de9e 50%);
background-size: 5px 5px;
}

6
wretched-machines-frontend/src/app/layout.tsx
View File

@ -4,6 +4,8 @@ import "./globals.css";
import { cn } from "@/lib/utils"
import Navbar from "@/components/ui/navbar";
import Footer from "@/components/ui/footer";
const fontSans = FontSans({
subsets: ["latin"],
@ -12,7 +14,7 @@ const fontSans = FontSans({
export const metadata: Metadata = {
title: "Wretched Machines",
description: "Generated by create next app",
description: "Website by MagicMuffin",
};
export default function RootLayout({
@ -28,7 +30,7 @@ export default function RootLayout({
)}>
<Navbar></Navbar>
{children}
<footer className="text-center p-24 border-t-2 border-solid border-black border-opacity-50 min-h-36">Created by MagicMuffin | Copyright 2024</footer>
<Footer>Created by MagicMuffin | Copyright 2024</Footer>
</body>
</html>
);

4
wretched-machines-frontend/src/components/ui/content-box.tsx
View File

@ -8,8 +8,8 @@ interface ContentBoxProps {
const ContentBox = (props: ContentBoxProps)=>{
return(
<div className={cn("shadow-lg m-10")}>
<div className={cn("content-box-header bg-black text-white p-8 pt-4 pb-4 text-xl text-left")}>{props.title}</div>
<div className={cn("content-box-content border-solid border-1 border-black p-8")}>
<div className={cn("bg-666666 text-white p-8 pt-4 pb-4 text-xl text-left")}>{props.title}</div>
<div className={cn("border-solid border-1 border-black p-8 text-eth")}>
{props.children}
</div>
</div>

11
wretched-machines-frontend/src/components/ui/footer.tsx Normal file
View File

@ -0,0 +1,11 @@
import { cn } from "@/lib/utils";
type FooterProps = {
children?: React.ReactNode;
};
const Footer = (props: FooterProps) => {
return(<footer className={cn("text-center p-24 border-t-2 border-solid border-black border-opacity-50 min-h-36 text-eth")}>{props.children}</footer>);
}
export default Footer;

4
wretched-machines-frontend/src/components/ui/navbar.tsx
View File

@ -6,9 +6,9 @@ const Break = ()=> <hr className={cn("w-100")}></hr>
const Navbar = () => {
return (
<div className={cn("bg-gray-800 pt-1 pb-1")}>
<div className={cn("bg-666666 pt-1 pb-1")}>
<Break/>
<div className={cn("flex h-20 bg-gray-800 text-white justify-around opacity-100 items-center")}>
<div className={cn("flex h-20 text-white justify-around items-center")}>
<Link href="/">
<div>Home</div>
</Link>

2
wretched-machines-frontend/src/components/ui/page-title.tsx
View File

@ -16,7 +16,7 @@ const AddSpacing = (text: string) : string => {
const PageTitle = (props: PageTitleProps)=>{
const title = AddSpacing(props.title);
return(
<h1 className={cn("text-4xl drop-shadow-xl text-shadow tracking-widest")}>{title}</h1>
<h1 className={cn("text-4xl drop-shadow-xl text-shadow tracking-widest text-eth")}>{title}</h1>
);
}