Add visitor settings, rework logged-in dropdown (#2514)

* Add visitor settings, rework logged-in dropdown

* Make user dropdown P2P switch functional

* Fix lint

* Fix unnecessary notification when user logs out

* Simplify visitor settings code and remove unnecessary icons

* Catch parsing errors and reindent menu styles

5 files changed, 49 insertions, 2 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index 560414e90..046368c8b 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -24,6 +24,7 @@ body {
   // now beware node-sass requires interpolation
   // for css custom properties #{$var}
   --mainColor: #{$orange-color};
+  --mainColorLighter: #{$orange-color-lighter};
   --mainHoverColor: #{$orange-hover-color};
   --mainBackgroundColor: #{$bg-color};
   --mainForegroundColor: #{$fg-color};
diff --git a/client/src/sass/bootstrap.scss b/client/src/sass/bootstrap.scss
index 6cced995e..bb7b21274 100644
--- a/client/src/sass/bootstrap.scss
+++ b/client/src/sass/bootstrap.scss
@@ -13,6 +13,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
   flex: auto;
 }
 
+.c-hand {
+  cursor: pointer;
+}
+
 @keyframes spin {
   from {
     transform: scale(1) rotate(0deg);
@@ -41,6 +45,10 @@ $icon-font-path: '~@neos21/bootstrap3-glyphicons/assets/fonts/';
       background-color: var(--mainHoverColor);
       opacity: .9;
     }
+    
+    &::after {
+      display: none;
+    }
   }
 
   button {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index 4766e4490..bafc82d7d 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -72,6 +72,14 @@
   }
 }
 
+@mixin fill-svg-color ($color) {
+  ::ng-deep svg {
+    path {
+      fill: $color;
+    }
+  }
+}
+
 @mixin button-focus-visible-shadow($color) {
   &.focus-visible {
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px $color;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 4ef8e17b9..91229cee0 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -14,6 +14,7 @@ $grey-foreground-color: #585858;
 $grey-foreground-hover-color: #303030;
 
 $orange-color: #F1680D;
+$orange-color-lighter: rgb(233, 159, 110);
 $orange-hover-color: #F97D46;
 
 $cyan-color: hsl(187, 77%, 34%);
@@ -74,6 +75,7 @@ $activated-action-button-color: black;
 // to be warned of non-existing variables
 $variables: (
   --mainColor: var(--mainColor),
+  --mainColorLighter: var(--mainColorLighter),
   --mainHoverColor: var(--mainHoverColor),
   --mainBackgroundColor: var(--mainBackgroundColor),
   --mainForegroundColor: var(--mainForegroundColor),
@@ -112,8 +114,9 @@ $zindex: (
   tooltip      : 14000,
   loadbar      : 15000,
   modal        : 16000,
-  notification : 17000,
-  hotkeys      : 18000
+  help-popover : 17000,
+  notification : 18000,
+  hotkeys      : 19000
 );
 
 @function z($label) {
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index 4d2d6cb67..e2c453228 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -274,6 +274,15 @@ p-multiselect {
     //  left: -2px !important;
     //}
   }
+
+  .ui-multiselect-panel .ui-multiselect-items .ui-multiselect-item.ui-state-highlight {
+    background-color: var(--mainColorLighter);
+  }
+
+  .ui-inputtext:enabled:focus:not(.ui-state-error) {
+    border-color: var(--mainColorLighter) !important;
+    box-shadow: none;
+  }
 }
 
 // PrimeNG calendar tweaks
@@ -379,6 +388,24 @@ p-inputswitch {
   .ui-inputswitch-checked .ui-inputswitch-slider {
     background-color: var(--mainColor) !important;
   }
+
+  &.small {
+    height: 20px;
+
+    .ui-inputswitch {
+      width: 2.5em !important;
+      height: 1.45em !important;
+
+      .ui-inputswitch-slider::before {
+        height: 1em !important;
+        width: 1em !important;
+      }
+    }
+
+    .ui-inputswitch-checked .ui-inputswitch-slider::before {
+      transform: translateX(1em) !important;
+    }
+  }
 }
 
 p-toast {