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.

Sign up for GitHub

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

Jump to bottom

feat: Add support for dark mode node icons and colors #9412

Merged
merged 23 commits into from
Jun 6, 2024
Merged

feat: Add support for dark mode node icons and colors #9412

merged 23 commits into from
Jun 6, 2024

Conversation

elsmr
Copy link
Member

@elsmr elsmr commented May 15, 2024 •
edited

Summary

  • Add optional dark mode icons for nodes
  • Add node icon color presets for core nodes
// How to define a dark mode icon (backwards compatible)
icon: { light: 'file:googleSheets.svg', dark: 'file:googleSheetsDark.svg' }
icon: 'file:googleSheets.svg'

// How to define icon color from preset (has priority over `defaults.color`)
iconColor: 'blue'
image

Related tickets and issues

https://linear.app/n8n/issue/NODE-1337/dark-mode-icons-on-dark-mode

Review / Merge checklist

  • PR title and summary are descriptive. Remember, the title automatically goes into the changelog. Use (no-changelog) otherwise. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.

    A bug is not considered fixed, unless a test is added to prevent it from happening again.
    A feature is not complete without tests.

@n8n-assistant n8n-assistant bot added core Enhancement outside /nodes-base and /editor-ui n8n team Authored by the n8n team node/improvement New feature or request ui Enhancement in /editor-ui or /design-system labels May 15, 2024
@elsmr elsmr marked this pull request as ready for review May 15, 2024 14:23
@elsmr elsmr changed the title feat: Add dark support for dark mode icons and colors feat: Add support for dark mode node icons and colors May 15, 2024
gandreini and others added 19 commits May 30, 2024 16:21
@gandreini
Dark mode logos.
2b6c9c2
@elsmr
Merge branch 'master' into node-1337-dark-mode-icons-on-dark-mode
f6962c3
@gandreini
Fix for stretched PNGs in node icons.
bfe1b27
@gandreini
Some dark mode icons.
1de71c7
@elsmr
Add theme support for badgeIcon
95e2cc8
@gandreini
More nodes color stuff (still in progress).
ae049a5
@gandreini
A couple of nodes more.
2635000
@gandreini
More color for nodes.
63760ab
@gandreini
SVG icons.
5d84ab5
@gandreini
More icons.
fa22a5c
@gandreini
Improved HTTP Request icon for creds-only.
626a4eb
@gandreini
Minor tweak to AI nodes background saturation.
906cd38
@elsmr
Merge branch 'master' into node-1337-dark-mode-icons-on-dark-mode
de2e2d6
@elsmr
Fix icon color in node creator sidebar
c7091ee
@elsmr
Add dark mode icon support to credentials
b97aac9
@elsmr
Fix AI Node colors
7a65c39
@elsmr
Fix color bug
57b769a
@gandreini
More icon colors.
1b5bbcb
@gandreini
Merge branches 'node-1337-dark-mode-icons-on-dark-mode' and 'node-1337-…
4d1cff8 
…dark-mode-icons-on-dark-mode' of github.com:n8n-io/n8n into node-1337-dark-mode-icons-on-dark-mode
OlegIvaniv
OlegIvaniv approved these changes Jun 5, 2024
View reviewed changes
Copy link
Contributor

@OlegIvaniv OlegIvaniv left a comment

Choose a reason for hiding this comment

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

Nice job!
I didn't go through every single icon but from general browsing through the node creator and interacting with the canvas it all LGTM 👌

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jun 5, 2024

✅ All Cypress E2E specs passed

@cypress Cypress
Copy link

cypress bot commented Jun 5, 2024

1 flaky test on run #5319 ↗︎

0 356 0 0 Flakiness 1

Details:

🌳 🖥️ browsers:node18.12.0-chrome107 🤖 elsmr 🗃️ e2e/*
Project: n8n Commit: 4d1cff8ba7
Status: Passed Duration: 04:57 💡
Started: Jun 5, 2024 11:08 AM Ended: Jun 5, 2024 11:13 AM
Flakiness  cypress/e2e/5-ndv.cy.ts • 1 flaky test

View Output Video

Test Artifacts
NDV > Stop listening for trigger event from NDV Screenshots Video

Review all test suite changes for PR #9412 ↗︎

@elsmr elsmr merged commit 600013a into master Jun 6, 2024
28 checks passed
@elsmr elsmr deleted the node-1337-dark-mode-icons-on-dark-mode branch June 6, 2024 11:34
MiloradFilipovic added a commit that referenced this pull request Jun 6, 2024
@MiloradFilipovic
Merge branch 'master' into ado-2234-transparent-top-menu-in-cloud
59732b8 
* master:
  feat: Initial Dev Containers setup (no-changelog) (#8951)
  feat: Add support for dark mode node icons and colors (#9412)
  fix(Gotify Node): Fix issue with self signed certificates not working (#9647)
  refactor(core): Support writing tests in `cli/src` (no-changelog) (#9646)
  fix(n8n Form Trigger Node): Error if Respond to Webhook and respond node not in workflow (#9641)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@OlegIvaniv OlegIvaniv OlegIvaniv approved these changes

Assignees
No one assigned
Labels
core Enhancement outside /nodes-base and /editor-ui n8n team Authored by the n8n team node/improvement New feature or request ui Enhancement in /editor-ui or /design-system
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@elsmr @OlegIvaniv @gandreini