design

apps/web/components/layout.tsx

@@ -2,45 +2,9 @@ import { Fragment, useEffect } from "react";
 import { Disclosure, Menu, Transition } from "@headlessui/react";
 import Link from "next/link";
 import { useRouter } from "next/router";
-import Navigation from "./navigation";
-
-import {
-  Bars3Icon,
-  BellIcon,
-  XMarkIcon,
-  ArrowLeftOnRectangleIcon,
-  UserCircleIcon,
-} from "@heroicons/react/24/outline";
-import Logo from "./logo";
 import { signOut, useSession } from "next-auth/react";
 
-const user = {
+import Navigation from "./navigation";
-  name: "Timur Ercan",
-  email: "timur@documenso.com",
-  imageUrl:
-    "https://pbs.twimg.com/profile_images/1382036502390181888/4BT30oTM_400x400.jpg",
-};
-const navigation = [
-  { name: "Dashboard", href: "/dashboard", current: false },
-  { name: "Documents", href: "/documents", current: false },
-  { name: "Settings", href: "/settings", current: true },
-];
-const userNavigation = [
-  { name: "Your Profile", href: "/settings/profile", icon: UserCircleIcon },
-  {
-    name: "Sign out",
-    href: "",
-    click: (e: any) => {
-      e.preventDefault();
-      signOut({ callbackUrl: "/login" });
-    },
-    icon: ArrowLeftOnRectangleIcon,
-  },
-];
-
-function classNames(...classes: any) {
-  return classes.filter(Boolean).join(" ");
-}
 
 function useRedirectToLoginIfUnauthenticated() {
   const { data: session, status } = useSession();
@@ -67,12 +31,6 @@ function useRedirectToLoginIfUnauthenticated() {
 
 export default function Layout({ children }: any) {
   useRedirectToLoginIfUnauthenticated();
-  const router = useRouter();
-  navigation.forEach((element) => {
-    element.current = router.route.startsWith("/" + element.href.split("/")[1]);
-  });
-
-  const { status } = useSession();
 
   return (
     <>

apps/web/components/login.tsx

@@ -73,7 +73,7 @@ export default function Login() {
                     type="email"
                     autoComplete="email"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
                     placeholder="Email address"
                   />
                 </div>
@@ -88,7 +88,7 @@ export default function Login() {
                     type="password"
                     autoComplete="current-password"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
                     placeholder="Password"
                   />
                 </div>
@@ -106,7 +106,7 @@ export default function Login() {
                 <button
                   type="submit"
                   disabled={formState.isSubmitting}
-                  className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
                 >
                   <span className="absolute inset-y-0 left-0 flex items-center pl-3">
                     <LockClosedIcon

apps/web/components/navigation.tsx

@@ -8,8 +8,11 @@ import {
   Bars3Icon,
   BellIcon,
   XMarkIcon,
-  ArrowLeftOnRectangleIcon,
   UserCircleIcon,
+  ArrowRightOnRectangleIcon,
+  DocumentTextIcon,
+  ChartBarIcon,
+  WrenchIcon,
 } from "@heroicons/react/24/outline";
 import Logo from "./logo";
 
@@ -20,9 +23,24 @@ const user = {
     "https://pbs.twimg.com/profile_images/1382036502390181888/4BT30oTM_400x400.jpg",
 };
 const navigation = [
-  { name: "Dashboard", href: "/dashboard", current: false },
+  {
-  { name: "Documents", href: "/documents", current: false },
+    name: "Dashboard",
-  { name: "Settings", href: "/settings", current: true },
+    href: "/dashboard",
+    current: false,
+    icon: ChartBarIcon,
+  },
+  {
+    name: "Documents",
+    href: "/documents",
+    current: false,
+    icon: DocumentTextIcon,
+  },
+  {
+    name: "Settings",
+    href: "/settings",
+    current: true,
+    icon: WrenchIcon,
+  },
 ];
 const userNavigation = [
   { name: "Your Profile", href: "/settings/profile", icon: UserCircleIcon },
@@ -33,7 +51,7 @@ const userNavigation = [
       e.preventDefault();
       signOut({ callbackUrl: "/login" });
     },
-    icon: ArrowLeftOnRectangleIcon,
+    icon: ArrowRightOnRectangleIcon,
   },
 ];
 
@@ -73,15 +91,23 @@ export default function TopNavigation() {
                         )}
                         aria-current={item.current ? "page" : undefined}
                       >
+                        <item.icon
+                          className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline"
+                          aria-hidden="true"
+                        ></item.icon>
                         {item.name}
                       </Link>
                     ))}
                   </div>
                 </div>
                 <div className="hidden sm:ml-6 sm:flex sm:items-center">
+                  <span className="text-sm">
+                    <p className="font-bold">{user.name}</p>
+                    <p>{user.email}</p>
+                  </span>
                   <Menu as="div" className="relative ml-3">
                     <div>
-                      <Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                      <Menu.Button className="flex max-w-xs items-center rounded-full bg-white text-sm focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2">
                         <span className="sr-only">Open user menu</span>
                         <img
                           className="h-8 w-8 rounded-full"
@@ -126,7 +152,7 @@ export default function TopNavigation() {
                 </div>
                 <div className="-mr-2 flex items-center sm:hidden">
                   {/* Mobile menu button */}
-                  <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2">
+                  <Disclosure.Button className="inline-flex items-center justify-center rounded-md bg-white p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2">
                     <span className="sr-only">Open main menu</span>
                     {open ? (
                       <XMarkIcon className="block h-6 w-6" aria-hidden="true" />
@@ -176,7 +202,7 @@ export default function TopNavigation() {
                   </div>
                   <button
                     type="button"
-                    className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                    className="ml-auto flex-shrink-0 rounded-full bg-white p-1 text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
                   >
                     <span className="sr-only">View notifications</span>
                     <BellIcon className="h-6 w-6" aria-hidden="true" />

apps/web/components/settings.tsx

@@ -195,7 +195,7 @@ export default function Setttings() {
                       name="first-name"
                       id="first-name"
                       autoComplete="given-name"
-                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
                     />
                   </div>
 
@@ -211,7 +211,7 @@ export default function Setttings() {
                       name="last-name"
                       id="last-name"
                       autoComplete="family-name"
-                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-sky-500 focus:outline-none focus:ring-sky-500 sm:text-sm"
+                      className="mt-1 block w-full rounded-md border border-gray-300 py-2 px-3 shadow-sm focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
                     />
                   </div>
                 </div>
@@ -252,7 +252,7 @@ export default function Setttings() {
                         onChange={setAvailableToHire}
                         className={classNames(
                           availableToHire ? "bg-teal-500" : "bg-gray-200",
-                          "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                          "relative ml-4 inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
                         )}
                       >
                         <span
@@ -269,13 +269,13 @@ export default function Setttings() {
                 <div className="mt-4 flex justify-end py-4 px-4 sm:px-6">
                   <button
                     type="button"
-                    className="inline-flex justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                    className="inline-flex justify-center rounded-md border border-gray-300 bg-white py-2 px-4 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
                   >
                     Cancel
                   </button>
                   <button
                     type="submit"
-                    className="ml-5 inline-flex justify-center rounded-md border border-transparent bg-sky-700 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2"
+                    className="ml-5 inline-flex justify-center rounded-md border border-transparent bg-sky-700 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-sky-800 focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
                   >
                     Save
                   </button>

apps/web/components/signup.tsx

@@ -92,7 +92,7 @@ export default function Signup() {
                     type="email"
                     autoComplete="email"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    className="relative block w-full appearance-none rounded-none rounded-t-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
                     placeholder="Email"
                   />
                 </div>
@@ -107,7 +107,7 @@ export default function Signup() {
                     type="password"
                     autoComplete="current-password"
                     required
-                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
+                    className="relative block w-full appearance-none rounded-none rounded-b-md border border-gray-300 px-3 py-2 text-gray-900 placeholder-gray-500 focus:z-10 focus:border-neon focus:outline-none focus:ring-neon sm:text-sm"
                     placeholder="Password"
                   />
                 </div>
@@ -117,7 +117,7 @@ export default function Signup() {
                 <button
                   type="submit"
                   value="submit"
-                  className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
+                  className="group relative flex w-full justify-center rounded-md border border-transparent bg-neon py-2 px-4 text-sm font-medium text-white hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-neon focus:ring-offset-2"
                 >
                   <span className="absolute inset-y-0 left-0 flex items-center pl-3"></span>
                   Create Account