refactor all button to butto compoment

This commit is contained in:
Timur Ercan
2023-02-02 14:46:24 +01:00
parent 7255819d86
commit f503a4a3a3
11 changed files with 46 additions and 49 deletions

View File

@ -9,6 +9,7 @@ import { useState } from "react";
import { useRouter } from "next/router";
import { toast, Toaster } from "react-hot-toast";
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
import { Button } from "@documenso/ui";
interface LoginValues {
email: string;
@ -133,19 +134,18 @@ export default function Login() {
</div>
<div>
<button
type="submit"
<Button
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-neon focus:ring-offset-2"
className="group relative flex w-full"
>
<span className="absolute inset-y-0 left-0 flex items-center pl-3">
<LockClosedIcon
className="h-5 w-5 text-neon-dark group-hover:text-neon"
className="h-5 w-5 text-neon-dark group-hover:text-neon disabled:group-hover:bg-gray-600 disabled:disabled:bg-gray-600"
aria-hidden="true"
/>
</span>
Sign in
</button>
</Button>
</div>
<div>
<div className="relative">

View File

@ -234,10 +234,6 @@ export default function TopNavigation() {
{user?.email}
</div>
</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-neon focus:ring-offset-2"
></button>
</div>
<div className="mt-3 space-y-1">
{userNavigation.map((item) => (

View File

@ -5,6 +5,7 @@ import Link from "next/link";
import Head from "next/head";
import { useSession } from "next-auth/react";
import { updateUser } from "@documenso/features";
import { Button } from "@documenso/ui";
const subNavigation = [
{
@ -164,13 +165,7 @@ export default function Setttings() {
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>
<button
type="button"
onClick={() => updateUser(user)}
className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-10 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
>
Save
</button>
<Button onClick={() => updateUser(user)}>Save</Button>
</div>
</div>
</form>

View File

@ -1,4 +1,5 @@
import { NEXT_PUBLIC_WEBAPP_URL } from "@documenso/lib/constants";
import { Button } from "@documenso/ui";
import { XCircleIcon } from "@heroicons/react/24/outline";
import { signIn } from "next-auth/react";
import Link from "next/link";
@ -180,17 +181,14 @@ export default function Signup() {
</div>
</div>
<button
<Button
onClick={() => {
methods.clearErrors();
}}
type="submit"
value="submit"
className="sgroup 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"
className="sgroup relative flex w-full"
>
<span className="absolute inset-y-0 left-0 flex items-center pl-3"></span>
Create Account
</button>
</Button>
<div className="pt-2">
<div className="relative">
<div

View File

@ -105,8 +105,7 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
hidden
/>
</div>
<button
type="button"
<div
onClick={() => {
document?.getElementById("fileUploadHelper")?.click();
}}
@ -128,7 +127,7 @@ const DashboardPage: NextPageWithLayout = (props: any) => {
<span className="mt-2 block text-sm font-medium text-neon">
Upload a new PDF document
</span>
</button>
</div>
</div>
</>
);

View File

@ -15,6 +15,7 @@ import { uploadDocument } from "@documenso/features";
import { DocumentStatus } from "@prisma/client";
import { Tooltip as ReactTooltip } from "react-tooltip";
import { getDocumentsForUserFromToken } from "@documenso/lib/query";
import { Button } from "@documenso/ui";
const DocumentsPage: NextPageWithLayout = (props: any) => {
const router = useRouter();
@ -54,15 +55,13 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
</header>
</div>
<div className="mt-4 sm:mt-0 sm:ml-16 sm:flex-none">
<button
type="button"
className="inline-flex items-center justify-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-neon-dark focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 sm:w-auto"
<Button
onClick={() => {
document?.getElementById("fileUploadHelper")?.click();
}}
>
Add Document
</button>
</Button>
</div>
</div>
<div className="mt-10 max-w-[1100px]" hidden={!loading}>
@ -251,16 +250,14 @@ const DocumentsPage: NextPageWithLayout = (props: any) => {
Get started by creating a new document.
</p>
<div className="mt-6">
<button
type="button"
<Button
icon={PlusIcon}
onClick={() => {
document?.getElementById("fileUploadHelper")?.click();
}}
className="inline-flex items-center rounded-md border border-transparent bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
>
<PlusIcon className="-ml-1 mr-2 h-5 w-5" aria-hidden="true" />
Upload Document
</button>
</Button>
<input
id="fileUploadHelper"
type="file"

View File

@ -17,6 +17,7 @@ import {
} from "@heroicons/react/24/outline";
import { getDocument } from "@documenso/lib/query";
import { Document as PrismaDocument } from "@prisma/client";
import { Button } from "@documenso/ui";
const PDFViewer = dynamic(() => import("../../../components/pdf-viewer"), {
ssr: false,
@ -108,8 +109,8 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
<UserPlusIcon className="inline text-white h-4 mr-1"></UserPlusIcon>
Add Recipients
</Link>
<button
type="button"
<Button
icon={PaperAirplaneIcon}
disabled={(props?.document?.Recipient?.length || 0) === 0}
onClick={() => {
if (
@ -120,11 +121,9 @@ const DocumentsDetailPage: NextPageWithLayout = (props: any) => {
alert();
}
}}
className="ml-3 inline-flex items-center rounded-md border border-transparent bg-neon disabled:bg-gray-300 px-4 py-2 text-sm font-medium text-white shadow-sm bg-grey hover:bg-neon-dark focus:outline-none focus:ring-2 focus:neon-dark focus:ring-offset-2"
>
<PaperAirplaneIcon className="inline text-white w-4 mr-1"></PaperAirplaneIcon>
Send
</button>
</Button>
</div>
</div>
</div>