fix(app): fix contrast ratio issues and more (#429)

* fix(app): adjust contrast ratio of Select component

* fix(app): adjust contrast ratio of Button component

* feat(app): add a 'not-allowed' cursor style to disabled Button

* Adjust CloseButton color on different themes

* Adjust CloseButton color on different themes - standardize

* Change color of Select caret when dark mode is enabled

Author: grzegorzpokorski

apps/app/src/components/Button/Button.tsx

@@ -6,9 +6,9 @@ const variants = {
 	branding:
 		"text-violet-700 dark:text-neutral-200 border-violet-700 dark:border-neutral-200 bg-transparent hover:bg-violet-50 hover:dark:bg-violet-900 focus:shadow-[0_0_10px] focus:shadow-primary",
 	brandingInverse:
-		"border-white bg-primary text-white transition-opacity hover:bg-violet-200 focus:shadow-[0_0_10px] focus:shadow-white disabled:opacity-50 hover:dark:bg-violet-700",
+		"border-white bg-primary text-white hover:text-violet-700 dark:hover:text-white transition-opacity hover:bg-violet-200 focus:shadow-[0_0_10px] focus:shadow-white disabled:opacity-50 hover:dark:bg-violet-700",
 	alternative:
-		"text-white border-white bg-yellow-branding hover:bg-yellow-branding-dark focus:shadow-[0_0_10px] focus:shadow-yellow-branding",
+		"text-white-dark border-white-dark bg-yellow-branding hover:bg-yellow-branding-dark focus:shadow-[0_0_10px] focus:shadow-yellow-branding",
 };
 
 type ButtonProps = Readonly<{
@@ -19,7 +19,7 @@ type ButtonProps = Readonly<{
 export const Button = ({ variant, className, ...props }: ButtonProps) => (
 	<button
 		className={twMerge(
-			"min-w-[160px] appearance-none rounded-md border border-transparent px-8 py-1 text-sm leading-8 transition-colors duration-100 sm:py-0",
+			"min-w-[160px] appearance-none rounded-md border border-transparent px-8 py-1 text-sm leading-8 transition-colors duration-100 disabled:cursor-not-allowed sm:py-0",
 			variants[variant],
 			className,
 		)}

apps/app/src/components/CloseButton/CloseButton.tsx

@@ -4,7 +4,7 @@ import { ButtonHTMLAttributes } from "react";
 export const CloseButton = ({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) => (
 	<button
 		className={twMerge(
-			"flex h-8 w-8 appearance-none items-center justify-center rounded-full text-4xl text-violet-200 transition-colors duration-100 hover:bg-primary hover:text-white focus:shadow-[0_0_10px] focus:shadow-primary focus:outline-none dark:text-violet-700 dark:hover:text-white",
+			"flex h-8 w-8 appearance-none items-center justify-center rounded-full text-4xl text-violet-200 transition-colors duration-100 hover:bg-primary hover:text-white focus:shadow-[0_0_10px] focus:shadow-primary focus:outline-none dark:hover:bg-violet-700",
 			className,
 		)}
 		{...props}

apps/app/src/components/Select/Select.tsx

@@ -5,7 +5,7 @@ const variants = {
 	default:
 		"select bg-white py-1 pl-1 pr-6 text-neutral-700 dark:bg-white-dark dark:text-neutral-200",
 	purple:
-		"select-purple border-b border-primary bg-transparent py-2 pr-6 pl-1 capitalize text-primary transition-shadow duration-100 focus:shadow-[0_0_10px] focus:shadow-primary dark:border-neutral-200 dark:text-neutral-200 dark:focus:shadow-white",
+		"select-purple dark:select border-b border-primary bg-transparent py-2 pr-6 pl-1 capitalize text-primary transition-shadow duration-100 focus:shadow-[0_0_10px] focus:shadow-primary dark:border-neutral-200 dark:text-neutral-200 dark:focus:shadow-white dark:bg-white-dark",
 };
 
 type SelectProps = Readonly<{