diff --git a/ babel-plugin-macros.config.js b/ babel-plugin-macros.config.js index 2146e2a..a21678d 100644 --- 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' }, } \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 2ed1ca3..b8b6634 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,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", @@ -62,6 +61,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", @@ -13975,7 +13975,8 @@ "node_modules/picocolors": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz", - "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==" + "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==", + "dev": true }, "node_modules/picomatch": { "version": "2.3.1", @@ -14066,6 +14067,7 @@ "version": "8.4.31", "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz", "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==", + "dev": true, "funding": [ { "type": "opencollective", @@ -14093,6 +14095,7 @@ "version": "15.1.0", "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", @@ -14197,12 +14200,14 @@ "node_modules/postcss-value-parser": { "version": "4.2.0", "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", - "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==" + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true }, "node_modules/postcss/node_modules/nanoid": { "version": "3.3.6", "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", + "dev": true, "funding": [ { "type": "github", @@ -14909,6 +14914,7 @@ "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==", + "dev": true, "dependencies": { "pify": "^2.3.0" } @@ -14917,6 +14923,7 @@ "version": "2.3.0", "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz", "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==", + "dev": true, "engines": { "node": ">=0.10.0" } @@ -15830,6 +15837,7 @@ "version": "1.0.2", "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz", "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==", + "dev": true, "engines": { "node": ">=0.10.0" } diff --git a/package.json b/package.json index 12d9380..c95200b 100644 --- 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 b/postcss.config.cjs similarity index 63% rename from postcss.config.js rename to postcss.config.cjs index 68a8031..0ff82d9 100644 --- a/postcss.config.js +++ b/postcss.config.cjs @@ -2,7 +2,7 @@ // module.exports = { plugins: { - tailwindcss: {}, + tailwindcss: { config: './tailwind-config.cjs' }, autoprefixer: {}, }, } \ No newline at end of file diff --git a/src/assets/images/wager-currencies.png b/src/assets/images/wager-currencies.png index 7c62006..fde6e39 100644 Binary files a/src/assets/images/wager-currencies.png and b/src/assets/images/wager-currencies.png differ diff --git a/src/common/FloatingOrbs/types.ts b/src/common/FloatingOrbs/types.ts index ba62a8d..c9c8738 100644 --- 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); ` \ No newline at end of file diff --git a/src/common/HoveringOrbs/index.tsx b/src/common/HoveringOrbs/index.tsx index c09717d..cc6ed4e 100644 --- a/src/common/HoveringOrbs/index.tsx +++ b/src/common/HoveringOrbs/index.tsx @@ -1,5 +1,5 @@ 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 {} @@ -7,7 +7,7 @@ interface HoveringOrbsProps extends React.AllHTMLAttributes, Rea isHovering: number; } const HoveringOrbs: React.FC = ({ children, isHovering, ...props}: HoveringOrbsProps) => { - // const orbContainerRef = useRef(null); + const background = useRef(); useLayoutEffect(()=> { const banner = background.current.querySelectorAll('.orb'); @@ -29,13 +29,14 @@ const HoveringOrbs: React.FC = ({ children, isHovering, ...pr return !children ? ( -
-
+ + {/*
+ >
*/}
-
+ + + {/*
-
*/} + {/*
-
*/} + {/*
+ left-[3rem] z-[-25]">
*/}
- {children} + {children} } diff --git a/src/containers/NavigationMobile/index.tsx b/src/containers/NavigationMobile/index.tsx index 591f4e8..8a6e535 100644 --- a/src/containers/NavigationMobile/index.tsx +++ b/src/containers/NavigationMobile/index.tsx @@ -54,7 +54,7 @@ export const NavigationMobile = () => { Wega. -
+
diff --git a/src/themes/index.css b/src/themes/index.css index 8f53695..b2fce3b 100644 --- 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 b/tailwind.config.cjs similarity index 92% rename from tailwind.config.js rename to tailwind.config.cjs index 1657baf..3235f9a 100644 --- a/tailwind.config.js +++ b/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'), ], } \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 4d4f982..5a795bb 100644 --- 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: [