4 files changed, 15 insertions, 15 deletions

diff --git a/client/src/sass/application.scss b/client/src/sass/application.scss
index f4c3d86a8..0cc394c8e 100644
--- a/client/src/sass/application.scss
+++ b/client/src/sass/application.scss
@@ -39,7 +39,7 @@ body {
   --menuBackgroundColor: #{$menu-background};
   --menuForegroundColor: #{$menu-color};
 
-  --submenuColor: #{$sub-menu-color};
+  --submenuBackgroundColor: #{$sub-menu-background-color};
   --channelBackgroundColor: #{$channel-background-color};
 
   --inputForegroundColor: #{$input-foreground-color};
@@ -156,7 +156,7 @@ my-input-toggle-hidden ::ng-deep input {
   }
 
   .sub-menu {
-    background-color: pvar(--submenuColor);
+    background-color: pvar(--submenuBackgroundColor);
     width: 100%;
     display: flex;
     align-items: center;
@@ -267,7 +267,7 @@ my-input-toggle-hidden ::ng-deep input {
     opacity: 0.6;
 
     &.active {
-      background-color: pvar(--submenuColor);
+      background-color: pvar(--submenuBackgroundColor);
     }
 
     &.active, &:hover, &:active, &:focus {
diff --git a/client/src/sass/include/_mixins.scss b/client/src/sass/include/_mixins.scss
index affffc4cc..b3190a4e3 100644
--- a/client/src/sass/include/_mixins.scss
+++ b/client/src/sass/include/_mixins.scss
@@ -696,7 +696,7 @@
   padding: 0.75rem 1rem;
   margin-bottom: 1rem;
   list-style: none;
-  background-color: pvar(--submenuColor);
+  background-color: pvar(--submenuBackgroundColor);
   border-radius: 0.25rem;
 
   .breadcrumb-item {
@@ -751,7 +751,7 @@
     & > a,
     & > div {
       padding: 20px;
-      background: pvar(--submenuColor);
+      background: pvar(--submenuBackgroundColor);
       border-radius: 4px;
       box-sizing: border-box;
       height: 100%;
@@ -773,7 +773,7 @@
   }
 }
 
-@mixin divider($color: pvar(--submenuColor), $background: pvar(--mainBackgroundColor)) {
+@mixin divider($color: pvar(--submenuBackgroundColor), $background: pvar(--mainBackgroundColor)) {
   width: 95%;
   border-top: .05rem solid $color;
   height: .05rem;
diff --git a/client/src/sass/include/_variables.scss b/client/src/sass/include/_variables.scss
index 724a897fa..532eaf650 100644
--- a/client/src/sass/include/_variables.scss
+++ b/client/src/sass/include/_variables.scss
@@ -48,7 +48,7 @@ $menu-bottom-color: #C6C6C6;
 $menu-width: 240px;
 $menu-lateral-padding: 26px;
 
-$sub-menu-color: #F7F7F7;
+$sub-menu-background-color: #F7F7F7;
 $sub-menu-height: 81px;
 
 $channel-background-color: #f6ede8;
@@ -103,7 +103,7 @@ $variables: (
   --menuBackgroundColor: var(--menuBackgroundColor),
   --menuForegroundColor: var(--menuForegroundColor),
 
-  --submenuColor: var(--submenuColor),
+  --submenuBackgroundColor: var(--submenuBackgroundColor),
   --channelBackgroundColor: var(--channelBackgroundColor),
 
   --inputForegroundColor: var(--inputForegroundColor),
diff --git a/client/src/sass/primeng-custom.scss b/client/src/sass/primeng-custom.scss
index afa577819..e71fb99a7 100644
--- a/client/src/sass/primeng-custom.scss
+++ b/client/src/sass/primeng-custom.scss
@@ -547,7 +547,7 @@ p-table {
     height: 46px;
 
     &.p-highlight {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
 
       td, td > a {
         color: pvar(--mainForegroundColor) !important;
@@ -558,7 +558,7 @@ p-table {
   .p-datatable-tbody {
     tr {
       &:hover {
-        background-color: pvar(--submenuColor) !important;
+        background-color: pvar(--submenuBackgroundColor) !important;
       }
 
       td {
@@ -590,16 +590,16 @@ p-table {
   th {
     border: none !important;
     border-bottom: 1px solid !important;
-    border-color: pvar(--submenuColor) !important;
+    border-color: pvar(--submenuBackgroundColor) !important;
     text-align: left !important;
     padding: 5px 0 5px 15px !important;
     font-weight: $font-semibold !important;
     color: pvar(--mainForegroundColor) !important;
 
     &.p-sortable-column:hover {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
       border: 1px solid !important;
-      border-color: pvar(--submenuColor) !important;
+      border-color: pvar(--submenuBackgroundColor) !important;
       border-width: 0 1px !important;
 
       &:first-child {
@@ -608,7 +608,7 @@ p-table {
     }
 
     &.p-highlight {
-      background-color: pvar(--submenuColor) !important;
+      background-color: pvar(--submenuBackgroundColor) !important;
 
       .pi {
         @extend .glyphicon;
@@ -654,7 +654,7 @@ p-table {
       position: relative;
       border: none;
       border-top: 1px solid !important;
-      border-color: pvar(--submenuColor) !important;
+      border-color: pvar(--submenuBackgroundColor) !important;
       height: 40px;
       display: flex;
       justify-content: center;