fix: dialog movement (#227)

* fix: dialog movement

* chore: lint
This commit is contained in:
Razboy20
2024-06-03 20:53:39 -05:00
committed by GitHub
parent 863d980b2d
commit bc5d68ce18
3 changed files with 34 additions and 34 deletions

View File

@@ -44,6 +44,7 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
>
<div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
</TransitionChild>
<div className='fixed inset-0 z-50 flex items-center justify-center'>
<TransitionChild
as={Fragment}
enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
@@ -53,10 +54,9 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
leaveFrom='transform-gpu scale-100 opacity-100'
leaveTo='transform-gpu scale-95 opacity-0'
>
<div className='fixed inset-0 z-50 flex items-center justify-center'>
<DialogPanel
className={clsx(
'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)] mt-[calc(100vw-100%)]',
'z-99 max-h-[90vh] flex flex-col overflow-y-auto border border-solid border-ut-offwhite rounded bg-white shadow-xl ml-[calc(100vw-100%)]',
className
)}
>
@@ -64,8 +64,8 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
{props.description && <Description as={Fragment}>{props.description}</Description>}
{children}
</DialogPanel>
</div>
</TransitionChild>
</div>
</ExtensionRoot>
</Transition>
);

View File

@@ -17,25 +17,25 @@
[data-rfd-drag-handle-context-id=':r1:'] {
cursor: move;
}
}
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 14px;
height: 14px;
background: transparent;
}
::-webkit-scrollbar-thumb {
}
::-webkit-scrollbar-thumb {
border: 3px solid #fff;
border-radius: 7px;
min-height: 40px;
box-shadow: none;
background: rgb(218, 220, 224);
}
:hover::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
}
:hover::-webkit-scrollbar-thumb,
::-webkit-scrollbar-thumb:hover {
background: rgb(189, 193, 198);
}
}
::-webkit-scrollbar-thumb:active {
::-webkit-scrollbar-thumb:active {
background: rgb(128, 134, 139);
}
}

View File

@@ -28,7 +28,7 @@ export function SmallLogo({ className }: { className?: string }): JSX.Element {
return (
<div className={clsx('flex items-center gap-2', className)}>
<LogoIcon />
<div className='flex flex-col text-lg font-medium leading-[1em] mt-1'>
<div className='mt-1 flex flex-col text-lg font-medium leading-[1em]'>
<p className='text-nowrap text-ut-burntorange'>UT Registration</p>
<p className='text-ut-burntorange'>
Plus{' '}
@@ -51,7 +51,7 @@ export function LargeLogo({ className }: { className?: string }): JSX.Element {
return (
<div className={clsx('flex items-center gap-2', className)}>
<LogoIcon className='h-12 w-12' />
<div className='hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex mt-1'>
<div className='mt-1 hidden flex-col text-[1.35rem] font-medium leading-[1em] md:flex screenshot:flex'>
<p className='text-nowrap text-ut-burntorange'>UT Registration</p>
<p className='text-ut-burntorange'>
Plus{' '}