DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: dialog movement (#227)

Browse Source 
* 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
Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/components/common/Dialog.tsx
View File

@@ -44,19 +44,19 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
> >
<div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} /> <div className={clsx('fixed inset-0 z-50 bg-slate-700/35')} />
</TransitionChild> </TransitionChild>
<TransitionChild <div className='fixed inset-0 z-50 flex items-center justify-center'>
as={Fragment} <TransitionChild
enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]' as={Fragment}
enterFrom='transform-gpu scale-95 opacity-0' enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
enterTo='transform-gpu scale-100 opacity-100' enterFrom='transform-gpu scale-95 opacity-0'
leave='transition duration-250 motion-reduce:duration-0 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]' enterTo='transform-gpu scale-100 opacity-100'
leaveFrom='transform-gpu scale-100 opacity-100' leave='transition duration-250 motion-reduce:duration-0 ease-[cubic-bezier(0.23,0.01,0.92,0.72)]'
leaveTo='transform-gpu scale-95 opacity-0' 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 <DialogPanel
className={clsx( 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 className
)} )}
> >
@@ -64,8 +64,8 @@ export default function Dialog(props: PropsWithChildren<DialogProps>): JSX.Eleme
{props.description && <Description as={Fragment}>{props.description}</Description>} {props.description && <Description as={Fragment}>{props.description}</Description>}
{children} {children}
</DialogPanel> </DialogPanel>
</div> </TransitionChild>
</TransitionChild> </div>
</ExtensionRoot> </ExtensionRoot>
</Transition> </Transition>
); );

38
src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
View File

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

4
src/views/components/common/LogoIcon.tsx
View File

@@ -28,7 +28,7 @@ export function SmallLogo({ className }: { className?: string }): JSX.Element {
return ( return (
<div className={clsx('flex items-center gap-2', className)}> <div className={clsx('flex items-center gap-2', className)}>
<LogoIcon /> <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-nowrap text-ut-burntorange'>UT Registration</p>
<p className='text-ut-burntorange'> <p className='text-ut-burntorange'>
Plus{' '} Plus{' '}
@@ -51,7 +51,7 @@ export function LargeLogo({ className }: { className?: string }): JSX.Element {
return ( return (
<div className={clsx('flex items-center gap-2', className)}> <div className={clsx('flex items-center gap-2', className)}>
<LogoIcon className='h-12 w-12' /> <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-nowrap text-ut-burntorange'>UT Registration</p>
<p className='text-ut-burntorange'> <p className='text-ut-burntorange'>
Plus{' '} Plus{' '}