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>
2026-04-29 02:54:09 -05:00 · 2023-09-04 23:16:41 -07:00
parent 3e32db74cc
commit 15ab80a475
25 changed files with 70 additions and 54 deletions
--- 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}
--- 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)"
--- 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,
--- 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
--- 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>
--- 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>
--- 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>
--- 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)}`}
    />
  );
 }
--- 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={{
--- 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) {
--- 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}
--- 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>
--- 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' }}>
--- 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)}`}
    />
  );
 };
--- 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)}`}
    />
  );
 };
--- 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,
-      )}
+      )}`}
    />
  );
 };
--- 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,
-      ])}
+      ])}`}
    />
  );
 }
--- 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,
--- 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>,
--- 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={{
--- 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>

--- 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
--- 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>
--- 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>
--- a/upcoming-release-notes/1637.md
+++ b/upcoming-release-notes/1637.md
@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [joel-jeremy]
+---
+
+Remove glamor ...css syntax.