Feature/add styling

.ruby-version

@@ -0,0 +1 @@
+3.1.2

frontend/src/components/NavigationBar.tsx

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import BoulderLogo from "../assets/images/BoulderLogo-2x.png";
+
+const NavigationBar = ({
+  children = null,
+}: {
+  children?: ReactNode;
+}): JSX.Element => {
+  return (
+    <div className=" bg-boulder-brown font-serif text-boulder-beige w-full items-center content-center px-24 grid">
+      <div className="w-max row-start-1">
+        <Link to="/" tabIndex={1}>
+          <img src={BoulderLogo} alt="Site Logo" />
+        </Link>
+      </div>
+      <div className="row-start-1 self-end place-self-end">
+        <ul className="flex border-boulder-beige text-2xl border-4 w-max">
+          <li className="h-16 w-44 transform hover:bg-boulder-beige hover:text-boulder-brown   ">
+            <button className="w-full h-full font-serif">sessions</button>
+          </li>
+
+          <li className="h-16 w-44 transform hover:bg-boulder-beige hover:text-boulder-brown   ">
+            <button className="w-full h-full font-serif">campaign</button>
+          </li>
+
+          <li className="h-16 w-44 transform hover:bg-boulder-beige hover:text-boulder-brown   ">
+            <button className="w-full h-full font-serif">characters</button>
+          </li>
+
+          <li className="h-16 w-44 transform hover:bg-boulder-beige hover:text-boulder-brown   ">
+            <button className="w-full h-full font-serif">account</button>
+          </li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default NavigationBar;

frontend/src/components/buttons/BaseButton.tsx

@@ -0,0 +1,36 @@
+import clsx from 'clsx'
+import { MouseEventHandler, SetStateAction } from 'react'
+import useToggle from "../../utils/useFunctions/useToggle"
+
+ interface Icolors { 
+	[key: string]: string
+ }
+ const colors: Icolors = { 
+	orange: "bg-boulder-orange",
+	blue: "bg-boulder-blue",
+	pink: "bg-boulder-pink",
+	brown: "bg-boulder-orange",
+	beige: "bg-boulder-beige"
+ }
+
+const BaseButton = ({ onClick = () => {}, color = "bg-boulder-orange", children } : {onClick: () => void, color: string, children: string}
+
+ ) => { 
+	const [isToggled, toggleValueTest] = useToggle(false)
+
+	const displayColor = isToggled ? color : 'bg-boulder-blue'
+const handleClick: MouseEventHandler= (e) => { 
+	e.preventDefault()
+	toggleValueTest()
+	console.log(isToggled)
+
+}
+	const buttonStyles: string = clsx(colors[color])
+	return ( 
+		<button className={`${displayColor} p-1 pl-4 text-xl border-2  text-boulder-brown border-boulder-brown text-start`} onClick={handleClick}>{isToggled ? "pressed" : "not pressed"}</button>
+	)	
+ }
+
+
+
+export default BaseButton

frontend/src/components/layouts/default.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+import NavigationBar from "../NavigationBar";
+
+const defaultLayout = ({ children }: { children: ReactNode }) => {
+  return (
+    <>
+      <div className="bg-boulder-brown h-screen px-12 py-6 text-boulder-beige ">
+        <NavigationBar />
+        <section className="grid justify-center content-center">
+          {children}
+        </section>
+      </div>
+    </>
+  );
+};
+
+export default defaultLayout;

frontend/src/index.css

@@ -2,11 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer base {
+  @font-face {
+    font-family: Donegal One;
+    font-weight: 400;
+    src: url(../public/fonts/DonegalOne-Regular.ttf);
+  }
+}
+
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
-    sans-serif;
+  font-family: "Donegal One", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

frontend/src/routes/home.tsx

@@ -0,0 +1,11 @@
+import DefaultLayout from "../components/layouts/default";
+
+function Home() {
+  return (
+    <DefaultLayout>
+      <div>this is the home page</div>
+    </DefaultLayout>
+  );
+}
+
+export default Home;

frontend/src/routes/login.tsx

@@ -0,0 +1,49 @@
+import DefaultLayout from "../components/layouts/default";
+import BaseButton from "../components/buttons/BaseButton";
+
+function Login() {
+  return (
+    <DefaultLayout>
+      <div className="text-boulder-beige grid grid-cols-2 px-12 justify-center items-center  border-boulder-beige border-4 h-[40rem] xl:w-[75vw] lg:w-[40vw]">
+        <h1 className="col-start-1 mx-auto font-serif text-8xl">Login </h1>
+        <div className="w-full col-start-2 border-2 border-black h-3/4 bg-boulder-beige">
+          <form
+            action="signin"
+            className="relative grid w-full px-12 py-6 grid-row gap-y-3"
+          >
+            <label
+              htmlFor="email"
+              className="my-3 font-serif text-3xl text-boulder-brown"
+            >
+              email address
+            </label>
+            <input
+              type="text"
+              className="w-full border-b-2 appearance-none border-boulder-brown bg-boulder-beige text-boulder-brown"
+            />
+
+            <label
+              htmlFor="password"
+              className="my-3 mt-12 font-serif text-3xl text-boulder-brown"
+            >
+              password
+            </label>
+            <input
+              type="text"
+              className="w-full mb-12 border-b-2 appearance-none border-boulder-brown bg-boulder-beige text-boulder-brown"
+            />
+            <button className="bg-boulder-blue after:content-['\ '] after:w-full after:bg-boulder-blue after:absolute after:top-3 text-boulder-brown border-boulder-brown text-xl pl-4 border-2 text-start p-1">
+              login
+            </button>
+            <button className="p-1 pl-4 text-xl border-2 bg-boulder-orange text-boulder-brown border-boulder-brown text-start">
+              recover account
+            </button>
+            <BaseButton onClick={()=>{}} color="bg-boulder-orange" children="how u doing`"/>
+          </form>
+        </div>
+      </div>
+    </DefaultLayout>
+  );
+}
+
+export default Login;

frontend/src/utils/router.tsx

@@ -1,16 +1,15 @@
 import { createBrowserRouter } from "react-router-dom";
+import NavigationBar from "../components/NavigationBar";
+import Home from "../routes/home";
+import Login from "../routes/login";
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <div>hello monsoir dicky</div>,
+    element: <Home />,
   },
   {
     path: "/login",
-    element: (
-      <div className="text-red-700 text-5xl">
-        login plz ty 4 credit card details
-      </div>
-    ),
+    element: <Login />,
   },
 ]);
 

frontend/src/utils/useFunctions/useToggle.ts

@@ -0,0 +1,9 @@
+import { useState } from 'react'
+
+export const useToggle = (initValue: boolean = false) => {
+  const [value, setValue] = useState<boolean>(initValue)
+  const toggleValue = () => setValue((x) => !x)
+  return [ value, toggleValue] as const
+}
+
+export default useToggle

frontend/tailwind.config.js

@@ -2,6 +2,15 @@
 module.exports = {
   content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
+    colors: {
+      "boulder-beige": "#D4BE98",
+      "boulder-brown": "#282828",
+      "boulder-blue": "#7DAEA3",
+      "boulder-orange": "#D8A657",
+    },
+    fontFamily: {
+      serif: ["Donegal One"],
+    },
     extend: {},
   },
   plugins: [],