From 28521b55837e43223f0685a350629d6da1e3b9d2 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Sat, 1 Jun 2024 19:04:36 -0700
Subject: [PATCH 1/2] fix: dialog movement

---
 src/views/components/common/Dialog.tsx        | 28 +++++++-------
 .../ExtensionRoot/ExtensionRoot.module.scss   | 38 +++++++++----------
 2 files changed, 33 insertions(+), 33 deletions(-)

diff --git a/src/views/components/common/Dialog.tsx b/src/views/components/common/Dialog.tsx
index ed8849fa8..7210b0e33 100644
--- a/src/views/components/common/Dialog.tsx
+++ b/src/views/components/common/Dialog.tsx
@@ -1,9 +1,9 @@
 import type { TransitionRootProps } from '@headlessui/react';
 import {
     Description,
-    Dialog as HDialog,
     DialogPanel,
     DialogTitle,
+    Dialog as HDialog,
     Transition,
     TransitionChild,
 } from '@headlessui/react';
@@ -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')} />
                 </TransitionChild>
-                <TransitionChild
-                    as={Fragment}
-                    enter='transition duration-375 motion-reduce:duration-0 ease-[cubic-bezier(0.05,0.4,0.2,1)]'
-                    enterFrom='transform-gpu scale-95 opacity-0'
-                    enterTo='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)]'
-                    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'>
+                <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)]'
+                        enterFrom='transform-gpu scale-95 opacity-0'
+                        enterTo='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)]'
+                        leaveFrom='transform-gpu scale-100 opacity-100'
+                        leaveTo='transform-gpu scale-95 opacity-0'
+                    >
                         <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>
+                    </TransitionChild>
+                </div>
             </ExtensionRoot>
         </Transition>
     );
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
index 3bac792e3..762d7065d 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -17,25 +17,25 @@
     [data-rfd-drag-handle-context-id=':r1:'] {
         cursor: move;
     }
-}
 
-::-webkit-scrollbar {
-    width: 14px;
-    height: 14px;
-    background: transparent;
-}
-::-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 {
-    background: rgb(189, 193, 198);
-}
+    ::-webkit-scrollbar {
+        width: 14px;
+        height: 14px;
+        background: transparent;
+    }
+    ::-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 {
+        background: rgb(189, 193, 198);
+    }
 
-::-webkit-scrollbar-thumb:active {
-    background: rgb(128, 134, 139);
+    ::-webkit-scrollbar-thumb:active {
+        background: rgb(128, 134, 139);
+    }
 }

From 6ce747cb688504c00342ed48a1d078970f6716f7 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Sun, 2 Jun 2024 22:31:28 -0700
Subject: [PATCH 2/2] chore: lint

---
 src/views/components/common/Dialog.tsx   | 2 +-
 src/views/components/common/LogoIcon.tsx | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/views/components/common/Dialog.tsx b/src/views/components/common/Dialog.tsx
index 7210b0e33..fcbc39c14 100644
--- a/src/views/components/common/Dialog.tsx
+++ b/src/views/components/common/Dialog.tsx
@@ -1,9 +1,9 @@
 import type { TransitionRootProps } from '@headlessui/react';
 import {
     Description,
+    Dialog as HDialog,
     DialogPanel,
     DialogTitle,
-    Dialog as HDialog,
     Transition,
     TransitionChild,
 } from '@headlessui/react';
diff --git a/src/views/components/common/LogoIcon.tsx b/src/views/components/common/LogoIcon.tsx
index b2ca45ae7..a307f4dc4 100644
--- a/src/views/components/common/LogoIcon.tsx
+++ b/src/views/components/common/LogoIcon.tsx
@@ -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{' '}