Merge pull request #63 from trycompai/lewis/style

style: css updates
trycompai · Feb 18, 2025 · 7bcfe13 · 7bcfe13
2 parents 4a99b97 + 45c571b
commit 7bcfe13
Show file tree

Hide file tree

Showing 21 changed files with 104 additions and 101 deletions.
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
@@ -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,15 +48,15 @@ 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;
 
               return (
                 <Link
                   key={framework.id}
                   href={`/frameworks/${framework.framework.id}`}
-                  className="block space-y-3 rounded-lg p-4 hover:bg-muted transition-colors duration-200"
+                  className="block space-y-3 rounded-lg p-4 hover:bg-muted/60 transition-colors duration-200"
                 >
                   <div className="flex items-center justify-between text-sm">
                     <span className="font-medium">

diff --git 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 (
-    <div className="max-w-[1200px] mx-auto">
+    <div className="max-w-[1200px]">
       <SecondaryMenu items={[{ path: "/", label: t("overview.title") }]} />
 
       <main className="mt-8">{children}</main>

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
@@ -9,7 +9,7 @@ export default async function Layout({ children }: LayoutProps) {
   const t = await getI18n();
 
   return (
-    <div className="max-w-[1200px] mx-auto">
+    <div className="max-w-[1200px]">
       <SecondaryMenu items={[{ path: "/", label: t("overview.title") }]} />
 
       <main className="mt-8">{children}</main>

diff --git 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 (
-    <div className="mt-4 max-w-[1200px] mx-auto">
+    <div className="mt-4 max-w-[1200px]">
       <IntegrationsHeader />
 
-      <Suspense fallback={<SkeletonLoader amount={8} />}>
+      <Suspense fallback={<SkeletonLoader amount={2} />}>
         <IntegrationsServer />
       </Suspense>
     </div>

diff --git 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 (
-    <div className="max-w-[1200px] mx-auto">
+    <div className="max-w-[1200px]">
       <SecondaryMenu items={[{ path: "/people", label: t("people.title") }]} />
 
       <main className="mt-8">{children}</main>

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
@@ -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-[1200px]">
       <SecondaryMenu
         items={[
           { path: "/policies", label: t("policies.dashboard.title") },

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/loading.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/policies/(overview)/loading.tsx
@@ -1,15 +1,5 @@
-import { Skeleton } from "@bubba/ui/skeleton";
+import { SkeletonLoader } from "@/components/skeleton-loader";
 
 export default function PoliciesOverviewLoading() {
-  return (
-    <div className="space-y-4 sm:space-y-8">
-      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <Skeleton className="h-[200px] w-full" />
-        <Skeleton className="h-[200px] w-full" />
-      </div>
-      <div className="grid gap-4 grid-cols-1 md:grid-cols-2">
-        <Skeleton className="h-[200px] w-full" />
-      </div>
-    </div>
-  );
+  return <SkeletonLoader amount={1} />;
 }
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
@@ -20,7 +20,7 @@ export default async function Layout({
   }
 
   return (
-    <div className="max-w-[1200px] mx-auto">
+    <div className="max-w-[1200px]">
       <main className="h-[calc(100vh-4rem-4rem)]">{children}</main>
     </div>
   );

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
@@ -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-[1200px]">
       <Suspense fallback={<div>Loading...</div>}>
         <SecondaryMenu
           items={[

diff --git a/apps/app/src/app/[locale]/(app)/(dashboard)/risk/(overview)/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/(overview)/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)/risk/[riskId]/layout.tsx b/apps/app/src/app/[locale]/(app)/(dashboard)/risk/[riskId]/layout.tsx
@@ -27,7 +27,7 @@ export default async function Layout({ children, params }: LayoutProps) {
   }
 
   return (
-    <div className="max-w-[1200px] mx-auto space-y-4">
+    <div className="max-w-[1200px] space-y-4">
       <Title title={risk.title} href="/risk/register" />
 
       <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 };