← All changes
|
backend/views/components/Main/components/Button.jsx
+17
-6
1.3.51
→
1.4.19
View file →
| @@ -1,4 +1,6 @@ | ||
| 1 | +import cn from '../utilities/cn'; | |
| 2 | + | |
| 1 | 3 | const Button = ({ |
| 2 | 4 | testId = '', |
| 3 | 5 | disabled = false, |
| 4 | 6 | className = '', |
| @@ -8,20 +10,29 @@ | ||
| 8 | 10 | iconPositionLeft = true, |
| 9 | 11 | onClick = () => {}, |
| 10 | 12 | }) => { |
| 11 | 13 | const baseClassNames = |
| 12 | - 'disco-text-base disco-shadow-custom disco-border disco-rounded-lg disco-px-8 disco-py-2.5 disco-flex disco-items-center disco-gap-2 disco-outline-none disco-font-medium disco-transition-colors disco-duration-200'; | |
| 14 | + 'disco:text-base! disco:shadow-custom disco:border disco:rounded-lg disco:px-8 disco:py-2.5 disco:flex disco:items-center disco:gap-2 disco:outline-hidden disco:font-medium disco:transition-colors disco:duration-200'; | |
| 13 | 15 | |
| 14 | 16 | const getTypeClassNames = () => { |
| 15 | 17 | switch (type) { |
| 16 | 18 | case 'primary': |
| 17 | - return `${baseClassNames} disco-text-white disco-bg-primary disco-border-primary hover:disco-bg-primary-dark hover:disco-border-primary-dark`; | |
| 19 | + return cn( | |
| 20 | + baseClassNames, | |
| 21 | + 'disco:text-white disco:bg-primary disco:border-primary disco:hover:bg-primary-dark disco:hover:border-primary-dark' | |
| 22 | + ); | |
| 18 | 23 | |
| 19 | 24 | case 'secondary': |
| 20 | - return `${baseClassNames} disco-text-grey-dark disco-bg-gray-100 disco-border-gray-200 hover:disco-bg-gray-200 hover:disco-border-gray-300`; | |
| 25 | + return cn( | |
| 26 | + baseClassNames, | |
| 27 | + 'disco:text-grey-dark disco:bg-gray-100 disco:border-gray-200 disco:hover:bg-gray-200 disco:hover:border-gray-300' | |
| 28 | + ); | |
| 21 | 29 | |
| 22 | 30 | case 'transparent': |
| 23 | - return `${baseClassNames} disco-text-black disco-bg-transparent disco-border-primary`; | |
| 31 | + return cn( | |
| 32 | + baseClassNames, | |
| 33 | + 'disco:text-black disco:bg-transparent disco:border-primary' | |
| 34 | + ); | |
| 24 | 35 | |
| 25 | 36 | default: |
| 26 | 37 | return baseClassNames; |
| 27 | 38 | } |
| @@ -30,14 +41,14 @@ | ||
| 30 | 41 | let buttonClasses = `${getTypeClassNames()} ${className}`; |
| 31 | 42 | |
| 32 | 43 | // Handle icon position (right/left) |
| 33 | 44 | if (!iconPositionLeft) { |
| 34 | - buttonClasses += ' !disco-flex-row-reverse'; | |
| 45 | + buttonClasses += ' disco:flex-row-reverse!'; | |
| 35 | 46 | } |
| 36 | 47 | |
| 37 | 48 | // Apply disabled styles |
| 38 | 49 | if (disabled) { |
| 39 | - buttonClasses += ' disco-opacity-50 disco-cursor-not-allowed'; | |
| 50 | + buttonClasses += ' disco:opacity-50 disco:cursor-not-allowed'; | |
| 40 | 51 | } |
| 41 | 52 | |
| 42 | 53 | return ( |
| 43 | 54 | <button |