improved styling

Author: abose

html/browser-message.html

@@ -1,4 +1,18 @@
 <div class="container-fluid">
+    <style>
+        /* Dark mode styling for browser message */
+        .dark .alert.alert-info {
+            background-color: #1e3a3a; /* Darker teal background */
+            color: #e2e2e2; /* Lighter text */
+            border: none;
+        }
+        .dark .border-info {
+            border-color: #17a2b8 !important;
+        }
+        .dark .link-primary {
+            color: #5c9eff !important;
+        }
+    </style>
     <h3 class="mb-3">Phoenix AI Control Status</h3>
     <div class="alert alert-info border-start border-info border-4 mb-4">
         <p class="fw-bold">Browser Version</p>

html/error-template.html

@@ -1,4 +1,22 @@
 <div class="container-fluid">
+    <style>
+        /* Dark mode styling for error message */
+        .dark .alert.alert-danger {
+            background-color: #3a1e1e; /* Darker red background */
+            color: #e2e2e2; /* Lighter text */
+            border: none;
+        }
+        .dark .border-danger {
+            border-color: #f44336 !important;
+        }
+        .dark code {
+            color: #f89898; /* Lighter red for error code */
+            background-color: rgba(0, 0, 0, 0.2);
+        }
+        .dark .link-primary {
+            color: #5c9eff !important;
+        }
+    </style>
     <h3 class="mb-3">Error Checking AI Control Status</h3>
     <div class="alert alert-danger border-start border-danger border-4 mb-4">
         <p class="mb-2">An error occurred while checking AI control configuration:</p>

html/status-template.html

@@ -1,21 +1,35 @@
 <div class="container-fluid">
-    <h3 class="mb-3">Phoenix AI Control Status</h3>
+    <style>
+        .alert.alert-success {
+            text-shadow: none;
+            background-color: #dff0d8;
+            border: none;
+        }
+        .dark .alert.alert-success {
+            text-shadow: none;
+            background-color: #1e3a1e; /* Darker background for better contrast */
+            border: none;
+            color: #e2e2e2; /* Lighter text for better contrast */
+        }
+        .dark .text-success {
+            color: #4caf50 !important; /* Brighter green in dark mode */
+        }
+        .dark .border-success {
+            border-color: #4caf50 !important; /* Match the text color */
+        }
 
+    </style>
     {{#status.isEnabled}}
     <div class="alert alert-success border-start border-success border-4 mb-4">
         <p class="fs-5 mb-2"><strong>AI Status:</strong> <span class="text-success">✓ Enabled</span></p>
         <p class="mb-0">{{status.message}}</p>
     </div>
-    {{/status.isEnabled}}
-
-    {{^status.isEnabled}}
+    {{/status.isEnabled}} {{^status.isEnabled}}
     <div class="alert alert-danger border-start border-danger border-4 mb-4">
         <p class="fs-5 mb-2"><strong>AI Status:</strong> <span class="text-danger">✗ Disabled</span></p>
         <p class="mb-0">{{status.message}}</p>
     </div>
-    {{/status.isEnabled}}
-
-    {{#showConfigDetails}}
+    {{/status.isEnabled}} {{#showConfigDetails}}
     <div class="mb-4">
         <h4 class="mb-3">Configuration Details</h4>
         <table class="table table-bordered table-striped">
@@ -49,7 +63,13 @@ <h4 class="mb-3">Configuration Details</h4>
 
     <div class="mt-4">
         <h4 class="mb-3">Need to Control AI in Your Educational Institution?</h4>
-        <p>Visit <a href="https://docs.phcode.dev/docs/control-ai" target="_blank" class="link-primary">https://docs.phcode.dev/docs/control-ai</a> for documentation on how to:</p>
+        <p>
+            Visit
+            <a href="https://docs.phcode.dev/docs/control-ai" target="_blank" class="link-primary"
+                >https://docs.phcode.dev/docs/control-ai</a
+            >
+            for documentation on how to:
+        </p>
         <ul class="list-group list-group-flush mb-3">
             <li class="list-group-item">Disable AI features by default</li>
             <li class="list-group-item">Allow specific users to access AI</li>

package.json

@@ -20,7 +20,7 @@
         "html/error-template.html"
     ],
     "nodeConfig": {
-        "nodeIsRequired": true,
+        "nodeIsRequired": false,
         "main": "node/index.js",
         "npmInstall": "node/"
     }