update firewall filter type/value visual treatment (#2108)

* update firewall filter type/value visual treatment * use normal-case on values badges * keep various filters on one line, with wrapping when needed
oxidecomputer · Apr 3, 2024 · 95f2e49 · 95f2e49
1 parent 8e3a200
commit 95f2e49
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 7 deletions.
diff --git a/app/table/cells/FirewallFilterCell.tsx b/app/table/cells/FirewallFilterCell.tsx
@@ -15,14 +15,17 @@ import { TypeValueCell } from './TypeValueCell'
 export const FirewallFilterCell = ({
   value: { hosts, ports, protocols },
 }: Cell<VpcFirewallRuleFilter>) => (
-  <div className="space-x-1">
-    {hosts && hosts.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} value={tv} />)}
-    {protocols &&
-      protocols.map((p, i) => (
-        <Badge key={`${p}-${i}`} variant="default">
+  <div className="flex flex-col gap-1">
+    <div className="flex flex-wrap gap-1">
+      {hosts?.map((tv, i) => <TypeValueCell key={`${tv}-${i}`} value={tv} />)}
+    </div>
+    <div className="flex gap-1">
+      {protocols?.map((p, i) => <Badge key={`${p}-${i}`}>{p}</Badge>)}
+      {ports?.map((p, i) => (
+        <Badge key={`${p}-${i}`} variant="solid">
           {p}
         </Badge>
       ))}
-    {ports && ports.map((p, i) => <Badge key={`${p}-${i}`}>{p}</Badge>)}
+    </div>
   </div>
 )
diff --git a/app/table/cells/TypeValueCell.tsx b/app/table/cells/TypeValueCell.tsx
@@ -18,6 +18,8 @@ export type TypeValue = {
 export const TypeValueCell = ({ value: { type, value } }: Cell<TypeValue>) => (
   <div className="space-x-1">
     <Badge>{type}</Badge>
-    <Badge>{value}</Badge>
+    <Badge variant="solid" className="!normal-case">
+      {value}
+    </Badge>
   </div>
 )