From 73e855550c55e0bf58cebec54bb8944334b07f16 Mon Sep 17 00:00:00 2001
From: Paul Bienkowski <pb@opatut.de>
Date: Fri, 7 May 2021 17:29:26 +0200
Subject: [PATCH] frontend: Customize style, start using styleguide

---
 frontend/Dockerfile                           |   2 +-
 frontend/craco.config.js                      |   3 +
 frontend/package-lock.json                    | 161 +++++++++++++++++-
 frontend/package.json                         |  14 +-
 frontend/src/index.js                         |   3 +-
 frontend/src/pages/HomePage.js                |   2 +-
 frontend/src/pages/NotFoundPage.js            |   4 +-
 frontend/src/pages/SettingsPage.tsx           |   6 +-
 frontend/src/pages/TrackEditor.tsx            |   8 +-
 .../site/collections/breadcrumb.overrides     |   3 +
 .../site/collections/breadcrumb.variables     |   3 +
 .../site/collections/form.overrides           |   3 +
 .../site/collections/form.variables           |   3 +
 .../site/collections/grid.overrides           |   3 +
 .../site/collections/grid.variables           |   3 +
 .../site/collections/menu.overrides           |   3 +
 .../site/collections/menu.variables           |   3 +
 .../site/collections/message.overrides        |   3 +
 .../site/collections/message.variables        |   3 +
 .../site/collections/table.overrides          |   3 +
 .../site/collections/table.variables          |   3 +
 .../site/elements/button.overrides            |   3 +
 .../site/elements/button.variables            |   3 +
 .../site/elements/container.overrides         |   3 +
 .../site/elements/container.variables         |   3 +
 .../site/elements/divider.overrides           |   3 +
 .../site/elements/divider.variables           |   3 +
 .../semantic-ui/site/elements/flag.overrides  |   3 +
 .../semantic-ui/site/elements/flag.variables  |   3 +
 .../site/elements/header.overrides            |  34 ++++
 .../site/elements/header.variables            |   3 +
 .../semantic-ui/site/elements/icon.overrides  |   3 +
 .../semantic-ui/site/elements/icon.variables  |   3 +
 .../semantic-ui/site/elements/image.overrides |   3 +
 .../semantic-ui/site/elements/image.variables |   3 +
 .../semantic-ui/site/elements/input.overrides |   3 +
 .../semantic-ui/site/elements/input.variables |   3 +
 .../semantic-ui/site/elements/label.overrides |   3 +
 .../semantic-ui/site/elements/label.variables |   3 +
 .../semantic-ui/site/elements/list.overrides  |   3 +
 .../semantic-ui/site/elements/list.variables  |   3 +
 .../site/elements/loader.overrides            |   3 +
 .../site/elements/loader.variables            |   3 +
 .../semantic-ui/site/elements/rail.overrides  |   3 +
 .../semantic-ui/site/elements/rail.variables  |   3 +
 .../site/elements/reveal.overrides            |   3 +
 .../site/elements/reveal.variables            |   3 +
 .../site/elements/segment.overrides           |   3 +
 .../site/elements/segment.variables           |   3 +
 .../semantic-ui/site/elements/step.overrides  |   3 +
 .../semantic-ui/site/elements/step.variables  |   3 +
 .../semantic-ui/site/globals/reset.overrides  |   3 +
 .../semantic-ui/site/globals/reset.variables  |   3 +
 .../semantic-ui/site/globals/site.overrides   |   3 +
 .../semantic-ui/site/globals/site.variables   |  21 +++
 .../site/modules/accordion.overrides          |   3 +
 .../site/modules/accordion.variables          |   3 +
 .../site/modules/chatroom.overrides           |   3 +
 .../site/modules/chatroom.variables           |   3 +
 .../site/modules/checkbox.overrides           |   3 +
 .../site/modules/checkbox.variables           |   3 +
 .../semantic-ui/site/modules/dimmer.overrides |   3 +
 .../semantic-ui/site/modules/dimmer.variables |   3 +
 .../site/modules/dropdown.overrides           |   3 +
 .../site/modules/dropdown.variables           |   3 +
 .../semantic-ui/site/modules/embed.overrides  |   3 +
 .../semantic-ui/site/modules/embed.variables  |   0
 .../semantic-ui/site/modules/modal.overrides  |   3 +
 .../semantic-ui/site/modules/modal.variables  |   3 +
 .../semantic-ui/site/modules/nag.overrides    |   3 +
 .../semantic-ui/site/modules/nag.variables    |   3 +
 .../semantic-ui/site/modules/popup.overrides  |   3 +
 .../semantic-ui/site/modules/popup.variables  |   3 +
 .../site/modules/progress.overrides           |   3 +
 .../site/modules/progress.variables           |   3 +
 .../semantic-ui/site/modules/rating.overrides |   3 +
 .../semantic-ui/site/modules/rating.variables |   3 +
 .../semantic-ui/site/modules/search.overrides |   3 +
 .../semantic-ui/site/modules/search.variables |   3 +
 .../semantic-ui/site/modules/shape.overrides  |   3 +
 .../semantic-ui/site/modules/shape.variables  |   3 +
 .../site/modules/sidebar.overrides            |   3 +
 .../site/modules/sidebar.variables            |   3 +
 .../semantic-ui/site/modules/sticky.overrides |   3 +
 .../semantic-ui/site/modules/sticky.variables |   3 +
 .../semantic-ui/site/modules/tab.overrides    |   3 +
 .../semantic-ui/site/modules/tab.variables    |   3 +
 .../site/modules/transition.overrides         |   3 +
 .../site/modules/transition.variables         |   3 +
 .../src/semantic-ui/site/views/ad.overrides   |   3 +
 .../src/semantic-ui/site/views/ad.variables   |   3 +
 .../src/semantic-ui/site/views/card.overrides |   3 +
 .../src/semantic-ui/site/views/card.variables |   3 +
 .../semantic-ui/site/views/comment.overrides  |   3 +
 .../semantic-ui/site/views/comment.variables  |   3 +
 .../src/semantic-ui/site/views/feed.overrides |   3 +
 .../src/semantic-ui/site/views/feed.variables |   3 +
 .../src/semantic-ui/site/views/item.overrides |   3 +
 .../src/semantic-ui/site/views/item.variables |   3 +
 .../site/views/statistic.overrides            |   3 +
 .../site/views/statistic.variables            |   3 +
 frontend/src/semantic-ui/theme.config         |  94 ++++++++++
 102 files changed, 595 insertions(+), 24 deletions(-)
 create mode 100644 frontend/craco.config.js
 create mode 100644 frontend/src/semantic-ui/site/collections/breadcrumb.overrides
 create mode 100644 frontend/src/semantic-ui/site/collections/breadcrumb.variables
 create mode 100644 frontend/src/semantic-ui/site/collections/form.overrides
 create mode 100644 frontend/src/semantic-ui/site/collections/form.variables
 create mode 100644 frontend/src/semantic-ui/site/collections/grid.overrides
 create mode 100644 frontend/src/semantic-ui/site/collections/grid.variables
 create mode 100644 frontend/src/semantic-ui/site/collections/menu.overrides
 create mode 100644 frontend/src/semantic-ui/site/collections/menu.variables
 create mode 100644 frontend/src/semantic-ui/site/collections/message.overrides
 create mode 100644 frontend/src/semantic-ui/site/collections/message.variables
 create mode 100644 frontend/src/semantic-ui/site/collections/table.overrides
 create mode 100644 frontend/src/semantic-ui/site/collections/table.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/button.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/button.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/container.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/container.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/divider.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/divider.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/flag.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/flag.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/header.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/header.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/icon.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/icon.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/image.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/image.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/input.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/input.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/label.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/label.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/list.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/list.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/loader.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/loader.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/rail.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/rail.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/reveal.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/reveal.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/segment.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/segment.variables
 create mode 100644 frontend/src/semantic-ui/site/elements/step.overrides
 create mode 100644 frontend/src/semantic-ui/site/elements/step.variables
 create mode 100644 frontend/src/semantic-ui/site/globals/reset.overrides
 create mode 100644 frontend/src/semantic-ui/site/globals/reset.variables
 create mode 100644 frontend/src/semantic-ui/site/globals/site.overrides
 create mode 100644 frontend/src/semantic-ui/site/globals/site.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/accordion.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/accordion.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/chatroom.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/chatroom.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/checkbox.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/checkbox.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/dimmer.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/dimmer.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/dropdown.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/dropdown.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/embed.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/embed.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/modal.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/modal.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/nag.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/nag.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/popup.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/popup.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/progress.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/progress.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/rating.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/rating.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/search.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/search.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/shape.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/shape.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/sidebar.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/sidebar.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/sticky.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/sticky.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/tab.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/tab.variables
 create mode 100644 frontend/src/semantic-ui/site/modules/transition.overrides
 create mode 100644 frontend/src/semantic-ui/site/modules/transition.variables
 create mode 100644 frontend/src/semantic-ui/site/views/ad.overrides
 create mode 100644 frontend/src/semantic-ui/site/views/ad.variables
 create mode 100644 frontend/src/semantic-ui/site/views/card.overrides
 create mode 100644 frontend/src/semantic-ui/site/views/card.variables
 create mode 100644 frontend/src/semantic-ui/site/views/comment.overrides
 create mode 100644 frontend/src/semantic-ui/site/views/comment.variables
 create mode 100644 frontend/src/semantic-ui/site/views/feed.overrides
 create mode 100644 frontend/src/semantic-ui/site/views/feed.variables
 create mode 100644 frontend/src/semantic-ui/site/views/item.overrides
 create mode 100644 frontend/src/semantic-ui/site/views/item.variables
 create mode 100644 frontend/src/semantic-ui/site/views/statistic.overrides
 create mode 100644 frontend/src/semantic-ui/site/views/statistic.variables
 create mode 100644 frontend/src/semantic-ui/theme.config

