Refactor QR component layout and styles

walnuts1018 · Jan 15, 2024 · ddd1c2a · ddd1c2a
1 parent 66b1ce5
commit ddd1c2a
Showing 1 changed file with 38 additions and 36 deletions.
diff --git a/src/app/components/QR.tsx b/src/app/components/QR.tsx
@@ -46,48 +46,50 @@ export default function QR() {
         <Modal
           isOpen={isShown}
           onRequestClose={() => setIsShown(false)}
-          className='fixed h-[100svh] w-screen bg-black bg-opacity-50 flex items-center flex-col justify-center overflow-hidden'
+          className='fixed h-[100svh] w-screen bg-black bg-opacity-50 flex items-center justify-center overflow-hidden'
           overlayClassName='fixed inset-0 bg-black bg-opacity-50 z-10'
         >
           <div className='fixed h-full w-full -z-10' onClick={() => setIsShown(false)}></div>
-          <div
-            className='rounded-3xl bg-white p-4 shadow-md w-2/3 flex flex-col justify-center items-center transition-all duration-500 sm:w-1/2 md:w-1/3'
-            style={{
-              transform: isRotated ? 'rotate(180deg)' : 'rotate(0deg)',
-            }}
-          >
-            <div className='flex justify-center items-center'>
-              <Image
-                src='/walnuts.jpg'
-                alt='favicon'
-                width={50}
-                height={50}
-                className='rounded-full'
-              />
-              <p className='bg-white text-black font-bold font-Nunito text-2xl px-1 text-center'>
-                Walnuts.dev
-              </p>
-            </div>
+          <div className='flex justify-between items-center w-full h-1/2 flex-col'>
+            <div
+              className='rounded-3xl bg-white p-4 shadow-md w-2/3 flex flex-col justify-center items-center transition-all duration-500 sm:w-1/2 md:w-1/3'
+              style={{
+                transform: isRotated ? 'rotate(180deg)' : 'rotate(0deg)',
+              }}
+            >
+              <div className='flex justify-center items-center'>
+                <Image
+                  src='/walnuts.jpg'
+                  alt='favicon'
+                  width={50}
+                  height={50}
+                  className='rounded-full'
+                />
+                <p className='bg-white text-black font-bold font-Nunito text-2xl px-1 text-center'>
+                  Walnuts.dev
+                </p>
+              </div>
 
-            <div className='flex justify-center items-center sm:w-1/2'>
-              <Image src='/QR-walnuts.dev.svg' alt='walnuts.dev QR' width={500} height={500} />
+              <div className='flex justify-center items-center sm:w-1/2'>
+                <Image src='/QR-walnuts.dev.svg' alt='walnuts.dev QR' width={500} height={500} />
+              </div>
             </div>
-          </div>
 
-          <button
-            title='rotate QR'
-            className='fixed bg-white rounded-full border-white p-3 border-4 shadow-neumorphism-button active:shadow-neumorphism-button-pressed mt-10 w-[72px] h-[72px] bottom-20'
-            onClick={() => setIsRotated((prev) => !prev)}
-          >
-            <ScreenRotationAltIcon
-              className='text-[#83dbd6] w-full h-full'
-              fontSize='large'
-              style={{
-                transform: isRotated ? 'rotate(360deg)' : 'rotate(0deg)',
-                transition: 'transform 0.5s ease-in-out',
-              }}
-            />
-          </button>
+            <button
+              title='rotate QR'
+              className='bg-white rounded-full border-white p-3 border-4 shadow-neumorphism-button active:shadow-neumorphism-button-pressed mt-10 w-[72px] h-[72px]'
+              onClick={() => setIsRotated((prev) => !prev)}
+            >
+              <ScreenRotationAltIcon
+                className='text-[#83dbd6] w-full h-full'
+                fontSize='large'
+                style={{
+                  transform: isRotated ? 'rotate(360deg)' : 'rotate(0deg)',
+                  transition: 'transform 0.5s ease-in-out',
+                }}
+              />
+            </button>
+          </div>
         </Modal>
       ) : (
         <></>