Reorganize makima navbar

1 files changed, 10 insertions, 12 deletions

diff --git a/makima/frontend/src/components/chains/ChainEditor.tsx b/makima/frontend/src/components/chains/ChainEditor.tsx
index 9077d19..92bd496 100644
--- a/makima/frontend/src/components/chains/ChainEditor.tsx
+++ b/makima/frontend/src/components/chains/ChainEditor.tsx
@@ -5,6 +5,12 @@ import type {
   ChainContractDetail,
 } from "../../lib/api";
 
+const statusColors: Record<string, string> = {
+  active: "text-green-400",
+  completed: "text-blue-400",
+  archived: "text-[#555]",
+};
+
 interface ChainEditorProps {
   chain: ChainWithContracts;
   graph: ChainGraphResponse | null;
@@ -116,12 +122,8 @@ export function ChainEditor({
           </div>
           <div className="flex items-center gap-2">
             <span
-              className={`px-2 py-1 font-mono text-[10px] uppercase rounded ${
-                chain.chain.status === "active"
-                  ? "text-[#4ade80] bg-[#4ade80]/10"
-                  : chain.chain.status === "completed"
-                  ? "text-[#60a5fa] bg-[#60a5fa]/10"
-                  : "text-[#6b7280] bg-[#6b7280]/10"
+              className={`font-mono text-[10px] uppercase ${
+                statusColors[chain.chain.status] || "text-[#555]"
               }`}
             >
               {chain.chain.status}
@@ -371,12 +373,8 @@ function ContractDetailPanel({
             Status
           </label>
           <span
-            className={`inline-block px-2 py-1 font-mono text-xs uppercase rounded ${
-              contract.contractStatus === "active"
-                ? "text-[#4ade80] bg-[#4ade80]/10"
-                : contract.contractStatus === "completed"
-                ? "text-[#60a5fa] bg-[#60a5fa]/10"
-                : "text-[#6b7280] bg-[#6b7280]/10"
+            className={`font-mono text-xs uppercase ${
+              statusColors[contract.contractStatus] || "text-[#555]"
             }`}
           >
             {contract.contractStatus}