From 02663d93d97e02a40131678541bfcf8e6e8332f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Guilherme=20Salom=C3=A3o?= Date: Fri, 8 Nov 2024 10:14:47 -0300 Subject: [PATCH] chore: create notifications page (#37) --- src/assets/create-bill-illustration.svg | 17 ++ src/components/ui/button.tsx | 24 +-- src/constants/routes.ts | 2 + src/main.tsx | 10 +- src/pages/Notifications.tsx | 214 ++++++++++++++++++++++++ tailwind.config.js | 3 +- 6 files changed, 257 insertions(+), 13 deletions(-) create mode 100644 src/assets/create-bill-illustration.svg create mode 100644 src/pages/Notifications.tsx diff --git a/src/assets/create-bill-illustration.svg b/src/assets/create-bill-illustration.svg new file mode 100644 index 0000000..8b522c5 --- /dev/null +++ b/src/assets/create-bill-illustration.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 0ba4277..fd5eefe 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { Slot } from "@radix-ui/react-slot" -import { cva, type VariantProps } from "class-variance-authority" +import * as React from "react"; +import { Slot } from "@radix-ui/react-slot"; +import { cva, type VariantProps } from "class-variance-authority"; -import { cn } from "@/lib/utils" +import { cn } from "@/lib/utils"; const buttonVariants = cva( "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", @@ -18,6 +18,8 @@ const buttonVariants = cva( "bg-secondary text-secondary-foreground hover:bg-secondary/80", ghost: "hover:bg-accent hover:text-accent-foreground", link: "text-primary underline-offset-4 hover:underline", + filter: + "bg-transparent max-h-7 !py-1 !px-3 border-[1px] border-divider-100 rounded-[8px] text-text-300 text-xs font-medium hover:bg-transparent", }, size: { default: "h-10 px-4 py-2", @@ -31,26 +33,26 @@ const buttonVariants = cva( size: "default", }, } -) +); export interface ButtonProps extends React.ButtonHTMLAttributes, VariantProps { - asChild?: boolean + asChild?: boolean; } const Button = React.forwardRef( ({ className, variant, size, asChild = false, ...props }, ref) => { - const Comp = asChild ? Slot : "button" + const Comp = asChild ? Slot : "button"; return ( - ) + ); } -) -Button.displayName = "Button" +); +Button.displayName = "Button"; -export { Button, buttonVariants } +export { Button, buttonVariants }; diff --git a/src/constants/routes.ts b/src/constants/routes.ts index 4e940c9..f2edc36 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -4,6 +4,7 @@ const RESTORE_WITH_PRIVATE_KEY = "/private-key"; const RESTORE_WITH_SEED_PHRASE = "/seed-phrase"; const HOME = "/home"; +const NOTIFICATIONS = "/notifications"; export default { LOGIN, @@ -11,4 +12,5 @@ export default { HOME, RESTORE_WITH_PRIVATE_KEY, RESTORE_WITH_SEED_PHRASE, + NOTIFICATIONS, }; diff --git a/src/main.tsx b/src/main.tsx index 1aff50c..efbac7e 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -11,9 +11,9 @@ import ProfileInfo from "./pages/onboarding/ProfileInfo"; import Unlock from "./pages/Unlock"; import Login from "./pages/Login"; -import RecoverWithPrivateKey from "./pages/RecoverWithPrivateKey"; import RecoverWithSeedPhrase from "./pages/RecoverWithSeedPhrase"; import Home from "./pages/Home"; +import { Notifications, NotificationsEmpty } from "./pages/Notifications"; import routes from "./constants/routes"; import "./index.css"; @@ -52,6 +52,14 @@ const router = createBrowserRouter([ path: "/profile-info", element: , }, + { + path: routes.NOTIFICATIONS, + element: , + }, + { + path: "/notifications-empty", + element: , + }, ]); createRoot(document.getElementById("root")!).render( diff --git a/src/pages/Notifications.tsx b/src/pages/Notifications.tsx new file mode 100644 index 0000000..89e0b87 --- /dev/null +++ b/src/pages/Notifications.tsx @@ -0,0 +1,214 @@ +import { FormattedMessage } from "react-intl"; +import { XIcon } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import createBillIllustration from "@/assets/create-bill-illustration.svg"; + +export function Notifications() { + return ( +
+
+ +
+ +
+
+

+ +

+ (3) +
+ +
+ + + +
+
+ +
+

Today

+ +
+
+
+ + Gooogle inc. has requested you to pay + +
+
+ + Hayek Ltd. + + +
+ 12-Nov-24 +
+ +12.49002 + USD +
+
+
+
+ +
+
+ + Gooogle inc. has requested you to pay + +
+
+ + Hayek Ltd. + + +
+ 12-Nov-24 +
+ +12.49002 + USD +
+
+
+
+ +
+
+ + Gooogle inc. has requested you to pay + +
+
+ + Hayek Ltd. + + +
+ 12-Nov-24 +
+ +12.49002 + USD +
+
+
+
+
+ + +
+
+ ); +} + +export function NotificationsEmpty() { + return ( +
+
+ +
+ +
+
+

+ +

+ (0) +
+ +
+ + + +
+
+ +
+
+ + +
+

+ +

+ + + + +
+ + +
+
+
+ ); +} diff --git a/tailwind.config.js b/tailwind.config.js index 918451f..1e1ba95 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -60,6 +60,7 @@ export default { // Bitcredit Design System colors divider: { 50: '#ECE8DE', + 75: '#D9D5CC', 100: '#D1CCC1', 200: '#BAB4A9', 300: '#A39D91', @@ -67,7 +68,7 @@ export default { elevation: { 50: '#FEFBF1', 100: '#FAF7EF', - 200: '#EEEBE3', + 200: '#F6F2E7', 300: '#D1CCC1', }, text: {