webapp: scss cleanup

jasonish · Dec 26, 2023 · 2fc25dc · 2fc25dc
1 parent ab32625
commit 2fc25dc
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 162 deletions.
diff --git a/webapp/src/Alerts.tsx b/webapp/src/Alerts.tsx
@@ -1,5 +1,4 @@
 // SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
-//
 // SPDX-License-Identifier: MIT
 
 import {
@@ -27,7 +26,6 @@ import {
   createSignal,
   For,
   Match,
-  on,
   onCleanup,
   onMount,
   Show,
@@ -787,7 +785,7 @@ export function Alerts() {
           {visibleEvents().length > 0 && (
             <div>
               <table
-                class={"table table-hover mt-2 event-table"}
+                class={"table table-hover mt-2 app-event-table"}
                 style={"margin-bottom: 0;"}
               >
                 <thead>
@@ -855,9 +853,10 @@ export function Alerts() {
                         <>
                           <tr
                             classList={{
-                              "evebox-row-info": severity > 2,
-                              "evebox-row-warning": severity === 2,
-                              "evebox-row-danger": severity === 1,
+                              "evebox-row-info table-info": severity > 2,
+                              "evebox-row-warning table-warning":
+                                severity === 2,
+                              "table-danger": severity === 1,
                               "event-row": true,
                             }}
                             onclick={() => {

diff --git a/webapp/src/EventView.tsx b/webapp/src/EventView.tsx
@@ -1,5 +1,4 @@
 // SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
-//
 // SPDX-License-Identifier: MIT
 
 import { A, useLocation, useNavigate, useParams } from "@solidjs/router";
@@ -580,7 +579,7 @@ export function EventView() {
                 <Card.Body class={"p-0"}>
                   <table
                     class={
-                      "table table-sm table-borderless table-striped table-hover detail-table"
+                      "table table-sm table-borderless table-striped table-hover app-detail-table"
                     }
                   >
                     <tbody>
@@ -607,7 +606,7 @@ export function EventView() {
                   <Card.Body class={"p-0"}>
                     <table
                       class={
-                        "table table-sm detail-table table-borderless table-striped table-hover"
+                        "table table-sm app-detail-table table-borderless table-striped table-hover"
                       }
                     >
                       <tbody>
@@ -660,7 +659,7 @@ export function EventView() {
                   <Card.Body class={"p-0"}>
                     <table
                       class={
-                        "mb-0 table table-sm table-striped table-bordered detail-table"
+                        "mb-0 table table-sm table-striped table-bordered app-detail-table"
                       }
                     >
                       <tbody>
@@ -709,7 +708,7 @@ export function EventView() {
                                         <Card.Body class={"p-0"}>
                                           <table
                                             class={
-                                              "mb-0 table table-sm table-striped table-bordered detail-table"
+                                              "mb-0 table table-sm table-striped table-bordered app-detail-table"
                                             }
                                           >
                                             <tbody>
@@ -782,7 +781,7 @@ export function EventView() {
                             <Tab eventKey={t.key} title={t.title}>
                               <table
                                 class={
-                                  "mb-0 table table-sm table-striped table-bordered detail-table"
+                                  "mb-0 table table-sm table-striped table-bordered app-detail-table"
                                 }
                               >
                                 <tbody>
@@ -883,7 +882,7 @@ export function EventView() {
                 <Card.Body class="p-0">
                   <table
                     class={
-                      "mb-0 table table-sm table-striped table-bordered detail-table"
+                      "mb-0 table table-sm table-striped table-bordered app-detail-table"
                     }
                   >
                     <tbody>
@@ -1010,11 +1009,11 @@ function formatTitle(event: Event): string {
 function bgClassForSeverity(event: Event) {
   switch (event._source.alert?.severity) {
     case 1:
-      return "bg-danger";
+      return "alert-danger";
     case 2:
-      return "bg-warning";
+      return "alert-warning";
     default:
-      return "bg-info";
+      return "alert-info";
   }
 }
 

diff --git a/webapp/src/Events.tsx b/webapp/src/Events.tsx
@@ -1,5 +1,4 @@
 // SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
-//
 // SPDX-License-Identifier: MIT
 
 import { TIME_RANGE, Top } from "./Top";
@@ -394,14 +393,14 @@ export function Events() {
             <Transition name={"fade"}>
               {events().length > 0 && (
                 <div>
-                  <table class={"table table-sm table-hover event-table"}>
+                  <table class={"table table-sm table-hover app-event-table"}>
                     <thead>
                       <tr>
                         <th class={"app-w-1"}></th>
                         <th class={"col-timestamp"}>Timestamp</th>
                         <th class={"col-event-type"}>Type</th>
                         <th class={"col-address"}>Src/Dst</th>
-                        <td>Description</td>
+                        <th>Description</th>
                       </tr>
                     </thead>
                     <tbody>
@@ -413,11 +412,10 @@ export function Events() {
                               <tr
                                 onclick={() => openEventById(event._id)}
                                 classList={{
-                                  "evebox-row-info": severity! > 2,
-                                  "evebox-row-warning": severity === 2,
-                                  "evebox-row-danger": severity === 1,
-                                  "evebox-row-success": severity === undefined,
-                                  "event-row": true,
+                                  "table-info": severity! > 2,
+                                  "table-warning": severity === 2,
+                                  "table-danger": severity === 1,
+                                  "table-success": severity === undefined,
                                 }}
                               >
                                 <td

diff --git a/webapp/src/Help.tsx b/webapp/src/Help.tsx
@@ -1,5 +1,4 @@
 // SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
-//
 // SPDX-License-Identifier: MIT
 
 import { createSignal, For, Show, Suspense } from "solid-js";
@@ -24,12 +23,12 @@ export function HelpModal() {
           >
             <Keyboard />
           </Tab>
-          <Tab eventKey="about" title="About" class={"help-tab"}>
+          <Tab eventKey="about" title="About" class="app-help-tab">
             <About />
           </Tab>
         </Tabs>
       </Modal.Body>
-      <Modal.Footer class={"help-footer"}>
+      <Modal.Footer class="app-help-footer">
         <Button variant="secondary" onClick={closeHelp}>
           Close
         </Button>

diff --git a/webapp/src/Top.tsx b/webapp/src/Top.tsx
@@ -1,17 +1,16 @@
 // SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
-//
 // SPDX-License-Identifier: MIT
 
 import { Container, Dropdown, Nav, Navbar, NavDropdown } from "solid-bootstrap";
-import { A, useLocation, useNavigate, useSearchParams } from "@solidjs/router";
+import { A, useNavigate, useSearchParams } from "@solidjs/router";
 import { createEffect, createSignal, For, onMount, Show } from "solid-js";
 
 import tinykeys from "tinykeys";
 import { BiGear } from "./icons";
 import { HelpModal } from "./Help";
 import { QUEUE_SIZE, SERVER_REVISION } from "./api";
 import { GIT_REV } from "./gitrev";
-import { serverConfig, serverConfigSet } from "./config";
+import { serverConfig } from "./config";
 
 export const [showHelp, setShowHelp] = createSignal(false);
 export const openHelp = () => setShowHelp(true);

diff --git a/webapp/src/index.tsx b/webapp/src/index.tsx
@@ -1,5 +1,4 @@
 // SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
-//
 // SPDX-License-Identifier: MIT
 
 import { render } from "solid-js/web";

diff --git a/webapp/src/reports/DhcpReport.tsx b/webapp/src/reports/DhcpReport.tsx
@@ -1,13 +1,7 @@
 // SPDX-FileCopyrightText: (C) 2023 Jason Ish <[email protected]>
 // SPDX-License-Identifier: MIT
 
-import {
-  Card,
-  Col,
-  Container,
-  Row,
-  Table,
-} from "solid-bootstrap";
+import { Card, Col, Container, Row, Table } from "solid-bootstrap";
 import { TIME_RANGE, Top } from "../Top";
 import { API } from "../api";
 import { createEffect, createSignal, For, Setter, Show } from "solid-js";