From e601232d748047e1d7f460773c6ae177b2606df2 Mon Sep 17 00:00:00 2001 From: Ruveyda Date: Tue, 13 May 2025 20:08:07 +0330 Subject: [PATCH 1/2] feat: update tailwind package --- package.json | 8 +- postcss.config.cjs | 6 -- postcss.config.mjs | 5 ++ rollup.config.dev.js | 5 +- rollup.config.prod.js | 9 +- src/assets/Icons.tsx | 2 +- src/components/Button/index.tsx | 10 +-- src/components/CardItem/index.tsx | 20 ++--- src/components/Input/OTPInput.tsx | 4 +- src/components/Input/index.tsx | 16 ++-- src/components/Modal/Backdrop/index.tsx | 6 +- src/components/Modal/Header/index.tsx | 14 +-- src/components/Modal/index.tsx | 12 +-- src/components/Transaction/History/index.tsx | 18 ++-- src/components/Transaction/Summary/index.tsx | 6 +- src/containers/BluxModal/content.tsx | 5 -- src/containers/BluxModal/index.tsx | 3 - src/containers/Pages/Activity/index.tsx | 8 +- src/containers/Pages/ConfirmCode/index.tsx | 18 ++-- src/containers/Pages/OnBoarding/index.tsx | 18 ++-- src/containers/Pages/Profile/index.tsx | 18 ++-- src/containers/Pages/SelectAsset/index.tsx | 24 ++--- src/containers/Pages/Send/index.tsx | 15 ++-- .../Pages/SignTransaction/index.tsx | 22 ++--- src/containers/Pages/Successful/index.tsx | 16 ++-- src/containers/Pages/Waiting/index.tsx | 18 ++-- src/tailwind.css | 89 ++++++++++++++++--- src/types/index.ts | 1 - tailwind.config.js | 66 -------------- 29 files changed, 223 insertions(+), 239 deletions(-) delete mode 100644 postcss.config.cjs create mode 100644 postcss.config.mjs delete mode 100644 tailwind.config.js diff --git a/package.json b/package.json index b225edf..190641c 100644 --- a/package.json +++ b/package.json @@ -48,20 +48,20 @@ "@types/react-dom": "^19.0.2", "@typescript-eslint/eslint-plugin": "^8.19.1", "@typescript-eslint/parser": "^8.19.1", - "autoprefixer": "^10.4.20", "eslint": "^9.17.0", "eslint-plugin-react": "^7.37.3", "eslint-plugin-react-hooks": "^5.1.0", "globals": "^15.14.0", - "postcss": "^8.4.49", + "postcss": "^8.5.3", "prettier": "^3.5.3", "prettier-plugin-tailwindcss": "^0.6.11", "rollup": "^4.29.1", "rollup-plugin-peer-deps-external": "^2.2.4", "rollup-plugin-postcss": "^4.0.2", - "tailwindcss": "^3.4.17", + "tailwindcss": "^4.1.6", "typescript": "^5.7.2", - "typescript-eslint": "^8.19.1" + "typescript-eslint": "^8.19.1", + "@tailwindcss/postcss": "^4.1.6" }, "optionalDependencies": { "@rollup/rollup-darwin-x64": "4.30.1", diff --git a/postcss.config.cjs b/postcss.config.cjs deleted file mode 100644 index 12a703d..0000000 --- a/postcss.config.cjs +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..a34a3d5 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,5 @@ +export default { + plugins: { + '@tailwindcss/postcss': {}, + }, +}; diff --git a/rollup.config.dev.js b/rollup.config.dev.js index 66d7b40..bbf27b7 100644 --- a/rollup.config.dev.js +++ b/rollup.config.dev.js @@ -4,8 +4,7 @@ import resolve from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; import peerDepsExternal from 'rollup-plugin-peer-deps-external'; -import tailwindcss from 'tailwindcss'; -import autoprefixer from 'autoprefixer'; +import tailwindcss from '@tailwindcss/postcss'; import pkg from './package.json' assert { type: 'json' }; @@ -36,7 +35,7 @@ export default { inject: true, minimize: false, sourceMap: true, - plugins: [tailwindcss, autoprefixer], + plugins: [tailwindcss], }), typescript({ tsconfig: './tsconfig.json', diff --git a/rollup.config.prod.js b/rollup.config.prod.js index 6cae331..69da3a6 100644 --- a/rollup.config.prod.js +++ b/rollup.config.prod.js @@ -3,10 +3,9 @@ import terser from '@rollup/plugin-terser'; import commonjs from '@rollup/plugin-commonjs'; import resolve from '@rollup/plugin-node-resolve'; import typescript from '@rollup/plugin-typescript'; -import peerDepsExternal from 'rollup-plugin-peer-deps-external'; +// import peerDepsExternal from 'rollup-plugin-peer-deps-external'; -import tailwindcss from 'tailwindcss'; -import autoprefixer from 'autoprefixer'; +import tailwindcss from '@tailwindcss/postcss'; import pkg from './package.json' assert { type: 'json' }; @@ -27,7 +26,7 @@ export default { preserveEntrySignatures: 'strict', treeshake: true, plugins: [ - // peerDepsExternal(), + // peerDepsExternal(), terser({ compress: { drop_console: true, @@ -46,7 +45,7 @@ export default { extract: false, inject: true, minimize: true, - plugins: [tailwindcss, autoprefixer], + plugins: [tailwindcss], }), typescript({ tsconfig: './tsconfig.json', diff --git a/src/assets/Icons.tsx b/src/assets/Icons.tsx index 172daf2..5276c99 100644 --- a/src/assets/Icons.tsx +++ b/src/assets/Icons.tsx @@ -111,7 +111,7 @@ export const Loading = ({ fill = '#0C1083' }: { fill?: string }) => ( viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg" - className="bluxcc-animate-spin" + className="bluxcc:animate-spin" > = { - small: 'bluxcc-h-8 bluxcc-text-sm bluxcc-gap-1', - medium: 'bluxcc-h-10 bluxcc-text-sm bluxcc-gap-2', - large: 'bluxcc-h-[52px] bluxcc-text-base bluxcc-gap-2', + small: 'bluxcc:h-8 bluxcc:text-sm bluxcc:gap-1', + medium: 'bluxcc:h-10 bluxcc:text-sm bluxcc:gap-2', + large: 'bluxcc:h-[52px] bluxcc:text-base bluxcc:gap-2', }; const Button = ({ @@ -80,7 +80,7 @@ const Button = ({ disabled={state === 'disabled'} className={`${buttonBase} ${sizeClasses[size]} ${ className ?? '' - } bluxcc-transition-all bluxcc-duration-300`} + } bluxcc:transition-all bluxcc:duration-300`} style={baseStyle} > {startIcon && {startIcon}} diff --git a/src/components/CardItem/index.tsx b/src/components/CardItem/index.tsx index b9a64dd..9d7ca11 100644 --- a/src/components/CardItem/index.tsx +++ b/src/components/CardItem/index.tsx @@ -70,8 +70,8 @@ const CardItem = ({ return (
{startIcon} -
+
{variant === 'input' ? ( <> setIsFocused(true)} onBlur={() => { @@ -116,11 +116,11 @@ const CardItem = ({ } }} /> -
+
) : ( - {label} + {label} )}
{isRecent && (
+ )} diff --git a/src/components/Input/OTPInput.tsx b/src/components/Input/OTPInput.tsx index 37bdc6f..7547d8b 100644 --- a/src/components/Input/OTPInput.tsx +++ b/src/components/Input/OTPInput.tsx @@ -89,7 +89,7 @@ const OTPInput: React.FC = ({ otp, setOtp, error }) => { }) as React.CSSProperties; return ( -
+
{otp.map((digit, index) => ( = ({ otp, setOtp, error }) => { onChange={(e) => handleChange(index, e)} onPaste={handlePaste} onKeyDown={(e) => handleKeyDown(index, e)} - className="bluxcc-h-14 bluxcc-w-12 bluxcc-border bluxcc-text-center bluxcc-text-lg bluxcc-outline-none focus:bluxcc-ring-1" + className="bluxcc:h-14 bluxcc:w-12 bluxcc:border bluxcc:text-center bluxcc:text-lg bluxcc:outline-hidden bluxcc:focus:ring-1" style={getInputStyle(digit)} /> ))} diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx index 1a5d346..ada82ee 100644 --- a/src/components/Input/index.tsx +++ b/src/components/Input/index.tsx @@ -40,7 +40,7 @@ const CustomButton = ({ backgroundColor: appearance.background, borderWidth: appearance.includeBorders ? appearance.borderWidth : '1px', }} - className="bluxcc-border bluxcc-px-3 bluxcc-py-1 bluxcc-text-sm bluxcc-font-medium bluxcc-transition-all bluxcc-duration-300" + className="bluxcc:border bluxcc:px-3 bluxcc:py-1 bluxcc:text-sm bluxcc:font-medium bluxcc:transition-all bluxcc:duration-300" > {button} @@ -88,18 +88,18 @@ const InputField = ({ }; return ( -
+
{label && ( )}
setIsFocused(true)} onBlur={() => setIsFocused(false)} onMouseEnter={onMouseEnter} @@ -116,14 +116,14 @@ const InputField = ({ } as React.CSSProperties } > - {iconLeft &&
{iconLeft}
} + {iconLeft &&
{iconLeft}
} )} - {iconRight &&
{iconRight}
} + {iconRight &&
{iconRight}
}
{error && (

{error}

diff --git a/src/components/Modal/Backdrop/index.tsx b/src/components/Modal/Backdrop/index.tsx index 3d9567c..ecb84c6 100644 --- a/src/components/Modal/Backdrop/index.tsx +++ b/src/components/Modal/Backdrop/index.tsx @@ -12,10 +12,10 @@ const ModalBackdrop = ({ isSticky = false, }: BackdropProps) => (
diff --git a/src/components/Modal/Header/index.tsx b/src/components/Modal/Header/index.tsx index 4ad2bfa..a800b54 100644 --- a/src/components/Modal/Header/index.tsx +++ b/src/components/Modal/Header/index.tsx @@ -21,11 +21,11 @@ const ModalHeader = ({ }: HeaderProps) => { const context = useProvider(); return ( -
+
{icon === 'info' ? (
{/* cursor-pointer */} {/* */} @@ -33,24 +33,24 @@ const ModalHeader = ({ ) : icon === 'back' ? (
) : ( -
+
)} -

+

{title}

{closeButton ? ( -
+
) : ( -
+
)}
); diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 16a4876..3399138 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -81,16 +81,16 @@ const Modal = ({ )}
e.target === e.currentTarget && handleClose(onClose)} >
-
+
{ }; return ( -
-
+
+
{handleActionLogo(tx.title)}
-
+

{tx.title}

-

{tx.description}

+

{tx.description}

-
+
{formatDate(tx.date)}
- +
diff --git a/src/components/Transaction/Summary/index.tsx b/src/components/Transaction/Summary/index.tsx index 7a7f06f..328431c 100644 --- a/src/components/Transaction/Summary/index.tsx +++ b/src/components/Transaction/Summary/index.tsx @@ -59,12 +59,12 @@ const Summary = ({ } return ( -
+
{details.map( ({ label, value, isHighlighted, isCopyable, copyValue }, index) => (
{label} = { title: 'Send', Component: , }, - [Routes.SELECT_ASSET]: { - title: 'Select assets', - Component: , - }, [Routes.ACTIVITY]: { title: 'Activity', Component: , diff --git a/src/containers/BluxModal/index.tsx b/src/containers/BluxModal/index.tsx index be4e705..57d2ef4 100644 --- a/src/containers/BluxModal/index.tsx +++ b/src/containers/BluxModal/index.tsx @@ -19,7 +19,6 @@ export default function BluxModal({ isOpen, closeModal }: BluxModalProps) { (route === Routes.ONBOARDING && value.showAllWallets) || route === Routes.ACTIVITY || route === Routes.SEND || - route === Routes.SELECT_ASSET || route === Routes.OTP; let modalIcon: 'back' | 'info' | undefined; @@ -36,8 +35,6 @@ export default function BluxModal({ isOpen, closeModal }: BluxModalProps) { (route === Routes.OTP && !value.isAuthenticated) ) { setRoute(Routes.ONBOARDING); - } else if (route === Routes.SELECT_ASSET) { - setRoute(Routes.SEND); } else if (value.showAllWallets) { setValue((prev) => ({ ...prev, showAllWallets: false })); } else if (route === Routes.SEND || route === Routes.ACTIVITY) { diff --git a/src/containers/Pages/Activity/index.tsx b/src/containers/Pages/Activity/index.tsx index 5f00e64..5751056 100644 --- a/src/containers/Pages/Activity/index.tsx +++ b/src/containers/Pages/Activity/index.tsx @@ -88,13 +88,13 @@ const Activity: React.FC = () => { const isEmpty = !loading && transactionsDetails.length === 0; return ( -
+
{loading ? ( -
+
Loading activity...
) : isEmpty ? ( -
+
No activity found
) : ( @@ -111,7 +111,7 @@ const Activity: React.FC = () => { : '0px', borderBottomColor: value.config.appearance.borderColor, }} - className={`bluxcc-p-2`} + className={`bluxcc:p-2`} >
diff --git a/src/containers/Pages/ConfirmCode/index.tsx b/src/containers/Pages/ConfirmCode/index.tsx index dc5a298..fa2ffc9 100644 --- a/src/containers/Pages/ConfirmCode/index.tsx +++ b/src/containers/Pages/ConfirmCode/index.tsx @@ -36,7 +36,7 @@ const ConfirmCode: React.FC = () => { }, [otp, email]); return ( -
+
{ ? appearance.borderWidth : '1px', }} - className="bluxcc-mb-6 bluxcc-flex bluxcc-h-20 bluxcc-w-20 bluxcc-items-center bluxcc-justify-center bluxcc-overflow-hidden bluxcc-rounded-full bluxcc-border-2" + className="bluxcc:mb-6 bluxcc:flex bluxcc:h-20 bluxcc:w-20 bluxcc:items-center bluxcc:justify-center bluxcc:overflow-hidden bluxcc:rounded-full bluxcc:border-2" >
-
-

+

+

Enter confirmation code

{error ? ( -

+

Invalid code, please try again.

) : ( -

+

Please check your email and enter confirmation code below

)}
-
+
{/* divider */} -
+
{ }; const renderDivider = () => ( -
+
{ /> { ); return ( -
+
{value.config.appearance.logo && ( -
+
{value.config.appName} {
)} -
+
{orderedLoginMethods.map((method, index) => { const nextMethod = orderedLoginMethods[index + 1]; const prevMethod = orderedLoginMethods[index - 1]; @@ -186,7 +186,7 @@ const OnBoarding = () => { return (
Log in with Passkey @@ -199,7 +199,7 @@ const OnBoarding = () => {