fixup! fixup! fixup! feat: add manual webkit support for safari

Misfits-Labs · Nov 9, 2023 · 31c7cce · 31c7cce
1 parent 3d2e82e
commit 31c7cce
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 50 deletions.
diff --git a/src/common/FloatingOrbs/index.tsx b/src/common/FloatingOrbs/index.tsx
@@ -1,5 +1,5 @@
 import { useLayoutEffect, useRef } from 'react';
-import { FloatingOrbContainer, FloatingOrbBlurContainer, FloatingOrbBlurContainerWithoutBackdrop } from './types';
+import { FloatingOrbContainer, FloatingOrbBlurContainer, FloatingOrbBlurContainerWithoutBackdrop, Orb } from './types';
 import { gsap, Sine } from 'gsap';
 import "twin.macro"
 // interface FloatingOrbsProps {} 
@@ -25,54 +25,17 @@ export const FloatingOrbs: React.FC<React.AllHTMLAttributes<HTMLDivElement> & Re
    <FloatingOrbContainer tw="overflow-clip" {...props}>
     <FloatingOrbBlurContainerWithoutBackdrop></FloatingOrbBlurContainerWithoutBackdrop>
     <div tw="relative flex justify-center items-center w-full sm:w-[100vw] sm:h-[100vh]" ref={orbContainerRef}>
-      <div className="orb" tw="dark:bg-[#C836E0] 
-      pointer-events-none
-      blur-[75px] 
-      absolute w-[350px] h-[350px] 
-      rounded-[100%]
-      translate-x-[5rem] translate-y-[5rem] z-[-27]"
-      ></div>
-      <div className="orb" tw="
-      dark:bg-[#B80D57] 
-      blur-[75px]
-      pointer-events-none 
-      absolute 
-      w-[350px] 
-      h-[350px] 
-      rounded-[100%]
-      translate-x-[-15rem] translate-y-[5rem] z-[-26]
-      "></div>
-      <div className="orb" tw="dark:bg-oranjo 
-      pointer-events-none
-      blur-[75px]
-      absolute w-[350px] h-[350px] rounded-[100%] 
-      translate-x-[15rem] translate-y-[-2.5rem] z-[-25]"></div>
+      <Orb className="orb" tw="dark:bg-[#C836E0] translate-x-[5rem] translate-y-[5rem] z-[-28]"/>
+      <Orb className="orb" tw="dark:bg-[#B80D57] translate-x-[-15rem] translate-y-[5rem] z-[-27]"/>
+      <Orb className="orb" tw="dark:bg-oranjo translate-x-[15rem] translate-y-[-2.5rem] z-[-25] z-[-26]"/>
     </div>
    </FloatingOrbContainer> 
   ) : <FloatingOrbContainer tw="relative w-full h-full" {...props}>
       <FloatingOrbBlurContainer tw="rounded-[inherit]"></FloatingOrbBlurContainer>
       <div tw="absolute flex justify-center items-center w-full h-full overflow-clip rounded-[inherit]" ref={orbContainerRef}>
-        <div className="orb"
-        tw="dark:bg-[#C836E0] 
-        pointer-events-none 
-        absolute w-[350px] h-[350px] 
-        rounded-[100%]
-        translate-x-[5rem] translate-y-[5rem] z-[-27]"
-        ></div>
-        <div className="orb" tw="
-        dark:bg-[#B80D57] 
-        pointer-events-none 
-        absolute 
-        w-[350px] 
-        h-[350px] 
-        rounded-[100%]
-        translate-x-[-15rem] translate-y-[5rem] z-[-26]
-        "></div>
-        <div className="orb" tw="
-        dark:bg-oranjo 
-        pointer-events-none 
-        absolute w-[350px] h-[350px] rounded-[100%] 
-        translate-x-[15rem] translate-y-[-2.5rem] z-[-25]"></div>
+        <Orb className="orb" tw="dark:bg-[#C836E0] translate-x-[5rem] translate-y-[5rem] z-[-28]"/>
+        <Orb className="orb" tw="dark:bg-[#B80D57] translate-x-[-15rem] translate-y-[5rem] z-[-27]"/>
+        <Orb className="orb" tw="dark:bg-oranjo translate-x-[15rem] translate-y-[-2.5rem] z-[-25] z-[-26]"/>
       </div>
       {children}
     </FloatingOrbContainer>

diff --git a/src/common/HoveringOrbs/index.tsx b/src/common/HoveringOrbs/index.tsx
@@ -30,14 +30,16 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
    <FloatingOrbContainer tw="w-full h-full overflow-clip" {...props}>
     <FloatingOrbBlurContainerWithoutBackdrop ></FloatingOrbBlurContainerWithoutBackdrop>
     <div tw="relative flex justify-center items-center w-full sm:w-[100vw] sm:h-[100vh]" ref={background} >
-      <Orb className="orb" tw="dark:bg-[#C836E0] translate-x-[5rem] translate-y-[5rem] z-[-28]"/>
+      <Orb className="orb" tw="dark:bg-[#C836E0] left-[11rem] z-[-28]"/>
+      <Orb className="orb" tw="dark:bg-[#B80D57] left-[9rem] z-[-27]"/>
+      <Orb className="orb" tw="dark:bg-oranjo left-[3rem] z-[-26]"/>
       {/* <div className="orb" tw="dark:bg-[#C836E0] 
       pointer-events-none 
       absolute w-[350px] h-[350px] 
       rounded-[100%]
       translate-x-[5rem] translate-y-[5rem] z-[-27]"
       ></div> */}
-      <div className="orb" tw="
+      {/* <div className="orb" tw="
       dark:bg-[#B80D57] 
       pointer-events-none 
       absolute 
@@ -49,7 +51,7 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
       <div className="orb" tw="dark:bg-oranjo 
       pointer-events-none
       absolute w-[350px] h-[350px] rounded-[100%] 
-      translate-x-[15rem] translate-y-[-2.5rem] z-[-25]"></div>
+      translate-x-[15rem] translate-y-[-2.5rem] z-[-25]"></div> */}
     </div>
    </FloatingOrbContainer> 
   ) : <FloatingOrbContainer tw="relative w-full h-full overflow-clip" {...props}>

diff --git a/src/components/LandingPageOwnTheYardSectionMobile/index.tsx b/src/components/LandingPageOwnTheYardSectionMobile/index.tsx
@@ -5,7 +5,7 @@ import {
   SectionHeaderTitle, 
   SectionHeaderSubtitle 
 } from "../../common/Section/types";
-import { HoveringOrbs } from '../../common/FloatingOrbs';
+import { FloatingOrbs } from '../../common/FloatingOrbs';
 import {
   NormalText, 
   LargeText,
@@ -36,7 +36,7 @@ const LandingPageOwnTheYardSectionMobile = () => {
    </div>
    {/* gradient banner */}
    <div tw="relative rounded-[25px] h-[217px] border-[2px] border-blanc z-[inherit]">
-    <HoveringOrbs tw="rounded-[inherit] p-[20px]">
+    <FloatingOrbs tw="rounded-[inherit] p-[20px]">
      <div tw="relative w-full flex flex-col rounded-[inherit]">
        <div tw="flex flex-col gap-y-[24px]">
          <LargeText tw="text-left">Powered by Wega Protocol</LargeText>
@@ -49,7 +49,7 @@ const LandingPageOwnTheYardSectionMobile = () => {
          </a>
        </div>
      </div> 
-    </HoveringOrbs>
+    </FloatingOrbs>
    </div>
   </Section>
  )