feat: use the new css helper module for styling in other components

everydotorg · Aug 12, 2024 · 2649d18 · 2649d18
1 parent 66d89ff
commit 2649d18
Show file tree

Hide file tree

Showing 37 changed files with 166 additions and 166 deletions.
diff --git a/packages/donate-button-v4/src/components/widget/components/Checkbox/styles.ts b/packages/donate-button-v4/src/components/widget/components/Checkbox/styles.ts
@@ -1,10 +1,10 @@
-import cxs from 'cxs';
 import {COLORS} from 'src/components/widget/theme/colors';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
 /* Hide checkbox visually but remain accessible to screen readers.
   Source: https://polished.js.org/docs/#hidevisually */
-export const hiddenCheckboxCss = cxs({
+export const hiddenCheckboxCss = css({
 	border: 0,
 	clip: 'rect(0 0 0 0)',
 	clipPath: 'inset(50%)',
@@ -24,7 +24,7 @@ export const checkboxCss = ({
 	checked?: boolean;
 	primaryColor: string;
 }) =>
-	cxs({
+	css({
 		cursor: 'pointer',
 		width: '24px',
 		minWidth: '24px',
@@ -37,7 +37,7 @@ export const checkboxCss = ({
 		...(checked ? {background: primaryColor} : {})
 	});
 
-export const checkMarkIconCss = cxs({
+export const checkMarkIconCss = css({
 	width: '16px',
 	height: '16px',
 	'& > path': {
@@ -46,11 +46,11 @@ export const checkMarkIconCss = cxs({
 	}
 });
 
-export const checkboxLabelTextCss = cxs({
+export const checkboxLabelTextCss = css({
 	cursor: 'pointer'
 });
 
-export const checkboxLabelContainerCss = cxs({
+export const checkboxLabelContainerCss = css({
 	display: 'flex',
 	alignItems: 'center',
 	gap: Spacing.XS

diff --git a/packages/donate-button-v4/src/components/widget/components/ErrorMessage/index.tsx b/packages/donate-button-v4/src/components/widget/components/ErrorMessage/index.tsx
@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {CloseIcon} from 'src/components/widget/icons/CloseIcon';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-const errorMessageCss = cxs({
+const errorMessageCss = css({
 	display: 'flex',
 	alignItems: 'center',
 	gap: Spacing.XXS,

diff --git a/packages/donate-button-v4/src/components/widget/components/Faq/styles.ts b/packages/donate-button-v4/src/components/widget/components/Faq/styles.ts
@@ -1,34 +1,34 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {COLORS} from 'src/components/widget/theme/colors';
 import {textSize} from 'src/components/widget/theme/font-sizes';
 import {horizontalStackCss, Spacing} from 'src/components/widget/theme/spacing';
+import css, {CSSObject} from 'src/helpers/css';
 
-export const faqListCss = cxs({
+export const faqListCss = css({
 	display: 'flex',
 	flexDirection: 'column',
 	gap: Spacing.M
 });
 
-export const rotateCss: cxs.CSSObject = {
+export const rotateCss: CSSObject = {
 	position: 'relative',
 	top: '-1px',
 	transform: 'rotate(180deg)'
 };
 
-export const descriptionBaseCss: cxs.CSSObject = {
+export const descriptionBaseCss: CSSObject = {
 	'> p': {
 		marginBottom: Spacing.XS
 	}
 };
-export const descriptionOpen = cxs({
+export const descriptionOpen = css({
 	...descriptionBaseCss,
 	maxHeight: '1000px',
 	transition: 'all 1s',
 	opacity: '1'
 });
 
-export const descriptionClose = cxs({
+export const descriptionClose = css({
 	...descriptionBaseCss,
 	opacity: '0',
 	overflow: 'hidden',
@@ -37,7 +37,7 @@ export const descriptionClose = cxs({
 });
 
 export const faqItemConateinerCss = (mobileOnly?: boolean) =>
-	cxs({
+	css({
 		...textSize.xs,
 		...(mobileOnly
 			? {
@@ -49,8 +49,8 @@ export const faqItemConateinerCss = (mobileOnly?: boolean) =>
 	});
 
 export const faqItemButtonCss = (isOpen: boolean) =>
-	cxs({
-		...horizontalStackCss.cxs(Spacing.S),
+	css({
+		...horizontalStackCss.css(Spacing.S),
 		...textSize.xs,
 		alignItems: 'center',
 		justifyContent: 'space-between',
@@ -75,7 +75,7 @@ export const faqItemButtonCss = (isOpen: boolean) =>
 			  })
 	});
 
-export const faqLinkCss = cxs({
+export const faqLinkCss = css({
 	color: COLORS.Text,
 	fontWeight: 500,
 	textDecoration: 'none',

diff --git a/packages/donate-button-v4/src/components/widget/components/Footer/styles.ts b/packages/donate-button-v4/src/components/widget/components/Footer/styles.ts
@@ -1,10 +1,10 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {COLORS} from 'src/components/widget/theme/colors';
 import {textSize} from 'src/components/widget/theme/font-sizes';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const footerCardCss = cxs({
+export const footerCardCss = css({
 	padding: `${Spacing.XL} ${Spacing.XL} 0px`,
 	backgroundColor: 'unset',
 
@@ -23,7 +23,7 @@ export const footerCardCss = cxs({
 	}
 });
 
-export const footerLinkCss = cxs({
+export const footerLinkCss = css({
 	color: COLORS.TextGray,
 	fontWeight: 500,
 	textDecoration: 'none',

diff --git a/packages/donate-button-v4/src/components/widget/components/FundraiserLink/styles.ts b/packages/donate-button-v4/src/components/widget/components/FundraiserLink/styles.ts
@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
+import css from 'src/helpers/css';
 
 export const linkCss = (primaryColor: string) =>
-	cxs({
+	css({
 		color: primaryColor,
 		fontWeight: 500,
 		textDecoration: 'none',
@@ -11,7 +11,7 @@ export const linkCss = (primaryColor: string) =>
 		}
 	});
 
-export const cardCss = cxs({
+export const cardCss = css({
 	display: 'none',
 	[BREAKPOINTS.TabletLandscapeUp]: {
 		display: 'block'

diff --git a/packages/donate-button-v4/src/components/widget/components/Grid/index.tsx b/packages/donate-button-v4/src/components/widget/components/Grid/index.tsx
@@ -1,9 +1,9 @@
-import cxs from 'cxs';
 import {FunctionalComponent} from 'preact';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-const gridCss = cxs({
+const gridCss = css({
 	display: 'grid',
 	gridGap: 0,
 	gridTemplateColumns: '1fr',

diff --git a/packages/donate-button-v4/src/components/widget/components/GridCard/styles.ts b/packages/donate-button-v4/src/components/widget/components/GridCard/styles.ts
@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const cardCss = cxs({
+export const cardCss = css({
 	backgroundColor: 'white',
 	padding: `${Spacing.XL} ${Spacing.XL} 0px`,
 	borderRadius: 'unset',

diff --git a/packages/donate-button-v4/src/components/widget/components/Header/CloseButton/styles.ts b/packages/donate-button-v4/src/components/widget/components/Header/CloseButton/styles.ts
@@ -1,9 +1,9 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {FontFamily} from 'src/components/widget/theme/font-family';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const buttonCss = cxs({
+export const buttonCss = css({
 	cursor: 'pointer',
 	display: 'inline-flex',
 	alignItems: 'center',
@@ -14,14 +14,14 @@ export const buttonCss = cxs({
 	fontFamily: FontFamily.BasisGrotesque
 });
 
-export const smallScreenCloseButtonCss = cxs({
+export const smallScreenCloseButtonCss = css({
 	display: 'block',
 	[BREAKPOINTS.TabletLandscapeUp]: {
 		display: 'none'
 	}
 });
 
-export const largeScreenCloseButtonCss = cxs({
+export const largeScreenCloseButtonCss = css({
 	position: 'absolute',
 	right: Spacing.XL,
 	top: Spacing.XL,

diff --git a/packages/donate-button-v4/src/components/widget/components/Header/styles.ts b/packages/donate-button-v4/src/components/widget/components/Header/styles.ts
@@ -1,8 +1,8 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
-export const containerCss = cxs({
+export const containerCss = css({
 	display: 'flex',
 	justifyContent: 'flex-end',
 	alignItems: 'center',

diff --git a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/FundraiserCard.tsx b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/FundraiserCard.tsx
@@ -1,4 +1,3 @@
-import cxs from 'cxs';
 import {Fragment} from 'preact/jsx-runtime';
 import {GridCard} from 'src/components/widget/components/GridCard';
 import {
@@ -13,11 +12,12 @@ import {
 import {useNonprofitOrError} from 'src/components/widget/hooks/useNonprofit';
 import {Fundraiser} from 'src/components/widget/types/Fundraiser';
 import {LOGO_IMAGE_PLACEHOLDER_ID} from 'src/constants/placeholders';
+import css from 'src/helpers/css';
 import {getCloudinaryUrl} from 'src/helpers/getCloudinaryUrl';
 import joinClassNames from 'src/helpers/joinClassNames';
 
 const coverImageCss = (url: string) =>
-	cxs({
+	css({
 		backgroundImage: `url(${url})`,
 		backgroundSize: 'cover',
 		width: 'calc(100% + 25px + 25px)',

diff --git a/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts b/packages/donate-button-v4/src/components/widget/components/NonprofitInfo/styles.ts
@@ -1,4 +1,3 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {textSize} from 'src/components/widget/theme/font-sizes';
 import {Radii} from 'src/components/widget/theme/radii';
@@ -7,17 +6,18 @@ import {
 	Spacing,
 	verticalStackCss
 } from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 import joinClassNames from 'src/helpers/joinClassNames';
 
-export const nonprofitNameCss = cxs({
+export const nonprofitNameCss = css({
 	lineHeight: '20px',
 	fontWeight: 'unset',
 	'> span': {
 		fontWeight: 700
 	}
 });
 
-export const fundraiserNameCss = cxs({
+export const fundraiserNameCss = css({
 	lineHeight: '20px',
 	fontWeight: 'unset',
 	'> span': {
@@ -26,7 +26,7 @@ export const fundraiserNameCss = cxs({
 });
 
 export const logoImageCss = (logoUrl: string) =>
-	cxs({
+	css({
 		borderRadius: Radii.Circle,
 		overflow: 'hidden',
 		display: 'block',
@@ -44,7 +44,7 @@ export const logoImageCss = (logoUrl: string) =>
 export const fundraiserCardLogoCss = (logoUrl: string) =>
 	joinClassNames([
 		logoImageCss(logoUrl),
-		cxs({
+		css({
 			width: '32px',
 			height: '32px',
 			flexShrink: 0,
@@ -55,15 +55,15 @@ export const fundraiserCardLogoCss = (logoUrl: string) =>
 		})
 	]);
 
-export const nonprofitCardCss = cxs({
+export const nonprofitCardCss = css({
 	padding: `${Spacing.XL}`,
 	[BREAKPOINTS.TabletLandscapeUp]: {
-		...verticalStackCss.cxs(Spacing.S),
+		...verticalStackCss.css(Spacing.S),
 		padding: `${Spacing.L}`
 	}
 });
 
-export const largeFundraiserCardCss = cxs({
+export const largeFundraiserCardCss = css({
 	display: 'none',
 	overflow: 'hidden',
 	[BREAKPOINTS.TabletLandscapeUp]: {
@@ -74,7 +74,7 @@ export const largeFundraiserCardCss = cxs({
 	}
 });
 
-export const smallFundraiserCardCss = cxs({
+export const smallFundraiserCardCss = css({
 	display: 'flex',
 	gap: `${Spacing.S}`,
 	padding: `${Spacing.XL}`,
@@ -86,12 +86,12 @@ export const smallFundraiserCardCss = cxs({
 	}
 });
 
-export const avatarAndNameWrapperCss = cxs({
-	...horizontalStackCss.cxs(Spacing.S),
+export const avatarAndNameWrapperCss = css({
+	...horizontalStackCss.css(Spacing.S),
 	alignItems: 'center'
 });
 
-export const fundraiserAvatarAndNameWrapperCss = cxs({
+export const fundraiserAvatarAndNameWrapperCss = css({
 	display: 'flex',
 	gap: `${Spacing.S}`,
 	alignItems: 'center',
@@ -104,7 +104,7 @@ export const fundraiserAvatarAndNameWrapperCss = cxs({
 	}
 });
 
-export const descriptionCss = cxs({
+export const descriptionCss = css({
 	...textSize.xs,
 	color: 'rgba(0, 0, 0, 0.7)',
 	display: 'none',
@@ -114,7 +114,7 @@ export const descriptionCss = cxs({
 });
 
 export const truncatedTextCss = (numberLines: number) =>
-	cxs({
+	css({
 		overflow: 'hidden',
 		overflowWrap: 'anywhere',
 		wordBreak: 'break-word',

diff --git a/...ges/donate-button-v4/src/components/widget/components/PaymentProcess/BackButton/styles.ts b/...ges/donate-button-v4/src/components/widget/components/PaymentProcess/BackButton/styles.ts
@@ -1,10 +1,10 @@
-import cxs from 'cxs';
 import {BREAKPOINTS} from 'src/components/widget/theme/breakpoints';
 import {textSize} from 'src/components/widget/theme/font-sizes';
 import {Spacing} from 'src/components/widget/theme/spacing';
+import css from 'src/helpers/css';
 
 export const backButtonCss = (primaryColor: string) =>
-	cxs({
+	css({
 		outline: 'none',
 		border: 'none',
 		fontFamily: 'inherit',