Feat/navigate (#81)

* feat/navigate upgrade react router
* feat/navigate migrate to react router 6
* feat/navigate style modal
* feat/navigate create endpoints for app settings
* feat/navigate protect editor with pin
* feat/navigate apply dynamic routing draft
* feat/navigate upgrade relevant packages
* feat/navigate restructure directory and add tests
* feat/navigate test aliases validation
* feat/navigate validate aliases before sending
* feat/navigate create data endpoint
* feat/navigate config: prettier
* feat/navigate invalidate empty strings
* feat/navigate create endpoints
* feat/navigate parse on import
* feat/navigate navigate to alias
* feat/navigate user help and sample data
* feat/navigate refact aliases modal
* feat/navigate refact settings style
* feat/navigate update sample db
* feat/navigate link is relative to hostname
* feat/navigate navigate to first match
* feat/navigate update readme and version bump
* feat/navigate config: create shared module
* feat/navigate config: cheat module install
* feat/navigate fix tests
* feat/navigate run tests in pull request
* Update ontime_cy.yml

client/src/styles/_main.scss

@@ -1,4 +1,22 @@
-//////////////////////////////////// general app style
+//////////////////////////////////// general app colours
+
+$ontime-accent: #4bffabcc;
+$ontime-pink: #ff7597;
+$ontime-roll: #2b6cb0;
+
+$notes-color: #d69e2e;
+
+$header-gray: #ccc;
+$label-gray: #aaa;
+$bg-gray: #f4f4f8;
+
+$light-bg: #2b6cb0;
+$light-bg-transparent: #2b6cb055;
+$light-text: #2b6cb022;
+
+$error-red: #E53E3E;
+
+//////////////////////////////////// general app element overriders
 
 // no decoration on lists
 ul {
@@ -8,4 +26,29 @@ ul {
 // no resizing on text areas
 textarea {
   resize: none !important;
+}
+
+// Define style for a link
+a {
+  &::after {
+    content: '  \2197';
+    color: $ontime-pink;
+  }
+  &:hover {
+    color: $ontime-pink;
+  }
+}
+
+// horizontal separator
+.hSeparator {
+  width: 100%;
+  border-bottom: 1px solid $light-text;
+  margin: 1em auto;
+  display: flex;
+  align-items: center;
+}
+
+// inline vertical separator
+.vSpan {
+  margin: 0 0.5em;
 }

client/src/styles/_mixins.scss

@@ -0,0 +1,9 @@
+//////////////////////////////////// general app elements
+
+@mixin container-bg {
+  background-color: rgba(0, 0, 0, 0.13);
+  border-radius: 2px;
+  padding: 0 0.5em;
+  margin: 0 0.5em;
+}
+

client/src/styles/_variables.scss

@@ -1,4 +0,0 @@
-$light-bg: #2b6cb0;
-$light-bg-transparent: #2b6cb055;
-$light-text: #2b6cb022;
-$accent: #ff7597;