Removed light mode. Added scss files for dark mode. Added purgecss to remove unused classes and reduce bundle size.

Dockerfile

@@ -8,7 +8,11 @@ RUN npm install
 
 COPY . .
 
-RUN mkdir -p ./public ./data
+# Install client dependencies
+RUN mkdir -p ./public ./data \
+    && cd client \
+    && npm install \
+    && npm rebuild node-sass
 
 # Build 
 RUN npm run build \

Dockerfile.arm

@@ -7,10 +7,13 @@ COPY package*.json ./
 RUN apk --no-cache --virtual build-dependencies add python make g++ \
     && npm install
     
-
 COPY . .
 
-RUN mkdir -p ./public ./data
+# Install client dependencies
+RUN mkdir -p ./public ./data \
+    && cd client \
+    && npm install \
+    && npm rebuild node-sass
 
 # Build
 RUN npm run build \

client/package.json

@@ -6,30 +6,28 @@
     "@icons-pack/react-simple-icons": "^4.6.1",
     "@mdi/js": "^6.1.95",
     "@mdi/react": "^1.5.0",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^11.2.7",
-    "@testing-library/user-event": "^12.8.3",
-    "@types/jest": "^26.0.24",
     "@types/node": "^12.20.25",
     "@types/react": "^17.0.21",
     "@types/react-dom": "^17.0.9",
     "@types/react-router-dom": "^5.3.0",
     "axios": "^0.21.4",
+    "bootstrap": "^5.1.1",
     "clipboard-copy": "^4.0.1",
     "dayjs": "^1.10.7",
+    "node-sass": "^6.0.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-markdown": "^7.0.1",
     "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
-    "typescript": "^4.4.3",
+    "typescript": "^4.4.3"
-    "web-vitals": "^1.1.2"
   },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "postbuild": "purgecss --css build/static/css/*.css --content build/index.html build/static/js/*.js --output build/static/css"
   },
   "eslintConfig": {
     "extends": [
@@ -49,6 +47,8 @@
       "last 1 safari version"
     ]
   },
-  "devDependencies": {},
+  "proxy": "http://localhost:5000",
-  "proxy": "http://localhost:5000"
+  "devDependencies": {
+    "purgecss": "^4.0.3"
+  }
 }

client/src/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './bootstrap.min.css';
+import './styles/style.scss';
 import { App } from './App';
 
 ReactDOM.render(

client/src/styles/_bootswatch.scss

@@ -0,0 +1,194 @@
+// Zephyr 5.1.1
+// Bootswatch
+
+// Variables
+$web-font-path: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap' !default;
+@if $web-font-path {
+  @import url($web-font-path);
+}
+
+// Navbar
+.navbar {
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  .nav-item {
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .navbar-nav {
+    .nav-link {
+      border-radius: $border-radius;
+    }
+  }
+}
+
+.navbar-dark {
+  .navbar-nav {
+    .nav-link {
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+      }
+
+      &.active {
+        background-color: rgba(0, 0, 0, 0.5);
+      }
+    }
+  }
+}
+
+.navbar-light {
+  .navbar-nav {
+    .nav-link {
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.03);
+      }
+
+      &.active {
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+    }
+  }
+}
+
+// Buttons
+// .btn-secondary,
+// .btn-light,
+// .btn-outline-secondary,
+// .btn-outline-light {
+//   color: $gray-900;
+
+//   &:disabled,
+//   &.disabled {
+//     border: 1px solid shade-color($secondary, 10%);
+//   }
+// }
+
+.btn-light,
+.btn-outline-light {
+  color: $gray-900;
+
+  &:disabled,
+  &.disabled {
+    border: 1px solid shade-color($secondary, 10%);
+  }
+}
+
+.btn-secondary,
+.btn-outline-secondary {
+  border-color: shade-color($secondary, 10%);
+
+  &:hover,
+  &:active {
+    background-color: shade-color($secondary, 10%);
+    border-color: shade-color($secondary, 10%);
+  }
+}
+
+.btn-light,
+.btn-outline-light {
+  border-color: shade-color($light, 10%);
+
+  &:hover,
+  &:active {
+    background-color: shade-color($light, 10%);
+    border-color: shade-color($light, 10%);
+  }
+}
+
+// Tables
+.table {
+  box-shadow: $box-shadow-lg;
+  font-size: $font-size-sm;
+}
+
+thead th {
+  text-transform: uppercase;
+  font-size: $font-size-sm;
+}
+
+// Forms
+.input-group-text {
+  box-shadow: $box-shadow;
+}
+
+// Navs
+.nav-tabs {
+  font-weight: 500;
+
+  .nav-link {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    border-width: 0 0 1px;
+  }
+
+  .nav-link.active,
+  .nav-item.show .nav-link {
+    box-shadow: inset 0 -2px 0 $primary;
+  }
+}
+
+.nav-pills {
+  font-weight: 500;
+}
+
+.pagination {
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  .page-link {
+    box-shadow: $box-shadow;
+  }
+}
+
+.breadcrumb {
+  border: 1px solid $gray-300;
+  border-radius: $border-radius;
+  box-shadow: $box-shadow;
+  font-size: $font-size-sm;
+  font-weight: 500;
+
+  &-item {
+    padding: 1rem 0.5rem 1rem 0;
+  }
+}
+
+.breadcrumb-item + .breadcrumb-item::before {
+  padding-right: 1rem;
+}
+
+// Indicators
+.alert {
+  .btn-close {
+    color: inherit;
+  }
+}
+
+.badge {
+  &.bg-secondary,
+  &.bg-light {
+    color: $gray-900;
+  }
+}
+
+// Containers
+.list-group {
+  box-shadow: $box-shadow-lg;
+}
+
+.card {
+  box-shadow: $box-shadow-lg;
+
+  &-title {
+    color: inherit;
+  }
+}
+
+.modal-footer {
+  background-color: $gray-100;
+}
+
+.modal-content {
+  box-shadow: $box-shadow-lg;
+}

