From 184ee6c252e363b6b7ecbc63fb4098e7ffd1eea9 Mon Sep 17 00:00:00 2001
From: Krrish Dholakia <krrishdholakia@gmail.com>
Date: Mon, 10 Feb 2025 17:50:12 -0800
Subject: [PATCH] style(guardrails.tsx): style improvements to guardrails ui

---
 ui/litellm-dashboard/src/components/guardrails.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/litellm-dashboard/src/components/guardrails.tsx b/ui/litellm-dashboard/src/components/guardrails.tsx
index d603d656a0..54e4715684 100644
--- a/ui/litellm-dashboard/src/components/guardrails.tsx
+++ b/ui/litellm-dashboard/src/components/guardrails.tsx
@@ -85,7 +85,13 @@ const GuardrailsPanel: React.FC<GuardrailsPanelProps> = ({ accessToken }) => {
                 <TableCell>{guardrail.guardrail_name}</TableCell>
                 <TableCell>{guardrail.litellm_params.mode}</TableCell>
                 <TableCell>
-                  {guardrail.litellm_params.default_on ? 'Always On' : 'Per Request'}
+                <div className={`inline-flex rounded-full px-2 py-1 text-xs font-medium
+                    ${guardrail.litellm_params.default_on 
+                    ? 'bg-green-100 text-green-800'  // Always On styling
+                    : 'bg-gray-100 text-gray-800'    // Per Request styling
+                    }`}>
+                    {guardrail.litellm_params.default_on ? 'Always On' : 'Per Request'}
+                </div>
                 </TableCell>
                 </TableRow>
               ))