Changes

Co-authored-by: renee-png <262607627+renee-png@users.noreply.github.com>

src/routes/login.tsx

@@ -5,8 +5,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Scale, Loader2, ShieldCheck } from "lucide-react";
+import { Loader2, ShieldCheck } from "lucide-react";
 import { toast } from "sonner";
+import { JusticeIcon } from "@/components/justice-icon";
 
 export const Route = createFileRoute("/login")({
   component: LoginPage,
@@ -40,8 +41,8 @@ function LoginPage() {
       {/* Brand panel */}
       <div className="hidden lg:flex flex-col justify-between p-12 bg-sidebar text-sidebar-foreground">
         <div className="flex items-center gap-3">
-          <div className="h-10 w-10 rounded-md bg-sidebar-primary flex items-center justify-center">
-            <Scale className="h-5 w-5 text-sidebar-primary-foreground" />
+          <div className="h-10 w-10 rounded-md bg-sidebar-primary flex items-center justify-center p-1">
+            <JusticeIcon className="h-full w-full" invert />
           </div>
           <div>
             <div className="font-serif text-xl">Stage Law Firm, PLLC</div>
@@ -70,7 +71,7 @@ function LoginPage() {
         <Card className="w-full max-w-md border-border/60 shadow-sm">
           <CardHeader className="space-y-2">
             <div className="lg:hidden flex items-center gap-2 mb-2">
-              <Scale className="h-5 w-5 text-primary" />
+              <JusticeIcon className="h-5 w-5" />
               <span className="font-serif text-lg">Stage Law Firm, PLLC</span>
             </div>
             <CardTitle className="font-serif text-2xl">Sign in</CardTitle>

src/routes/pay.$id.tsx

@@ -6,7 +6,7 @@ import { Badge } from "@/components/ui/badge";
 import { CheckCircle2, CreditCard, XCircle } from "lucide-react";
 import { formatCurrency } from "@/lib/format";
 import { getPublicPaymentRequest } from "@/lib/payments.functions";
-import { Scale } from "lucide-react";
+import { JusticeIcon } from "@/components/justice-icon";
 
 export const Route = createFileRoute("/pay/$id")({
   validateSearch: (s: Record<string, unknown>) => ({
@@ -28,7 +28,7 @@ function Shell({ children }: { children: React.ReactNode }) {
     <div className="min-h-screen bg-muted/30 flex items-center justify-center p-6">
       <div className="w-full max-w-lg">
         <div className="flex items-center justify-center gap-2 mb-6">
-          <Scale className="h-6 w-6 text-primary" />
+          <JusticeIcon className="h-6 w-6" />
           <span className="font-serif text-xl">Stage Law Firm, PLLC</span>
         </div>
         <Card className="border-border/60">

src/routes/setup.tsx

@@ -6,8 +6,9 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Loader2, Scale } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { toast } from "sonner";
+import { JusticeIcon } from "@/components/justice-icon";
 
 export const Route = createFileRoute("/setup")({
   component: SetupPage,
@@ -92,7 +93,7 @@ function SetupPage() {
       <Card className="w-full max-w-md">
         <CardHeader>
           <div className="flex items-center gap-2 mb-2">
-            <Scale className="h-5 w-5 text-primary" />
+            <JusticeIcon className="h-5 w-5" />
             <span className="font-serif text-lg">Counsel</span>
           </div>
           <CardTitle className="font-serif text-2xl">Create founding admin</CardTitle>