Dashboard: refactor css files locations

Signed-off-by: Serhii Orlivskyi <serhii.orlivskyi@cedalo.com> (Cedalo GmbH)

dashboard/README.md

@@ -10,7 +10,7 @@ npm -g install tailwindcss@3
 2) Go into `src` and run tailwind to generate a CSS file based on tailwind classes used in `index.html`:
 
 ```sh
-tailwindcss -i ./tailwind/styles.css -o ./styles.css
+tailwindcss -i ./css/styles.css -o ./tailwind/styles.css
 ```
 
 3) Run mosquitto http api mock

dashboard/src/css/styles.css

@@ -0,0 +1,91 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+.bg-c-orange {
+  background-color: #fd602e;
+}
+
+.hover\:bg-c-orange:hover {
+  background-color: #fd602e;
+}
+
+@media (min-width: 1024px) {
+    #menu-overlay {
+        display: none;
+    }
+    #sliding-menu {
+        box-shadow: none;
+    }
+    #menu-close {
+        visibility: hidden;
+    }
+    #broker-info-icon {
+        display: block;
+    }
+}
+
+@media (max-width: 1024px) {
+    #layout-toggle {
+        display: none;
+    }
+}
+
+@media (max-width: 375px) {
+    #logo-icon {
+        display: block;
+    }
+
+    #logo-text {
+        display: none
+    }
+}
+
+.broker-active {
+    background-color: rgb(34 197 94); /* green-500 */
+}
+
+.broker-inactive {
+    background-color: rgb(239 68 68); /* red-500 */
+}
+
+@layer components {
+    .card {
+        @apply bg-white rounded-lg border border-gray-200 shadow-sm;
+    }
+    .card-header {
+        @apply px-6 py-4 border-b border-gray-200;
+    }
+    .card-content {
+        @apply px-6 py-4;
+    }
+    .metric-value {
+        @apply text-3xl font-bold text-gray-900;
+    }
+    .metric-label {
+        @apply text-sm font-medium text-gray-500 mb-2;
+    }
+    .status-dot {
+        @apply w-3 h-3 rounded-full;
+    }
+    .chart-container {
+        position: relative;
+        height: 200px;
+        width: 100%;
+    }
+    .nav-btn {
+        @apply inline-flex items-center justify-center w-8 h-8 text-gray-500 bg-white border border-gray-300 rounded hover:bg-gray-50 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-1 transition-colors duration-150 disabled:opacity-50 disabled:cursor-not-allowed;
+    }
+    .nav-btn:hover:not(:disabled) {
+        @apply shadow-sm;
+    }
+    .nav-btn.active {
+        @apply bg-blue-50 border-blue-300 text-blue-600;
+    }
+    .nav-separator {
+        @apply w-px h-6 bg-gray-300 mx-2;
+    }
+    .nav-btn svg {
+        pointer-events: none;
+    }
+}

dashboard/src/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mosquitto Broker Dashboard</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="tailwind/styles.css">
     <link rel="icon" type="image/x-icon" href="media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/x-icon" href="media/favicon-32x32.png" sizes="32x32">
 </head>

dashboard/src/listeners.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Mosquitto Broker Dashboard</title>
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="tailwind/styles.css">
     <link rel="icon" type="image/x-icon" href="media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/x-icon" href="media/favicon-32x32.png" sizes="32x32">
 </head>