Test

components/Core/DraggableModal.tsx

@@ -22,11 +22,10 @@ const DraggableModal = ({ children, href, handleClose, isVisible = null }) => {
           onClick={handleClose}
         />
         <Draggable scale={1} bounds="parent">
-          <div className="w-[90%] md:w-[50%] h-[70%] relative z-[1000]">
+          <div className="w-[90%] md:w-[450px] h-[70%] md:h-[500px] relative z-[1000]">
             <motion.div
               className="flex flex-col bg-black
-            h-full w-full 
-            p-[10px] md:px-[20px] py-[10px]"
+            h-full w-full p-[10px]"
               animate={{
                 opacity: isVisible ? 1 : 0,
                 scale: isVisible ? 1 : 0.5,

components/Pages/AboutPage/AboutContent.tsx

@@ -1,6 +1,6 @@
 import RecBar from "../../RecBar"
 
-const AboutContent = () => (
+const AboutContent = ({ isPopup = false }) => (
   <div className="p-[5px] md:p-[10px] border-[2px] border-gray_1 h-full">
     <div
       className="border-[1px] border-darkgray text-gray_1 font-dresden 
@@ -9,8 +9,10 @@ const AboutContent = () => (
       text-[12px] md:text-[16px]"
     >
       <div
-        className={`h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
-        px-[15px] md:px-[20px] flex flex-col gap-y-[5px] md:gap-y-[20px]`}
+        className={`h-fit max-h-full overflow-y-auto text-[12px] ${
+          isPopup ? "md:text-[14px]" : "md:text-[16px]"
+        }
+        px-[15px] flex flex-col gap-y-[5px] md:gap-y-[20px]`}
       >
         <p>
           {` Heno. is a true trailblazer of the music industry, boasting a plethora of talents as an

components/Pages/ContactPage/ContactContent.tsx

@@ -4,7 +4,7 @@ import { useContact } from "../../../providers/ContactProvider"
 import { SCREEN } from "../../../hooks/useContactData"
 import ContactSuccess from "./ContactSuccess"
 
-const ContactContent = () => {
+const ContactContent = ({ isPopup = false }) => {
   const { screenStatus } = useContact()
 
   return (
@@ -19,8 +19,8 @@ const ContactContent = () => {
           className="h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
             px-[15px] md:px-[20px] flex flex-col gap-y-[5px] md:gap-y-[20px]"
         >
-          {screenStatus === SCREEN.INPUT_MODE && <ContactForm />}
-          {screenStatus === SCREEN.SUCCESS && <ContactSuccess />}
+          {screenStatus === SCREEN.INPUT_MODE && <ContactForm isPopup={isPopup} />}
+          {screenStatus === SCREEN.SUCCESS && <ContactSuccess isPopup={isPopup} />}
         </div>
         <RecBar />
       </div>

components/Pages/ContactPage/ContactForm.tsx

@@ -6,7 +6,7 @@ import TextArea from "../../Core/TextArea"
 import { validation } from "./validation"
 import useIsMobile from "../../../hooks/useIsMobile"
 
-const ContactForm = () => {
+const ContactForm = ({ isPopup }) => {
   const isMobile = useIsMobile()
 
   const {
@@ -21,8 +21,10 @@ const ContactForm = () => {
     handleSubmit,
   } = useContact()
 
-  const inputClasses = `!w-[200px] md:!w-[400px] !text-[10px] md:!text-[20px] h-[32px] md:h-[44px]`
-  const labelClasses = "uppercase text-[10px] md:text-[20px]"
+  const inputClasses = `${
+    isPopup ? "md:!w-[250px]" : "md:!w-[400px] md:h-[44px]"
+  } !w-[200px] !text-[10px] md:!text-[20px] h-[32px] `
+  const labelClasses = `uppercase text-[10px] ${!isPopup && "md:text-[20px]"}`
 
   const buttonRef = useRef() as any
 
@@ -36,7 +38,11 @@ const ContactForm = () => {
       onSubmit={handleSubmit}
       validationSchema={validation}
     >
-      <div className="w-[200px] md:w-[400px] text-[10px] md:text-[22px]">
+      <div
+        className={`w-[200px] md:w-[400px] text-[10px] ${
+          isPopup ? "md:text-[16px]" : "md:text-[22px]"
+        }`}
+      >
         <p>ALL BOOKING / INQUIRIES :</p>
         <p>[email protected]</p>
       </div>
@@ -79,7 +85,9 @@ const ContactForm = () => {
           <TextArea
             value={message}
             onChange={(e) => setMessage(e.target.value)}
-            className="!w-[200px] md:!w-[400px] !text-[10px] md:!text-[20px]"
+            className={`!w-[200px] ${
+              isPopup ? "md:!w-[250px]" : "md:!w-[400px]"
+            } !text-[10px] md:!text-[20px]`}
             id="message"
             name="message"
             rows={isMobile ? 2 : 5}

components/Pages/ContactPage/ContactSuccess.tsx

@@ -1,7 +1,7 @@
-const ContactSuccess = () => (
+const ContactSuccess = ({ isPopup }) => (
   <div
-    className="flex justify-center text-gray_1 flex-col
-  items-center text-[24px]"
+    className={`flex justify-center text-gray_1 flex-col
+    items-center text-[16px] ${!isPopup && "text-[24px]"}`}
   >
     <p>
       INQUIRY HAS BEEN SENT <br /> PLEASE GIVE US 48-72 HRS <br /> TO RESPOND

components/Pages/MusicPage/MusicContent.tsx

@@ -11,7 +11,11 @@ const MusicContent = ({ isPopup = false }) => {
         className="border border-darkgray text-gray_1 font-dresden py-[35px] text-center
                     flex flex-col items-center justify-center text-[16px] relative h-full"
       >
-        {!isMobile && <p className="text-[16px] md:text-[32px]">Scroll to see more</p>}
+        {!isMobile && (
+          <p className={`text-[16px] ${isPopup ? "md:text-[24px]" : "md:text-[32px]"}`}>
+            Scroll to see more
+          </p>
+        )}
         <div
           className="h-fit max-h-full overflow-y-auto py-[10px] px-[20px]
             flex flex-row flex-wrap gap-y-[30px] justify-around md:flex-col md:gap-y-[20px] w-full overflow-hidden px-[30px]"

components/Pages/MusicPage/MusicSlider/MusicSlider.tsx

@@ -39,7 +39,9 @@ const MusicSlider = ({ isPopup }) => (
           type="image"
           blurLink={music.assets}
           link={music.assets}
-          containerClasses="w-[200px] aspect-[1/1] skew-y-[-5deg] rounded-[10px] overflow-hidden"
+          containerClasses={`${
+            isPopup ? "w-[130px]" : "w-[200px]"
+          } aspect-[1/1] skew-y-[-5deg] rounded-[10px] overflow-hidden`}
         />
       </a>
     ))}

components/Pages/PressPage/PressContent.tsx

@@ -1,7 +1,7 @@
 import data from "../../../lib/press-data"
 import RecBar from "../../RecBar"
 
-const PressContent = () => (
+const PressContent = ({ isPopup = false }) => (
   <div className="p-[5px] md:p-[10px] border-[2px] border-gray_1 h-full">
     <div
       className="border-[1px] border-darkgray text-gray_1 font-dresden 
@@ -10,9 +10,9 @@ const PressContent = () => (
           text-[12px] md:text-[16px]"
     >
       <div
-        className="h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
-          p-[15px] md:p-[20px] gap-[30px]
-          grid grid-cols-1 md:grid-cols-2 w-full"
+        className={`h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
+        p-[15px] md:p-[20px] gap-[30px]
+        grid grid-cols-1 ${!isPopup && "md:grid-cols-2"} w-full`}
       >
         {data.map((pressItem) => (
           <a

components/Pages/Web3Page/Trailer.tsx

@@ -4,7 +4,7 @@ import TopArbitrumSection from "./TopArbitrumSection"
 
 const Trailer = ({ isPopup = false }) => (
   <div className="h-fit max-h-full overflow-y-auto w-full">
-    <div className="flex flex-col items-center gap-y-[15px] md:gap-y-[20px]">
+    <div className={`flex flex-col items-center gap-y-[10px] ${!isPopup && "md:gap-y-[20px]"}`}>
       <div
         className={`flex flex-col gap-y-[10px] ${isPopup ? "max-h-[235px]" : "max-h-[335px]"}
       overflow-y-auto pr-2`}

components/Pages/Web3Page/Web3Content.tsx

@@ -11,24 +11,29 @@ const Web3Content = ({ isPopup = false }) => {
   return (
     <div className="p-[5px] md:p-[10px] border-[2px] border-gray_1 h-full">
       <div
-        className="border-[1px] border-darkgray text-gray_1 font-dresden 
-            py-[25px] text-center
-            flex flex-col md:flex-row
-            gap-2 items-center justify-center text-[16px] relative h-full
-            text-[12px] md:text-[16px] relative"
+        className={`border-[1px] border-darkgray text-gray_1 font-dresden 
+        py-[25px] text-center
+        flex flex-col ${!isPopup && "md:flex-row "}
+        gap-2 items-center justify-center text-[16px] relative h-full
+        text-[12px] md:text-[16px] relative`}
       >
         <div
-          className={`md:absolute top-[35px] left-1 text-left md:left-2 capitalize ${
-            isPopup ? "text-[10px] md:text-[14px]" : "text-[12px] md:text-[16px]"
+          className={`z-[2] capitalize ${
+            isPopup
+              ? "text-[10px] md:text-[12px]"
+              : "md:absolute top-[35px] left-1 text-left md:left-2 text-[12px] md:text-[16px]"
           }`}
         >
           {data[selectedDrop].startedAt} <br />
-          <span className="uppercase">{data[selectedDrop].title}</span> {isMobile && <br />}
+          <span className="uppercase">{data[selectedDrop].title}</span>{" "}
+          {isMobile || (isPopup && <br />)}
           By {data[selectedDrop].artist}
         </div>
         <div
-          className="h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
-            px-[15px] md:px-[20px] flex flex-col gap-y-[5px] md:gap-y-[20px]"
+          className={`relative z-[1] h-fit max-h-full overflow-y-auto text-[12px] md:text-[16px]
+          px-[15px] md:px-[20px] flex flex-col gap-y-[5px] ${
+            isPopup ? "md:gap-y-[10px]" : "md:gap-y-[20px]"
+          }`}
         >
           <Trailer isPopup={isPopup} />
         </div>

components/Pages/YoutubeContent/YoutubeContent.tsx

@@ -20,8 +20,8 @@ const YoutubeContent = () => {
         >
           <ReactPlayer
             url={`https://www.youtube.com/watch?v=${videoId}&feature=youtu.be`}
-            width={isMobile ? 250 : 500}
-            height={isMobile ? 125 : 250}
+            width={isMobile ? 250 : 300}
+            height={isMobile ? 125 : 230}
             playing
           />
         </div>

components/Web3Socials/Web3Socials.tsx

@@ -1,10 +1,11 @@
 import Media from "../Core/Media"
 
 const Web3Socials = ({ isPopup = false }) => {
-  const lensIconSize = isPopup ? "w-[20px] md:w-[40px]" : "w-[25px] md:w-[55px]"
-  const zoraIconSize = isPopup ? "w-[15px] md:w-[30px]" : "w-[18px] md:w-[40px]"
-  const soundIconSize = isPopup ? "w-[15px] md:w-[30px]" : "w-[18px] md:w-[40px]"
-  const catalogIconSize = isPopup ? "w-[18px] md:w-[40px]" : "w-[20px] md:w-[50px]"
+  const lensIconSize = isPopup ? "w-[20px] md:w-[30px]" : "w-[25px] md:w-[55px]"
+  const zoraIconSize = isPopup ? "w-[15px] md:w-[20px]" : "w-[18px] md:w-[40px]"
+  const soundIconSize = isPopup ? "w-[15px] md:w-[25px]" : "w-[18px] md:w-[40px]"
+  const catalogIconSize = isPopup ? "w-[18px] md:w-[30px]" : "w-[20px] md:w-[50px]"
+  const textClasses = !isPopup && "md:text-[20px]"
 
   return (
     <div className="flex gap-x-[15px] md:gap-x-[40px] items-end">
@@ -16,7 +17,7 @@ const Web3Socials = ({ isPopup = false }) => {
             blurLink="/images/Web3/LENS.png"
             containerClasses={`aspect-[516/327] ${lensIconSize}`}
           />
-          <p className="text-white text-[12px] md:text-[20px]">LENS</p>
+          <p className={`text-white text-[12px] ${textClasses}`}>LENS</p>
         </div>
       </a>
       <a href="https://zora.co/heno.eth" target="_blank" rel="noreferrer">
@@ -27,7 +28,7 @@ const Web3Socials = ({ isPopup = false }) => {
             blurLink="/images/Web3/ZORA.png"
             containerClasses={`aspect-[1/1] ${zoraIconSize}`}
           />
-          <p className="text-white text-[12px] md:text-[20px]">ZORA</p>
+          <p className={`text-white text-[12px] ${textClasses}`}>ZORA</p>
         </div>
       </a>
       <a href="https://www.sound.xyz/heno" target="_blank" rel="noreferrer">
@@ -38,7 +39,7 @@ const Web3Socials = ({ isPopup = false }) => {
             blurLink="/images/Web3/SOUND.png"
             containerClasses={`aspect-[1/1] ${soundIconSize}`}
           />
-          <p className="text-white text-[12px] md:text-[20px]">SOUND.XYZ</p>
+          <p className={`text-white text-[12px] ${textClasses}`}>SOUND.XYZ</p>
         </div>
       </a>
       <a href="https://beta.catalog.works/heno" target="_blank" rel="noreferrer">
@@ -49,7 +50,7 @@ const Web3Socials = ({ isPopup = false }) => {
             blurLink="/images/Web3/CATALOG.png"
             containerClasses={`aspect-[357/278] ${catalogIconSize}`}
           />
-          <p className="text-white text-[12px] md:text-[20px]">CATALOG</p>
+          <p className={`text-white text-[12px] ${textClasses}`}>CATALOG</p>
         </div>
       </a>
     </div>

components/WebCam/WebCam.tsx

@@ -38,7 +38,7 @@ const WebCam = () => {
           className="w-full h-full flex justify-center items-center"
           onClick={onClick}
         >
-          <p className="text-white text-xl">WebCam</p>
+          <p className="text-white text-xl">Verify Identity</p>
         </button>
       )}
       {granted && (

lib/screens.tsx

@@ -8,7 +8,7 @@ export const SCREENS = {
   ABOUT_SCREEN: {
     screenName: "ABOUT_SCREEN",
     href: "/about",
-    screen: <AboutContent />,
+    screen: <AboutContent isPopup />,
   },
   MUSIC_SCREEN: {
     screenName: "MUSIC_SCREEN",
@@ -23,11 +23,11 @@ export const SCREENS = {
   PRESS_SCREEN: {
     screenName: "PRESS_SCREEN",
     href: "/press",
-    screen: <PressContent />,
+    screen: <PressContent isPopup />,
   },
   CONTACT_SCREEN: {
     screenName: "CONTACT_SCREEN",
     href: "/contact",
-    screen: <ContactContent />,
+    screen: <ContactContent isPopup />,
   },
 }