fix(nx-dev): improve button shadow handling in nx-dev

The commit fine-tunes the styling and functionality related to button shadows in the nx-dev/user interface common library. This includes adjusting shadow properties in the styling and updating the 'getLayoutClassName' function for better consistency and accuracy. The 'button' and 'a' HTML tagged elements were also updated to use the improved 'getLayoutClassName'.

nx-dev/ui-common/src/lib/button.tsx

@@ -20,7 +20,7 @@ const variantStyles: Record<AllowedVariants, string> = {
   primary:
     'bg-blue-500 dark:bg-sky-500 text-white group-hover:bg-blue-600 dark:group-hover:bg-sky-600 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:group-ring-offset-2',
   secondary:
-    'border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 shadow-sm group-hover:bg-slate-50 dark:group-hover:bg-slate-700 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:ring-offset-2',
+    'border border-slate-300 dark:border-slate-700 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-200 group-hover:bg-slate-50 dark:group-hover:bg-slate-700 group-focus:ring-2 group-focus:ring-blue-500 dark:group-focus:ring-sky-500 focus:ring-offset-2',
 };
 const sizes: Record<AllowedSizes, string> = {
   large: 'space-x-4 px-4 py-2 text-lg',
@@ -31,9 +31,9 @@ const sizes: Record<AllowedSizes, string> = {
 /**
  * Shared layout containing specific button styles.
  */
-function getLayoutClassName({ className = '' }: { className: string }): string {
+function getLayoutClassName(className = ''): string {
   return cx(
-    'group relative inline-flex rounded border border-transparent shadow-sm font-medium opacity-100 focus:outline-none disabled:opacity-80 transition',
+    'group relative inline-flex opacity-100 focus:outline-none disabled:opacity-80 disabled:cursor-not-allowed transition',
     className
   );
 }
@@ -50,7 +50,7 @@ function ButtonInner({
     <>
       <span
         className={cx(
-          'flex h-full w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent transition',
+          'flex h-full w-full items-center justify-center whitespace-nowrap rounded-md border border-transparent font-medium shadow-sm transition',
           variantStyles[variant],
           sizes[size]
         )}
@@ -72,7 +72,7 @@ export function Button({
   ...props
 }: ButtonProps & JSX.IntrinsicElements['button']): JSX.Element {
   return (
-    <button {...props} className={cx('inline-flex', className)}>
+    <button {...props} className={getLayoutClassName(className)}>
       <ButtonInner variant={variant} size={size}>
         {children}
       </ButtonInner>
@@ -104,7 +104,7 @@ export const ButtonLink = forwardRef(function (
       ref={ref}
       href={href}
       title={title}
-      className={cx('inline-flex', className)}
+      className={getLayoutClassName(className)}
       {...props}
     >
       <ButtonInner variant={variant} size={size}>