design ideas

This commit is contained in:
Timur Ercan
2023-01-11 15:15:56 +01:00
parent 442608811a
commit 4ad760fcbe
4 changed files with 21 additions and 8 deletions

View File

@ -7,8 +7,9 @@ import { signOut } from "next-auth/react";
import { import {
Bars3Icon, Bars3Icon,
BellIcon, BellIcon,
MagnifyingGlassIcon,
XMarkIcon, XMarkIcon,
ArrowLeftOnRectangleIcon,
UserCircleIcon,
} from "@heroicons/react/24/outline"; } from "@heroicons/react/24/outline";
import Logo from "./logo"; import Logo from "./logo";
@ -24,7 +25,7 @@ const navigation = [
{ name: "Settings", href: "/settings", current: true }, { name: "Settings", href: "/settings", current: true },
]; ];
const userNavigation = [ const userNavigation = [
{ name: "Your Profile", href: "/settings/profile" }, { name: "Your Profile", href: "/settings/profile", icon: UserCircleIcon },
{ {
name: "Sign out", name: "Sign out",
href: "", href: "",
@ -32,6 +33,7 @@ const userNavigation = [
e.preventDefault(); e.preventDefault();
signOut({ callbackUrl: "/login" }); signOut({ callbackUrl: "/login" });
}, },
icon: ArrowLeftOnRectangleIcon,
}, },
]; ];
@ -108,6 +110,10 @@ export default function Layout({ children }: any) {
"block px-4 py-2 text-sm text-gray-700" "block px-4 py-2 text-sm text-gray-700"
)} )}
> >
<item.icon
className="flex-shrink-0 -ml-1 mr-3 h-6 w-6 inline"
aria-hidden="true"
></item.icon>
{item.name} {item.name}
</Link> </Link>
)} )}

View File

@ -50,15 +50,18 @@ export default function Login() {
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8"> <div className="w-full max-w-md space-y-8">
<div> <div>
<Logo className="mx-auto h-12 w-auto"></Logo> <Logo className="mx-auto h-10 w-auto her"></Logo>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"> <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Sign in to your account Sign in to your account
</h2> </h2>
<p className="mt-2 text-center text-sm text-gray-600"> <p className="mt-2 text-center text-sm text-gray-600">
Or{" "} Or{" "}
<a href="#" className="font-medium text-neon hover:text-neon"> <Link
href="/signup"
className="font-medium text-neon hover:text-neon"
>
create a new Account create a new Account
</a> </Link>
</p> </p>
</div> </div>
<FormProvider {...methods}> <FormProvider {...methods}>

View File

@ -52,7 +52,7 @@ export default function Signup() {
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8"> <div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8"> <div className="w-full max-w-md space-y-8">
<div> <div>
<Logo className="mx-auto h-12 w-auto"></Logo> <Logo className="mx-auto h-10 w-auto"></Logo>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900"> <h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Create a shiny, new <br></br>Documenso Account{" "} Create a shiny, new <br></br>Documenso Account{" "}
<svg <svg
@ -70,8 +70,8 @@ export default function Signup() {
</svg> </svg>
</h2> </h2>
<p className="mt-2 text-center text-sm text-gray-600"> <p className="mt-2 text-center text-sm text-gray-600">
Create your account and start using state<br></br> of the art Create your account and start using<br></br>
document signing for free. state-of-the-art document signing for free.
</p> </p>
</div> </div>
<FormProvider {...methods}> <FormProvider {...methods}>

View File

@ -1,3 +1,4 @@
import { useSession } from "next-auth/react";
import Head from "next/head"; import Head from "next/head";
import type { ReactElement } from "react"; import type { ReactElement } from "react";
import Layout from "../components/layout"; import Layout from "../components/layout";
@ -5,6 +6,7 @@ import Settings from "../components/settings";
import type { NextPageWithLayout } from "./_app"; import type { NextPageWithLayout } from "./_app";
const DashboardPage: NextPageWithLayout = () => { const DashboardPage: NextPageWithLayout = () => {
const status = useSession();
return ( return (
<> <>
<Head> <Head>
@ -12,6 +14,8 @@ const DashboardPage: NextPageWithLayout = () => {
</Head> </Head>
<div> <div>
<p>This is the dashboard page.</p> <p>This is the dashboard page.</p>
<div>Mail: {status?.data?.user?.email?.toString()}</div>
<div>{status.status}</div>
</div> </div>
</> </>
); );