feat: redesign buttons and share them in dialogs

app/components/Button.tsx

@@ -1,16 +1,15 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React, { useRef } from 'react';
-import { Button as AriaButton } from 'react-aria-components';
-import { useButton } from 'react-aria';
+import { useButton, type AriaButtonOptions } from 'react-aria';
 import { cn } from '~/utils/cn';
 
-export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
-	variant?: 'heavy'
-	isDisabled?: boolean
+export interface ButtonProps extends AriaButtonOptions<'button'> {
+	variant?: 'heavy' | 'light'
+	className?: string
 	children?: React.ReactNode
 }
 
-export default function Button({ variant = 'light', ...props }: Props) {
+export default function Button({ variant = 'light', ...props }: ButtonProps) {
 	const ref = useRef<HTMLButtonElement | null>(null);
 	const { buttonProps } = useButton(props, ref);
 

app/components/Card.tsx

@@ -1,17 +1,8 @@
 import React from 'react';
 import Title from '~/components/Title';
+import Text from '~/components/Text';
 import { cn } from '~/utils/cn';
 
-function Text(props: React.HTMLProps<HTMLParagraphElement>) {
-	return (
-		<p {...props} className={cn('text-base leading-6 my-0', props.className)} />
-	);
-}
-
-type Props = React.HTMLProps<HTMLDivElement> & {
-	variant?: 'raised' | 'flat';
-};
-
 interface Props extends React.HTMLProps<HTMLDivElement> {
 	variant?: 'raised' | 'flat';
 }

app/components/Dialog.tsx

@@ -1,17 +1,17 @@
 import React, { Dispatch, ReactNode, SetStateAction } from 'react';
 import Button, { ButtonProps } from '~/components/Button';
 import Title from '~/components/Title';
+import Text from '~/components/Text';
+import Card from '~/components/Card';
 import {
-	Button as AriaButton,
 	Dialog as AriaDialog,
 	DialogTrigger,
-	Heading as AriaHeading,
 	Modal,
 	ModalOverlay,
 } from 'react-aria-components';
 import { cn } from '~/utils/cn';
 
-interface ActionProps extends ButtonProps {
+interface ActionProps extends Omit<ButtonProps, 'variant'> {
 	variant: 'cancel' | 'confirm';
 }
 
@@ -25,10 +25,16 @@ function Action(props: ActionProps) {
 	);
 }
 
-function Text(props: React.HTMLProps<HTMLParagraphElement>) {
+interface GutterProps {
+	children: ReactNode;
+}
+
+function Gutter({ children }: GutterProps) {
 	return (
-		<p {...props} className={cn('text-base leading-6 my-0', props.className)} />
-	);
+		<div className="mt-6 flex justify-end gap-2 mt-6">
+			{children}
+		</div>
+	)
 }
 
 interface PanelProps {
@@ -42,29 +48,28 @@ function Panel({ children, control, className }: PanelProps) {
 		<ModalOverlay
 			aria-hidden="true"
 			className={cn(
-				'fixed inset-0 h-screen w-screen z-50 bg-black/30',
-				'flex items-center justify-center dark:bg-black/70',
+				'fixed inset-0 h-screen w-screen z-50',
+				'flex items-center justify-center',
+				'bg-headplane-900/15 dark:bg-headplane-900/30',
 				'entering:animate-in exiting:animate-out',
-				'entering:fade-in entering:duration-200 entering:ease-out',
-				'exiting:fade-out exiting:duration-100 exiting:ease-in',
+				'entering:fade-in entering:duration-100 entering:ease-out',
+				'exiting:fade-out exiting:duration-50 exiting:ease-in',
 				className,
 			)}
 			isOpen={control ? control[0] : undefined}
 			onOpenChange={control ? control[1] : undefined}
 		>
-			<Modal
-				className={cn(
-					'w-full max-w-md overflow-hidden rounded-2xl p-4',
-					'bg-ui-50 dark:bg-ui-900 shadow-lg',
-					'entering:animate-in exiting:animate-out',
-					'dark:border dark:border-ui-700',
-					'entering:zoom-in-95 entering:ease-out entering:duration-200',
-					'exiting:zoom-out-95 exiting:ease-in exiting:duration-100',
-				)}
-			>
-				<AriaDialog role="alertdialog" className="outline-none relative">
-					{({ close }) => children(close)}
-				</AriaDialog>
+			<Modal className={cn(
+				'bg-white dark:bg-headplane-900 rounded-3xl w-full max-w-lg',
+				'entering:animate-in exiting:animate-out',
+				'entering:zoom-in-95 entering:ease-out entering:duration-100',
+				'exiting:zoom-out-95 exiting:ease-in exiting:duration-50',
+			)}>
+				<Card variant="flat" className="w-full max-w-lg">
+					<AriaDialog role="alertdialog" className="outline-none">
+						{({ close }) => children(close)}
+					</AriaDialog>
+				</Card>
 			</Modal>
 		</ModalOverlay>
 	);
@@ -83,4 +88,11 @@ function Dialog({ children, control }: DialogProps) {
 	return <DialogTrigger>{children}</DialogTrigger>;
 }
 
-export default Object.assign(Dialog, { Button, Title, Text, Panel, Action });
+export default Object.assign(Dialog, {
+	Action,
+	Button,
+	Gutter,
+	Panel,
+	Title,
+	Text,
+});

app/components/IconButton.tsx

@@ -1,17 +1,16 @@
 import type { Dispatch, SetStateAction } from 'react';
 import React, { useRef } from 'react';
-import { Button as AriaButton } from 'react-aria-components';
-import { useButton } from 'react-aria';
+import { useButton, type AriaButtonOptions } from 'react-aria';
 import { cn } from '~/utils/cn';
 
-interface Props extends React.HTMLProps<HTMLButtonElement> {
-	variant?: 'heavy'
-	isDisabled?: boolean
+export interface IconButtonProps extends AriaButtonOptions<'button'> {
+	variant?: 'heavy' | 'light'
+	className?: string
 	children: React.ReactNode
 	label: string
 }
 
-export default function IconButton({ variant = 'light', ...props }: Props) {
+export default function IconButton({ variant = 'light', ...props }: IconButtonProps) {
 	const ref = useRef<HTMLButtonElement | null>(null);
 	const { buttonProps } = useButton(props, ref);
 

app/components/Text.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { cn } from '~/utils/cn';
+
+export interface TextProps {
+	children: React.ReactNode;
+	className?: string;
+}
+
+export default function Text({ children, className }: TextProps) {
+	return (
+		<p className={cn('text-md my-0', className)}>
+			{children}
+		</p>
+	);
+}

app/components/Title.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
+import { cn } from '~/utils/cn';
 
 export interface TitleProps {
 	children: React.ReactNode;
+	className?: string;
 }
 
-export default function Title({ children }: TitleProps) {
+export default function Title({ children, className }: TitleProps) {
 	return (
-		<h3 className="text-2xl font-bold mb-6">
+		<h3 className={cn('text-2xl font-bold mb-6', className)}>
 			{children}
 		</h3>
 	);