feat(app): change some styles related to Modal and Button (#472)

* fix(app): change styles for Button when it is disabled

* fix(app): standardize border-radius of BaseModal

* fix(app): standardize border-color in QuestonEditor with rest of app

* fix(app): remove min-width from Button styles

* refactor(app): use Button component instead of native html tag in MobileActionsButton

* refactor(app): tidy MobileActionButton

* feat(app): add 'mobileAction' Button variant

* fix(app): fix border-radius of modal on mobile

* Revert missing styles to Button component

* Remove unused imports from Button componenet

* Fix Button stories for mobileAction variant

Co-authored-by: Michał Miszczyszyn <[email protected]>

Author: grzegorzpokorski

apps/app/src/components/BaseModal/BaseModal.tsx

@@ -44,7 +44,7 @@ export const BaseModal = ({ isOpen, onClose, children }: BaseModalProps) => {
 		>
 			<div className="m-auto flex min-h-full w-fit sm:items-center">
 				<div
-					className="relative w-full max-w-3xl animate-show rounded-sm bg-white px-3.5 py-9 dark:bg-white-dark sm:px-11 sm:py-20"
+					className="relative w-full max-w-3xl animate-show rounded-none bg-white px-3.5 py-9 dark:bg-white-dark sm:rounded-md sm:px-11 sm:py-20"
 					onClick={(event) => {
 						// stop propagation to avoid triggering `onClick` on the backdrop behind the modal
 						event.stopPropagation();

apps/app/src/components/Button/Button.stories.ts

@@ -36,3 +36,10 @@ export const Alternative: Story = {
 		variant: "alternative",
 	},
 };
+
+export const MobileAction: Story = {
+	args: {
+		variant: "mobileAction",
+		children: "+",
+	},
+};

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

@@ -1,14 +1,29 @@
 import { ButtonHTMLAttributes } from "react";
 import { twMerge } from "tailwind-merge";
 
+const defaultStyles =
+	"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";
+
 const variants = {
-	alert: "text-white font-bold bg-red-branding hover:bg-red-branding-dark disabled:bg-[#bfbfbf]",
-	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 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-dark border-white-dark bg-yellow-branding hover:bg-yellow-branding-dark focus:shadow-[0_0_10px] focus:shadow-yellow-branding",
+	alert: twMerge(
+		defaultStyles,
+		"text-white font-bold bg-red-branding enabled:hover:bg-red-branding-dark disabled:bg-[#bfbfbf]",
+	),
+	branding: twMerge(
+		defaultStyles,
+		"text-violet-700 dark:text-neutral-200 border-violet-700 dark:border-neutral-200 bg-transparent enabled:hover:bg-violet-50 enabled:hover:dark:bg-violet-900 focus:shadow-[0_0_10px] focus:shadow-primary",
+	),
+	brandingInverse: twMerge(
+		defaultStyles,
+		"border-white bg-primary text-white enabled:hover:text-violet-700 enabled:dark:hover:text-white transition-opacity enabled:hover:bg-violet-200 focus:shadow-[0_0_10px] focus:shadow-white disabled:opacity-50 enabled:hover:dark:bg-violet-700",
+	),
+	alternative: twMerge(
+		defaultStyles,
+		"text-white-dark border-white-dark bg-yellow-branding enabled:hover:bg-yellow-branding-dark focus:shadow-[0_0_10px] focus:shadow-yellow-branding",
+	),
+	mobileAction: twMerge(
+		"flex h-11 w-11 items-center justify-center rounded-full border-none p-0 shadow-md shadow-neutral-600 dark:shadow-neutral-900 bg-primary hover:bg-violet-800 dark:hover:bg-violet-700 text-white",
+	),
 };
 
 type ButtonProps = Readonly<{
@@ -17,12 +32,5 @@ type ButtonProps = Readonly<{
 	ButtonHTMLAttributes<HTMLButtonElement>;
 
 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 disabled:cursor-not-allowed sm:py-0",
-			variants[variant],
-			className,
-		)}
-		{...props}
-	/>
+	<button className={twMerge(variants[variant], className)} {...props} />
 );

apps/app/src/components/MobileActionButtons/MobileActionButton.tsx

@@ -1,4 +1,5 @@
 import { ReactNode } from "react";
+import { Button } from "../Button/Button";
 
 type MobileActionButtonProps = Readonly<{
 	children: ReactNode;
@@ -7,8 +8,5 @@ type MobileActionButtonProps = Readonly<{
 }>;
 
 export const MobileActionButton = (props: MobileActionButtonProps) => (
-	<button
-		className="flex h-11 w-11 appearance-none items-center justify-center rounded-full bg-primary shadow-md shadow-neutral-600 dark:shadow-neutral-900"
-		{...props}
-	/>
+	<Button variant="mobileAction" {...props} />
 );

apps/app/src/components/WysiwygEditor/ActionsGroup.tsx

@@ -9,7 +9,10 @@ type ActionsGroupProps = Readonly<{
 export const ActionsGroup = ({ separator = true, children }: ActionsGroupProps) => {
 	return (
 		<div
-			className={twMerge("flex gap-x-1 pr-1.5", separator && "border-l border-neutral-300 pl-1.5")}
+			className={twMerge(
+				"flex gap-x-1 pr-1.5",
+				separator && "border-l border-primary pl-1.5 dark:border-neutral-300",
+			)}
 		>
 			{children}
 		</div>

apps/app/src/components/WysiwygEditor/WysiwygEditor.tsx

@@ -103,8 +103,8 @@ export const WysiwygEditor = memo(({ value, onChange }: WysiwygEditorProps) => {
 	}, [value, isPreview]);
 
 	return (
-		<div className="mt-4 rounded-md border">
-			<div className="flex border-b p-2.5">
+		<div className="mt-4 rounded-md border border-primary dark:border-neutral-300">
+			<div className="flex border-b border-primary p-2.5 dark:border-neutral-300">
 				{hierarchy.map((actions, i) => (
 					<ActionsGroup key={i} separator={i !== 0}>
 						{actions.map((action) => (