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

(fix) - O3-1169: Make Implementer Tools Dark Themed #960

Merged
merged 2 commits into from
Apr 14, 2024

Conversation

kb019
Copy link
Contributor

@kb019 kb019 commented Mar 24, 2024

Requirements

  • This PR has a title that briefly describes the work done including the ticket number. Ensure your PR title includes a conventional commit label (such as feat, fix, or chore, among others). See existing PR titles for inspiration.

For changes to apps

If applicable

  • My work includes tests or is validated by existing tests.
  • I have updated the esm-framework mock to reflect any API changes I have made.

Summary

To Make the implementer tools dark themed. Also changed some files from .css to .scss extension.

Screenshots

OpenMRS.-.Google.Chrome.2024-03-24.16-27-36.webm

Related Issue

https://openmrs.atlassian.net/browse/O3-1169

@kb019 kb019 changed the title (fix) -[O3-1169] Make Implementer Tools Dark Themed (fix) - O3-1169: Make Implementer Tools Dark Themed Mar 24, 2024
@suubi-joshua
Copy link
Contributor

@kb019 great job. Looks good to me. @denniskigen that documentation test fail again.

@kb019
Copy link
Contributor Author

kb019 commented Mar 25, 2024

@kb019 great job. Looks good to me. @denniskigen that documentation test fail again.
Thanks a lot @suubi-joshua.

@trevor-james-nangosha
Copy link
Contributor

Nice design implementations @kb019 👏🏿

@kb019
Copy link
Contributor Author

kb019 commented Mar 25, 2024

Nice design implementations @kb019 👏🏿

Thank you @trevor-james-nangosha

@kb019
Copy link
Contributor Author

kb019 commented Mar 25, 2024

Hi @vasharma05 , @brandones , @denniskigen. Could you please review this pr. Thank you.

@brandones brandones self-requested a review March 25, 2024 14:38
@brandones
Copy link
Collaborator

@kb019 , nice work on this, thank you. Sorry I didn't specify this in the ticket, but it would be great if we can accomplish this using Carbon Themes rather than all this custom CSS. Right now all this CSS looks like it would add perhaps more maintenance burden than it is worth. Do you think you could try to get that to work? Again, thanks for your work, and sorry for not including this in the ticket description.

@kb019
Copy link
Contributor Author

kb019 commented Mar 25, 2024

Hi @brandones , Certainly! I understand your preference for using Carbon Themes over custom CSS for easier maintenance. I'll make the necessary adjustments to implement the changes using Carbon Themes as per your request. Thank you for providing clear guidance .

@kb019
Copy link
Contributor Author

kb019 commented Mar 29, 2024

Hi @brandones , I have tried to make the necessary changes by using carbon themes. Could you please review the pr and let me know if any changes are needed.
OpenMRS - Google Chrome 2024-03-29 14-02-21.webm

'text-primary': #f5f5f5,
'text-secondary': #bcbaba,
'layer-selected-inverse': #696969,
'text-inverse': #f5f5f5,
Copy link
Collaborator

Choose a reason for hiding this comment

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

Any reason we shouldn't just use 'text-primary' and eliminate 'text-inverse'?

Copy link
Contributor Author

@kb019 kb019 Mar 30, 2024

Choose a reason for hiding this comment

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

Hi @brandones , The "text-inverse" is for the text color of the switch buttons when they are selected and the "text-primary" is for the color of the text when they are hovered. Yes, we can use "text-primary" but then the text color of the selected switch buttons should be explicitly specified as 'text-primary'. I can make that change if needed.

@brandones
Copy link
Collaborator

I think this looks great, @kb019 . Really nice job.

I'm interested if @denniskigen or @ibacher have thoughts, since this is the first time we've really messed with themes at all.

@brandones
Copy link
Collaborator

@kb019 Can you make the switch still green when it is on? I'm not sure the white really reads.

@kb019
Copy link
Contributor Author

kb019 commented Mar 30, 2024

@kb019 Can you make the switch still green when it is on? I'm not sure the white really reads.

I think this looks great, @kb019 . Really nice job.

I'm interested if @denniskigen or @ibacher have thoughts, since this is the first time we've really messed with themes at all.

Thank you @brandones.

@kb019
Copy link
Contributor Author

kb019 commented Mar 30, 2024

@kb019 Can you make the switch still green when it is on? I'm not sure the white really reads.

I have made the change @brandones. Thank you.

Copy link

@mewanDimalsha mewanDimalsha left a comment

Choose a reason for hiding this comment

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

It seems like you're running a markdown link checker in a Docker container. This tool checks for broken links in your markdown files. The output shows that it has checked several files and found one dead link in the README.md file. The dead link is "packages/apps/esm-translations" → Status: 400. This means that the link to packages/apps/esm-translations is not working, returning a HTTP status code of 400. You should check this link and fix it if necessary.

@brandones
Copy link
Collaborator

Ping @denniskigen , could I get your input on this? It looks good to me but I want to run it by you.

@brandones
Copy link
Collaborator

brandones commented Apr 3, 2024

@kb019 Feel free to ignore what @mewanDimalsha wrote; it has nothing to do with your change.

I have mixed feelings about the use of ChatGPT to generate comments...

@kb019
Copy link
Contributor Author

kb019 commented Apr 3, 2024

Ping @denniskigen , could I get your input on this? It looks good to me but I want to run it by you.

Sure, will ping him on this.

@ibacher
Copy link
Member

ibacher commented Apr 3, 2024

I'm happy to have the implementer tools have a dark theme. It's a pretty isolated part of the app that is really just for administrators, so it's a sensible place to experiment with this. It would perhaps be nicer if we were using colors from one of Carbon's dark themes directly rather than a set of custom settings. The colors here are not far off Carbon's G90 theme, so maybe at least starting from that would make sense.


.darkTheme {
@include theme.theme(themes.$g90);
}
Copy link
Contributor Author

@kb019 kb019 Apr 4, 2024

Choose a reason for hiding this comment

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

Hi @ibacher , as per your suggestion removed the custom themes and used only the g90 theme from carbon. I have recorded the changes in the below video link . Could you please look into it and let me know if you want any changes.
OpenMRS - Google Chrome 2024-04-04 14-48-42.webm
Tagging @brandones , @denniskigen .

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Hi @ibacher, Could you share your thoughts on this?

Copy link
Collaborator

@brandones brandones left a comment

Choose a reason for hiding this comment

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

Ok, thanks @ibacher , thanks @kb019 ! LGTM.

@brandones brandones merged commit 308939a into openmrs:main Apr 14, 2024
7 of 8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants