@moises.ai/design-system 3.5.5 → 3.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.5.5",
+  "version": "3.5.6",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/DropdownMenu/DropdownMenu.stories.jsx

@@ -290,6 +290,7 @@ export const ShowActiveTrigger = {
         key: 'item3',
         label: 'Delete',
         onClick: () => console.log('Delete clicked'),
+        color: 'red',
       },
     ],
   },

package/src/components/MoreButton/MoreButton.module.css

@@ -37,7 +37,7 @@
 }
 
 .icon {
-  width: 4px;
-  height: 14px;
+  width: 3px;
+  height: 11px;
   flex-shrink: 0;
 }

package/src/components/SetlistList/SetlistList.jsx

@@ -10,6 +10,7 @@ import {
 } from '../../icons'
 import { DropdownMenu } from '../DropdownMenu/DropdownMenu'
 import { useState, useEffect, useRef, useMemo } from 'react'
+import { MoreButton } from '../MoreButton/MoreButton'
 
 export const SetlistItem = ({
   isSelected,
@@ -120,11 +121,7 @@ export const SetlistItem = ({
                 onPointerDown={handleDropdownTriggerPointerDown}
                 onClick={handleDropdownTriggerClick}
               >
-                <DotsVerticalIcon
-                  className={styles.dropdownMenuTrigger}
-                  width={16}
-                  height={16}
-                />
+                <MoreButton hovered={dropdownMenuOpen} />
               </Flex>
             }
             options={dropdownMenuOptions}

package/src/components/SetlistList/SetlistList.module.css

@@ -28,6 +28,8 @@
   .collapsed {
     width: fit-content;
     padding: 2px;
+    margin: 0 10px;
+ 
   }
 
 .dropdownTriggerWrapper {
@@ -41,9 +43,9 @@
   margin-left: auto;
 }
 
-  .dropdownTriggerWrapperMobile {
+  /* .dropdownTriggerWrapperMobile {
     padding: 8px;
-  }
+  } */
 
   .collapsed .dropdownTriggerWrapper {
     opacity: 0;
@@ -53,7 +55,7 @@
     color: var(--neutral-alpha-7);
   }
   
-  .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
+  /* .dropdownTriggerWrapper:hover .dropdownMenuTrigger,
   .menuOpen .dropdownTriggerWrapper .dropdownMenuTrigger {
     color: var(--neutral-alpha-11);
     background-color: rgba(255, 255, 255, 0.07);
@@ -61,7 +63,7 @@
     width: 16px;
     height: 24px;
   }
-  
+   */
   .avatarSetlist {
     display: flex;
     width: 40px;

package/src/lib/menu/Menu.module.css

@@ -249,7 +249,7 @@
 .menuItemSelected {
   background-color: var(--neutral-alpha-3);
   border-radius: 6px;
-  cursor: default;
+  cursor: pointer;
   font-weight: 400;
 
   &[data-disabled] {
@@ -312,19 +312,19 @@
 }
 
 .red {
-  color: color(display-p3 1 .57 .55);
+  color: rgba(255, 149, 146, 1);
 
   & .label,
   & .leftIcon,
   & .rightIcon,
   & .checkboxIndicatorSlot {
-    color: color(display-p3 1 .57 .55);
+    color: rgba(255, 149, 146, 1);
   }
 
   & .leftIcon > svg,
   & .rightIcon > svg,
   & .menuCheckboxIndicator > svg {
-    color: color(display-p3 1 .57 .55);
+    color: rgba(255, 149, 146, 1);
   }
 }