diff --git a/frontend/Dockerfile b/frontend/Dockerfile
index 58b9016..53443b8 100644
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -4,6 +4,6 @@ WORKDIR /opt/obs/frontend
 ADD package.json package-lock.json /opt/obs/frontend/
 RUN npm ci
 
-ADD tsconfig.json /opt/obs/frontend
+ADD tsconfig.json craco.config.js /opt/obs/frontend/
 ADD public/ /opt/obs/frontend/public/
 ADD src/ /opt/obs/frontend/src/
diff --git a/frontend/craco.config.js b/frontend/craco.config.js
new file mode 100644
index 0000000..fcf2659
--- /dev/null
+++ b/frontend/craco.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
+}
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 5d1ba23..17b2bb8 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -1181,6 +1181,61 @@
         "minimist": "^1.2.0"
       }
     },
+    "@craco/craco": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/@craco/craco/-/craco-6.1.2.tgz",
+      "integrity": "sha512-GlQZn+g+yNlaDvIL5m6mcCoBGyFDwO4kkNx3fNFf98wuldkdWyBFoQbtOFOIb4gvkTh4VntOOxtJEoZfKs7XXw==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^7.0.0",
+        "lodash": "^4.17.15",
+        "semver": "^7.3.2",
+        "webpack-merge": "^4.2.2"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "dev": true,
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
+          "dev": true
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "dev": true,
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
+          "dev": true
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "@csstools/convert-colors": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
@@ -1722,6 +1777,15 @@
         }
       }
     },
