Final Colors Consolidation (#1871)

* Color Updates * color change * notes * fix preview background
actualbudget · Nov 9, 2023 · 3004f33 · 3004f33
1 parent 45bb769
commit 3004f33
Show file tree

Hide file tree

Showing 31 changed files with 139 additions and 168 deletions.
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -171,7 +171,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'
-      ? theme.altTableText
+      ? theme.tableTextLight
       : 'inherit';
 
   const activeStyle = isMobile

diff --git a/packages/desktop-client/src/components/accounts/Account.js b/packages/desktop-client/src/components/accounts/Account.js
@@ -71,7 +71,7 @@ function EmptyMessage({ onAdd }) {
         </Button>
 
         <View
-          style={{ marginTop: 20, fontSize: 13, color: theme.alttableText }}
+          style={{ marginTop: 20, fontSize: 13, color: theme.tableTextLight }}
         >
           In the future, you can add accounts from the sidebar.
         </View>

diff --git a/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js b/packages/desktop-client/src/components/autocomplete/AccountAutocomplete.js
@@ -48,7 +48,7 @@ function AccountList({
               <div
                 key={group}
                 style={{
-                  color: theme.alt2MenuItemTextHeader,
+                  color: theme.menuAutoCompleteTextHeader,
                   padding: '4px 9px',
                   ...groupHeaderStyle,
                 }}
@@ -87,7 +87,7 @@ function AccountList({
                 {
                   backgroundColor:
                     highlightedIndex === idx
-                      ? theme.alt2MenuItemBackgroundHover
+                      ? theme.menuAutoCompleteBackgroundHover
                       : 'transparent',
                   padding: 4,
                   paddingLeft: 20,

diff --git a/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx b/packages/desktop-client/src/components/autocomplete/Autocomplete.tsx
@@ -122,7 +122,7 @@ function defaultRenderItems(items, getItemProps, highlightedIndex) {
               cursor: 'default',
               backgroundColor:
                 highlightedIndex === index
-                  ? theme.alt2MenuItemBackgroundHover
+                  ? theme.menuAutoCompleteBackgroundHover
                   : null,
             })}`}
           >

diff --git a/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx b/packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx
@@ -77,7 +77,7 @@ function CategoryList({
                 style={{
                   backgroundColor:
                     highlightedIndex === idx
-                      ? theme.alt2MenuItemBackgroundHover
+                      ? theme.menuAutoCompleteBackgroundHover
                       : 'transparent',
                   borderRadius: embedded ? 4 : 0,
                   flexShrink: 0,
@@ -108,7 +108,7 @@ function CategoryList({
               {showGroup && (
                 <div
                   style={{
-                    color: theme.alt2MenuItemTextHeader,
+                    color: theme.menuAutoCompleteTextHeader,
                     padding: '4px 9px',
                     ...groupHeaderStyle,
                   }}
@@ -125,7 +125,7 @@ function CategoryList({
                   {
                     backgroundColor:
                       highlightedIndex === idx
-                        ? theme.alt2MenuItemBackgroundHover
+                        ? theme.menuAutoCompleteBackgroundHover
                         : 'transparent',
                     padding: 4,
                     paddingLeft: 20,

diff --git a/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js b/packages/desktop-client/src/components/autocomplete/PayeeAutocomplete.js
@@ -88,7 +88,7 @@ function PayeeList({
               padding: '6px 9px',
               backgroundColor:
                 highlightedIndex === 0
-                  ? theme.alt2MenuItemBackgroundHover
+                  ? theme.menuAutoCompleteBackgroundHover
                   : 'transparent',
               borderRadius: embedded ? 4 : 0,
               ':active': {
@@ -132,7 +132,7 @@ function PayeeList({
                 <div
                   key={'title-' + idx}
                   style={{
-                    color: theme.alt2MenuItemTextHeader,
+                    color: theme.menuAutoCompleteTextHeader,
                     padding: '4px 9px',
                     ...groupHeaderStyle,
                   }}
@@ -170,7 +170,7 @@ function PayeeList({
                   {
                     backgroundColor:
                       highlightedIndex === idx + offset
-                        ? theme.alt2MenuItemBackgroundHover
+                        ? theme.menuAutoCompleteBackgroundHover
                         : 'transparent',
                     borderRadius: embedded ? 4 : 0,
                     padding: 4,

diff --git a/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js b/packages/desktop-client/src/components/autocomplete/SavedFilterAutocomplete.js
@@ -25,7 +25,7 @@ function FilterList({ items, getItemProps, highlightedIndex, embedded }) {
               style={{
                 backgroundColor:
                   highlightedIndex === idx
-                    ? theme.alt2MenuItemBackgroundHover
+                    ? theme.menuAutoCompleteBackgroundHover
                     : 'transparent',
                 padding: 4,
                 paddingLeft: 20,

diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.js b/packages/desktop-client/src/components/budget/BudgetCategories.js
@@ -161,7 +161,9 @@ const BudgetCategories = memo(
           switch (item.type) {
             case 'new-group':
               content = (
-                <Row style={{ backgroundColor: theme.altTableBackground }}>
+                <Row
+                  style={{ backgroundColor: theme.tableRowHeaderBackground }}
+                >
                   <SidebarGroup
                     group={{ id: 'new', name: '' }}
                     editing={true}

diff --git a/packages/desktop-client/src/components/budget/ExpenseGroup.js b/packages/desktop-client/src/components/budget/ExpenseGroup.js
@@ -56,7 +56,7 @@ function ExpenseGroup({
       style={{
         fontWeight: 600,
         opacity: group.hidden ? 0.33 : undefined,
-        backgroundColor: theme.altTableBackground,
+        backgroundColor: theme.tableRowHeaderBackground,
       }}
     >
       {dragState && !dragState.preview && dragState.type === 'group' && (

diff --git a/packages/desktop-client/src/components/budget/IncomeGroup.tsx b/packages/desktop-client/src/components/budget/IncomeGroup.tsx
@@ -38,7 +38,10 @@ function IncomeGroup({
   return (
     <Row
       collapsed={true}
-      style={{ fontWeight: 600, backgroundColor: theme.altTableBackground }}
+      style={{
+        fontWeight: 600,
+        backgroundColor: theme.tableRowHeaderBackground,
+      }}
     >
       <SidebarGroup
         group={group}

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -299,7 +299,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
     <ListItem
       style={{
         backgroundColor: isEditingBudget
-          ? theme.altTableTextEditing
+          ? theme.tableTextEditing
           : 'transparent',
         borderBottomWidth: 0,
         borderTopWidth: index > 0 ? 1 : 0,
@@ -1359,7 +1359,7 @@ function IncomeGroup({
               : rolloverBudget.groupSumAmount(group.id)
           }
           style={{
-            backgroundColor: theme.altTableBackground,
+            backgroundColor: theme.tableRowHeaderBackground,
           }}
           onAddCategory={onAddCategory}
           onSave={onSave}

diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -148,7 +148,7 @@ function SidebarGroup({
       style={{
         ...style,
         width: 200,
-        backgroundColor: theme.altTableBackground,
+        backgroundColor: theme.tableRowHeaderBackground,
         '& button': { display: 'none' },
         '&:hover button': { display: 'flex', color: theme.tableTextHover },
         ...(dragPreview && {

diff --git a/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx b/packages/desktop-client/src/components/budget/rollover/BudgetSummary.tsx
@@ -332,7 +332,7 @@ export function BudgetSummary({
                 width={13}
                 height={13}
                 // The margin is to make it the exact same size as the dots button
-                style={{ color: theme.altTableText, margin: 1 }}
+                style={{ color: theme.tableTextLight, margin: 1 }}
               />
             </Button>
           </View>
@@ -367,7 +367,7 @@ export function BudgetSummary({
                 width={15}
                 height={15}
                 tooltipPosition="bottom-right"
-                defaultColor={theme.altTableText}
+                defaultColor={theme.tableTextLight}
               />
             </View>
             <View style={{ userSelect: 'none', marginLeft: 2 }}>

diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -41,30 +41,30 @@ export const BudgetTotalsMonth = memo(function BudgetTotalsMonth() {
       }}
     >
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.alt2TableText }}>Budgeted</Text>
+        <Text style={{ color: theme.tableHeaderText }}>Budgeted</Text>
         <CellValue
           binding={rolloverBudget.totalBudgeted}
           type="financial"
-          style={{ color: theme.alt2TableText, fontWeight: 600 }}
+          style={{ color: theme.tableHeaderText, fontWeight: 600 }}
           formatter={value => {
             return format(-parseFloat(value || '0'), 'financial');
           }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.alt2TableText }}>Spent</Text>
+        <Text style={{ color: theme.tableHeaderText }}>Spent</Text>
         <CellValue
           binding={rolloverBudget.totalSpent}
           type="financial"
-          style={{ color: theme.alt2TableText, fontWeight: 600 }}
+          style={{ color: theme.tableHeaderText, fontWeight: 600 }}
         />
       </View>
       <View style={headerLabelStyle}>
-        <Text style={{ color: theme.alt2TableText }}>Balance</Text>
+        <Text style={{ color: theme.tableHeaderText }}>Balance</Text>
         <CellValue
           binding={rolloverBudget.totalBalance}
           type="financial"
-          style={{ color: theme.alt2TableText, fontWeight: 600 }}
+          style={{ color: theme.tableHeaderText, fontWeight: 600 }}
         />
       </View>
     </View>
@@ -75,7 +75,7 @@ export function IncomeHeaderMonth() {
   return (
     <Row
       style={{
-        color: theme.alt2TableText,
+        color: theme.tableHeaderText,
         alignItems: 'center',
         paddingRight: 10,
       }}

diff --git a/packages/desktop-client/src/components/budget/util.ts b/packages/desktop-client/src/components/budget/util.ts
@@ -33,7 +33,7 @@ export function separateGroups(categoryGroups: CategoryGroupEntity[]) {
 
 export function makeAmountGrey(value: number | string) {
   return value === 0 || value === '0' || value === '' || value == null
-    ? { color: theme.altMenuItemText }
+    ? { color: theme.tableTextSubdued }
     : null;
 }
 
@@ -65,7 +65,7 @@ export function makeAmountFullStyle(value: number) {
       value < 0
         ? theme.errorText
         : value === 0
-        ? theme.altMenuItemText
+        ? theme.tableTextSubdued
         : theme.noticeText,
   };
 }

diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
@@ -118,7 +118,7 @@ export default function Menu({
             <Text
               key={item.name}
               style={{
-                color: theme.altMenuItemTextHeader,
+                color: theme.menuItemTextHeader,
                 fontSize: 11,
                 lineHeight: '1em',
                 textTransform: 'uppercase',

diff --git a/packages/desktop-client/src/components/common/Search.tsx b/packages/desktop-client/src/components/common/Search.tsx
@@ -47,7 +47,7 @@ export default function Search({
             width: 13,
             height: 13,
             flexShrink: 0,
-            color: value ? theme.altMenuItemTextSelected : 'inherit',
+            color: value ? theme.menuItemTextSelected : 'inherit',
             margin: 5,
             marginRight: 0,
           }}

diff --git a/packages/desktop-client/src/components/filters/FiltersMenu.js b/packages/desktop-client/src/components/filters/FiltersMenu.js
@@ -174,7 +174,7 @@ function ConfigureField({
   return (
     <Tooltip
       position="bottom-left"
-      style={{ padding: 15, color: theme.altmenuItemTextHeader }}
+      style={{ padding: 15, color: theme.menuItemText }}
       width={275}
       onClose={() => dispatch({ type: 'close' })}
       data-testid="filters-menu-tooltip"

diff --git a/packages/desktop-client/src/components/modals/EditField.js b/packages/desktop-client/src/components/modals/EditField.js
@@ -86,7 +86,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
           groupHeaderStyle={
             isNarrowWidth
               ? {
-                  color: theme.altTableText,
+                  color: theme.tableTextLight,
                 }
               : undefined
           }
@@ -118,7 +118,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
           groupHeaderStyle={
             isNarrowWidth
               ? {
-                  color: theme.altTableText,
+                  color: theme.tableTextLight,
                 }
               : undefined
           }
@@ -155,7 +155,7 @@ export default function EditField({ modalProps, name, onSubmit }) {
           groupHeaderStyle={
             isNarrowWidth
               ? {
-                  color: theme.altTableText,
+                  color: theme.tableTextLight,
                 }
               : undefined
           }

diff --git a/packages/desktop-client/src/components/modals/LoadBackup.js b/packages/desktop-client/src/components/modals/LoadBackup.js
@@ -119,7 +119,7 @@ function LoadBackup({
             )}
           </View>
           {previousBackups.length === 0 ? (
-            <Block style={{ color: theme.altTableText, marginLeft: 20 }}>
+            <Block style={{ color: theme.tableTextLight, marginLeft: 20 }}>
               No backups available
             </Block>
           ) : (

diff --git a/packages/desktop-client/src/components/reports/Overview.js b/packages/desktop-client/src/components/reports/Overview.js
@@ -125,7 +125,7 @@ function NetWorthCard({ accounts }) {
               <PrivacyFilter activationFilters={[!isCardHovered]}>
                 <Change
                   amount={data.totalChange}
-                  style={{ color: theme.altTableText, fontWeight: 300 }}
+                  style={{ color: theme.tableTextLight, fontWeight: 300 }}
                 />
               </PrivacyFilter>
             </View>
@@ -184,7 +184,7 @@ function CashFlowCard() {
               <PrivacyFilter activationFilters={[!isCardHovered]}>
                 <Change
                   amount={income - expense}
-                  style={{ color: theme.altTableText, fontWeight: 300 }}
+                  style={{ color: theme.tableTextLight, fontWeight: 300 }}
                 />
               </PrivacyFilter>
             </View>

diff --git a/packages/desktop-client/src/components/reports/Tooltip.js b/packages/desktop-client/src/components/reports/Tooltip.js
@@ -57,8 +57,10 @@ class Tooltip extends Component {
             borderRadius: 2,
             boxShadow: light ? 'none' : '0 1px 6px rgba(0, 0, 0, .20)',
             // TODO: Transparent background
-            backgroundColor: light ? 'transparent' : theme.alt2MenuBackground,
-            color: light ? 'inherit' : theme.alt2MenuItemText,
+            backgroundColor: light
+              ? 'transparent'
+              : theme.menuAutoCompleteBackground,
+            color: light ? 'inherit' : theme.menuAutoCompleteText,
             padding: 10,
           },
           !light &&
@@ -68,7 +70,7 @@ class Tooltip extends Component {
               borderTop: '7px solid transparent',
               borderBottom: '7px solid transparent',
               [position === 'right' ? 'borderRight' : 'borderLeft']:
-                '7px solid ' + theme.alt2MenuBackground,
+                '7px solid ' + theme.menuAutoCompleteBackground,
               [position === 'right' ? 'left' : 'right']: -6,
               top: 'calc(50% - 7px)',
               // eslint-disable-next-line rulesdir/typography

diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx
@@ -85,8 +85,8 @@ function NetWorthGraph({
               pointerEvents: 'none',
               borderRadius: 2,
               boxShadow: '0 1px 6px rgba(0, 0, 0, .20)',
-              backgroundColor: theme.alt2MenuBackground,
-              color: theme.alt2MenuItemText,
+              backgroundColor: theme.menuAutoCompleteBackground,
+              color: theme.menuAutoCompleteText,
               padding: 10,
             },
             style,

diff --git a/packages/desktop-client/src/components/schedules/DiscoverSchedules.js b/packages/desktop-client/src/components/schedules/DiscoverSchedules.js
@@ -40,9 +40,7 @@ function DiscoverSchedulesTable({ schedules, loading }) {
           dispatchSelected({ type: 'select', id: item.id, event: e });
         }}
         style={{
-          borderColor: selected
-            ? theme.alttableBorderSelected
-            : theme.tableBorder,
+          borderColor: selected ? theme.tableBorderSelected : theme.tableBorder,
           cursor: 'pointer',
           color: selected
             ? theme.tableRowBackgroundHighlightText