From d3e3b9a30a978dd3412374c4d208b8669a8a8641 Mon Sep 17 00:00:00 2001
From: Viktor Atanasov <viktor.atanasov@constructor.tech>
Date: Tue, 12 Nov 2024 18:09:47 +0200
Subject: [PATCH] refactor: menu and footer to follow button component style
 practices

---
 packages/ui/src/components/footer/footer.vue      | 4 ++--
 packages/ui/src/components/menu-item/menuItem.vue | 6 ++----
 packages/ui/src/components/menu/menu.vue          | 3 ++-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/footer/footer.vue b/packages/ui/src/components/footer/footer.vue
index e4ce21c91..00ad68464 100644
--- a/packages/ui/src/components/footer/footer.vue
+++ b/packages/ui/src/components/footer/footer.vue
@@ -7,7 +7,7 @@
 <template>
   <div class="acv-footer">
     <AcvDivider />
-    <div class="acv-footer_content">
+    <div class="content">
       <!-- @slot Used to pass a custom side content (text or link by design) -->
       <slot name="side" />
       <div class="actions">
@@ -25,7 +25,7 @@
   flex-direction: column;
 }
 
-.acv-footer_content {
+.content {
   display: flex;
   align-items: center;
   gap: var(--acv-spacing-regular);
diff --git a/packages/ui/src/components/menu-item/menuItem.vue b/packages/ui/src/components/menu-item/menuItem.vue
index 75786f96e..f9550b076 100644
--- a/packages/ui/src/components/menu-item/menuItem.vue
+++ b/packages/ui/src/components/menu-item/menuItem.vue
@@ -169,7 +169,7 @@
 
     &.disabled {
       pointer-events: none;
-      color: hsl(from var(--_acv-menu-item-color) h s calc(l - 30));
+      color: var(--acv-color-status-neutral-secondary);
     }
 
     &:hover {
@@ -192,10 +192,8 @@
       margin-left: auto;
     }
 
-    .acv-icon {
-      --acv-icon-size: var(--acv-icon-size-medium);
+    .icon {
       min-width: 16px;
-
     }
   }
 </style>
diff --git a/packages/ui/src/components/menu/menu.vue b/packages/ui/src/components/menu/menu.vue
index 54e12437d..2aa8fabb3 100644
--- a/packages/ui/src/components/menu/menu.vue
+++ b/packages/ui/src/components/menu/menu.vue
@@ -143,10 +143,11 @@
     --_acv-menu-item-hover-color: var(--acv-color-nav-label-secondary);
     --_acv-menu-item-selected-bg: var(--acv-color-nav-active-primary);
     --_acv-menu-item-selected-color: var(--acv-color-nav-label-primary);
+    --acv-icon-size: var(--acv-icon-size-medium);
     grid-template-columns: 256px;
     grid-template-rows: auto;
     color: var(--acv-color-nav-label-secondary);
-    background-color: var(--acv-menu-bg-color);
+    background-color: var(--_acv-menu-bg-color);
 
     &.acv-menu_collapsed {
       --acv-menu-item-justify-content: center;