Improve MOTD style a tad

DeckThemes · Nov 17, 2023 · 9d8952c · 9d8952c
1 parent 0025c9d
commit 9d8952c
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/src/components/QAMTab/MOTDDisplay.tsx b/src/components/QAMTab/MOTDDisplay.tsx
@@ -13,29 +13,36 @@ export function MOTDDisplay() {
     getMotd();
   }, []);
 
-  function getColors() {
-    switch (motd?.severity) {
-      case "High":
-        return { bg: "#c3010155", border: "#560d0d", text: "#fff" };
-      case "Medium":
-        return { bg: "rgba(255, 255, 0, 0.067)", border: "rgba(255, 255, 0, 0.467)", text: "#fff" };
-      default:
-        return { bg: "#3e72b055", border: "#6680a8", text: "#fff" };
-    }
-  }
+  const SEVERITIES = {
+    High: {
+      color: "#bb1414",
+      text: "#fff",
+    },
+    Medium: {
+      color: "#bbbb14",
+      text: "#fff",
+    },
+    Low: {
+      color: "#1488bb",
+      text: "#fff",
+    },
+  };
+
+  const severity = SEVERITIES[motd?.severity || "Low"];
 
   if (motd && motd?.name) {
     return (
       <PanelSection>
         <Focusable
           onActivate={() => {}}
           style={{
-            backgroundColor: getColors().bg,
-            color: getColors().text,
-            borderColor: getColors().border,
-            borderWidth: "0.25em",
+            // Transparency is 20% of the color
+            backgroundColor: `${severity.color}33`,
+            color: severity.text,
+            borderColor: severity.color,
+            borderWidth: "2px",
             borderStyle: "solid",
-            padding: "0.25em",
+            padding: "0.75em",
             display: "flex",
             flexDirection: "column",
           }}