Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 00:03:33 +10:00
Code Issues Packages Projects Releases Wiki Activity

design

Browse Source
This commit is contained in:
Timur Ercan
2023-01-11 19:51:22 +01:00
parent 5686b0e49f
commit d6fe181061
5 changed files with 46 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/web/components/layout.tsx
View File

@ -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 = {
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(" ");
}
import Navigation from "./navigation";
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 (
<>

6
apps/web/components/login.tsx
View File

@ -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

42
apps/web/components/navigation.tsx
View File

@ -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: "Settings", href: "/settings", current: true },
{
name: "Dashboard",
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" />

10
apps/web/components/settings.tsx
View File

@ -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>

6
apps/web/components/signup.tsx
View File

@ -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