client/src/styles/_variables.scss

@@ -0,0 +1,104 @@
+$theme: 'zephyr';
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black: #000;
+$blue: #3459e6;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #d63384;
+$red: #da292e;
+$orange: #f8765f;
+$yellow: #f4bd61;
+$green: #2fb380;
+$teal: #20c997;
+$cyan: #287bb5;
+$primary: $blue;
+$secondary: $white;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-900;
+$min-contrast-ratio: 1.65;
+$enable-shadows: true;
+$body-color: $gray-200;
+$headings-color: $gray-100;
+$font-family-sans-serif: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI';
+$font-size-base: 1rem;
+$font-size-sm: $font-size-base * 0.875 !default;
+$box-shadow: 0 1px 2px rgba($black, 0.05);
+$box-shadow-lg: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$table-cell-padding-y: 1rem;
+$table-cell-padding-x: 1rem;
+$table-cell-padding-y-sm: 0.5rem;
+$table-cell-padding-x-sm: 0.5rem;
+$table-th-font-weight: 500;
+$input-btn-padding-y: 0.5rem;
+$input-btn-padding-x: 1rem;
+$input-btn-font-size: $font-size-sm;
+$btn-font-weight: 500;
+$btn-box-shadow: $box-shadow;
+$btn-focus-box-shadow: $box-shadow;
+$btn-active-box-shadow: $box-shadow;
+$form-label-font-weight: 500;
+$input-box-shadow: $box-shadow;
+$input-group-addon-bg: $gray-100;
+$nav-link-color: $body-color;
+$nav-link-hover-color: $body-color;
+$nav-tabs-border-radius: 0;
+$nav-tabs-link-active-color: $primary;
+$navbar-padding-y: 0.85rem;
+$navbar-nav-link-padding-x: 0.75rem;
+$navbar-dark-color: $white;
+$navbar-dark-hover-color: $white;
+$navbar-dark-active-color: $white;
+$navbar-light-color: $black;
+$navbar-light-hover-color: $black;
+$navbar-light-active-color: $black;
+$dropdown-font-size: $font-size-sm;
+$dropdown-border-color: $gray-300;
+$dropdown-divider-bg: $gray-200;
+$dropdown-link-hover-color: $white;
+$dropdown-link-hover-bg: $primary;
+$dropdown-item-padding-y: 0.5rem;
+$dropdown-item-padding-x: 1rem;
+$pagination-padding-y: 0.5rem;
+$pagination-padding-x: 1rem;
+$pagination-color: $light;
+$pagination-focus-color: $pagination-color;
+$pagination-hover-color: $pagination-color;
+$pagination-hover-bg: $gray-100;
+$card-spacer-x: 1.5rem;
+$card-cap-padding-y: 1rem;
+$card-cap-padding-x: 1.5rem;
+$toast-header-color: $headings-color;
+$modal-content-border-color: $gray-700;
+$modal-header-border-width: 0;
+$list-group-item-padding-y: 1rem;
+$list-group-item-padding-x: 1.5rem;
+$breadcrumb-padding-x: 1rem;
+$breadcrumb-divider: quote('>');
+$body-bg: $gray-800;
+$card-color: $gray-200;
+$card-bg: $dark;
+$list-group-bg: $dark;
+$pagination-bg: $dark;
+$pagination-border-color: $gray-800;
+$breadcrumb-bg: $dark;
+$breadcrumb-divider-color: $light;
+$breadcrumb-active-color: $light;
+$input-bg: $dark;
+$input-color: $light;
+$card-border-width: 0;
+$modal-content-bg: $dark;
+$input-border-color: $gray-700;
+$input-disabled-bg: $dark;

client/src/styles/style.scss

@@ -0,0 +1,7 @@
+@import './variables';
+@import '../../node_modules/bootstrap/scss/bootstrap.scss';
+@import './bootswatch';
+
+.cursor-pointer:hover {
+  cursor: pointer;
+}