login ui done

app/components/Input.tsx

@@ -1,21 +1,35 @@
-import React from "react";
+import { twMerge } from "tailwind-merge";
+import { IconDefinition } from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { Label } from ".";
 
 interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
   label?: string;
   className?: string;
+  icon?: IconDefinition
 }
 
-export function Input({ label, className, ...rest }: InputProps) {
+export function Input({label, icon, className, ...rest }: InputProps) {
   return (
-    <div className={"flex flex-col " + className}>
-      {label && (
-        <label className="text-md mb-2 font-medium text-white">{label}</label>
-      )}
+    <div className={twMerge("flex flex-col gap-2", className)}>
+      {label && <Label>{label}</Label>}
 
-      <input
-        className="h-10 rounded-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary"
-        {...rest}
-      />
+      <div className="relative w-full">
+        {icon && (
+          <FontAwesomeIcon
+            icon={icon}
+            className="absolute pt-2.5 pl-3 h-5"
+          />
+        )}
+        <input
+          className={twMerge(
+            "w-full h-10 rounded-md bg-brand-secondary p-3 text-white transition-all duration-150 ease-in-out outline-none outline-offset-0 focus:outline-brand-primary",
+            icon? "pl-12" : "",
+          )}
+          {...rest}
+        />
+      </div>
     </div>
   );
 }

app/components/Typography.tsx

@@ -1,3 +1,4 @@
+import { NavLink, NavLinkProps } from "@remix-run/react";
 import { twMerge } from "tailwind-merge";
 
 interface TypogProps  {
@@ -27,5 +28,14 @@ export const H5 = ({className,children,}:TypogProps)=>
 export const H6 = ({className,children,}:TypogProps)=>
   <h6 className={twMerge(baseTypo, "font-light text-sm",className)}> {children} </h6>;
 
+export const Link = ({className, ...rest}:NavLinkProps)=>
+  <NavLink
+    className={twMerge(
+      "text-brand-primary hover:text-brand-primary-400",
+      className as string,
+    )}
+    {...rest}
+  />
+
 export const P = ({className,children,}:TypogProps)=>
   <p className={twMerge(baseTypo, className)}> {children} </p>;

app/components/index.tsx

@@ -4,7 +4,7 @@ import { ButtonLink } from "./ButtonLink";
 import { ButtonIconSelect } from "./ButtonIconSelect";
 import { Input } from "./Input";
 import { InputVector } from "./InputVector";
-import { H1, H2, H3, H4, H5, H6, P, Label} from "./Typography";
+import { H1, H2, H3, H4, H5, H6, P, Label, Link} from "./Typography";
 import { ItemPicker } from "./ItemPicker";
 import { Textarea } from "./Textarea";
 import { LoadingBar } from "./LoadingBar";
@@ -15,7 +15,7 @@ export {
   ButtonIcon,
   ButtonLink,
   ButtonIconSelect,
-  H1,H2,H3,H4,H5,H6,P,Label,
+  H1,H2,H3,H4,H5,H6,P,Label,Link,
   ItemPicker,
   Textarea,
   Input,

app/pages/PageEnigma/comps/SidePanelTabs/TabStylization.tsx

@@ -8,8 +8,7 @@ import {
 } from "~/components"
 
 import { AppUiContext } from '../../contexts/AppUiContext';
-import { APPUI_ACTION_TYPES } from '../../reducers';
-import { APPUI_VIEW_MODES } from '../../reducers';
+import { APPUI_ACTION_TYPES, APPUI_VIEW_MODES } from '../../reducers';
 import { EngineContext } from '../../contexts/EngineContext';
 import { ArtStyle } from '../../js/api_manager';
 export const TabStylization = ()=>{

app/routes/IdealEnigma.tsx

@@ -1,40 +1,5 @@
-import { useState } from "react";
 import { PageEnigma } from "../pages/PageEnigma";
 
-import { Button } from "~/components/Button";
-
 export default function IdealEnigma() {
-  //const [riddle, setRiddle] = useState<string>("");
-  //const [submitted, setSubmitted] = useState<boolean>(false);
-
-  //const handleInput = (event:React.ChangeEvent<HTMLInputElement>)=>{
-  //  setRiddle(event.target.value);
-  //}
-
-  //const handleSubmit = () => {
-  //  const state = riddle.length > 5 && riddle[riddle.length-1] === "!";
-  //  setSubmitted(state);
-  //}
-
   return <PageEnigma />;
-  // if(submitted){
-  //   return <PageEnigmaComponent />
-  // }else{
-  //   return(
-  //     <div className="w-full flex justify-center content-center">
-  //       <form
-  //         className="mt-20 flex flex-col content-center"
-  //         onSubmit={handleSubmit}
-  //       >
-  //         <label className='text-white'>
-  //           Riddle:
-  //         </label>
-  //         <input type="text" value={riddle} onChange={handleInput} />
-  //         <br/>
-  //         <Button type="submit" className='text-white'>Submit</Button>
-  //       </form>
-  //     </div>
-
-  //   );
-  // }
 }

app/routes/Login.tsx

@@ -0,0 +1,52 @@
+import { Form } from "@remix-run/react";
+import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
+import {
+  Button,
+  H1,
+  Input,
+  Link,
+  P,
+} from '~/components';
+
+export default function LoginScreen() {
+  return (
+    <div
+      className="fixed w-full overflow-scroll"
+      style={{height: "calc(100% - 72px)"}}
+    >
+      <div className="w-10/12 max-w-2xl mx-auto my-6">
+        <H1 className="text-center">Login to FakeYou</H1>
+      </div>
+      <div
+        className='bg-ui-panel w-10/12 max-w-2xl mx-auto my-6 rounded-lg p-6 border border-ui-panel-border'
+      >
+        <Form method="post" >
+          <Input
+            label="Username or Email"
+            icon={faUser}
+            type="email"
+            name="email"
+            placeholder="Username or Email"
+            required
+          />
+          <br />
+          <Input
+            label="Password"
+            icon={faKey}
+            type="password"
+            name="password"
+            placeholder="Password"
+            autoComplete="current-password"
+            required
+          />
+          <br />
+          <div className="flex justify-end gap-2">
+            <P>Don't have an account?</P>
+            <Link to='/signup'>Sign Up</Link>
+          </div>
+          <Button>Login</Button>
+        </Form>
+      </div>
+    </div>
+  );
+}

app/routes/Signup.tsx

@@ -0,0 +1,71 @@
+import { Form } from "@remix-run/react";
+import { faEnvelope, faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
+import {
+  Button,
+  H1,
+  Input,
+  Link,
+  P,
+} from '~/components';
+
+export default function LoginScreen() {
+  return (
+    <div
+      className="fixed w-full overflow-scroll"
+      style={{height: "calc(100% - 72px)"}}
+    >
+      <div className="w-10/12 max-w-2xl mx-auto my-6">
+        <H1 className="text-center">Sign Up to FakeYou</H1>
+      </div>
+      <div
+        className='bg-ui-panel w-10/12 max-w-2xl mx-auto my-6 rounded-lg p-6 border border-ui-panel-border'
+      >
+        <Form method="post" >
+          <Input
+            label="Username"
+            icon={faUser}
+            placeholder="Username"
+            name="username"
+            required
+          />
+          <br />
+          <Input
+            type="email"
+            label="Email"
+            icon={faEnvelope}
+            placeholder="Email"
+            name="email"
+            required
+          />
+          <br />
+          <Input
+            type="password"
+            label="Password"
+            icon={faKey}
+            name="password"
+            placeholder="Password"
+            autoComplete="current-password"
+            required
+          />
+          <br />
+          <Input
+            type="password"
+            label="Password Confrimation"
+            icon={faKey}
+            placeholder="Password COnfirmation"
+            name="password-confirmation"
+            required
+          />
+          <br />
+          <br />
+          <Button>Sign up</Button>
+          <br />
+          <div className="flex gap-2">
+            <P>Already have an account?</P>
+            <Link to='/login'>Log in instead</Link>
+          </div>
+        </Form>
+      </div>
+    </div>
+  );
+}