blsmedia/sign
2
0
Fork 0
Code Issues Packages Releases Activity

refactor all button to butto compoment

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web/components/login.tsx
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">

4
apps/web/components/navigation.tsx
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) => (

9
apps/web/components/settings.tsx
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>

10
apps/web/components/signup.tsx
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

5
apps/web/pages/dashboard.tsx
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>
</>
);

15
apps/web/pages/documents.tsx
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"

9
apps/web/pages/documents/[id]/index.tsx
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>

28
packages/ui/components/button/Button.tsx
View File

@@ -1,20 +1,26 @@
import { classNames } from "@documenso/lib";
import Link from "next/link";
import React from "react";
import { Tooltip } from "react-tooltip";
import short from "short-uuid";
export function Button(props: any) {
const isLink = typeof props.href !== "undefined";
const { color = "primary", icon, disabled, onClick } = props;
const baseStyles =
"inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm sm:w-auto disabled:bg-gray-300";
"inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm disabled:bg-gray-300";
const primaryStyles = "bg-neon hover:bg-neon-dark";
const secondaryStyles =
"border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
return isLink ? (
<Link id={props.id} href={props.href} className={classNames(baseStyles)}>
<Link
id={props.id}
href={props.href}
className={classNames(
baseStyles,
color === "primary" ? primaryStyles : secondaryStyles,
props.className
)}
>
{props.children}
</Link>
) : (
@@ -22,12 +28,20 @@ export function Button(props: any) {
id={props.id}
className={classNames(
baseStyles,
color === "primary" ? primaryStyles : secondaryStyles
color === "primary" ? primaryStyles : secondaryStyles,
props.className
)}
onClick={props.onClick}
{...props}
disabled={props.disabled}
>
<props.icon className="inline text-inherit w-4 mr-1"></props.icon>
{props.icon ? (
<props.icon
className="inline text-inherit w-4 mr-1"
aria-hidden="true"
></props.icon>
) : (
""
)}
{props.children}
</button>
);

2
packages/ui/components/button/index.ts
View File

@@ -1 +1 @@
export { Button } from "./button";
export { Button } from "./Button";

1
packages/ui/components/index.ts
View File

@@ -1 +0,0 @@
export { }

2
packages/ui/index.ts
View File

@@ -1 +1 @@
export { Button } from "./components/./button";
export { Button } from "./components/button/index";