fix: adjust modal position

This commit is contained in:
qinluhe 2024-07-24 14:38:00 +08:00
parent 403fd2f5a0
commit e0a70aa4d9
6 changed files with 11 additions and 10 deletions

View File

@ -10,9 +10,9 @@ export function Login({ redirectTo }: { redirectTo: string }) {
return (
<div className={'my-10 flex flex-col items-center justify-center gap-[24px] px-4'}>
<div className={'flex flex-col items-center justify-center gap-[14px]'}>
<div className={'flex w-full flex-col items-center justify-center gap-[14px]'}>
<Logo className={'h-10 w-10'} />
<div className={'text-[24px] font-semibold'}>{t('welcomeTo')} AppFlowy</div>
<div className={'text-[24px] font-semibold max-sm:text-[20px]'}>{t('welcomeTo')} AppFlowy</div>
</div>
<MagicLink redirectTo={redirectTo} />
<div className={'flex w-full items-center justify-center gap-2 text-text-caption'}>

View File

@ -50,7 +50,7 @@ function LoginProvider({ redirectTo }: { redirectTo: string }) {
};
return (
<div className={'flex flex-col items-center justify-center gap-[10px]'}>
<div className={'flex w-full flex-col items-center justify-center gap-[10px]'}>
{options.map((option) => (
<Button
key={option.value}
@ -58,7 +58,7 @@ function LoginProvider({ redirectTo }: { redirectTo: string }) {
variant={'outlined'}
onClick={() => handleClick(option.value)}
className={
'flex h-[46px] w-[380px] items-center justify-center gap-[10px] rounded-[12px] border border-line-divider text-sm font-medium text-text-title'
'flex h-[46px] w-[380px] items-center justify-center gap-[10px] rounded-[12px] border border-line-divider text-sm font-medium text-text-title max-sm:w-full'
}
>
<option.Icon className={'h-[20px] w-[20px]'} />

View File

@ -34,11 +34,11 @@ function MagicLink({ redirectTo }: { redirectTo: string }) {
};
return (
<div className={'flex flex-col items-center justify-center gap-[12px]'}>
<div className={'flex w-full flex-col items-center justify-center gap-[12px]'}>
<OutlinedInput
value={email}
type={'email'}
className={'h-[46px] w-[380px] rounded-[12px] py-[15px] px-[20px] text-base'}
className={'h-[46px] w-[380px] rounded-[12px] py-[15px] px-[20px] text-base max-sm:w-full'}
placeholder={t('signIn.pleaseInputYourEmail')}
inputProps={{
className: 'px-0 py-0',
@ -49,7 +49,7 @@ function MagicLink({ redirectTo }: { redirectTo: string }) {
onClick={handleSubmit}
disabled={loading}
variant={'contained'}
className={'flex h-[46px] w-[380px] items-center justify-center gap-2 rounded-[12px] text-base'}
className={'flex h-[46px] w-[380px] items-center justify-center gap-2 rounded-[12px] text-base max-sm:w-full'}
>
{loading ? (
<>

View File

@ -19,6 +19,7 @@ function DuplicateModal({ open, onClose }: { open: boolean; onClose: () => void
title={t('publish.duplicateTitle')}
open={open}
onClose={onClose}
classes={{ container: 'items-start max-md:mt-auto max-md:items-center mt-[10%] ' }}
onOk={async () => {
// submit form
notify.success(t('publish.duplicateSuccessfully'));

View File

@ -41,7 +41,7 @@ function SelectWorkspace({ value, onChange, workspaceList }: SelectWorkspaceProp
);
return (
<div className={'flex w-[360px] flex-col gap-2'}>
<div className={'flex w-[360px] flex-col gap-2 max-sm:w-full'}>
<div className={'text-sm text-text-caption'}>{t('publish.selectWorkspace')}</div>
<Button
ref={ref}
@ -70,7 +70,7 @@ function SelectWorkspace({ value, onChange, workspaceList }: SelectWorkspaceProp
setSelectOpen(false);
}}
>
<div className={'flex max-h-[360px] w-[360px] flex-col gap-1 p-2'}>
<div className={'flex max-h-[360px] w-[360px] flex-col gap-1 p-2 max-sm:w-full'}>
<div className={'w-full px-3 py-2 text-sm font-medium text-text-caption'}>{email}</div>
<Divider />
<div className={'appflowy-scroller flex flex-1 flex-col overflow-y-auto overflow-x-hidden'}>

View File

@ -52,7 +52,7 @@ function SpaceList({ spaceList, value, onChange }: SpaceListProps) {
);
return (
<div className={'flex max-h-[260px] w-[360px] flex-col gap-2 overflow-hidden'}>
<div className={'flex max-h-[280px] w-[360px] flex-col gap-2 overflow-hidden max-sm:w-full'}>
<div className={'text-sm text-text-caption'}>{t('publish.addTo')}</div>
<div className={'appflowy-scroller flex w-full flex-1 flex-col gap-1 overflow-y-auto overflow-x-hidden'}>
{spaceList.map((space) => {