+    "@semantic-ui-react/craco-less": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@semantic-ui-react/craco-less/-/craco-less-1.2.1.tgz",
+      "integrity": "sha512-GfAwiyTOS19AWccxg5HOhOfmT6b0Q9bbTs4rRXgKURIpJvAnYdA2zdpbhQD6CeAj5CQukHAn/26fvk+ZuyNE7g==",
+      "dev": true,
+      "requires": {
+        "craco-less": "^1.15.0"
+      }
+    },
     "@semantic-ui-react/event-stack": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.2.tgz",
@@ -3936,6 +4000,12 @@
         }
       }
     },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+      "dev": true
+    },
     "clone-deep": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/clone-deep/-/clone-deep-4.0.1.tgz",
@@ -4230,6 +4300,15 @@
       "resolved": "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz",
       "integrity": "sha1-4wOogrNCzD7oylE6eZmXNNqzriw="
     },
+    "copy-anything": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.3.tgz",
+      "integrity": "sha512-GK6QUtisv4fNS+XcI7shX0Gx9ORg7QqIznyfho79JTnX1XhLiyZHfftvGiziqzRiEi/Bjhgpi+D2o7HxJFPnDQ==",
+      "dev": true,
+      "requires": {
+        "is-what": "^3.12.0"
+      }
+    },
     "copy-concurrently": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/copy-concurrently/-/copy-concurrently-1.0.5.tgz",
@@ -4291,6 +4370,16 @@
         "yaml": "^1.10.0"
       }
     },
+    "craco-less": {
+      "version": "1.17.1",
+      "resolved": "https://registry.npmjs.org/craco-less/-/craco-less-1.17.1.tgz",
+      "integrity": "sha512-T6V1aF3+eQZ22gUigHInX/i+ExPbWrnmdAhtuEXc4mOyhneDifmEzZFseq/BdRy1aUEs9s4z26jTxP+1I6P//g==",
+      "dev": true,
+      "requires": {
+        "less": "^3.11.1",
+        "less-loader": "^6.1.0"
+      }
+    },
     "create-ecdh": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz",
@@ -7523,6 +7612,13 @@
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
       "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw=="
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "immer": {
       "version": "7.0.9",
       "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.9.tgz",
@@ -7986,6 +8082,12 @@
       "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
       "integrity": "sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI="
     },
+    "is-what": {
+      "version": "3.14.1",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz",
+      "integrity": "sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==",
+      "dev": true
+    },
     "is-windows": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
@@ -8818,9 +8920,10 @@
       }
     },
     "jquery": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.5.1.tgz",
