refactor: menu and footer to follow button component style practices

acronis · Nov 12, 2024 · d3e3b9a · d3e3b9a
1 parent 635cd0b
commit d3e3b9a
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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;