💄 UI structure redesign

frontend/resources/styles/common/refactor/basic-rules.scss

@@ -187,3 +187,57 @@
     }
   }
 }
+
+.menu-dropdown {
+  @include menuShadow;
+  display: flex;
+  flex-direction: column;
+  gap: $s-4;
+  width: $s-192;
+  padding: $s-4;
+  border-radius: $br-8;
+  background-color: var(--menu-background-color);
+  z-index: $z-index-10;
+}
+
+.menu-item {
+  @include titleTipography;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $s-28;
+  width: 100%;
+  padding: $s-6;
+  border-radius: $br-8;
+  cursor: pointer;
+  &:hover {
+    background-color: var(--menu-background-color-hover);
+  }
+}
+
+.shortcut {
+  @include flexCenter;
+  gap: $s-2;
+  color: var(--menu-shortcut-foreground-color);
+}
+
+.shortcut-key {
+  @include titleTipography;
+  @include flexCenter;
+  height: $s-20;
+  padding: $s-2 $s-6;
+  border-radius: $br-6;
+  background-color: var(--menu-shortcut-background-color);
+}
+
+.user-icon {
+  @include flexCenter;
+  @include titleTipography;
+  height: $s-24;
+  width: $s-24;
+  border-radius: $br-circle;
+  img {
+    border-radius: $br-circle;
+    border: $s-2 solid var(--user-count-foreground-color);
+  }
+}

frontend/resources/styles/common/refactor/color-defs.scss

@@ -17,6 +17,11 @@
   --green-30: rgba(145, 250, 219, 0.3);
   --lilac: #bb97d8;
   --strong-green: #00d1b8;
+  // NOTIFICATION
+  --dark-ok-color: var(--strong-green);
+  --dark-warning-color: #ff9b49;
+  --dark-pending-color: var(--lilac);
+  --dark-error-color: #ff4986;
 
   // LIGHT
   --light-gray-1: #fff;
@@ -30,4 +35,13 @@
   --purple-30: rgba(105, 17, 212, 0.2);
   --blue: #1345aa;
   --strong-purple: #8c33eb;
+
+  // NOTIFICATION WILL CHANGE
+  --light-ok-color: var(--strong-green);
+  --light-warning-color: #ff9b49;
+  --light-pending-color: var(--lilac);
+  --light-error-color: #ff4986;
+
+  //GENERIC
+  --color-canvas: #e8e9ea;
 }

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -7,6 +7,9 @@
 
 .light,
 .default {
+  --canvas-background-color: var(--color-background-primary);
+  --canvas-fill-color: var(--canvas-color);
+
   --scrollbar-background-color: var(--color-foreground-secondary);
   --panel-background-color: var(--color-background-primary);
   --panel-title-background-color: var(--color-background-secondary);
@@ -175,4 +178,17 @@
 
   --empty-message-background-color: var(--color-background-tertiary);
   --empty-message-foreground-color: var(--color-foreground-secondary);
+
+  --status-ok-background-color: var(--ok-color);
+  --status-warning-background-color: var(--warning-color);
+  --status-pending-background-color: var(--pending-color);
+  --status-error-background-color: var(--error-color);
+  --status-icon-foreground-color: var(--color-background-primary);
+
+  --user-count-background-color: var(--color-background-secondary);
+  --user-count-foreground-color: var(--color-accent-primary);
+
+  --modal-background-color: var(--color-background-quaternary);
+  --modal-foreground-color: var(--color-foreground-primary);
+  --modal-foreground-color-secondary: var(--color-foreground-secondary);
 }

frontend/resources/styles/common/refactor/mixins.scss

@@ -52,3 +52,12 @@
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
+
+@keyframes spin-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}

frontend/resources/styles/common/refactor/shadows.scss

@@ -3,3 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
+
+@mixin menuShadow {
+  box-shadow: 0px 0px $s-12 0px var(--menu-shadow-color);
+}

frontend/resources/styles/common/refactor/spacing.scss

@@ -34,10 +34,14 @@ $s-84: calc(var(--s-4) * 21);
 $s-92: calc(var(--s-4) * 23);
 $s-96: calc(var(--s-4) * 24);
 $s-104: calc(var(--s-4) * 25);
+$s-116: calc(var(--s-4) * 29);
 $s-120: calc(var(--s-4) * 30);
 $s-136: calc(var(--s-4) * 34);
+$s-148: calc(var(--s-4) * 37);
 $s-152: calc(var(--s-4) * 38);
 $s-160: calc(var(--s-4) * 40);
+$s-168: calc(var(--s-4) * 42);
+$s-184: calc(var(--s-4) * 46);
 $s-192: calc(var(--s-4) * 48);
 $s-196: calc(var(--s-4) * 49);
 $s-200: calc(var(--s-4) * 50);
@@ -46,13 +50,16 @@ $s-240: calc(var(--s-4) * 60);
 $s-248: calc(var(--s-4) * 62);
 $s-256: calc(var(--s-4) * 64);
 $s-272: calc(var(--s-4) * 68);
+$s-276: calc(var(--s-4) * 69);
 $s-280: calc(var(--s-4) * 70);
+$s-284: calc(var(--s-4) * 71);
 $s-300: calc(var(--s-4) * 75);
 $s-320: calc(var(--s-4) * 80);
 $s-348: calc(var(--s-4) * 87);
 $s-380: calc(var(--s-4) * 95);
 $s-400: calc(var(--s-4) * 100);
 $s-480: calc(var(--s-4) * 120);
+$s-500: calc(var(--s-4) * 125);
 $s-520: calc(var(--s-4) * 130);
 $s-664: calc(var(--s-4) * 166);
 $s-712: calc(var(--s-4) * 178);

frontend/resources/styles/common/refactor/themes/default-theme.scss

@@ -17,4 +17,9 @@
   --color-accent-secondary: var(--lilac);
   --color-accent-tertiary: var(--strong-green);
   --overlay-color: rgba(0, 0, 0, 0.4);
+  --ok-color: var(--dark-ok-color);
+  --warning-color: var(--dark-warning-color);
+  --pending-color: var(--dark-pending-color);
+  --error-color: var(--dark-error-color);
+  --canvas-color: var(--color-canvas);
 }

frontend/resources/styles/common/refactor/themes/light-theme.scss

@@ -16,4 +16,9 @@
   --color-accent-primary-muted: var(--purple-30);
   --color-accent-secondary: var(--blue);
   --color-accent-tertiary: var(--strong-purple);
+  --ok-color: var(--light-ok-color);
+  --warning-color: var(--light-warning-color);
+  --pending-color: var(--light-pending-color);
+  --error-color: var(--light-error-color);
+  --canvas-color: var(--color-canvas);
 }

frontend/resources/styles/common/refactor/z-index.scss

@@ -4,9 +4,10 @@
 //
 // Copyright (c) KALEIDOS INC
 
-$z-index-1: 1;
-$z-index-2: 2;
-$z-index-4: 4;
+$z-index-1: 1; // floating elements
+$z-index-2: 2; //sidebars
+$z-index-3: 3; // context menu
+$z-index-4: 4; // modal
 $z-index-10: 10;
 $z-index-20: 20;
 $z-index-modal: 30; // When refactor finish we can reduce this number,