-      "integrity": "sha512-XwIBPqcMn57FxfT+Go5pzySnm4KWkT1Tv7gjrpT1srtf8Weynl6R273VJ5GjkRb51IzMp5nbaPjJXMWeju2MKg=="
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.6.0.tgz",
+      "integrity": "sha512-JVzAR/AjBvVt2BmYhxRCSYysDsPcssdmTFnzyLEts9qNwmjmu4JTAMYubEfwVOSwpQ1I1sKKFcxhZCI2buerfw==",
+      "dev": true
     },
     "js-base64": {
       "version": "2.6.4",
@@ -9010,6 +9113,35 @@
         "webpack-sources": "^1.1.0"
       }
     },
+    "less": {
+      "version": "3.13.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.13.1.tgz",
+      "integrity": "sha512-SwA1aQXGUvp+P5XdZslUOhhLnClSLIjWvJhmd+Vgib5BFIr9lMNlQwmwUNOjXThF/A0x+MCYYPeWEfeWiLRnTw==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^2.0.1",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "make-dir": "^2.1.0",
+        "mime": "^1.4.1",
+        "native-request": "^1.0.5",
+        "source-map": "~0.6.0",
+        "tslib": "^1.10.0"
+      }
+    },
+    "less-loader": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-6.2.0.tgz",
+      "integrity": "sha512-Cl5h95/Pz/PWub/tCBgT1oNMFeH1WTD33piG80jn5jr12T4XbxZcjThwNXDQ7AG649WEynuIzO4b0+2Tn9Qolg==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.2",
+        "less": "^3.11.3",
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^2.7.0"
+      }
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -9751,6 +9883,13 @@
         "to-regex": "^3.0.1"
       }
     },
+    "native-request": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/native-request/-/native-request-1.0.8.tgz",
+      "integrity": "sha512-vU2JojJVelUGp6jRcLwToPoWGxSx23z/0iX+I77J3Ht17rf2INGjrhOoQnjVo60nQd8wVsgzKkPfRXBiVdD2ag==",
+      "dev": true,
+      "optional": true
+    },
     "native-url": {
       "version": "0.2.6",
       "resolved": "https://registry.npmjs.org/native-url/-/native-url-0.2.6.tgz",
@@ -13477,10 +13616,11 @@
         "node-forge": "^0.10.0"
       }
     },
-    "semantic-ui-css": {
+    "semantic-ui-less": {
       "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.4.1.tgz",
-      "integrity": "sha512-Pkp0p9oWOxlH0kODx7qFpIRYpK1T4WJOO4lNnpNPOoWKCrYsfHqYSKgk5fHfQtnWnsAKy7nLJMW02bgDWWFZFg==",
+      "resolved": "https://registry.npmjs.org/semantic-ui-less/-/semantic-ui-less-2.4.1.tgz",
+      "integrity": "sha512-/+nhPV6If2ydCz89/SSWzYD8ualDtjh4Tk3F6cqRj2luZj1DRjJ2nM9NKqmeyLlQFNFM94wpnpKXcjxRzZh5GA==",
+      "dev": true,
       "requires": {
         "jquery": "x.*"
       }
@@ -16465,6 +16605,15 @@
         }
       }
     },
+    "webpack-merge": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-4.2.2.tgz",
+      "integrity": "sha512-TUE1UGoTX2Cd42j3krGYqObZbOD+xF7u28WB7tfUordytSjbWTIjK/8V0amkBfTYN4/pB/GIDlJZZ657BGG19g==",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.17.15"
+      }
+    },
     "webpack-sources": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-1.4.3.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index d6576e9..8d451a8 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,16 +28,15 @@
     "redux-localstorage": "^0.4.1",
     "rxjs": "^6.6.3",
     "rxjs-hooks": "^0.6.2",
-    "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.0.2",
     "typescript": "^4.1.4",
     "web-vitals": "^0.2.4"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test",
+    "eject": "craco eject"
   },
   "eslintConfig": {
     "extends": [
@@ -59,8 +58,11 @@
   },
   "proxy": "http://api:3000",
   "devDependencies": {
+    "@craco/craco": "^6.1.2",
+    "@semantic-ui-react/craco-less": "^1.2.1",
     "@types/lodash": "^4.14.168",
     "@types/react-redux": "^7.1.16",
-    "@types/react-router-dom": "^5.1.7"
+    "@types/react-router-dom": "^5.1.7",
+    "semantic-ui-less": "^2.4.1"
   }
 }
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 00c01fc..204586d 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,7 +1,8 @@
 import React from 'react'
 import {Settings} from 'luxon'
 import ReactDOM from 'react-dom'
-import 'semantic-ui-css/semantic.min.css'
+import 'semantic-ui-less/semantic.less'
+
 import './index.css'
 import App from './App'
 
