diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/components/FrameworkProgress.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/components/FrameworkProgress.tsx index 08681e58cb..41878d243d 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/components/FrameworkProgress.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/components/FrameworkProgress.tsx @@ -6,11 +6,11 @@ import type { OrganizationControl, OrganizationFramework, } from "@bubba/db"; +import { Button } from "@bubba/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@bubba/ui/card"; import { Progress } from "@bubba/ui/progress"; import { FileStack } from "lucide-react"; import Link from "next/link"; -import { Button } from "@bubba/ui/button"; interface Props { frameworks: (OrganizationFramework & { @@ -48,7 +48,7 @@ export function FrameworkProgress({ frameworks }: Props) { {frameworks.map((framework) => { const total = framework.organizationControl.length; const completed = framework.organizationControl.filter( - (control) => control.status === "compliant" + (control) => control.status === "compliant", ).length; const progress = total ? (completed / total) * 100 : 0; @@ -56,7 +56,7 @@ export function FrameworkProgress({ frameworks }: Props) {
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/layout.tsx index 1c4bb2f821..328828257b 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/(home)/layout.tsx @@ -9,7 +9,7 @@ export default async function Layout({ const t = await getI18n(); return ( -
+
{children}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/frameworks/[frameworkId]/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/frameworks/[frameworkId]/layout.tsx index 328e3d5b53..b473accef2 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/frameworks/[frameworkId]/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/frameworks/[frameworkId]/layout.tsx @@ -9,7 +9,7 @@ export default async function Layout({ children }: LayoutProps) { const t = await getI18n(); return ( -
+
{children}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/integrations/page.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/integrations/page.tsx index 56f2d97267..f56f8d70c5 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/integrations/page.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/integrations/page.tsx @@ -31,10 +31,10 @@ export default async function IntegrationsPage({ } return ( -
+
- }> + }>
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/people/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/people/layout.tsx index f506c16517..c8721ffd8b 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/people/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/people/layout.tsx @@ -9,7 +9,7 @@ export default async function Layout({ const t = await getI18n(); return ( -
+
{children}
diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/layout.tsx index f289e93654..1dfa87a8c0 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/layout.tsx @@ -10,7 +10,7 @@ export default async function Layout({ const t = await getI18n(); return ( -
+
-
- - -
-
- -
-
- ); + return ; } diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/[id]/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/[id]/layout.tsx index 1025ddb32a..27c2baae86 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/[id]/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/[id]/layout.tsx @@ -20,7 +20,7 @@ export default async function Layout({ } return ( -
+
{children}
); diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/layout.tsx index bf1190604c..7e72e8824f 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/all/layout.tsx @@ -10,7 +10,7 @@ export default async function Layout({ const t = await getI18n(); return ( -
+
Loading...
}> +
+
<SecondaryMenu @@ -57,5 +57,5 @@ const getRisk = unstable_cache( return risk; }, - ["risk-cache"] + ["risk-cache"], ); diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/layout.tsx index 401f953cdf..28397c47f8 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/register/layout.tsx @@ -9,7 +9,7 @@ export default async function Layout({ const t = await getI18n(); return ( - <div className="max-w-[1200px] mx-auto"> + <div className="max-w-[1200px]"> <SecondaryMenu items={[ { path: "/risk", label: t("risk.dashboard.title") }, diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/settings/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/settings/layout.tsx index eaab6c362e..0e37aac8d4 100644 --- a/apps/app/src/app/[locale]/(app)/(dashboard)/settings/layout.tsx +++ b/apps/app/src/app/[locale]/(app)/(dashboard)/settings/layout.tsx @@ -10,7 +10,7 @@ export default async function Layout({ const t = await getI18n(); return ( - <div className="max-w-[1200px] mx-auto"> + <div className="max-w-[800px]"> <Suspense fallback={<div>Loading...</div>}> <SecondaryMenu items={[ diff --git a/apps/app/src/components/sheets/invite-user-sheet.tsx b/apps/app/src/components/sheets/invite-user-sheet.tsx index 74ad5ba906..733a12f19d 100644 --- a/apps/app/src/components/sheets/invite-user-sheet.tsx +++ b/apps/app/src/components/sheets/invite-user-sheet.tsx @@ -1,7 +1,6 @@ "use client"; -import { useRouter } from "next/navigation"; -import { useQueryState } from "nuqs"; +import { useEmployees } from "@/app/[locale]/(app)/(dashboard)/people/hooks/useEmployees"; import { useI18n } from "@/locales/client"; import { Button } from "@bubba/ui/button"; import { Input } from "@bubba/ui/input"; @@ -21,12 +20,10 @@ import { SheetHeader, SheetTitle, } from "@bubba/ui/sheet"; -import { toast } from "sonner"; -import { useState } from "react"; import type { Departments } from "@prisma/client"; -import { createEmployeeAction } from "@/actions/people/create-employee-action"; -import { useEmployees } from "@/app/[locale]/(app)/(dashboard)/people/hooks/useEmployees"; -import { Loader2 } from "lucide-react"; +import { useQueryState } from "nuqs"; +import { useState } from "react"; +import { toast } from "sonner"; const DEPARTMENTS: Departments[] = [ "none", diff --git a/apps/app/src/components/skeleton-loader.tsx b/apps/app/src/components/skeleton-loader.tsx index a9f38ee9fb..9ba9eca3eb 100644 --- a/apps/app/src/components/skeleton-loader.tsx +++ b/apps/app/src/components/skeleton-loader.tsx @@ -14,13 +14,13 @@ export const SkeletonLoader = ({ amount, prefix = "item" }: Props) => { <Card key={`${prefix}-skeleton-${i + 1}`}> <CardHeader> <CardTitle> - <Skeleton className="h-8 w-full rounded-md" /> + <Skeleton className="h-8 w-full" /> </CardTitle> </CardHeader> <CardContent className="space-y-6"> - <Skeleton className="h-8 w-full rounded-md" /> - <Skeleton className="h-8 w-full rounded-md" /> - <Skeleton className="h-8 w-full rounded-md" /> + <Skeleton className="h-8 w-full" /> + <Skeleton className="h-8 w-full" /> + <Skeleton className="h-8 w-full" /> </CardContent> </Card> ))} diff --git a/apps/app/src/components/tables/people/data-table.tsx b/apps/app/src/components/tables/people/data-table.tsx index 0b01b88fdb..548d96606c 100644 --- a/apps/app/src/components/tables/people/data-table.tsx +++ b/apps/app/src/components/tables/people/data-table.tsx @@ -7,6 +7,8 @@ import { useReactTable, } from "@tanstack/react-table"; +import { useI18n } from "@/locales/client"; +import { Button } from "@bubba/ui/button"; import { cn } from "@bubba/ui/cn"; import { Table, @@ -15,12 +17,10 @@ import { TableHead, TableRow, } from "@bubba/ui/table"; -import { Button } from "@bubba/ui/button"; +import { useRouter } from "next/navigation"; import type { PersonType } from "./columns"; import { DataTableHeader } from "./data-table-header"; import { DataTablePagination } from "./data-table-pagination"; -import { useRouter } from "next/navigation"; -import { useI18n } from "@/locales/client"; interface DataTableProps { columnHeaders: { diff --git a/apps/app/src/components/tables/people/filter-toolbar.tsx b/apps/app/src/components/tables/people/filter-toolbar.tsx index d8526cea92..30d84b81f9 100644 --- a/apps/app/src/components/tables/people/filter-toolbar.tsx +++ b/apps/app/src/components/tables/people/filter-toolbar.tsx @@ -4,7 +4,7 @@ import { InviteUserSheet } from "@/components/sheets/invite-user-sheet"; import { useI18n } from "@/locales/client"; import { Button } from "@bubba/ui/button"; import { Input } from "@bubba/ui/input"; -import { Plus, X } from "lucide-react"; +import { Plus, Search, X } from "lucide-react"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; import { useQueryState } from "nuqs"; import { useCallback, useEffect, useState, useTransition } from "react"; @@ -56,37 +56,48 @@ export function FilterToolbar({ isEmpty }: FilterToolbarProps) { }, [debouncedValue, createQueryString, pathname, router]); return ( - <div className="sticky top-0 z-10 -mx-6 mb-4 w-[calc(100%+48px)] bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/75"> - <div className="flex flex-col gap-4 border-b px-6 pb-4"> - <div className="flex items-center justify-between gap-2"> - <div className="flex flex-1 items-center gap-2"> - <Input - placeholder={t("people.filters.search")} - className="h-8 w-[150px] lg:w-[250px]" - value={inputValue} - onChange={(e) => setInputValue(e.target.value)} - /> - {inputValue && ( - <Button - variant="ghost" - className="h-8 px-2 lg:px-3" - onClick={() => { - setInputValue(""); - router.push(pathname); - }} - > - <X className="h-4 w-4 mr-2" /> - {t("people.actions.clear")} - </Button> - )} - </div> + <div className="flex flex-row items-center justify-between gap-2 mb-4"> + <div className="flex flex-1 items-center gap-2 min-w-0"> + <div className="relative flex-1 md:max-w-sm"> + <Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" /> + <Input + placeholder={t("people.filters.search")} + className="pl-8" + value={inputValue} + onChange={(e) => setInputValue(e.target.value)} + /> + </div> + + <div className="md:hidden"> <Button onClick={() => setOpen("true")} variant="action"> <Plus className="h-4 w-4" /> - {t("people.actions.invite")} + {t("common.actions.addNew")} </Button> </div> </div> + <div className="hidden md:flex items-center gap-2"> + {inputValue && ( + <Button + variant="ghost" + size="sm" + onClick={() => { + setInputValue(""); + router.push(pathname); + }} + disabled={isPending} + > + <X className="h-4 w-4 mr-2" /> + {t("common.actions.clear")} + </Button> + )} + + <Button onClick={() => setOpen("true")} variant="action"> + <Plus className="h-4 w-4" /> + {t("common.actions.addNew")} + </Button> + </div> + <InviteUserSheet /> </div> ); diff --git a/packages/ui/src/components/icons.tsx b/packages/ui/src/components/icons.tsx index 616a740903..144ee9ae32 100644 --- a/packages/ui/src/components/icons.tsx +++ b/packages/ui/src/components/icons.tsx @@ -141,9 +141,16 @@ import { PiDiscordLogo } from "react-icons/pi"; export const Icons = { Logo: (props: React.SVGProps<SVGSVGElement>) => ( - <svg width="50" height="50" fill="none" xmlns="http://www.w3.org/2000/svg"> + <svg + width={45} + height={45} + viewBox="0 0 45 45" + fill="none" + xmlns="http://www.w3.org/2000/svg" + {...props} + > <path - d="m40 10.215-1.632-1.158L27.002 1 1 19.429v10.532l26.002 18.431L53 29.962V19.428zM27.002 5.64l8.094 5.737-4.158 2.944-.372.262-3.564-2.526-10.4 7.372 3.564 2.526 3.272 2.322 3.564 2.526L37.4 19.427 33.84 16.9l.372-.263 4.158-2.943 8.09 5.734-4.158 2.948-15.298 10.845-8.094-5.736-3.272-2.318-3.935-2.789-4.157-2.948z" + d="m32.947 10.714 -1.312 -0.942 -8.665 -6.22a0.802 0.802 0 0 0 -0.937 0L1.942 17.973a0.802 0.802 0 0 0 -0.335 0.653v7.747a0.802 0.802 0 0 0 0.335 0.654l20.091 14.424a0.802 0.802 0 0 0 0.937 0l20.088 -14.424a0.802 0.802 0 0 0 0.335 -0.654v-7.747a0.802 0.802 0 0 0 -0.335 -0.654zM22.033 7.327a0.802 0.802 0 0 1 0.937 0l5.126 3.68a0.802 0.802 0 0 1 0 1.306l-2.431 1.744a0.52 0.52 0 0 1 -0.598 -0.001l-2.097 -1.505a0.802 0.802 0 0 0 -0.937 0l-6.979 5.01a0.802 0.802 0 0 0 0 1.306l1.955 1.402 2.63 1.891 2.395 1.718a0.802 0.802 0 0 0 0.938 0l6.979 -5.015a0.802 0.802 0 0 0 0 -1.305l-1.654 -1.19a0.263 0.263 0 0 1 0 -0.427l2.873 -2.06a0.802 0.802 0 0 1 0.937 0l5.123 3.679a0.802 0.802 0 0 1 0 1.306l-2.433 1.747 -11.825 8.491a0.802 0.802 0 0 1 -0.937 0l-6.034 -4.333 -2.63 -1.886 -3.163 -2.27 -2.431 -1.747a0.802 0.802 0 0 1 0 -1.306z" fill="currentColor" /> </svg> diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx index 4b9336da78..22fb0dd629 100644 --- a/packages/ui/src/components/sheet.tsx +++ b/packages/ui/src/components/sheet.tsx @@ -19,7 +19,7 @@ const SheetOverlay = React.forwardRef< >(({ className, ...props }, ref) => ( <SheetPrimitive.Overlay className={cn( - "fixed inset-0 z-50 bg-[#f6f6f3]/60 dark:bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", + "fixed inset-0 z-50 bg-muted/80 dark:bg-muted/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className, )} {...props} @@ -72,7 +72,7 @@ const SheetContent = React.forwardRef< > <div className={cn( - "border w-full h-full bg-[#FAFAF9] dark:bg-[#121212] p-6 relative overflow-hidden", + "border w-full h-full bg-background p-6 relative overflow-hidden", className, )} > diff --git a/packages/ui/src/components/skeleton.tsx b/packages/ui/src/components/skeleton.tsx index 013525d431..86a03fd0cd 100644 --- a/packages/ui/src/components/skeleton.tsx +++ b/packages/ui/src/components/skeleton.tsx @@ -5,9 +5,7 @@ function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { - return ( - <div className={cn("animate-pulse bg-primary/10", className)} {...props} /> - ); + return <div className={cn("animate-pulse bg-muted", className)} {...props} />; } export { Skeleton }; diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css index 436ffa7bc4..6bda4fba21 100644 --- a/packages/ui/src/globals.css +++ b/packages/ui/src/globals.css @@ -4,35 +4,35 @@ @layer base { :root { - --background: 0 0% 98%; - --foreground: 240 3% 10%; + --background: 0 0% 100%; + --foreground: 240 10% 3.9%; --card: 0 0% 100%; - --card-foreground: 240 3% 10%; + --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; - --popover-foreground: 240 3% 10%; + --popover-foreground: 240 10% 3.9%; --primary: 155 100% 43%; --primary-foreground: 0 0% 100%; - --secondary: 0 0% 88%; - --secondary-foreground: 240 3% 10%; + --secondary: 240 4.8% 95.9%; + --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; - --accent: 0 0% 88%; - --accent-foreground: 240 3% 10%; - --destructive: 0 84% 60%; + --accent: 240 4.8% 95.9%; + --accent-foreground: 240 5.9% 10%; + --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; - --border: 0 0% 88%; - --input: 0 0% 88%; - --ring: 155 100% 43%; + --border: 240 5.9% 90%; + --input: 240 5.9% 90%; + --ring: 240 5.9% 10%; --radius: 0.5rem; /* Keeping the success/warning/chart colors as they were */ --success: 142 76% 36%; --warning: 45 89% 53%; - --chart-1: 359 2% 90%; - --chart-2: 240 1% 74%; - --chart-3: 240 1% 58%; - --chart-4: 240 1% 42%; - --chart-5: 240 2% 26%; + --chart-1: 12 76% 61%; + --chart-2: 173 58% 39%; + --chart-3: 197 37% 24%; + --chart-4: 43 74% 66%; + --chart-5: 27 87% 67%; /* Keeping the novel-highlight colors as they were */ --novel-highlight-default: #ffffff; @@ -47,25 +47,25 @@ } .dark { - --background: 240 3% 10%; + --background: 240 10% 3.9%; --foreground: 0 0% 98%; - --card: 240 3% 10%; + --card: 240 10% 3.9%; --card-foreground: 0 0% 98%; - --popover: 240 3% 10%; + --popover: 240 10% 3.9%; --popover-foreground: 0 0% 98%; --primary: 155 100% 43%; --primary-foreground: 240 3% 10%; - --secondary: 240 3% 37%; + --secondary: 240 3.7% 15.9%; --secondary-foreground: 0 0% 98%; --muted: 240 3.7% 15.9%; --muted-foreground: 240 5% 64.9%; - --accent: 240 3% 37%; + --accent: 240 3.7% 15.9%; --accent-foreground: 0 0% 98%; - --destructive: 0 84% 60%; + --destructive: 0 62.8% 30.6%; --destructive-foreground: 0 0% 98%; - --border: 240 3% 37%; - --input: 240 3% 37%; - --ring: 155 100% 43%; + --border: 240 3.7% 15.9%; + --input: 240 3.7% 15.9%; + --ring: 240 4.9% 83.9%; /* Keeping the success/warning/chart colors as they were */ --success: 142 76% 36%;