fix hacker styling

CruzHacks · Jan 17, 2024 · c7c0e25 · c7c0e25
1 parent 064b74a
commit c7c0e25
Showing 1 changed file with 20 additions and 17 deletions.
diff --git a/src/views/portal/hacker/QRCode/index.tsx b/src/views/portal/hacker/QRCode/index.tsx
@@ -8,26 +8,29 @@ const QRCodeHacker = () => {
   } = useAuth()
 
   return (
-    <div className= 'overflow-x-clip px-4 sm:px-6 lg:px-8'>
-        <div className='sm:flex sm:items-center'>
-            <div className='sm:flex-auto'>
-            <h1 className='font-title text-2xl font-semibold leading-6'>Check-In QR Code</h1>
-            <p className='text-gray-700 mt-2 text-sm'>
-                Present this QR code to a CruzHacks Organizer to check-in to the event.
-            </p>
-            </div>
+    <div className='space-y-10 overflow-x-clip px-4 sm:px-6 lg:px-8'>
+      <div className='sm:flex sm:items-center'>
+        <div className='sm:flex-auto'>
+          <h1 className='font-title text-2xl font-semibold leading-6'>
+            Check-In QR Code
+          </h1>
+          <p className='text-gray-700 mt-2 text-sm'>
+            Present this QR code to a CruzHacks Organizer to check-in to the
+            event.
+          </p>
         </div>
+      </div>
 
-        <div className='mt-8 items-center rounded-3xl bg-[#4659FF]/10 p-10 md:space-y-10'>
-                {user ? (
-                <QRCode 
-                    value={user.uid} 
-                />
-            ) : (
-                // SHOULD NEVER HAPPEN
-                <p className='text-error'>No User</p>
-            )}
+      <div className='flex w-full items-center justify-center md:justify-start'>
+        <div className='flex w-full items-center justify-center rounded-3xl bg-[#4659FF]/10 p-5 md:w-fit md:space-y-10 md:p-10'>
+          {user ? (
+            <QRCode value={user.uid} />
+          ) : (
+            // SHOULD NEVER HAPPEN
+            <p className='text-error'>No User</p>
+          )}
         </div>
+      </div>
     </div>
   )
 }