diff --git a/frontend/src/pages/HomePage.js b/frontend/src/pages/HomePage.js
index 7a03cf6..feef8dc 100644
--- a/frontend/src/pages/HomePage.js
+++ b/frontend/src/pages/HomePage.js
@@ -81,7 +81,7 @@ function MostRecentTrack() {
 
   return (
     <>
-      <h2>Most recent track</h2>
+      <Header as="h2">Most recent track</Header>
       <Loader active={track === null} />
       {track === undefined ? (
         <Message>
diff --git a/frontend/src/pages/NotFoundPage.js b/frontend/src/pages/NotFoundPage.js
index 52b348b..076db5a 100644
--- a/frontend/src/pages/NotFoundPage.js
+++ b/frontend/src/pages/NotFoundPage.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Button} from 'semantic-ui-react'
+import {Button, Header} from 'semantic-ui-react'
 import {useHistory} from 'react-router-dom'
 
 import {Page} from '../components'
@@ -8,7 +8,7 @@ export default function NotFoundPage() {
   const history = useHistory()
   return (
     <Page>
-      <h2>Page not found</h2>
+      <Header as="h2">Page not found</Header>
       <p>You know what that means...</p>
       <Button onClick={history.goBack.bind(history)}>Go back</Button>
     </Page>
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index d43024c..c9b95ae 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {connect} from 'react-redux'
-import {Message, Icon, Grid, Form, Button, TextArea, Ref, Input} from 'semantic-ui-react'
+import {Message, Icon, Grid, Form, Button, TextArea, Ref, Input, Header} from 'semantic-ui-react'
 import {useForm} from 'react-hook-form'
 
 import {setLogin} from 'reducers/login'
@@ -36,7 +36,7 @@ const SettingsPage = connect((state) => ({login: state.login}), {setLogin})(func
     <Grid.Row>
     <Grid.Column width={8}>
 
-      <h2>Your profile</h2>
+      <Header as="h2">Your profile</Header>
 
       <Message info>All of this information is public.</Message>
 
@@ -85,7 +85,7 @@ function ApiKeyDialog({login}) {
 
   return (
     <>
-      <h2>Your API Key</h2>
+      <Header as="h2">Your API Key</Header>
       <p>
         Here you find your API Key, for use in the OpenBikeSensor. You can
         to copy and paste it into your sensor's configuration interface to
diff --git a/frontend/src/pages/TrackEditor.tsx b/frontend/src/pages/TrackEditor.tsx
index 300140f..ae7b36b 100644
--- a/frontend/src/pages/TrackEditor.tsx
+++ b/frontend/src/pages/TrackEditor.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import _ from 'lodash'
 import {connect} from 'react-redux'
-import {Divider, Message, Confirm, Grid, Button, Icon, Popup, Form, Ref, TextArea, Checkbox} from 'semantic-ui-react'
+import {Divider, Message, Confirm, Grid, Button, Icon, Popup, Form, Ref, TextArea, Checkbox, Header} from 'semantic-ui-react'
 import {useHistory, useParams, Link} from 'react-router-dom'
 import {concat, of, from} from 'rxjs'
 import {pluck, distinctUntilChanged, map, switchMap} from 'rxjs/operators'
@@ -22,7 +22,7 @@ function ReplaceTrackData({slug}) {
 
   return (
     <>
-      <h2>Replace track data</h2>
+      <Header as="h2">Replace track data</Header>
       {!file ? (
         <FileUploadField onSelect={setFile} />
       ) : result ? (
@@ -98,7 +98,7 @@ const TrackEditor = connect((state) => ({login: state.login}))(function TrackEdi
       <Grid centered relaxed divided>
         <Grid.Row>
           <Grid.Column width={10}>
-            <h2>Edit {track ? track.title || 'Unnamed track' : 'track'}</h2>
+            <Header as="h2">Edit {track ? track.title || 'Unnamed track' : 'track'}</Header>
             <Form loading={loading} key={track?.slug} onSubmit={onSubmit}>
               <Ref innerRef={findInput(register)}>
                 <Form.Input label="Title" name="title" defaultValue={track?.title} style={{fontSize: '120%'}} />
@@ -163,7 +163,7 @@ const TrackEditor = connect((state) => ({login: state.login}))(function TrackEdi
 
             <Divider />
 
-            <h2>Danger zone</h2>
+            <Header as="h2">Danger zone</Header>
             <p>
               You can remove this track from your account and the portal if you like. However, if at any point you have
               published this track, we cannot guarantee that there are no versions of it in the public data repository,
diff --git a/frontend/src/semantic-ui/site/collections/breadcrumb.overrides b/frontend/src/semantic-ui/site/collections/breadcrumb.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/breadcrumb.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/breadcrumb.variables b/frontend/src/semantic-ui/site/collections/breadcrumb.variables
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/breadcrumb.variables
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/form.overrides b/frontend/src/semantic-ui/site/collections/form.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/form.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/form.variables b/frontend/src/semantic-ui/site/collections/form.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/form.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/grid.overrides b/frontend/src/semantic-ui/site/collections/grid.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/grid.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/grid.variables b/frontend/src/semantic-ui/site/collections/grid.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/grid.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/menu.overrides b/frontend/src/semantic-ui/site/collections/menu.overrides
new file mode 100644
index 0000000..c172e5f
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/menu.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
\ No newline at end of file
diff --git a/frontend/src/semantic-ui/site/collections/menu.variables b/frontend/src/semantic-ui/site/collections/menu.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/menu.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/message.overrides b/frontend/src/semantic-ui/site/collections/message.overrides
new file mode 100644
index 0000000..96091c3
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/message.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/message.variables b/frontend/src/semantic-ui/site/collections/message.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/message.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/table.overrides b/frontend/src/semantic-ui/site/collections/table.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/table.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/collections/table.variables b/frontend/src/semantic-ui/site/collections/table.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/collections/table.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/button.overrides b/frontend/src/semantic-ui/site/elements/button.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/button.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/button.variables b/frontend/src/semantic-ui/site/elements/button.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/button.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/container.overrides b/frontend/src/semantic-ui/site/elements/container.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/container.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/container.variables b/frontend/src/semantic-ui/site/elements/container.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/container.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/divider.overrides b/frontend/src/semantic-ui/site/elements/divider.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/divider.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/divider.variables b/frontend/src/semantic-ui/site/elements/divider.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/divider.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/flag.overrides b/frontend/src/semantic-ui/site/elements/flag.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/flag.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/flag.variables b/frontend/src/semantic-ui/site/elements/flag.variables
new file mode 100644
index 0000000..e3e125d
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/flag.variables
@@ -0,0 +1,3 @@
+/*-------------------
+   Flag Variables
+--------------------*/
diff --git a/frontend/src/semantic-ui/site/elements/header.overrides b/frontend/src/semantic-ui/site/elements/header.overrides
new file mode 100644
index 0000000..b3adb23
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/header.overrides
@@ -0,0 +1,34 @@
+/*******************************
+         Site Overrides
+*******************************/
+
+h1.ui.header {
+  font-family: "Open Sans Condensed";
+  line-height: 35pt;
+  font-size: 30pt;
+  color: @obsColorB4;
+}
+
+h2.ui.header {
+  font-family: "Open Sans";
+  font-weight: 300;
+  line-height: 25pt;
+  font-size: 20pt;
+  color: @obsColorG1;
+}
+
+h3.ui.header {
+  font-family: "Open Sans";
+  font-weight: normal;
+  line-height: 18pt;
+  font-size: 15pt;
+  color: @obsColorB4;
+}
+
+h4.ui.header {
+  font-family: "Open Sans";
+  font-weight: bold;
+  line-height: 15pt;
+  font-size: 15pt;
+  color: @obsColorB1;
+}
diff --git a/frontend/src/semantic-ui/site/elements/header.variables b/frontend/src/semantic-ui/site/elements/header.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/header.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/icon.overrides b/frontend/src/semantic-ui/site/elements/icon.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/icon.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/icon.variables b/frontend/src/semantic-ui/site/elements/icon.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/icon.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/image.overrides b/frontend/src/semantic-ui/site/elements/image.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/image.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/image.variables b/frontend/src/semantic-ui/site/elements/image.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/image.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/input.overrides b/frontend/src/semantic-ui/site/elements/input.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/input.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/input.variables b/frontend/src/semantic-ui/site/elements/input.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/input.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/label.overrides b/frontend/src/semantic-ui/site/elements/label.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/label.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/label.variables b/frontend/src/semantic-ui/site/elements/label.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/label.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/list.overrides b/frontend/src/semantic-ui/site/elements/list.overrides
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/list.overrides
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/list.variables b/frontend/src/semantic-ui/site/elements/list.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/list.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/loader.overrides b/frontend/src/semantic-ui/site/elements/loader.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/loader.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/loader.variables b/frontend/src/semantic-ui/site/elements/loader.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/loader.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/rail.overrides b/frontend/src/semantic-ui/site/elements/rail.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/rail.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/rail.variables b/frontend/src/semantic-ui/site/elements/rail.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/rail.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/reveal.overrides b/frontend/src/semantic-ui/site/elements/reveal.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/reveal.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/reveal.variables b/frontend/src/semantic-ui/site/elements/reveal.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/reveal.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/segment.overrides b/frontend/src/semantic-ui/site/elements/segment.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/segment.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/segment.variables b/frontend/src/semantic-ui/site/elements/segment.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/segment.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/step.overrides b/frontend/src/semantic-ui/site/elements/step.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/step.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/elements/step.variables b/frontend/src/semantic-ui/site/elements/step.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/elements/step.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/globals/reset.overrides b/frontend/src/semantic-ui/site/globals/reset.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/globals/reset.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/globals/reset.variables b/frontend/src/semantic-ui/site/globals/reset.variables
new file mode 100644
index 0000000..cd95544
--- /dev/null
+++ b/frontend/src/semantic-ui/site/globals/reset.variables
@@ -0,0 +1,3 @@
+/*******************************
+     User Global Variables
+*******************************/
diff --git a/frontend/src/semantic-ui/site/globals/site.overrides b/frontend/src/semantic-ui/site/globals/site.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/globals/site.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/globals/site.variables b/frontend/src/semantic-ui/site/globals/site.variables
new file mode 100644
index 0000000..1e5c820
--- /dev/null
+++ b/frontend/src/semantic-ui/site/globals/site.variables
@@ -0,0 +1,21 @@
+/*******************************
+     User Global Variables
+*******************************/
+
+@importGoogleFonts : false;
+@fontName          : 'Open Sans';
+
+@obsColorB4: #114594;
+@obsColorG1: #76520E;
+@obsColorW: #FFFFFF;
+@obsColorB1: #122037;
+@obsColorG6: #EFB509;
+@obsColorS: #000000;
+
+@blue: #80A6CD;
+@green: #78CB5B;
+@orange: #D26911;
+@black: #333333;
+
+@primaryColor: @obsColorB4;
+@secondaryColor: @obsColorG1;
diff --git a/frontend/src/semantic-ui/site/modules/accordion.overrides b/frontend/src/semantic-ui/site/modules/accordion.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/accordion.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/accordion.variables b/frontend/src/semantic-ui/site/modules/accordion.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/accordion.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/chatroom.overrides b/frontend/src/semantic-ui/site/modules/chatroom.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/chatroom.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/chatroom.variables b/frontend/src/semantic-ui/site/modules/chatroom.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/chatroom.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/checkbox.overrides b/frontend/src/semantic-ui/site/modules/checkbox.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/checkbox.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/checkbox.variables b/frontend/src/semantic-ui/site/modules/checkbox.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/checkbox.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/dimmer.overrides b/frontend/src/semantic-ui/site/modules/dimmer.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/dimmer.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/dimmer.variables b/frontend/src/semantic-ui/site/modules/dimmer.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/dimmer.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/dropdown.overrides b/frontend/src/semantic-ui/site/modules/dropdown.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/dropdown.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/dropdown.variables b/frontend/src/semantic-ui/site/modules/dropdown.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/dropdown.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/embed.overrides b/frontend/src/semantic-ui/site/modules/embed.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/embed.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/embed.variables b/frontend/src/semantic-ui/site/modules/embed.variables
new file mode 100644
index 0000000..e69de29
diff --git a/frontend/src/semantic-ui/site/modules/modal.overrides b/frontend/src/semantic-ui/site/modules/modal.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/modal.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/modal.variables b/frontend/src/semantic-ui/site/modules/modal.variables
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/modal.variables
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/nag.overrides b/frontend/src/semantic-ui/site/modules/nag.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/nag.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/nag.variables b/frontend/src/semantic-ui/site/modules/nag.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/nag.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/popup.overrides b/frontend/src/semantic-ui/site/modules/popup.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/popup.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/popup.variables b/frontend/src/semantic-ui/site/modules/popup.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/popup.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/progress.overrides b/frontend/src/semantic-ui/site/modules/progress.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/progress.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/progress.variables b/frontend/src/semantic-ui/site/modules/progress.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/progress.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/rating.overrides b/frontend/src/semantic-ui/site/modules/rating.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/rating.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/rating.variables b/frontend/src/semantic-ui/site/modules/rating.variables
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/rating.variables
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/search.overrides b/frontend/src/semantic-ui/site/modules/search.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/search.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/search.variables b/frontend/src/semantic-ui/site/modules/search.variables
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/search.variables
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/shape.overrides b/frontend/src/semantic-ui/site/modules/shape.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/shape.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/shape.variables b/frontend/src/semantic-ui/site/modules/shape.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/shape.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/sidebar.overrides b/frontend/src/semantic-ui/site/modules/sidebar.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/sidebar.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/sidebar.variables b/frontend/src/semantic-ui/site/modules/sidebar.variables
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/sidebar.variables
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/sticky.overrides b/frontend/src/semantic-ui/site/modules/sticky.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/sticky.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/sticky.variables b/frontend/src/semantic-ui/site/modules/sticky.variables
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/sticky.variables
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/tab.overrides b/frontend/src/semantic-ui/site/modules/tab.overrides
new file mode 100644
index 0000000..660e664
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/tab.overrides
@@ -0,0 +1,3 @@
+/*******************************
+        User Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/tab.variables b/frontend/src/semantic-ui/site/modules/tab.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/tab.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/transition.overrides b/frontend/src/semantic-ui/site/modules/transition.overrides
new file mode 100644
index 0000000..cba59ef
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/transition.overrides
@@ -0,0 +1,3 @@
+/*******************************
+         Site Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/modules/transition.variables b/frontend/src/semantic-ui/site/modules/transition.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/modules/transition.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/ad.overrides b/frontend/src/semantic-ui/site/views/ad.overrides
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/ad.overrides
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/ad.variables b/frontend/src/semantic-ui/site/views/ad.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/ad.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/card.overrides b/frontend/src/semantic-ui/site/views/card.overrides
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/card.overrides
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/card.variables b/frontend/src/semantic-ui/site/views/card.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/card.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/comment.overrides b/frontend/src/semantic-ui/site/views/comment.overrides
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/comment.overrides
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/comment.variables b/frontend/src/semantic-ui/site/views/comment.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/comment.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/feed.overrides b/frontend/src/semantic-ui/site/views/feed.overrides
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/feed.overrides
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/feed.variables b/frontend/src/semantic-ui/site/views/feed.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/feed.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/item.overrides b/frontend/src/semantic-ui/site/views/item.overrides
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/item.overrides
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/item.variables b/frontend/src/semantic-ui/site/views/item.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/item.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/statistic.overrides b/frontend/src/semantic-ui/site/views/statistic.overrides
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/statistic.overrides
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/site/views/statistic.variables b/frontend/src/semantic-ui/site/views/statistic.variables
new file mode 100644
index 0000000..6f085f9
--- /dev/null
+++ b/frontend/src/semantic-ui/site/views/statistic.variables
@@ -0,0 +1,3 @@
+/*******************************
+    User Variable Overrides
+*******************************/
diff --git a/frontend/src/semantic-ui/theme.config b/frontend/src/semantic-ui/theme.config
new file mode 100644
index 0000000..16caa56
--- /dev/null
+++ b/frontend/src/semantic-ui/theme.config
@@ -0,0 +1,94 @@
+/*
+
+████████╗██╗  ██╗███████╗███╗   ███╗███████╗███████╗
+╚══██╔══╝██║  ██║██╔════╝████╗ ████║██╔════╝██╔════╝
+   ██║   ███████║█████╗  ██╔████╔██║█████╗  ███████╗
+   ██║   ██╔══██║██╔══╝  ██║╚██╔╝██║██╔══╝  ╚════██║
+   ██║   ██║  ██║███████╗██║ ╚═╝ ██║███████╗███████║
+   ╚═╝   ╚═╝  ╚═╝╚══════╝╚═╝     ╚═╝╚══════╝╚══════╝
+
+*/
+
+/*******************************
+        Theme Selection
+*******************************/
+
+/* To override a theme for an individual element
+   specify theme name below
+*/
+
+/* Global */
+@site        : 'default';
+@reset       : 'default';
+
+/* Elements */
+@button      : 'default';
+@container   : 'default';
+@divider     : 'default';
+@flag        : 'default';
+@header      : 'default';
+@icon        : 'default';
+@image       : 'default';
+@input       : 'default';
+@label       : 'default';
+@list        : 'default';
+@loader      : 'default';
+@placeholder : 'default';
+@rail        : 'default';
+@reveal      : 'default';
+@segment     : 'default';
+@step        : 'default';
+
+/* Collections */
+@breadcrumb  : 'default';
+@form        : 'default';
+@grid        : 'default';
+@menu        : 'default';
+@message     : 'default';
+@table       : 'default';
+
+/* Modules */
+@accordion   : 'default';
+@checkbox    : 'default';
+@dimmer      : 'default';
+@dropdown    : 'default';
+@embed       : 'default';
+@modal       : 'default';
+@nag         : 'default';
+@popup       : 'default';
+@progress    : 'default';
+@rating      : 'default';
+@search      : 'default';
+@shape       : 'default';
+@sidebar     : 'default';
+@sticky      : 'default';
+@tab         : 'default';
+@transition  : 'default';
+
+/* Views */
+@ad          : 'default';
+@card        : 'default';
+@comment     : 'default';
+@feed        : 'default';
+@item        : 'default';
+@statistic   : 'default';
+
+/*******************************
+            Folders
+*******************************/
+
+/* Path to theme packages */
+@themesFolder : 'themes';
+
+/* Path to site override folder */
+@siteFolder  : '../../src/semantic-ui/site';
+
+
+/*******************************
+         Import Theme
+*******************************/
+
+@import (multiple) "~semantic-ui-less/theme.less";
+@fontPath : '../../../themes/@{theme}/assets/fonts';
+
+/* End Config */