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

add Nord UI theme #2879

Merged
merged 5 commits into from
Feb 3, 2020
Merged

add Nord UI theme #2879

merged 5 commits into from
Feb 3, 2020

Conversation

daiyam
Copy link
Contributor

@daiyam daiyam commented Feb 10, 2019 •
edited
Loading

Description

This change adds the Nord theme as UI theme.
screenshot

I've updated the UI theme selection box:
screenshot

I've also streamlined how to manage the UI themes in Javascript and Stylus.

Issue fixed

Type of changes

  • ⚪ Bug fix (Change that fixed an issue)
  • ⚪ Breaking change (Change that can cause existing functionality to change)
  • 🔘 Improvement (Change that improves the code. Maybe performance or development improvement)
  • 🔘 Feature (Change that adds new functionality)
  • ⚪ Documentation change (Change that modifies documentation. Maybe typo fixes)

Checklist:

  • 🔘 My code follows the project code style
  • ⚪ I have written test for my code and it has been tested
  • 🔘 All existing tests have been passed
  • 🔘 I have attached a screenshot/video to visualize my change if possible

@daiyam daiyam changed the title add Nord theme add Nord UI theme Feb 11, 2019
This was referenced Feb 11, 2019
Closed
Closed
@ZeroX-DG ZeroX-DG added the awaiting review ❇️ Pull request is awaiting a review. label Feb 15, 2019
@ZeroX-DG
Copy link
Member

@daiyam sorry for the late response I was quite busy. This PR is very helpful, can you fix the conflict for it please? Thank you.

@daiyam
Copy link
Contributor Author

daiyam commented Jan 30, 2020

@ZeroX-DG I will try

@daiyam
Copy link
Contributor Author

daiyam commented Jan 30, 2020

@ZeroX-DG I've fixed the conflicts and rewrite the styles of new themed components.

@ZeroX-DG
Copy link
Member

Very nice, I'll review this soon 😄

ZeroX-DG
ZeroX-DG requested changes Jan 31, 2020
View reviewed changes
Copy link
Member

@ZeroX-DG ZeroX-DG left a comment

Choose a reason for hiding this comment

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

This is a very cool PR, just need a bit adjustment I think. Please tell me if I'm wrong 😄

browser/components/MarkdownSplitEditor.styl
.root
.slider
border-left 1px solid $ui-solarized-dark-borderColor
for theme in 'dark' 'dracula' 'solarized-dark'
Copy link
Member

Choose a reason for hiding this comment

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

Why don't you include 'dark' 'dracula' 'solarized-dark' to $themes variable too? If there's a reason for this, can you explain it to me?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ideally, 'dark' 'dracula' 'solarized-dark' and 'default' 'white' should be in the variable $themes. But since I don't want to create new variables for the styles, I didn't merge all the styles.

browser/components/NoteItemSimple.styl
transition 0.15s
background-color alpha(#f8f8f2, 10%)
color $ui-dracula-text-color
for theme in 'dracula'
Copy link
Member

Choose a reason for hiding this comment

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

This loop only have 'dracula' can you also move this to the $themes variable for the loop bellow?

browser/components/SideNavFilter.styl
color get-theme-var(theme, 'text-color')

.menu-button--active
Copy link
Member

Choose a reason for hiding this comment

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

Can we merge .menu-button-start--active, .menu-button-active and .menu-button-trash--active?

Suggested change
.menu-button--active
.menu-button--active, .menu-button-star--active, .menu-button-trash--active

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ya, we could be see for white and dark, those buttons have different colors. So what to do? Create new variables or leave it like this?

Copy link
Member

Choose a reason for hiding this comment

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

I would prefer to create new variables. After all we need to keep the consistency for this. Do you think you can add them?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It will take some time and with BoostNote.next, I'm not sure if it's worth.

Copy link
Member

Choose a reason for hiding this comment

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

True, that's why I'm kinda hesitated. Let's leave it, I'll see if I can refactor it later.

browser/main/Detail/FolderSelect.styl

body[data-theme="dracula"]
.root
color $ui-dracula-text-color
Copy link
Member

Choose a reason for hiding this comment

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

I think you miss this line in the rewrite? Or we don't need it? 😄

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Ya, there is an issue with the template.
But there is another issue, the theme solarized-dark is different from the master.
The master use the white theme whereas the current one use solarized-dark colors.

@ZeroX-DG ZeroX-DG added awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. and removed awaiting review ❇️ Pull request is awaiting a review. labels Jan 31, 2020
ZeroX-DG
ZeroX-DG requested changes Jan 31, 2020
View reviewed changes
Copy link
Member

@ZeroX-DG ZeroX-DG left a comment •
edited
Loading

Choose a reason for hiding this comment

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

Can you fix this bug before I approve this PR? Thank you 😄 All dark theme have that title broken except for the theme dark
image

@daiyam
Copy link
Contributor Author

daiyam commented Jan 31, 2020 •
edited
Loading

@ZeroX-DG I've fixed the issue with the titles

ZeroX-DG
ZeroX-DG approved these changes Jan 31, 2020
View reviewed changes
Copy link
Member

@ZeroX-DG ZeroX-DG left a comment

Choose a reason for hiding this comment

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

Very cool 😄 I'll approve this. Thank you for this PR 👍

@ZeroX-DG ZeroX-DG added approved 👍 Pull request has been approved by sufficient reviewers. and removed awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. labels Jan 31, 2020
@ZeroX-DG ZeroX-DG mentioned this pull request Feb 2, 2020
Closed
@Rokt33r Rokt33r merged commit 8a87c06 into BoostIO:master Feb 3, 2020
@Rokt33r Rokt33r removed the approved 👍 Pull request has been approved by sufficient reviewers. label Feb 3, 2020
@Rokt33r Rokt33r added this to the v0.15.0 milestone Feb 3, 2020
@daiyam daiyam deleted the theme-nord branch February 3, 2020 17:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ZeroX-DG ZeroX-DG ZeroX-DG approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
v0.15.0
Development

Successfully merging this pull request may close these issues.
3 participants
@daiyam @ZeroX-DG @Rokt33r