Replace usage of glamor CSSProperties with React CSSProperties (#1542)

* Remove usages of glamor CSSProperties * Cleanup * Re-add CellButton className prop * More removal of glamor CSSProperties * Release notes * Fix vrt test failures * Use React CSSProperties in View * Custom CSSProperties type * Settings UI regression fix * Fix type check errors * Address PR comments * CategorySpendingGraph style * Fix rebase mistake
actualbudget · Sep 3, 2023 · 63c3d07 · 63c3d07
1 parent 246e0d7
commit 63c3d07
Show file tree

Hide file tree

Showing 100 changed files with 1,310 additions and 1,409 deletions.
diff --git a/...e-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png b/...e-and-makes-sure-it-is-applied-when-creating-a-transaction-1-chromium-linux.png
diff --git a/packages/desktop-client/src/components/AnimatedRefresh.tsx b/packages/desktop-client/src/components/AnimatedRefresh.tsx
@@ -1,8 +1,9 @@
-import React, { type CSSProperties } from 'react';
+import React from 'react';
 
 import { keyframes } from 'glamor';
 
 import Refresh from '../icons/v1/Refresh';
+import { type CSSProperties } from '../style';
 
 import View from './common/View';
 
@@ -22,7 +23,7 @@ export default function AnimatedRefresh({
 }: AnimatedRefreshProps) {
   return (
     <View
-      style={[{ animation: animating ? `${spin} 1s infinite linear` : null }]}
+      style={{ animation: animating ? `${spin} 1s infinite linear` : null }}
     >
       <Refresh width={14} height={14} style={iconStyle} />
     </View>

diff --git a/packages/desktop-client/src/components/DevelopmentTopBar.tsx b/packages/desktop-client/src/components/DevelopmentTopBar.tsx
@@ -6,19 +6,17 @@ import View from './common/View';
 export default function DevelopmentTopBar() {
   return (
     <View
-      style={[
-        {
-          padding: '6px 20px',
-          display: 'flex',
-          flexDirection: 'row',
-          justifyContent: 'space-between',
-          color: theme.warningText,
-          backgroundColor: theme.warningBackground,
-          borderBottom: `1px solid ${theme.warningAccent}`,
-          zIndex: 1,
-          flexShrink: 0,
-        },
-      ]}
+      style={{
+        padding: '6px 20px',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        color: theme.warningText,
+        backgroundColor: theme.warningBackground,
+        borderBottom: `1px solid ${theme.warningAccent}`,
+        zIndex: 1,
+        flexShrink: 0,
+      }}
     >
       <View>This is a demo build of Actual.</View>
       <View>

diff --git a/packages/desktop-client/src/components/LoggedInUser.tsx b/packages/desktop-client/src/components/LoggedInUser.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, type CSSProperties } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 
 import { useActions } from '../hooks/useActions';
-import { colors, styles } from '../style';
+import { colors, styles, type CSSProperties } from '../style';
 
 import Button from './common/Button';
 import Menu from './common/Menu';
@@ -77,22 +77,20 @@ export default function LoggedInUser({
   if (loading && serverUrl) {
     return (
       <Text
-        style={[
-          {
-            color: colors.n5,
-            fontStyle: 'italic',
-          },
-          styles.delayedFadeIn,
-          style,
-        ]}
+        style={{
+          color: colors.n5,
+          fontStyle: 'italic',
+          ...styles.delayedFadeIn,
+          ...style,
+        }}
       >
         Connecting...
       </Text>
     );
   }
 
   return (
-    <View style={[{ flexDirection: 'row', alignItems: 'center' }, style]}>
+    <View style={{ flexDirection: 'row', alignItems: 'center', ...style }}>
       <Button type="bare" onClick={() => setMenuOpen(true)} style={{ color }}>
         {serverMessage()}
       </Button>

diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
@@ -1,13 +1,13 @@
 import React, { createRef, useState, useEffect } from 'react';
 
-import { type CSSProperties, css } from 'glamor';
+import { css } from 'glamor';
 
 import q from 'loot-core/src/client/query-helpers';
 import { useLiveQuery } from 'loot-core/src/client/query-hooks';
 import { send } from 'loot-core/src/platform/client/fetch';
 
 import CustomNotesPaper from '../icons/v2/CustomNotesPaper';
-import { colors } from '../style';
+import { type CSSProperties, colors } from '../style';
 
 import Button from './common/Button';
 import Text from './common/Text';
@@ -52,13 +52,13 @@ function NotesTooltip({
         />
       ) : (
         <Text
-          {...css({
+          style={{
             display: 'block',
             maxWidth: 225,
             padding: 8,
             whiteSpace: 'pre-wrap',
             overflowWrap: 'break-word',
-          })}
+          }}
         >
           {notes}
         </Text>
@@ -114,19 +114,19 @@ export default function NotesButton({
 
   return (
     <View
-      style={[{ flexShrink: 0 }]}
+      style={{ flexShrink: 0 }}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
     >
       <Button
         type="bare"
         className={!hasNotes && !tooltipOpen ? 'hover-visible' : ''}
-        style={[
-          { color: defaultColor },
-          style,
-          hasNotes && { display: 'flex !important' },
-          tooltipOpen && { color: colors.n1 },
-        ]}
+        style={{
+          color: defaultColor,
+          ...style,
+          ...(hasNotes && { display: 'flex !important' }),
+          ...(tooltipOpen && { color: colors.n1 }),
+        }}
         {...tooltip.getOpenEvents()}
       >
         <CustomNotesPaper style={{ width, height }} />

diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -6,14 +6,12 @@ import React, {
 } from 'react';
 import { useSelector } from 'react-redux';
 
-import { type CSSProperties } from 'glamor';
-
 import type { NotificationWithId } from 'loot-core/src/client/state-types/notifications';
 
 import { useActions } from '../hooks/useActions';
 import AnimatedLoading from '../icons/AnimatedLoading';
 import Delete from '../icons/v0/Delete';
-import { styles, colors } from '../style';
+import { styles, colors, type CSSProperties } from '../style';
 
 import Button, { ButtonWithLoading } from './common/Button';
 import ExternalLink from './common/ExternalLink';
@@ -128,7 +126,6 @@ function Notification({
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
-
           '& a': { color: 'currentColor' },
         }}
       >
@@ -222,15 +219,13 @@ export default function Notifications({ style }: { style?: CSSProperties }) {
   let notifications = useSelector(state => state.notifications.notifications);
   return (
     <View
-      style={[
-        {
-          position: 'fixed',
-          bottom: 20,
-          right: 13,
-          zIndex: 10000,
-        },
-        style,
-      ]}
+      style={{
+        position: 'fixed',
+        bottom: 20,
+        right: 13,
+        zIndex: 10000,
+        ...style,
+      }}
     >
       {notifications.map(note => (
         <Notification

diff --git a/packages/desktop-client/src/components/Page.tsx b/packages/desktop-client/src/components/Page.tsx
@@ -1,9 +1,7 @@
 import React, { type ReactNode } from 'react';
 
-import { type CSSProperties } from 'glamor';
-
 import { useResponsive } from '../ResponsiveProvider';
-import { colors, styles } from '../style';
+import { colors, styles, type CSSProperties } from '../style';
 
 import Text from './common/Text';
 import View from './common/View';
@@ -20,21 +18,19 @@ function PageTitle({
   if (isNarrowWidth) {
     return (
       <View
-        style={[
-          {
-            alignItems: 'center',
-            backgroundColor: colors.b2,
-            color: 'white',
-            flexDirection: 'row',
-            flex: '1 0 auto',
-            fontSize: 18,
-            fontWeight: 500,
-            height: 50,
-            justifyContent: 'center',
-            overflowY: 'auto',
-          },
-          style,
-        ]}
+        style={{
+          alignItems: 'center',
+          backgroundColor: colors.b2,
+          color: 'white',
+          flexDirection: 'row',
+          flex: '1 0 auto',
+          fontSize: 18,
+          fontWeight: 500,
+          height: 50,
+          justifyContent: 'center',
+          overflowY: 'auto',
+          ...style,
+        }}
       >
         {name}
       </View>
@@ -43,14 +39,12 @@ function PageTitle({
 
   return (
     <Text
-      style={[
-        {
-          fontSize: 25,
-          fontWeight: 500,
-          marginBottom: 15,
-        },
-        style,
-      ]}
+      style={{
+        fontSize: 25,
+        fontWeight: 500,
+        marginBottom: 15,
+        ...style,
+      }}
     >
       {name}
     </Text>

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -5,7 +5,6 @@ import React, {
   useRef,
   useContext,
   type ReactNode,
-  type CSSProperties,
 } from 'react';
 import { useSelector } from 'react-redux';
 import { Routes, Route, useLocation, useNavigate } from 'react-router-dom';
@@ -24,7 +23,7 @@ import SvgEye from '../icons/v2/Eye';
 import SvgEyeSlashed from '../icons/v2/EyeSlashed';
 import NavigationMenu from '../icons/v2/NavigationMenu';
 import { useResponsive } from '../ResponsiveProvider';
-import { colors } from '../style';
+import { colors, type CSSProperties } from '../style';
 import tokens from '../tokens';
 
 import AccountSyncCheck from './accounts/AccountSyncCheck';
@@ -308,22 +307,20 @@ export default function Titlebar({ style }) {
 
   return isNarrowWidth ? null : (
     <View
-      style={[
-        {
-          flexDirection: 'row',
-          alignItems: 'center',
-          padding: '0 15px',
-          height: 36,
-          pointerEvents: 'none',
-          '& *': {
-            pointerEvents: 'auto',
-          },
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: '0 15px',
+        height: 36,
+        pointerEvents: 'none',
+        '& *': {
+          pointerEvents: 'auto',
         },
-        !Platform.isBrowser &&
+        ...(!Platform.isBrowser &&
           Platform.OS === 'mac' &&
-          floatingSidebar && { paddingLeft: 80 },
-        style,
-      ]}
+          floatingSidebar && { paddingLeft: 80 }),
+        ...style,
+      }}
     >
       {(floatingSidebar || sidebar.alwaysFloats) && (
         <Button

diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
@@ -1202,7 +1202,7 @@ class AccountInternal extends PureComponent {
             fetchAllIds={this.fetchAllIds}
             registerDispatch={dispatch => (this.dispatchSelected = dispatch)}
           >
-            <View style={[styles.page]}>
+            <View style={styles.page}>
               <AccountHeader
                 tableRef={this.table}
                 editingName={editingName}

diff --git a/packages/desktop-client/src/components/accounts/Header.js b/packages/desktop-client/src/components/accounts/Header.js
@@ -113,7 +113,7 @@ export function AccountHeader({
         }}
       />
 
-      <View style={[styles.pageContent, { paddingBottom: 10, flexShrink: 0 }]}>
+      <View style={{ ...styles.pageContent, paddingBottom: 10, flexShrink: 0 }}>
         <View style={{ marginTop: 2, alignItems: 'flex-start' }}>
           <View>
             {editingName ? (

diff --git a/packages/desktop-client/src/components/accounts/MobileAccounts.js b/packages/desktop-client/src/components/accounts/MobileAccounts.js
@@ -28,21 +28,19 @@ function AccountHeader({ name, amount, style = {} }) {
     >
       <View style={{ flex: 1 }}>
         <Text
-          style={[
-            styles.text,
-            {
-              textTransform: 'uppercase',
-              fontSize: 13,
-            },
-          ]}
+          style={{
+            ...styles.text,
+            textTransform: 'uppercase',
+            fontSize: 13,
+          }}
           data-testid="name"
         >
           {name}
         </Text>
       </View>
       <CellValue
         binding={amount}
-        style={[styles.text, { fontSize: 13 }]}
+        style={{ ...styles.text, fontSize: 13 }}
         type="financial"
       />
     </View>
@@ -87,15 +85,13 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
             }}
           >
             <TextOneLine
-              style={[
-                styles.text,
-                {
-                  fontSize: 17,
-                  fontWeight: 600,
-                  color: updated ? theme.mobileAccountText : theme.pillText,
-                  paddingRight: 30,
-                },
-              ]}
+              style={{
+                ...styles.text,
+                fontSize: 17,
+                fontWeight: 600,
+                color: updated ? theme.mobileAccountText : theme.pillText,
+                paddingRight: 30,
+              }}
               data-testid="account-name"
             >
               {account.name}