Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Consolidate Notice Colors #1724

Merged
merged 4 commits into from
Oct 4, 2023

Conversation

carkom
Copy link
Contributor

@carkom carkom commented Sep 22, 2023

This is a proof of concept for consolidating colors to make the apps color scheme more consistent. We are using 5 different shades of dark green for text fields. Looking to slim this down to 3 and consolidate background colors a bit as well and clean up the naming standards.

It should also help to make the palette more compact allowing for easier creation of more themes.

There are places where the color hasn't actually changed but the name of the color has. I'll try to point out the bits where the color has changed by one shade so you don't have to review all the ones where color is the same but name is different.

@netlify
Copy link

netlify bot commented Sep 22, 2023

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 02b02af
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/651590c34db3b400089ea6e2
😎 Deploy Preview https://deploy-preview-1724.demo.actualbudget.org/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@@ -159,7 +159,7 @@ export function Balances({
value < 0
? theme.errorText
: value > 0
? theme.noticeText
? theme.noticeTextLight
: theme.pageTextSubdued,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -100,7 +100,7 @@ function AccountCard({ account, updated, getBalanceQuery, onSelect }) {
{account.bankId && (
<View
style={{
backgroundColor: theme.noticeText,
backgroundColor: theme.noticeBackgroundDark,
marginLeft: '-23px',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -45,7 +45,7 @@ export function ReconcilingMessage({
{targetDiff === 0 ? (
<View
style={{
color: theme.noticeText,
color: theme.noticeTextLight,
flex: 1,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -93,7 +93,7 @@ function CategoryList({
alignItems: 'center',
fontSize: 11,
fontWeight: 500,
color: theme.noticeAccent,
color: theme.noticeTextMenu,
padding: '6px 8px',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -99,7 +99,7 @@ function PayeeList({
<View
style={{
display: 'block',
color: theme.noticeAccent,
color: theme.noticeTextMenu,
borderRadius: 4,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -99,7 +99,7 @@ function IncomeProgress({ current, target }: IncomeProgressProps) {
return (
<PieProgress
progress={frac}
color={over ? theme.errorText : theme.noticeText}
color={over ? theme.errorText : theme.noticeTextLight}
backgroundColor={over ? theme.errorBackground : theme.pageBackground}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -132,7 +132,7 @@ function ExpenseProgress({ current, target }: ExpenseProgressProps) {
return (
<PieProgress
progress={frac}
color={over ? theme.errorText : theme.noticeText}
color={over ? theme.errorText : theme.noticeTextLight}
backgroundColor={over ? theme.errorBackground : theme.pageBackground}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@github-actions
Copy link
Contributor

github-actions bot commented Sep 22, 2023

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
16 2.48 MB → 2.48 MB (-7 B) -0.00%
Changeset
File Δ Size
src/components/reports/Change.js 📈 +5 B (+0.90%) 558 B → 563 B
src/components/manager/subscribe/ChangePassword.tsx 📈 +5 B (+0.16%) 3.06 kB → 3.07 kB
src/components/schedules/StatusBadge.tsx 📈 +5 B (+0.15%) 3.24 kB → 3.24 kB
src/style/themes/development.ts 📈 +15 B (+0.14%) 10.14 kB → 10.15 kB
src/style/themes/dark.ts 📈 +15 B (+0.14%) 10.68 kB → 10.7 kB
src/components/settings/Encryption.tsx 📈 +5 B (+0.11%) 4.37 kB → 4.37 kB
src/components/accounts/MobileAccounts.js 📈 +10 B (+0.11%) 9.21 kB → 9.22 kB
src/components/modals/GoCardlessExternalMsg.js 📈 +12 B (+0.09%) 13.21 kB → 13.22 kB
src/components/accounts/Reconcile.js 📈 +5 B (+0.08%) 6.34 kB → 6.35 kB
src/components/accounts/Balance.js 📈 +5 B (+0.07%) 6.67 kB → 6.67 kB
src/components/modals/PlaidExternalMsg.js 📈 +4 B (+0.07%) 5.78 kB → 5.78 kB
src/components/budget/report/BudgetSummary.tsx 📈 +10 B (+0.05%) 18.73 kB → 18.74 kB
src/components/schedules/SchedulesTable.tsx 📈 +5 B (+0.04%) 12.77 kB → 12.77 kB
src/components/settings/FixSplits.tsx 📈 +1 B (+0.03%) 3.88 kB → 3.88 kB
src/components/autocomplete/CategoryAutocomplete.tsx 📈 +2 B (+0.02%) 7.97 kB → 7.97 kB
src/components/transactions/TransactionsTable.js 📈 +10 B (+0.01%) 65.77 kB → 65.78 kB
src/components/autocomplete/PayeeAutocomplete.js 📈 +2 B (+0.01%) 14.84 kB → 14.84 kB
src/components/transactions/MobileTransaction.js 📈 +5 B (+0.01%) 48.85 kB → 48.86 kB
src/components/payees/index.js 📈 +1 B (+0.01%) 18.55 kB → 18.55 kB
src/components/modals/ImportTransactions.js 📈 +1 B (+0.00%) 41.03 kB → 41.03 kB
src/components/settings/index.tsx 📉 -4 B (-0.05%) 8.58 kB → 8.58 kB
src/components/Notifications.tsx 📉 -9 B (-0.10%) 8.38 kB → 8.37 kB
src/style/themes/light.ts 📉 -102 B (-0.86%) 11.58 kB → 11.48 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/wide-components.chunk.js 126.88 kB → 126.91 kB (+30 B) +0.02%
static/js/narrow-components.chunk.js 35.15 kB → 35.16 kB (+10 B) +0.03%
static/js/reports.chunk.js 29.23 kB → 29.23 kB (+5 B) +0.02%

Smaller

Asset File Size % Changed
static/js/main.js 1.12 MB → 1.12 MB (-52 B) -0.00%

Unchanged

Asset File Size % Changed
static/js/678.chunk.js 420.74 kB 0%
static/media/Inter-italic.var.woff2 239.29 kB 0%
static/media/Inter-roman.var.woff2 221.86 kB 0%
static/js/713.chunk.js 156.56 kB 0%
static/js/231.chunk.js 117.37 kB 0%
static/js/473.chunk.js 13 kB 0%
static/js/389.chunk.js 12.76 kB 0%
static/js/resize-observer-polyfill.chunk.js 8.88 kB 0%
static/css/main.css 7.41 kB 0%
asset-manifest.json 2.07 kB 0%
index.html 1.66 kB 0%
static/media/browser-server.js 903 B 0%

@github-actions
Copy link
Contributor

github-actions bot commented Sep 22, 2023

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
2 2.22 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.js 1.23 MB 0%
xfo.xfo.kcab.worker.js 1014.46 kB 0%

@@ -73,7 +73,7 @@ export default function ChangePassword() {
<Text
style={{
marginTop: 20,
color: theme.noticeText,
color: theme.noticeTextLight,
borderRadius: 4,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -10,7 +10,7 @@ function Change({ amount }) {
<Block
style={{
...styles.smallText,
color: amount < 0 ? theme.errorText : theme.noticeText,
color: amount < 0 ? theme.errorText : theme.noticeTextLight,
}}
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -168,7 +168,7 @@ export function ScheduleAmountCell({
<Text
style={{
flex: 1,
color: num > 0 ? theme.noticeText : theme.tableText,
color: num > 0 ? theme.noticeTextLight : theme.tableText,
whiteSpace: 'nowrap',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -26,7 +26,7 @@ export default function EncryptionSettings() {
primaryAction={<Button onClick={onChangeKey}>Generate new key</Button>}
>
<Text>
<Text style={{ color: theme.noticeText, fontWeight: 600 }}>
<Text style={{ color: theme.noticeTextLight, fontWeight: 600 }}>
End-to-end Encryption is turned on.
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -1001,7 +1001,9 @@ class Transaction extends PureComponent {
style={{
width: 11,
height: 11,
color: cleared ? theme.noticeText : theme.altButtonBareText,
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

@@ -416,7 +416,7 @@ function StatusCell({

let statusColor =
status === 'cleared'
? theme.noticeText
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No change

Copy link
Member

@MatissJanis MatissJanis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM on my end.

Is this just a POC? I'm happy to merge it unless you plan to continue working in this PR.

@carkom
Copy link
Contributor Author

carkom commented Sep 28, 2023

No, not just POC. It's more like the first of many 🤣

@MatissJanis MatissJanis merged commit 476070b into actualbudget:master Oct 4, 2023
17 checks passed
@trafico-bot trafico-bot bot added ✨ Merged Pull Request has been merged successfully and removed ✅ Approved labels Oct 4, 2023
@carkom carkom deleted the noticeColorConsolidation branch November 9, 2023 23:57
FlorianLang06 pushed a commit to FlorianLang06/actual that referenced this pull request Mar 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Merged Pull Request has been merged successfully
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants