review fixes

actualbudget · Sep 14, 2023 · 081da72 · 081da72
1 parent eb3af51
commit 081da72
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 25 deletions.
diff --git a/packages/desktop-client/src/components/NotesButton.tsx b/packages/desktop-client/src/components/NotesButton.tsx
@@ -43,23 +43,23 @@ const markdownStyles = css({
   },
   '& blockquote': {
     paddingLeft: '0.75rem',
-    borderLeft: '3px solid ' + theme.formInputBorderSelected,
+    borderLeft: '3px solid ' + theme.markdownDark,
     margin: 0,
   },
   '& hr': {
     borderTop: 'none',
     borderLeft: 'none',
     borderRight: 'none',
-    borderBottom: '1px solid ' + theme.menuBorderHover,
+    borderBottom: '1px solid ' + theme.markdownNormal,
   },
   '& code': {
-    backgroundColor: theme.menuBorderHover,
+    backgroundColor: theme.markdownLight,
     padding: '0.1rem 0.5rem',
     borderRadius: '0.25rem',
   },
   '& pre': {
     padding: '0.5rem',
-    backgroundColor: theme.menuBorderHover,
+    backgroundColor: theme.markdownLight,
     borderRadius: '0.5rem',
     margin: 0,
     ':not(:first-child)': {
@@ -72,7 +72,7 @@ const markdownStyles = css({
     },
   },
   '& table, & th, & td': {
-    border: '1px solid ' + theme.menuBorderHover,
+    border: '1px solid ' + theme.markdownNormal,
   },
   '& table': {
     borderCollapse: 'collapse',

diff --git a/packages/desktop-client/src/components/Notifications.tsx b/packages/desktop-client/src/components/Notifications.tsx
@@ -108,10 +108,10 @@ function Notification({
       style={{
         marginTop: 10,
         color: positive
-          ? theme.noticeText
+          ? theme.alt4NoticeText
           : error
-          ? theme.errorText
-          : theme.warningText,
+          ? theme.alt3ErrorText
+          : theme.alt4WarningText,
       }}
     >
       <Stack
@@ -121,16 +121,16 @@ function Notification({
           padding: '14px 14px',
           fontSize: 14,
           backgroundColor: positive
-            ? theme.noticeBackground
+            ? theme.alt2NoticeBackground
             : error
             ? theme.errorBackground
-            : theme.warningBackground,
+            : theme.alt2WarningBackground,
           borderTop: `3px solid ${
             positive
-              ? theme.noticeAccent
+              ? theme.altNoticeAccent
               : error
-              ? theme.errorAccent
-              : theme.warningAccent
+              ? theme.altErrorAccent
+              : theme.altWarningAccent
           }`,
           ...styles.shadowLarge,
           maxWidth: 550,
@@ -173,17 +173,17 @@ function Notification({
                 backgroundColor: 'transparent',
                 border: `1px solid ${
                   positive
-                    ? theme.noticeAccent
+                    ? theme.altNoticeAccent
                     : error
-                    ? theme.errorAccent
-                    : theme.warningAccent
+                    ? theme.altErrorAccent
+                    : theme.altWarningAccent
                 }`,
                 color: 'currentColor',
                 fontSize: 14,
                 flexShrink: 0,
                 '&:hover, &:active': {
                   backgroundColor: positive
-                    ? theme.altNoticeBackground
+                    ? theme.noticeBackground
                     : error
                     ? theme.altErrorBackground
                     : theme.altWarningBackground,

diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
@@ -150,7 +150,7 @@ export function SyncButton({ style, isMobile = false }: SyncButtonProps) {
 
   const mobileColor =
     syncState === 'error'
-      ? theme.alt2ErrorText
+      ? theme.alt4ErrorText
       : syncState === 'disabled' ||
         syncState === 'offline' ||
         syncState === 'local'

diff --git a/packages/desktop-client/src/components/UpdateNotification.tsx b/packages/desktop-client/src/components/UpdateNotification.tsx
@@ -36,7 +36,7 @@ export default function UpdateNotification() {
           bottom: 0,
           right: 0,
           margin: '15px 17px',
-          backgroundColor: theme.pageTextPositive,
+          backgroundColor: theme.altPageTextPositive,
           color: theme.tableBackground,
           padding: '7px 10px',
           borderRadius: 4,

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -98,9 +98,9 @@ function Saved({ projected }) {
           ...styles.smallText,
           fontWeight: '500',
           color: projected
-            ? theme.warningText
+            ? theme.alt2WarningText
             : isNegative
-            ? theme.errorText
+            ? theme.alt2ErrorText
             : theme.formInputText,
         }}
       >

diff --git a/packages/desktop-client/src/components/transactions/MobileTransaction.js b/packages/desktop-client/src/components/transactions/MobileTransaction.js
@@ -156,7 +156,7 @@ function Status({ status }) {
 
   switch (status) {
     case 'missed':
-      color = theme.alt2ErrorText;
+      color = theme.alt3ErrorText;
       break;
     case 'due':
       color = theme.alt2WarningText;

diff --git a/packages/desktop-client/src/components/transactions/TransactionsTable.js b/packages/desktop-client/src/components/transactions/TransactionsTable.js
@@ -418,7 +418,7 @@ function StatusCell({
     status === 'cleared'
       ? theme.noticeText
       : status === 'missed'
-      ? theme.errorText
+      ? theme.alt5ErrorText
       : status === 'due'
       ? theme.alt3WarningText
       : selected
@@ -1043,9 +1043,9 @@ const Transaction = memo(function Transaction(props) {
               style={{
                 color:
                   notes === 'missed'
-                    ? theme.errorText
+                    ? theme.alt5ErrorText
                     : notes === 'due'
-                    ? theme.alt3WarningText
+                    ? theme.alt5WarningText
                     : selected
                     ? theme.formLabelText
                     : theme.altTableText,

diff --git a/packages/desktop-client/src/style/themes/light.ts b/packages/desktop-client/src/style/themes/light.ts
@@ -13,6 +13,7 @@ export const pageTextSubdued = colorPalette.navy300;
 export const altpageTextSubdued = colorPalette.navy500;
 export const pageTextDark = colorPalette.navy800;
 export const pageTextPositive = colorPalette.purple600;
+export const altPageTextPositive = colorPalette.purple400;
 export const pageTextLink = colorPalette.blue600;
 export const altPageTextLink = colorPalette.blue300;
 
@@ -104,6 +105,10 @@ export const mobileConfigServerViewTheme = colorPalette.purple500;
 export const mobileSettingsViewTheme = colorPalette.navy50;
 export const mobileTransactionViewTheme = colorPalette.purple500;
 
+export const markdownNormal = colorPalette.purple150;
+export const markdownDark = colorPalette.purple400;
+export const markdownLight = colorPalette.purple100;
+
 // Button
 export const buttonMenuText = colorPalette.navy100;
 export const buttonMenuTextHover = colorPalette.navy50;
@@ -158,20 +163,30 @@ export const noticeText = colorPalette.green500;
 export const altNoticeText = colorPalette.green900;
 export const alt2NoticeText = colorPalette.green800;
 export const alt3NoticeText = colorPalette.green600;
+export const alt4NoticeText = colorPalette.green700;
 export const noticeAccent = colorPalette.green200;
+export const altNoticeAccent = colorPalette.green500;
 export const warningBackground = colorPalette.orange200;
 export const altWarningBackground = colorPalette.orange150;
+export const alt2WarningBackground = colorPalette.orange100;
 export const warningText = colorPalette.orange800;
 export const altWarningText = colorPalette.orange900;
 export const alt2WarningText = colorPalette.orange700;
 export const alt3WarningText = colorPalette.orange500;
+export const alt4WarningText = colorPalette.orange800;
+export const alt5WarningText = colorPalette.orange600;
 export const warningAccent = colorPalette.orange400;
+export const altWarningAccent = colorPalette.orange600;
 export const errorBackground = colorPalette.red50;
 export const altErrorBackground = colorPalette.red100;
 export const errorText = colorPalette.red500;
 export const altErrorText = colorPalette.red900;
 export const alt2ErrorText = colorPalette.red600;
+export const alt3ErrorText = colorPalette.red700;
+export const alt4ErrorText = colorPalette.red300;
+export const alt5ErrorText = colorPalette.red400;
 export const errorAccent = colorPalette.red200;
+export const altErrorAccent = colorPalette.red500;
 export const upcomingBackground = colorPalette.purple100;
 export const upcomingText = colorPalette.purple900;
 export const altUpcomingText = colorPalette.purple500;