Adds styles to form steps and nav component

Marcosfitzsimons · Feb 17, 2023 · 676f1ba · 676f1ba
1 parent 35d4abc
commit 676f1ba
Show file tree

Hide file tree

Showing 8 changed files with 135 additions and 69 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -15,13 +15,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }) {
   return (
-    <html lang="en" className={ubuntu.variable}>
+    <html
+      lang="en"
+      className={`${ubuntu.variable} bg-[#0d0f12] text-neutral-200`}
+    >
       {/*
         <head /> will contain the components returned by the nearest parent
         head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
       */}
       <head />
-      <body>{children}</body>
+      <body className="flex justify-center items-center h-screen w-full">
+        {children}
+      </body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -130,16 +130,17 @@ export default function Home() {
   };
 
   return (
-    <div className="">
-      <SideBar currentStepIndex={currentStepIndex} goTo={goTo} />
-      <main className="bg-slate-300 text-xl">
-        <p>
-          {currentStepIndex + 1} / {steps}
-        </p>
+    <div className="flex justify-between h-[500px] w-11/12 max-w-3xl relative m-1 rounded-lg border border-neutral-700 bg-[#262626] p-4">
+      {!showSuccessMsg ? (
+        <SideBar currentStepIndex={currentStepIndex} goTo={goTo} />
+      ) : (
+        ""
+      )}
+      <main className="w-[65%] mt-5">
         {showSuccessMsg ? (
           <SuccessMessage />
         ) : (
-          <form onSubmit={handleOnSubmit}>
+          <form onSubmit={handleOnSubmit} className="w-full">
             {currentStepIndex === 0 && (
               <UserInfoForm
                 {...formData}
@@ -156,14 +157,28 @@ export default function Home() {
             {currentStepIndex === 3 && (
               <FinalStep {...formData} updateForm={updateForm} />
             )}
-            {!isFirstStep && (
-              <Button onClick={previousStep} type="button">
-                Go Back
-              </Button>
-            )}
-            <Button type="submit" className="">
-              {isLastStep ? "Confirm" : "Next Step"}
-            </Button>
+            <div className="flex w-full justify-between">
+              {!isFirstStep && (
+                <Button
+                  onClick={previousStep}
+                  type="button"
+                  variant="ghost"
+                  className="text-neutral-200 hover:text-white"
+                >
+                  Go Back
+                </Button>
+              )}
+              <div className="flex flex-1 items-center">
+                <div className="relative after:pointer-events-none after:absolute after:inset-px after:rounded-[11px] after:shadow-highlight after:shadow-white/10 focus-within:after:shadow-[#77f6aa] after:transition">
+                  <Button
+                    type="submit"
+                    className="relative text-neutral-200 bg-neutral-900 border border-black/20 shadow-input shadow-black/10 rounded-xl hover:text-white"
+                  >
+                    {isLastStep ? "Confirm" : "Next Step"}
+                  </Button>
+                </div>
+              </div>
+            </div>
           </form>
         )}
       </main>

diff --git a/components/SideBar.tsx b/components/SideBar.tsx
@@ -7,52 +7,76 @@ type NavProps = {
 
 const SideBar = ({ currentStepIndex, goTo }: NavProps) => {
   return (
-    <div className="text-slate-200">
-      <nav>
-        <ul>
-          <li>
-            <span>step 1</span>
-            <button tabIndex={0} onClick={() => goTo(0)}>
+    <div className="text-slate-200 w-[25%]">
+      <nav className="bg-neutral-900 p-5 h-full rounded-md border border-neutral-700">
+        <ul className="flex flex-col gap-2">
+          <li className="flex flex-col items-start font-medium">
+            <span className="text-neutral-500 uppercase text-sm">step 1</span>
+            <button
+              tabIndex={0}
+              onClick={() => goTo(0)}
+              className={
+                currentStepIndex === 0 ? "text-[#ffe666]" : "text-white"
+              }
+            >
               <RoughNotation
                 type="underline"
                 show={currentStepIndex === 0}
-                color="#f3f3f3"
+                color="#ffe666"
               >
                 Your info
               </RoughNotation>
             </button>
           </li>
-          <li>
-            <span>step 2</span>
-            <button tabIndex={0} onClick={() => goTo(1)}>
+          <li className="flex flex-col items-start font-medium">
+            <span className="text-neutral-500 uppercase text-sm">step 2</span>
+            <button
+              tabIndex={0}
+              onClick={() => goTo(1)}
+              className={
+                currentStepIndex === 1 ? "text-[#bd284d]" : "text-white"
+              }
+            >
               <RoughNotation
                 type="underline"
                 show={currentStepIndex === 1}
-                color="yellow"
+                color="#bd284d"
               >
                 Select plan
               </RoughNotation>
             </button>
           </li>
-          <li>
-            <span>step 3</span>
-            <button tabIndex={0} onClick={() => goTo(2)}>
+          <li className="flex flex-col items-start font-medium">
+            <span className="text-neutral-500 uppercase text-sm">step 3</span>
+            <button
+              tabIndex={0}
+              onClick={() => goTo(2)}
+              className={
+                currentStepIndex === 2 ? "text-[#E7B8FF]" : "text-white"
+              }
+            >
               <RoughNotation
                 type="underline"
                 show={currentStepIndex === 2}
-                color="yellow"
+                color="#E7B8FF"
               >
                 Add-ons
               </RoughNotation>
             </button>
           </li>
-          <li>
-            <span>step 4</span>
-            <button tabIndex={0} onClick={() => goTo(3)}>
+          <li className="flex flex-col items-start font-medium">
+            <span className="text-neutral-500 uppercase text-sm">step 4</span>
+            <button
+              tabIndex={0}
+              onClick={() => goTo(3)}
+              className={
+                currentStepIndex === 3 ? "text-[#6fe79f]" : "text-white"
+              }
+            >
               <RoughNotation
                 type="underline"
                 show={currentStepIndex === 3}
-                color="yellow"
+                color="#6fe79f"
               >
                 Summary
               </RoughNotation>

diff --git a/components/SuccessMessage.tsx b/components/SuccessMessage.tsx
@@ -1,4 +1,8 @@
+import { RefreshCcw } from "lucide-react";
+import { Button } from "../components/ui/button";
+
 const SuccessMessage = () => {
+  const refresh = () => window.location.reload();
   return (
     <section>
       <h4>Thank you!</h4>
@@ -7,6 +11,16 @@ const SuccessMessage = () => {
         plataform. If you ever need support, please feel free to email us at
         support@loremgaming.com
       </p>
+      <div className="flex flex-1 items-center">
+        <div className="relative after:pointer-events-none after:absolute after:inset-px after:rounded-[11px] after:shadow-highlight after:shadow-white/10 focus-within:after:shadow-[#77f6aa] after:transition">
+          <Button
+            onClick={refresh}
+            className="relative text-neutral-200 bg-neutral-900 border border-black/20 shadow-input shadow-black/10 rounded-xl hover:text-white"
+          >
+            <RefreshCcw className="mr-2 h-4 w-4" /> Restart
+          </Button>
+        </div>
+      </div>
     </section>
   );
 };

diff --git a/components/UserInfoForm.tsx b/components/UserInfoForm.tsx
@@ -24,6 +24,7 @@ const UserInfoForm = ({
         <div className="">
           <Label htmlFor="name">Name</Label>
           <Input
+            className=""
             autoFocus
             type="text"
             name="name"

diff --git a/components/ui/button.tsx b/components/ui/button.tsx
@@ -1,23 +1,22 @@
-import * as React from "react"
-import { VariantProps, cva } from "class-variance-authority"
+import * as React from "react";
+import { VariantProps, cva } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 dark:hover:bg-slate-800 dark:hover:text-slate-100 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900 data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",
+  "outline-none inline-flex items-center justify-center text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none data-[state=open]:bg-slate-100 dark:data-[state=open]:bg-slate-800",
   {
     variants: {
       variant: {
-        default:
-          "bg-slate-900 text-white hover:bg-slate-700 dark:bg-slate-50 dark:text-slate-900",
+        default: "bg-slate-900 text-white dark:bg-slate-50 dark:text-slate-900",
         destructive:
           "bg-red-500 text-white hover:bg-red-600 dark:hover:bg-red-600",
         outline:
           "bg-transparent border border-slate-200 hover:bg-slate-100 dark:border-slate-700 dark:text-slate-100",
         subtle:
           "bg-slate-100 text-slate-900 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-100",
         ghost:
-          "bg-transparent hover:bg-slate-100 dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
+          "bg-transparent dark:hover:bg-slate-800 dark:text-slate-100 dark:hover:text-slate-100 data-[state=open]:bg-transparent dark:data-[state=open]:bg-transparent",
         link: "bg-transparent underline-offset-4 hover:underline text-slate-900 dark:text-slate-100 hover:bg-transparent dark:hover:bg-transparent",
       },
       size: {
@@ -31,7 +30,7 @@ const buttonVariants = cva(
       size: "default",
     },
   }
-)
+);
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -45,9 +44,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         {...props}
       />
-    )
+    );
   }
-)
-Button.displayName = "Button"
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/components/ui/input.tsx b/components/ui/input.tsx
@@ -1,24 +1,31 @@
-import * as React from "react"
- 
-import { cn } from "@/lib/utils"
- 
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
- 
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   ({ className, ...props }, ref) => {
     return (
-      <input
-        className={cn(
-          "flex h-10 w-full rounded-md border border-slate-300 bg-transparent py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900",
-          className
-        )}
-        ref={ref}
-        {...props}
-      />
-    )
+      <div className="flex flex-1 items-center">
+        <div
+          className="relative before:pointer-events-none focus-within:before:opacity-100 before:opacity-0 before:absolute before:-inset-1 before:rounded-[12px] before:border before:border-[#77f6aa]/70 before:ring-2 before:ring-[#77f6aa]/5 before:transition
+after:pointer-events-none after:absolute after:inset-px after:rounded-[7px] after:shadow-highlight after:shadow-white/5 focus-within:after:shadow-[#77f6aa] after:transition"
+        >
+          <input
+            className={cn(
+              "relative text-sm text-neutral-200 bg-neutral-750 placeholder:text-neutral-500 px-3.5 py-2 rounded-lg border border-black/5 shadow-input shadow-black/10 !outline-none",
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+        </div>
+      </div>
+    );
   }
-)
-Input.displayName = "Input"
- 
-export { Input }
+);
+Input.displayName = "Input";
+
+export { Input };
diff --git a/styles/globals.css b/styles/globals.css
@@ -1,7 +1,8 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
 
-body {
-  background-color: #0f172a;
+.border {
+  background-clip: padding-box;
 }
+
+@tailwind utilities;