From 570342e7153b4b0d808ad98ba568557eeedb2299 Mon Sep 17 00:00:00 2001
From: Eero Holmala <eero.holmala@hotmail.com>
Date: Sat, 1 Jun 2024 12:30:01 +0300
Subject: [PATCH] Frontend: Improve global styles, extract footer component

---
 .../src/app/(auth)/login/page.tsx                    | 12 +++++++-----
 wretched-machines-frontend/src/app/globals.css       | 12 ++++++++++--
 wretched-machines-frontend/src/app/layout.tsx        |  6 ++++--
 .../src/components/ui/content-box.tsx                |  4 ++--
 .../src/components/ui/footer.tsx                     | 11 +++++++++++
 .../src/components/ui/navbar.tsx                     |  4 ++--
 .../src/components/ui/page-title.tsx                 |  2 +-
 7 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 wretched-machines-frontend/src/components/ui/footer.tsx

diff --git a/wretched-machines-frontend/src/app/(auth)/login/page.tsx b/wretched-machines-frontend/src/app/(auth)/login/page.tsx
index 6536540..165e30b 100644
--- a/wretched-machines-frontend/src/app/(auth)/login/page.tsx
+++ b/wretched-machines-frontend/src/app/(auth)/login/page.tsx
@@ -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">
diff --git a/wretched-machines-frontend/src/app/globals.css b/wretched-machines-frontend/src/app/globals.css
index aaa1306..3dbbbd6 100644
--- a/wretched-machines-frontend/src/app/globals.css
+++ b/wretched-machines-frontend/src/app/globals.css
@@ -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;
   }
diff --git a/wretched-machines-frontend/src/app/layout.tsx b/wretched-machines-frontend/src/app/layout.tsx
index c070d6c..0c8bda1 100644
--- a/wretched-machines-frontend/src/app/layout.tsx
+++ b/wretched-machines-frontend/src/app/layout.tsx
@@ -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>
   );
diff --git a/wretched-machines-frontend/src/components/ui/content-box.tsx b/wretched-machines-frontend/src/components/ui/content-box.tsx
index 5f330f9..1c04fdc 100644
--- a/wretched-machines-frontend/src/components/ui/content-box.tsx
+++ b/wretched-machines-frontend/src/components/ui/content-box.tsx
@@ -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>
diff --git a/wretched-machines-frontend/src/components/ui/footer.tsx b/wretched-machines-frontend/src/components/ui/footer.tsx
new file mode 100644
index 0000000..d1473ee
--- /dev/null
+++ b/wretched-machines-frontend/src/components/ui/footer.tsx
@@ -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;
\ No newline at end of file
diff --git a/wretched-machines-frontend/src/components/ui/navbar.tsx b/wretched-machines-frontend/src/components/ui/navbar.tsx
index 7dd5f57..e5606af 100644
--- a/wretched-machines-frontend/src/components/ui/navbar.tsx
+++ b/wretched-machines-frontend/src/components/ui/navbar.tsx
@@ -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>
diff --git a/wretched-machines-frontend/src/components/ui/page-title.tsx b/wretched-machines-frontend/src/components/ui/page-title.tsx
index ee3d6f8..b0c7b5d 100644
--- a/wretched-machines-frontend/src/components/ui/page-title.tsx
+++ b/wretched-machines-frontend/src/components/ui/page-title.tsx
@@ -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>
     );
 }