Fix(UI): Reskin with milder colour theme and improved spacing in layout..

static/css/components/button.css

@@ -6,15 +6,15 @@ button, .button-submit, input[type="submit"] {
     border-radius: 2vh;
     padding: 1vh 2vh 1vh 2vh;
     margin: 0.5vh;
-    background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark);
-    border-color: var(--c_purple_dark);
+    background-color: var(--background-colour);
+    color: var(--primary-colour);
+    border-color: var(--border-colour);
 }
 
 button.navContactUs {
-    border: 4px solid var(--c_purple_dark);
+    border: 4px solid var(--border-colour);
     background-color: var(--c_purple_pastel);
-    color: var(--c_purple_dark) !important;
+    /* color: var(--c_purple_dark) !important; */
     border-radius: 2vh;
     width: 180px !important;
 }

static/css/components/overlay.css

@@ -10,7 +10,7 @@
     right: 0;
     width: 100px;
     /* height: 50%; */ 
-    background: var(--c_purple_pastel);
+    background: var(--background-colour);
     justify-content: right;
     align-items: right;
     align-self: right;
@@ -33,7 +33,7 @@
     max-height: 80%;
 }
 .hamburger {
-    border: 2px solid var(--c_purple_dark);
+    border: 2px solid var(--border-colour);
     border-radius: 4px;
 }
 .hamburger:first-child {
@@ -52,14 +52,14 @@
     justify-content: center;
     text-align: center;
     width: 100%;
-    color: var(--c_purple_dark);
+    /* color: var(--text-colour); */
     font-weight: bold;
     font-size: 18px;
     /* height: 18px; */
 }
 .hamburger > :hover {
-    background-color: var(--c_purple_light);
-    color: var(--c_purple_dark);
+    color: var(--background-colour);
+    background-color: var(--primary-colour);
 }
 .hamburger > * > * {
     width: 100%;
@@ -73,10 +73,6 @@
     padding-bottom: 4.5px;
 }
 
-#overlayHamburger .row *:hover {
-    text-decoration: underline;
-}
-
 /* Confirm overlay */
 #overlayConfirm {
     position: absolute;

static/css/components/table.css

@@ -9,7 +9,7 @@ thead, tbody {
 }
 
 th {
-    background-color: var(--c_purple_pastel);
+    background-color: transparent;
 }
 td {
     font-size: min(12px, calc(1vh * 3));
@@ -19,7 +19,7 @@ th, td {
     min-width: fit-content;
 }
 tr:not(:last-child) > td {
-    border-bottom: 1px dashed var(--c_purple_dark);
+    border-bottom: 1px dashed var(--border-colour);
 }
 td > table > tbody > tr > td {
     border: none !important;
@@ -28,17 +28,18 @@ th.collapsed, td.collapsed {
     display: table-cell !important;
 }
 td.dirty {
-    background-color: var(--c_purple_dark);
+    background-color: var(--primary-colour);
 }
 td:not(.dirty) {
     /* color: var(--c_purple_dark); */
-    background-color: var(--c_purple_pastel);
+    background-color: transparent;
 }
 
 tr {
     min-height: 1px;
-    border-bottom: 1px solid var(--c_purple_dark);
-    border-top: 1px solid var(--c_purple_dark);
+    border-bottom: 1px solid;
+    border-top: 1px solid;
+    border-color: var(--border-colour);
     background-color: transparent;
 }
 
@@ -54,11 +55,11 @@ table button {
 }
 
 table button.active {
-    background-color: var(--c_purple_pastel);
+    background-color: var(--background-colour);
 }
 
 tr.delete, tr.delete > td {
-    background-color: red;
+    background-color: var(--c-red);
 }
 
 table div {