From 55e4927912d9f7e5707cbd154e999d92666bbb18 Mon Sep 17 00:00:00 2001 From: litaesther10 Date: Wed, 15 Feb 2023 20:52:12 +0100 Subject: [PATCH 1/5] Custom 500 page created, started Buttons component customise. --- apps/web/components/logo.tsx | 3 +- apps/web/pages/404.jsx | 4 ++- apps/web/pages/500.jsx | 37 +++++++++++++++++++++--- packages/ui/components/button/Button.tsx | 7 +++-- 4 files changed, 42 insertions(+), 9 deletions(-) diff --git a/apps/web/components/logo.tsx b/apps/web/components/logo.tsx index 9bce939fa..5a70b8a56 100644 --- a/apps/web/components/logo.tsx +++ b/apps/web/components/logo.tsx @@ -1,3 +1,4 @@ +import { classNames } from "@documenso/lib"; import Link from "next/link"; export default function Logo(props: any) { @@ -17,7 +18,7 @@ export default function Logo(props: any) { diff --git a/apps/web/pages/404.jsx b/apps/web/pages/404.jsx index cda9ebbdc..615766083 100644 --- a/apps/web/pages/404.jsx +++ b/apps/web/pages/404.jsx @@ -7,7 +7,9 @@ export default function Custom404() { return ( <>
- +
+ +

404

diff --git a/apps/web/pages/500.jsx b/apps/web/pages/500.jsx index b344d947d..984b94ad6 100644 --- a/apps/web/pages/500.jsx +++ b/apps/web/pages/500.jsx @@ -1,10 +1,39 @@ -import Link from "next/link"; +import Logo from "../components/logo"; +import { Button } from "@documenso/ui"; +import { ArrowSmallLeftIcon } from "@heroicons/react/20/solid"; +import { EllipsisVerticalIcon } from "@heroicons/react/20/solid"; -export default function FiveUhOh() { +export default function Custom500() { return ( <> -

500 - Something went wrong.

- Go back home +
+
+ +
+ +
+

+ 500 + + | + +

+

+ + Something went wrong. +

+
+ +
+
+
); } diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx index d5f9bb74d..aaa02c505 100644 --- a/packages/ui/components/button/Button.tsx +++ b/packages/ui/components/button/Button.tsx @@ -6,10 +6,11 @@ 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 min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300"; - const primaryStyles = "text-white bg-neon hover:bg-neon-dark"; + "inline-flex items-center justify-center min-w-[80px] rounded-2xl border border-transparent px-4 py-3 text-sm font-medium shadow-sm disabled:bg-gray-300 transition-all duration-300 "; + const primaryStyles = + "text-gray-900 bg-neon hover:bg-neon-dark "; const secondaryStyles = - "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"; + "border-brown/30 bg-white text-brown hover:bg-brown hover:text-white hover:shadow-xl shadow-md hover:shadow-3xl shadow-gray-500/20 hover:shadow-slate-600/30 hover:-translate-y-1 "; return isLink ? ( Date: Tue, 21 Feb 2023 13:13:09 +0100 Subject: [PATCH 2/5] Reverted Button --- apps/web/pages/500.jsx | 5 +---- packages/ui/components/button/Button.tsx | 11 +++++------ 2 files changed, 6 insertions(+), 10 deletions(-) diff --git a/apps/web/pages/500.jsx b/apps/web/pages/500.jsx index 984b94ad6..e7e0cd74f 100644 --- a/apps/web/pages/500.jsx +++ b/apps/web/pages/500.jsx @@ -14,12 +14,9 @@ export default function Custom500() {

500 - - | - + |

- Something went wrong.

diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx index aaa02c505..d695049e3 100644 --- a/packages/ui/components/button/Button.tsx +++ b/packages/ui/components/button/Button.tsx @@ -3,14 +3,13 @@ import Link from "next/link"; import React from "react"; export function Button(props: any) { - const isLink = typeof props.href !== "undefined"; + const isLink = typeof props.href !== "undefined" && !props.disabled; const { color = "primary", icon, disabled, onClick } = props; const baseStyles = - "inline-flex items-center justify-center min-w-[80px] rounded-2xl border border-transparent px-4 py-3 text-sm font-medium shadow-sm disabled:bg-gray-300 transition-all duration-300 "; - const primaryStyles = - "text-gray-900 bg-neon hover:bg-neon-dark "; + "inline-flex items-center justify-center min-w-[80px] rounded-md border border-transparent px-4 py-2 text-sm font-medium shadow-sm disabled:bg-gray-300"; + const primaryStyles = "text-white bg-neon hover:bg-neon-dark"; const secondaryStyles = - "border-brown/30 bg-white text-brown hover:bg-brown hover:text-white hover:shadow-xl shadow-md hover:shadow-3xl shadow-gray-500/20 hover:shadow-slate-600/30 hover:-translate-y-1 "; + "border-gray-300 bg-white text-gray-700 hover:bg-gray-50"; return isLink ? ( Date: Wed, 22 Feb 2023 17:44:03 +0100 Subject: [PATCH 3/5] Vertically Centered text --- apps/web/pages/500.jsx | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/apps/web/pages/500.jsx b/apps/web/pages/500.jsx index e7e0cd74f..175563dc2 100644 --- a/apps/web/pages/500.jsx +++ b/apps/web/pages/500.jsx @@ -6,12 +6,12 @@ import { EllipsisVerticalIcon } from "@heroicons/react/20/solid"; export default function Custom500() { return ( <> -
+
-
+

500 | @@ -20,12 +20,7 @@ export default function Custom500() { Something went wrong.

-
From 245bd06d53e7b60b4de0f0a6e1abcd7e4c9ac736 Mon Sep 17 00:00:00 2001 From: litaesther10 Date: Thu, 23 Feb 2023 14:46:54 +0100 Subject: [PATCH 4/5] Vertically center "Something went wrong " --- apps/web/pages/500.jsx | 17 ++++++++++------- 1 file changed, 10 insertions(+), 7 deletions(-) diff --git a/apps/web/pages/500.jsx b/apps/web/pages/500.jsx index 175563dc2..4325dda81 100644 --- a/apps/web/pages/500.jsx +++ b/apps/web/pages/500.jsx @@ -12,13 +12,16 @@ export default function Custom500() {

-

- 500 - | -

-

- Something went wrong. -

+ +

+ 500 + |{" "} + + Something went wrong. + +

+ +
- -

- 500 - |{" "} - - Something went wrong. - -

- - +

+ 500 + + | + {" "} + + Something went wrong. + +