chore: fix mobile modal/popover header size

This commit is contained in:
Aman Harwara
2023-07-13 21:16:59 +05:30
parent 4641f3235d
commit 87e02f4a15
5 changed files with 11 additions and 6 deletions

View File

@@ -14,7 +14,7 @@ const MobileModalAction = forwardRef(
<button
ref={ref}
className={classNames(
'flex select-none whitespace-nowrap px-1 py-1 text-base font-semibold focus:shadow-none focus:outline-none active:shadow-none active:outline-none active:brightness-50 disabled:text-neutral md:hidden',
'flex select-none whitespace-nowrap px-1 py-1 font-semibold focus:shadow-none focus:outline-none active:shadow-none active:outline-none active:brightness-50 disabled:text-neutral md:hidden',
slot === 'left' ? 'justify-start text-left' : 'justify-end text-right',
type === 'cancel' || type === 'destructive' ? 'text-danger' : 'text-info',
className,

View File

@@ -8,7 +8,12 @@ type Props = {
const MobileModalHeader = ({ className, children }: Props) => {
return (
<div className={classNames('grid w-full select-none grid-cols-[0.35fr_1fr_0.35fr] gap-2', className)}>
<div
className={classNames(
'grid w-full select-none grid-cols-[0.35fr_1fr_0.35fr] gap-2 text-[1.05rem] leading-6',
className,
)}
>
{children}
</div>
)

View File

@@ -131,7 +131,7 @@ const Modal = ({
) : (
<div className="md:hidden" />
)}
<div className="flex items-center justify-center gap-2 overflow-hidden text-center text-base font-semibold text-text md:flex-grow md:text-left md:text-lg">
<div className="flex items-center justify-center gap-2 overflow-hidden text-center font-semibold text-text md:flex-grow md:text-left md:text-lg">
{extraActions.length > 0 && (
<>
<MobileModalAction