feat: add manual webkit support for safari

Misfits-Labs · Nov 9, 2023 · c1832df · c1832df
1 parent de876da
commit c1832df
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 27 deletions.
diff --git a/babel-plugin-macros.config.js b/babel-plugin-macros.config.js
@@ -3,7 +3,7 @@
 
 module.exports = {
  twin: {
-   config: 'tailwind.config.js', 
+   config: 'tailwind.config.cjs', 
    preset: 'styled-components'
  },
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,6 @@
     "ethers": "^5.7.2",
     "firebase": "^10.3.1",
     "joi": "^17.9.2",
-    "postcss-import": "^15.1.0",
     "react": "^18.2.0",
     "react-blockies": "^1.4.1",
     "react-dom": "^18.2.0",
@@ -73,6 +72,7 @@
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "postcss": "^8.4.27",
+    "postcss-import": "^15.1.0",
     "prettier": "^3.0.1",
     "styled-components": "^6.0.7",
     "tailwindcss": "^3.3.3",
@@ -83,12 +83,15 @@
   },
   "browserslist": {
     "production": [
-      "last 2 versions",
-      "> 0.3%, not dead"
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ],
     "development": [
-      "last 2 versions",
-      "> 0.3%, not dead"
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version",
+      "last 1 ie version"
     ]
   }
 }
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
@@ -2,7 +2,7 @@
 // 
 module.exports = {
  plugins: {
-  tailwindcss: {},
+  tailwindcss: { config: './tailwind-config.cjs' },
   autoprefixer: {},
  },
 }
diff --git a/src/assets/images/wager-currencies.png b/src/assets/images/wager-currencies.png
diff --git a/src/common/FloatingOrbs/types.ts b/src/common/FloatingOrbs/types.ts
@@ -23,4 +23,9 @@ export const FloatingOrbBlurContainerWithoutBackdrop = styled.div`
   left: 0;
   ${tw`z-[-21] bg-pretu bg-opacity-[0.01]`}
   -webkit-overflow: clip;
+`
+
+export const Orb = styled.div`
+  ${tw`pointer-events-none absolute w-[350px] h-[350px] rounded-[100%] blur-[75px]`}
+  -webkit-filter: blur(75px);
 `
diff --git a/src/common/HoveringOrbs/index.tsx b/src/common/HoveringOrbs/index.tsx
@@ -1,13 +1,13 @@
 import { useRef, useLayoutEffect } from 'react';
-import { FloatingOrbContainer, FloatingOrbBlurContainerWithoutBackdrop } from '../FloatingOrbs/types';
+import { FloatingOrbContainer, FloatingOrbBlurContainerWithoutBackdrop, Orb } from '../FloatingOrbs/types';
 import { gsap, Linear } from 'gsap';
 import "twin.macro"
 // interface FloatingOrbsProps {} 
 interface HoveringOrbsProps extends React.AllHTMLAttributes<HTMLDivElement>, React.Attributes {
  isHovering: number;
 }
 const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...props}: HoveringOrbsProps) => {
-  // const orbContainerRef = useRef<any>(null);
+
   const background = useRef<any>();
   useLayoutEffect(()=> {
     const banner = background.current.querySelectorAll('.orb');
@@ -29,13 +29,14 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
   return !children ? (
    <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}>
-      <div className="orb" tw="dark:bg-[#C836E0] 
+    <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]"/>
+      {/* <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> */}
       <div className="orb" tw="
       dark:bg-[#B80D57] 
       pointer-events-none 
@@ -54,16 +55,19 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
   ) : <FloatingOrbContainer tw="relative w-full h-full overflow-clip" {...props}>
       <FloatingOrbBlurContainerWithoutBackdrop tw="rounded-[inherit]"></FloatingOrbBlurContainerWithoutBackdrop>
       <div tw="absolute left-[-10rem] flex justify-center items-start w-full h-full rounded-[inherit] p-[inherit]" ref={background}>
-        <div className="orb"
+        <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]
         blur-[75px]
         left-[11rem]
         rounded-[100%]
-        z-[-25]"
-        ></div>
-        <div className="orb" tw="
+        z-[-28]"
+        ></div> */}
+        {/* <div className="orb" tw="
         dark:bg-[#B80D57] 
         pointer-events-none 
         absolute 
@@ -72,15 +76,15 @@ const HoveringOrbs: React.FC<HoveringOrbsProps> = ({ children, isHovering, ...pr
         h-[350px] 
         rounded-[100%]
         left-[9rem] z-[-26]
-        "></div>
-        <div className="orb" tw="
+        "></div> */}
+        {/* <div className="orb" tw="
         dark:bg-oranjo 
         pointer-events-none
         blur-[75px] 
         absolute w-[350px] h-[350px] rounded-[100%] 
-        left-[3rem] z-[-25]"></div>
+        left-[3rem] z-[-25]"></div> */}
       </div>
-        {children}
+      {children}
     </FloatingOrbContainer>
    }
 

diff --git a/src/containers/NavigationMobile/index.tsx b/src/containers/NavigationMobile/index.tsx
@@ -54,7 +54,7 @@ export const NavigationMobile = () => {
            <Brand tw="font-[32px] font-semibold" ><Link to="/">Wega<span tw="font-[32px] dark:text-oranjo">.</span></Link></Brand>
          </BrandContainer>
        </NavigationLinksContainer>
-       <div tw="relative flex items-end w-[22px] z-[756]" onClick={toggleNav} ><HamburgerIcon /></div>
+       <div tw="relative flex items-end w-[22px] z-[756]" onClick={toggleNav} ><HamburgerIcon width="100%" /></div>
      </div>
    </NavigationBar>
    <div ref={mobileLinksContainerRef} tw="z-[800] fixed top-0 w-full flex flex-col items-center translate-y-[-25rem]">

diff --git a/src/themes/index.css b/src/themes/index.css
@@ -1,5 +1,6 @@
 @import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100;200;300;400;500;600;700;800;900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
 
+@config "../../tailwind.config.cjs";
 @tailwind base;
 @tailwind components;
 @tailwind utilities;

diff --git a/tailwind.config.js → tailwind.config.cjs b/tailwind.config.js → tailwind.config.cjs
@@ -5,7 +5,7 @@
 
 // tailwind.config.js
 export default {
-  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  content: ['./src/**/*.{js,ts,jsx,tsx,html}'],
   theme: {
 
     extend: {
@@ -76,7 +76,9 @@ export default {
   },
   darkMode: 'class',
   plugins: [
+    require('tailwindcss/nesting'),
+    require('postcss-import'),
     require('tailwindcss'),
-    require('autoprefixer')(["last 2 versions", "> 0.3%, not dead"]),
+    require('autoprefixer'),
   ],
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -17,7 +17,7 @@ export default ({ mode }) => {
     },
     css: {
       postcss: {
-        plugins: [ autoprefixer(["last 2 versions", "> 0.3%, not dead"])],
+        plugins: [autoprefixer({overrideBrowserslist: ["last 5 version"]})],
       },
     },
     plugins: [