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/features/modals/Modals.module.scss

@@ -1,83 +1,155 @@
-@use '../../styles/variables' as *;
+@use '../../styles/main' as *;
 
 //////////////////////////////////// main
 
-.modalBody,
-.modalBodyDisabled {
+.modalBody {
   font-weight: 400;
 
   .notes {
     font-weight: 400;
     color: $light-bg;
+    display: grid;
+    place-items: center;
+    height: 4em;
   }
 
-  .separator {
-    border: 1px solid $light-bg-transparent;
-    width: 50%;
-    margin: 0.5em auto;
+  .modalFields {
+    min-height: 45vh;
+    max-height: 45vh;
+    overflow-y: auto;
+    scrollbar-color: rgba($light-bg, 0.35) rgba($light-bg, 0.15);
+    padding-right: 6px;
+
+    label {
+      //font-weight: 400;
+      font-size: 0.8em;
+    }
+
+    .inlineAlias,
+    .inlineAliasPlaceholder {
+      display: grid;
+      grid-template-columns: 20% 1fr 1em 1.5em 1.5em;
+      gap: 8px;
+      align-items: center;
+    }
+    .error {
+      font-size: 0.8em;
+      color: $error-red;
+    }
+
+    .inlineAliasPlaceholder {
+      grid-template-columns: 20% 1fr 4em;
+
+      .placeholder {
+        background: $light-text;
+        width: 100%;
+        height: 24px;
+      }
+    }
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    background: rgba($light-bg, 0.15);
+    border-radius: 4px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    background: rgba($light-bg, 0.35);
+    border-radius: 4px;
+  }
+
+  /* Handle on hover */
+  ::-webkit-scrollbar-thumb:hover {
+    background: rgba($light-bg, 0.45);
   }
 
   .modalInline {
     display: flex;
     gap: 2em;
     align-items: center;
+    padding: 0 0.5em 0.5em 0.5em;
+  }
+
+  .spacedEntry {
+    padding: 0 0.5em 0.5em 0.5em;
+  }
+
+  .pin {
+    display: flex;
+    gap: 0.5em;
+    border-radius: 50%;
+
+    input {
+      border-radius: 50%;
+    }
   }
 
   .submitContainer {
+    margin-top: 2em;
     display: flex;
-    flex-direction: row-reverse;
-
-    button {
-      margin-top: 1em;
-    }
+    justify-content: flex-end;
+    gap: 1em;
   }
 
 }
 
-.modalBody > *,
-.modalBodyDisabled > * {
+.modalBody > * {
   margin-top: 0.5em;
 }
 
 //////////////////////////////////// notes
 p {
   &.notes {
-  text-align: center;
-  border-color: $light-bg-transparent;
-  border-width: 0 2px;
-  font-size: 0.9em;
-  margin-bottom: 1em;
+    text-align: center;
+    border-color: $light-bg-transparent;
+    border-width: 0 2px;
+    font-size: 0.9em;
+    margin-bottom: 1em;
   }
 }
 
 span {
   &.notes {
-    font-size: 0.8em;
+    font-size: 0.9em;
     padding-left: 0.4em;
   }
 }
 
-.highNotes {
-  background-color: $light-text;
+.blockNotes {
+  background-color: $bg-gray;
   margin: 1em 0;
-  padding: 0.3em;
-  font-size: 0.9em;
+  padding: 0.5em;
+  font-size: 0.8em;
+  border-radius: 2px;
 
   table {
-    background-color: $light-text;
+    background-color: #fff;
+    border-left: 4px solid lighten($ontime-pink, 5%);
     width: 100%;
-    margin-top: 0.3em;
+    margin: 0.5em 0;
+    border-radius: 2px;
+
+    :first-child {
+      padding-left: 1em;
+    }
+
+    td {
+      user-select: text;
+    }
   }
 
   .noteItem {
     user-select: text;
-    font-weight: 700;
+    font-weight: 600;
     padding-right: 2em;
   }
 
   .flexNote {
     user-select: text;
     padding-bottom: 0.3em;
+    display: block;
   }
 
   .emNote {
@@ -87,13 +159,18 @@ span {
   }
 }
 
-// Define style for a link
-a {
-  &::after {
-    content: '  \2197';
-    color: $accent;
-  }
-  &:hover {
-    color: $accent;
-  }
+.labelNote {
+  color: $light-bg;
+  padding-right: 1em;
 }
+
+.labelNoteInline {
+  color: $light-bg;
+}
+
+.inlineFlex {
+  display: flex;
+  gap: 1em;
+  align-items: center;
+  margin-bottom: 1em;
+}