From 15ab80a47569eb9ee38566972e9f56b2b8c31119 Mon Sep 17 00:00:00 2001
From: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
Date: Mon, 4 Sep 2023 23:16:41 -0700
Subject: [PATCH] Remove glamor css (#1637)
* Remove glamor css syntax
* Release notes
* Remove fallback value
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
* Remove fallback value
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
* Remove fallback value
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---------
Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv>
---
packages/desktop-client/src/components/AppBackground.tsx | 4 ++--
packages/desktop-client/src/components/NotesButton.tsx | 4 ++--
.../src/components/autocomplete/Autocomplete.tsx | 9 +++------
.../src/components/budget/BudgetSummaries.js | 4 ++--
.../src/components/budget/report/BudgetSummary.tsx | 8 ++++----
.../src/components/budget/rollover/BudgetSummary.tsx | 8 ++++----
.../desktop-client/src/components/common/AnchorLink.tsx | 6 +++++-
packages/desktop-client/src/components/common/Block.tsx | 4 ++--
.../desktop-client/src/components/common/InlineField.tsx | 4 ++--
packages/desktop-client/src/components/common/Input.tsx | 4 ++--
.../desktop-client/src/components/common/LinkButton.tsx | 4 ++--
.../desktop-client/src/components/common/Paragraph.tsx | 4 +++-
packages/desktop-client/src/components/common/Select.tsx | 9 ++++++---
packages/desktop-client/src/components/common/Text.tsx | 4 ++--
packages/desktop-client/src/components/common/View.tsx | 4 ++--
packages/desktop-client/src/components/forms.tsx | 4 ++--
.../desktop-client/src/components/mobile/MobileForms.js | 4 ++--
.../src/components/modals/CreateEncryptionKey.js | 7 ++++++-
.../desktop-client/src/components/reports/Tooltip.js | 4 ++--
packages/desktop-client/src/components/settings/UI.tsx | 4 ++--
.../desktop-client/src/components/sidebar/Account.tsx | 5 ++---
packages/desktop-client/src/components/tooltips.js | 2 +-
.../src/components/transactions/MobileTransaction.js | 4 ++--
packages/desktop-client/src/icons/AnimatedLoading.js | 4 ++--
upcoming-release-notes/1637.md | 6 ++++++
25 files changed, 70 insertions(+), 54 deletions(-)
create mode 100644 upcoming-release-notes/1637.md
diff --git a/packages/desktop-client/src/components/AppBackground.tsx b/packages/desktop-client/src/components/AppBackground.tsx
index 1af44ea58..b23e84af6 100644
--- a/packages/desktop-client/src/components/AppBackground.tsx
+++ b/packages/desktop-client/src/components/AppBackground.tsx
@@ -21,7 +21,7 @@ function AppBackground({ initializing, loadingText }: AppBackgroundProps) {
{(loadingText != null || initializing) && (
<View
- {...css({
+ className={`${css({
position: 'absolute',
top: 0,
left: 0,
@@ -30,7 +30,7 @@ function AppBackground({ initializing, loadingText }: AppBackgroundProps) {
paddingTop: 200,
color: theme.pageText,
alignItems: 'center',
- })}
+ })}`}
>
<Block style={{ marginBottom: 20, fontSize: 18 }}>
{loadingText}
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
index e49c57c43..ac46eed8b 100644
--- a/packages/desktop-client/src/components/NotesButton.tsx
+++ b/packages/desktop-client/src/components/NotesButton.tsx
@@ -109,13 +109,13 @@ function NotesTooltip({
{editable ? (
<textarea
ref={inputRef}
- {...css({
+ className={`${css({
border: '1px solid ' + colors.border,
padding: 7,
minWidth: 350,
minHeight: 120,
outline: 'none',
- })}
+ })}`}
value={notes || ''}
onChange={e => setNotes(e.target.value)}
placeholder="Notes (markdown supported)"
diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
index 7dd2f084a..7f8365474 100644
--- a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
+++ b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -117,14 +117,14 @@ function defaultRenderItems(items, getItemProps, highlightedIndex) {
// * https://github.com/WebKit/WebKit/blob/58956cf59ba01267644b5e8fe766efa7aa6f0c5c/Source/WebKit/WebProcess/WebPage/ios/WebPageIOS.mm#L783
role="button"
key={name}
- {...css({
+ className={`${css({
padding: 5,
cursor: 'default',
backgroundColor:
highlightedIndex === index
? theme.alt2MenuItemBackgroundHover
: null,
- })}
+ })}`}
>
{name}
</div>
@@ -384,10 +384,7 @@ function SingleAutocomplete({
// Super annoying but it works best to return a div so we
// can't use a View here, but we can fake it be using the
// className
- <div
- className={'view ' + css({ display: 'flex' }).toString()}
- {...containerProps}
- >
+ <div className={`view ${css({ display: 'flex' })}`} {...containerProps}>
{renderInput(
getInputProps({
focused,
diff --git a/packages/desktop-client/src/components/budget/BudgetSummaries.js b/packages/desktop-client/src/components/budget/BudgetSummaries.js
index 9d512ec06..e8cf86ddd 100644
--- a/packages/desktop-client/src/components/budget/BudgetSummaries.js
+++ b/packages/desktop-client/src/components/budget/BudgetSummaries.js
@@ -60,13 +60,13 @@ export default function BudgetSummaries({ SummaryComponent }) {
return (
<div
- {...css([
+ className={`${css([
{ flex: 1, overflow: 'hidden' },
months.length === 1 && {
marginLeft: -4,
marginRight: -4,
},
- ])}
+ ])}`}
ref={containerRef}
>
<animated.div
diff --git a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
index de2da31c1..82c5cc0f2 100644
--- a/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/report/BudgetSummary.tsx
@@ -277,12 +277,12 @@ function Saved({ projected, style }: SavedProps) {
}}
>
<View
- {...css([
+ className={`${css([
{
fontSize: 25,
color: projected ? colors.y3 : isNegative ? colors.r4 : colors.p5,
},
- ])}
+ ])}`}
>
<PrivacyFilter blurIntensity={7}>
{format(saved, 'financial')}
@@ -368,7 +368,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
</View>
<div
- {...css([
+ className={`${css([
{
textAlign: 'center',
marginTop: 3,
@@ -377,7 +377,7 @@ export function BudgetSummary({ month }: BudgetSummaryProps) {
textDecorationSkip: 'ink',
},
currentMonth === month && { textDecoration: 'underline' },
- ])}
+ ])}`}
>
{monthUtils.format(month, 'MMMM')}
</div>
diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
index c6778fd83..f137a857e 100644
--- a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
+++ b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -180,7 +180,7 @@ function ToBudget({
<Block
onClick={() => setMenuOpen('actions')}
data-cellname={sheetName}
- {...css([
+ className={`${css([
styles.veryLargeText,
{
fontWeight: 400,
@@ -193,7 +193,7 @@ function ToBudget({
borderColor: isNegative ? colors.r4 : colors.p5,
},
},
- ])}
+ ])}`}
>
{format(num, 'financial')}
</Block>
@@ -337,7 +337,7 @@ export function BudgetSummary({
</View>
<div
- {...css([
+ className={`${css([
{
textAlign: 'center',
marginTop: 3,
@@ -346,7 +346,7 @@ export function BudgetSummary({
textDecorationSkip: 'ink',
},
currentMonth === month && { fontWeight: 'bold' },
- ])}
+ ])}`}
>
{monthUtils.format(month, 'MMMM')}
</div>
diff --git a/packages/desktop-client/src/components/common/AnchorLink.tsx b/packages/desktop-client/src/components/common/AnchorLink.tsx
index c51374770..c1ea47493 100644
--- a/packages/desktop-client/src/components/common/AnchorLink.tsx
+++ b/packages/desktop-client/src/components/common/AnchorLink.tsx
@@ -23,7 +23,11 @@ export default function AnchorLink({
return (
<NavLink
to={to}
- {...css([styles.smallText, style, match ? activeStyle : null])}
+ className={`${css([
+ styles.smallText,
+ style,
+ match ? activeStyle : null,
+ ])}`}
>
{children}
</NavLink>
diff --git a/packages/desktop-client/src/components/common/Block.tsx b/packages/desktop-client/src/components/common/Block.tsx
index 6d69ba1fd..4a4db9b96 100644
--- a/packages/desktop-client/src/components/common/Block.tsx
+++ b/packages/desktop-client/src/components/common/Block.tsx
@@ -7,12 +7,12 @@ type BlockProps = HTMLProps<HTMLDivElement> & {
};
export default function Block(props: BlockProps) {
- const { style, innerRef, ...restProps } = props;
+ const { className = '', style, innerRef, ...restProps } = props;
return (
<div
{...restProps}
ref={innerRef}
- className={`${props.className || ''} ${css(props.style)}`}
+ className={`${className} ${css(style)}`}
/>
);
}
diff --git a/packages/desktop-client/src/components/common/InlineField.tsx b/packages/desktop-client/src/components/common/InlineField.tsx
index 2fc45fa63..285191ff8 100644
--- a/packages/desktop-client/src/components/common/InlineField.tsx
+++ b/packages/desktop-client/src/components/common/InlineField.tsx
@@ -21,7 +21,7 @@ export default function InlineField({
}: InlineFieldProps) {
return (
<label
- {...css(
+ className={`${css(
{
display: 'flex',
flexDirection: 'row',
@@ -30,7 +30,7 @@ export default function InlineField({
width,
},
style,
- )}
+ )}`}
>
<div
style={{
diff --git a/packages/desktop-client/src/components/common/Input.tsx b/packages/desktop-client/src/components/common/Input.tsx
index f31ac0bac..6e0cbbcda 100644
--- a/packages/desktop-client/src/components/common/Input.tsx
+++ b/packages/desktop-client/src/components/common/Input.tsx
@@ -43,7 +43,7 @@ export default function Input({
return (
<input
ref={inputRef ? mergeRefs([inputRef, ref]) : ref}
- {...css(
+ className={`${css(
defaultInputStyle,
{
whiteSpace: 'nowrap',
@@ -57,7 +57,7 @@ export default function Input({
},
styles.smallText,
style,
- )}
+ )}`}
{...nativeProps}
onKeyDown={e => {
if (e.key === 'Enter' && onEnter) {
diff --git a/packages/desktop-client/src/components/common/LinkButton.tsx b/packages/desktop-client/src/components/common/LinkButton.tsx
index 8c64d4521..e5f1ba8a1 100644
--- a/packages/desktop-client/src/components/common/LinkButton.tsx
+++ b/packages/desktop-client/src/components/common/LinkButton.tsx
@@ -14,7 +14,7 @@ export default function LinkButton({
return (
<button
type="button"
- {...css([
+ className={`${css([
{
textDecoration: 'none',
color: theme.pageTextLink,
@@ -34,7 +34,7 @@ export default function LinkButton({
},
styles.smallText,
style,
- ])}
+ ])}`}
{...nativeProps}
>
{children}
diff --git a/packages/desktop-client/src/components/common/Paragraph.tsx b/packages/desktop-client/src/components/common/Paragraph.tsx
index df3553f1b..ebbe8b37a 100644
--- a/packages/desktop-client/src/components/common/Paragraph.tsx
+++ b/packages/desktop-client/src/components/common/Paragraph.tsx
@@ -18,7 +18,9 @@ export default function Paragraph({
return (
<div
{...props}
- {...css(!isLast && { marginBottom: 15 }, style, { lineHeight: '1.5em' })}
+ className={`${css(!isLast && { marginBottom: 15 }, style, {
+ lineHeight: '1.5em',
+ })}`}
>
{children}
</div>
diff --git a/packages/desktop-client/src/components/common/Select.tsx b/packages/desktop-client/src/components/common/Select.tsx
index 6d1bfd322..a89b5f770 100644
--- a/packages/desktop-client/src/components/common/Select.tsx
+++ b/packages/desktop-client/src/components/common/Select.tsx
@@ -65,7 +65,10 @@ export default function Select<Value extends string>({
}}
>
<ListboxButton
- {...css([{ borderWidth: 0, padding: 5, borderRadius: 4 }, style])}
+ className={`${css([
+ { borderWidth: 0, padding: 5, borderRadius: 4 },
+ style,
+ ])}`}
arrow={
<ExpandArrow
style={{
@@ -100,7 +103,7 @@ export default function Select<Value extends string>({
boxShadow: styles.cardShadow,
border: '1px solid ' + theme.menuBorder,
}}
- {...css({
+ className={`${css({
'[data-reach-listbox-option]': {
background: theme.menuItemBackground,
color: theme.menuItemText,
@@ -109,7 +112,7 @@ export default function Select<Value extends string>({
background: theme.menuItemBackgroundHover,
color: theme.menuItemTextHover,
},
- })}
+ })}`}
>
{!line ? (
<ListboxList style={{ maxHeight: 250, overflowY: 'auto' }}>
diff --git a/packages/desktop-client/src/components/common/Text.tsx b/packages/desktop-client/src/components/common/Text.tsx
index 296385bee..5ded8e256 100644
--- a/packages/desktop-client/src/components/common/Text.tsx
+++ b/packages/desktop-client/src/components/common/Text.tsx
@@ -12,12 +12,12 @@ type TextProps = HTMLProps<HTMLSpanElement> & {
};
const Text = (props: TextProps) => {
- const { style, innerRef, ...restProps } = props;
+ const { className = '', style, innerRef, ...restProps } = props;
return (
<span
{...restProps}
ref={innerRef}
- className={`${props.className} ${css(props.style)}`}
+ className={`${className} ${css(style)}`}
/>
);
};
diff --git a/packages/desktop-client/src/components/common/View.tsx b/packages/desktop-client/src/components/common/View.tsx
index 6b892f790..5212bb775 100644
--- a/packages/desktop-client/src/components/common/View.tsx
+++ b/packages/desktop-client/src/components/common/View.tsx
@@ -21,13 +21,13 @@ const View = (props: ViewProps) => {
// everywhere and we can avoid any perf penalty that glamor would
// incur.
- const { style, nativeStyle, innerRef, className = '', ...restProps } = props;
+ const { className = '', style, nativeStyle, innerRef, ...restProps } = props;
return (
<div
{...restProps}
ref={innerRef}
style={nativeStyle}
- className={`view ${className} ${css(props.style)}`}
+ className={`view ${className} ${css(style)}`}
/>
);
};
diff --git a/packages/desktop-client/src/components/forms.tsx b/packages/desktop-client/src/components/forms.tsx
index a3ad654af..516668b33 100644
--- a/packages/desktop-client/src/components/forms.tsx
+++ b/packages/desktop-client/src/components/forms.tsx
@@ -73,7 +73,7 @@ export const Checkbox = (props: CheckboxProps) => {
<input
type="checkbox"
{...props}
- {...css(
+ className={`${css(
[
{
position: 'relative',
@@ -120,7 +120,7 @@ export const Checkbox = (props: CheckboxProps) => {
},
],
props.style,
- )}
+ )}`}
/>
);
};
diff --git a/packages/desktop-client/src/components/mobile/MobileForms.js b/packages/desktop-client/src/components/mobile/MobileForms.js
index bf9b02020..4114b2571 100644
--- a/packages/desktop-client/src/components/mobile/MobileForms.js
+++ b/packages/desktop-client/src/components/mobile/MobileForms.js
@@ -117,12 +117,12 @@ export function BooleanField({ checked, onUpdate, style }) {
type="checkbox"
checked={checked}
onChange={e => onUpdate(e.target.checked)}
- {...css([
+ className={`${css([
{
marginInline: EDITING_PADDING,
},
style,
- ])}
+ ])}`}
/>
);
}
diff --git a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
index 8f312e40b..001268087 100644
--- a/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
+++ b/packages/desktop-client/src/components/modals/CreateEncryptionKey.js
@@ -69,7 +69,12 @@ export default function CreateEncryptionKey({
</ExternalLink>
</Paragraph>
<Paragraph>
- <ul {...css({ marginTop: 0, '& li': { marginBottom: 8 } })}>
+ <ul
+ className={`${css({
+ marginTop: 0,
+ '& li': { marginBottom: 8 },
+ })}`}
+ >
<li>
<strong>Important:</strong> if you forget this password{' '}
<em>and</em> you don’t have any local copies of your data,
diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js
index 9b1d8c83c..966e2233a 100644
--- a/packages/desktop-client/src/components/reports/Tooltip.js
+++ b/packages/desktop-client/src/components/reports/Tooltip.js
@@ -43,7 +43,7 @@ class Tooltip extends Component {
return ReactDOM.createPortal(
<div
- {...css(
+ className={`${css(
{
position: 'absolute',
top: 0,
@@ -75,7 +75,7 @@ class Tooltip extends Component {
content: '" "',
}),
style,
- )}
+ )}`}
>
{datum.premadeLabel}
</div>,
diff --git a/packages/desktop-client/src/components/settings/UI.tsx b/packages/desktop-client/src/components/settings/UI.tsx
index e5eb6e78b..aaa205206 100644
--- a/packages/desktop-client/src/components/settings/UI.tsx
+++ b/packages/desktop-client/src/components/settings/UI.tsx
@@ -17,7 +17,7 @@ type SettingProps = {
export const Setting = ({ primaryAction, style, children }: SettingProps) => {
return (
<View
- {...css([
+ className={`${css([
{
backgroundColor: colors.n9,
alignSelf: 'flex-start',
@@ -28,7 +28,7 @@ export const Setting = ({ primaryAction, style, children }: SettingProps) => {
width: '100%',
},
style,
- ])}
+ ])}`}
>
<View
style={{
diff --git a/packages/desktop-client/src/components/sidebar/Account.tsx b/packages/desktop-client/src/components/sidebar/Account.tsx
index d4ec0e00d..6e05a4c6f 100644
--- a/packages/desktop-client/src/components/sidebar/Account.tsx
+++ b/packages/desktop-client/src/components/sidebar/Account.tsx
@@ -120,8 +120,7 @@ function Account({
}}
>
<div
- className="dot"
- {...css({
+ className={`dot ${css({
marginRight: 3,
width: 5,
height: 5,
@@ -130,7 +129,7 @@ function Account({
marginLeft: 2,
transition: 'transform .3s',
opacity: connected ? 1 : 0,
- })}
+ })}`}
/>
</View>
diff --git a/packages/desktop-client/src/components/tooltips.js b/packages/desktop-client/src/components/tooltips.js
index 3fa898a40..d3b667c9a 100644
--- a/packages/desktop-client/src/components/tooltips.js
+++ b/packages/desktop-client/src/components/tooltips.js
@@ -313,7 +313,7 @@ export class Tooltip extends Component {
<div ref={el => (this.target = el)}>
{ReactDOM.createPortal(
<div
- {...css(contentStyle, style, styles.darkScrollbar)}
+ className={`${css(contentStyle, style, styles.darkScrollbar)}`}
ref={this.contentRef}
data-testid={this.props['data-testid'] || 'tooltip'}
data-istooltip
diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
index 0ec5d17d6..a5d0cb536 100644
--- a/packages/desktop-client/src/components/transactions/MobileTransaction.js
+++ b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -1189,7 +1189,7 @@ function ListBoxSection({ section, state }) {
{section.rendered && (
<div
{...headingProps}
- {...css(styles.smallText, {
+ className={`${css(styles.smallText, {
backgroundColor: colors.n10,
borderBottom: `1px solid ${colors.n9}`,
borderTop: `1px solid ${colors.n9}`,
@@ -1202,7 +1202,7 @@ function ListBoxSection({ section, state }) {
top: '0',
width: '100%',
zIndex: zIndices.SECTION_HEADING,
- })}
+ })}`}
>
{section.rendered}
</div>
diff --git a/packages/desktop-client/src/icons/AnimatedLoading.js b/packages/desktop-client/src/icons/AnimatedLoading.js
index 027e99ace..803c86f1c 100644
--- a/packages/desktop-client/src/icons/AnimatedLoading.js
+++ b/packages/desktop-client/src/icons/AnimatedLoading.js
@@ -12,13 +12,13 @@ const rotation = css.keyframes({
function AnimatedLoading(props) {
return (
<span
- {...css({
+ className={`${css({
animationName: rotation,
animationDuration: '1.6s',
animationTimingFunction: 'cubic-bezier(0.17, 0.67, 0.83, 0.67)',
animationIterationCount: 'infinite',
lineHeight: 0,
- })}
+ })}`}
>
<Loading {...props} />
</span>
diff --git a/upcoming-release-notes/1637.md b/upcoming-release-notes/1637.md
new file mode 100644
index 000000000..b409429bd
--- /dev/null
+++ b/upcoming-release-notes/1637.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Remove glamor ...css syntax.
--
GitLab