feat: Added light mode to GH profile buttons #40

Anush008 · 2023-04-27T13:27:27Z

What type of PR is this? (check all applicable)

Description

This PR adds light mode to InviteToOpenSaucedButton.ts, ViewOnOpenSaucedButton.ts. A custom light mode color gh-white has been added to tailwind.config.js. 37e1c3a.

Additionally InviteToOpenSaucedModal.ts underwent the following changes:

Added target and relation attributes to the social links. 81cc251.
Updated bg-opacity, text-color for light and dark mode. 6063bf1.

Related Tickets & Documents

Resolves #23.

Mobile & Desktop Screenshots/Recordings

Light mode:

Dark mode:

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

bdougie · 2023-04-27T16:14:37Z

I don't mind it, but I got a different result. Black button

browser chrome
version 112
Mac OS

Anush008 · 2023-04-27T16:28:25Z

@bdougie, can you show me the color of the follow button underneath?

bdougie · 2023-04-27T17:29:06Z

Anush008 · 2023-04-27T18:28:53Z

The background color #21262D is the color configured for gh-gray, which is the dark-button bg.
I think I get the issue here. The dark: variant is based on the device theme. In your case, I believe you've configured light mode on GitHub's appearances page and not in the browser settings. Which is why the media preference is still set to dark.
Let me see if I can configure the buttons to adapt to GH's theme and not the device theme.

Anush008 · 2023-04-27T19:58:56Z

@bdougie, turns out GH uses a color_mode cookie to track a user's color preferences. I've updated the implementation to utilize the same. c458773.
If the preference is set to Sync with system in the GH appearance settings, the system default will be used as expected.
You can now re-fetch and try again.

bdougie · 2023-04-28T00:30:20Z

@bdougie, turns out GH uses a color_mode cookie to track a user's color preferences. I've updated the implementation to utilize the same.

Good catch. That would be a great Hightlight PR on opensauced.

bdougie

This works now

## [1.0.0-beta.3](v1.0.0-beta.2...v1.0.0-beta.3) (2023-04-28) ### 🍕 Features * Added light mode to GH profile buttons ([#40](#40)) ([a7ea43a](a7ea43a))

github-actions · 2023-04-28T01:22:00Z

🎉 This PR is included in version 1.0.0-beta.3 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## 1.0.0 (2023-05-13) ### 📝 Documentation * README and LICENSE ([917f7b0](917f7b0)) * Updated the README.md ([#15](#15)) ([3e4dd69](3e4dd69)) ### 🔁 Continuous Integration * automated github releases ([#39](#39)) ([735fa66](735fa66)), closes [#16](#16) ### 🧑‍💻 Code Refactoring * improved-auth-strategy ([#56](#56)) ([d8b27c3](d8b27c3)) ### 🍕 Features * add home page and profile page ([#36](#36)) ([8a43288](8a43288)) * add to highlights button ([#64](#64)) ([e2120a1](e2120a1)) * Added a configuration file ([#32](#32)) ([ec6722c](ec6722c)) * Added light mode to GH profile buttons ([#40](#40)) ([a7ea43a](a7ea43a)) * Added linting to the project. ([#49](#49)) ([1f73007](1f73007)) * Auto PAT authentication ([#29](#29)) ([f4f8cf6](f4f8cf6)) * extension window navigation ([#21](#21)) ([b5ae9a6](b5ae9a6)) * GitHub page update listener ([#37](#37)) ([06b070f](06b070f)) * Invite to OpenSauced ([#20](#20)) ([0c8f222](0c8f222)) * PAT authentication ([#27](#27)) ([e726a93](e726a93)) * updated the extension logo ([#22](#22)) ([d19034d](d19034d)) * view on OpenSauced button ([#14](#14)) ([a447551](a447551)) * vote repos ([#70](#70)) ([ff2c8f4](ff2c8f4)) ### 🐛 Bug Fixes * rename the. extension ([294e499](294e499)) * Update URLs ([5828e20](5828e20)) * attach dist folder to release assets ([#47](#47)) ([4f50e72](4f50e72)) * circular-deps in vote buttons ([675496c](675496c)) * Duplicate buttons on GH profile page ([#48](#48)) ([9ee2dca](9ee2dca)) * incorrect request for voting ([#72](#72)) ([7a35014](7a35014)) * make emails less creepy ([a08fa45](a08fa45)) * re-enable tailwind base class on extension popup ([#31](#31)) ([c081217](c081217)) * remove activeTab manifest.json ([#50](#50)) ([dd71480](dd71480)) * render emojis in user bio ([#68](#68)) ([d0158a5](d0158a5)) * set-output deprecation warning ([#51](#51)) ([486f84b](486f84b)) * unrecognized-manifest-key ([#55](#55)) ([d622500](d622500)) * Wrapped the await call in an async() ([#26](#26)) ([357aab5](357aab5))

github-actions · 2023-05-13T13:16:53Z

🎉 This PR is included in version 1.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [1.0.0-beta.3](open-sauced/ai@v1.0.0-beta.2...v1.0.0-beta.3) (2023-04-28) ### 🍕 Features * Added light mode to GH profile buttons ([#40](open-sauced/ai#40)) ([a7ea43a](open-sauced/ai@a7ea43a))

## 1.0.0 (2023-05-13) ### 📝 Documentation * README and LICENSE ([917f7b0](open-sauced/ai@917f7b0)) * Updated the README.md ([#15](open-sauced/ai#15)) ([3e4dd69](open-sauced/ai@3e4dd69)) ### 🔁 Continuous Integration * automated github releases ([#39](open-sauced/ai#39)) ([735fa66](open-sauced/ai@735fa66)), closes [#16](open-sauced/ai#16) ### 🧑‍💻 Code Refactoring * improved-auth-strategy ([#56](open-sauced/ai#56)) ([d8b27c3](open-sauced/ai@d8b27c3)) ### 🍕 Features * add home page and profile page ([#36](open-sauced/ai#36)) ([8a43288](open-sauced/ai@8a43288)) * add to highlights button ([#64](open-sauced/ai#64)) ([e2120a1](open-sauced/ai@e2120a1)) * Added a configuration file ([#32](open-sauced/ai#32)) ([ec6722c](open-sauced/ai@ec6722c)) * Added light mode to GH profile buttons ([#40](open-sauced/ai#40)) ([a7ea43a](open-sauced/ai@a7ea43a)) * Added linting to the project. ([#49](open-sauced/ai#49)) ([1f73007](open-sauced/ai@1f73007)) * Auto PAT authentication ([#29](open-sauced/ai#29)) ([f4f8cf6](open-sauced/ai@f4f8cf6)) * extension window navigation ([#21](open-sauced/ai#21)) ([b5ae9a6](open-sauced/ai@b5ae9a6)) * GitHub page update listener ([#37](open-sauced/ai#37)) ([06b070f](open-sauced/ai@06b070f)) * Invite to OpenSauced ([#20](open-sauced/ai#20)) ([0c8f222](open-sauced/ai@0c8f222)) * PAT authentication ([#27](open-sauced/ai#27)) ([e726a93](open-sauced/ai@e726a93)) * updated the extension logo ([#22](open-sauced/ai#22)) ([d19034d](open-sauced/ai@d19034d)) * view on OpenSauced button ([#14](open-sauced/ai#14)) ([a447551](open-sauced/ai@a447551)) * vote repos ([#70](open-sauced/ai#70)) ([ff2c8f4](open-sauced/ai@ff2c8f4)) ### 🐛 Bug Fixes * rename the. extension ([294e499](open-sauced/ai@294e499)) * Update URLs ([5828e20](open-sauced/ai@5828e20)) * attach dist folder to release assets ([#47](open-sauced/ai#47)) ([4f50e72](open-sauced/ai@4f50e72)) * circular-deps in vote buttons ([675496c](open-sauced/ai@675496c)) * Duplicate buttons on GH profile page ([#48](open-sauced/ai#48)) ([9ee2dca](open-sauced/ai@9ee2dca)) * incorrect request for voting ([#72](open-sauced/ai#72)) ([7a35014](open-sauced/ai@7a35014)) * make emails less creepy ([a08fa45](open-sauced/ai@a08fa45)) * re-enable tailwind base class on extension popup ([#31](open-sauced/ai#31)) ([c081217](open-sauced/ai@c081217)) * remove activeTab manifest.json ([#50](open-sauced/ai#50)) ([dd71480](open-sauced/ai@dd71480)) * render emojis in user bio ([#68](open-sauced/ai#68)) ([d0158a5](open-sauced/ai@d0158a5)) * set-output deprecation warning ([#51](open-sauced/ai#51)) ([486f84b](open-sauced/ai@486f84b)) * unrecognized-manifest-key ([#55](open-sauced/ai#55)) ([d622500](open-sauced/ai@d622500)) * Wrapped the await call in an async() ([#26](open-sauced/ai#26)) ([357aab5](open-sauced/ai@357aab5))

Anush008 added 3 commits April 27, 2023 18:26

chore: Added _blank, noopener to social links

81cc251

feat: Added light mode to GH profile page buttons

37e1c3a

chore: Updated opacity and text color of invite modal of light mode

6063bf1

Anush008 requested review from diivi and bdougie April 27, 2023 13:27

Anush008 mentioned this pull request Apr 27, 2023

feat: added linting to the project #45

Closed

19 tasks

feat: Toggle light mode based on GH preferences

c458773

bdougie approved these changes Apr 28, 2023

View reviewed changes

bdougie merged commit a7ea43a into beta Apr 28, 2023
3 checks passed

Anush008 deleted the feat-light-mode branch April 28, 2023 01:21

github-actions bot added the released on @beta label Apr 28, 2023

github-actions bot added the released label May 13, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Added light mode to GH profile buttons #40

feat: Added light mode to GH profile buttons #40

Anush008 commented Apr 27, 2023

bdougie commented Apr 27, 2023 •

edited

Anush008 commented Apr 27, 2023

bdougie commented Apr 27, 2023

Anush008 commented Apr 27, 2023 •

edited

Anush008 commented Apr 27, 2023

bdougie commented Apr 28, 2023

bdougie left a comment

github-actions bot commented Apr 28, 2023

github-actions bot commented May 13, 2023

feat: Added light mode to GH profile buttons #40

feat: Added light mode to GH profile buttons #40

Conversation

Anush008 commented Apr 27, 2023

What type of PR is this? (check all applicable)

Description

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Light mode:

Dark mode:

Added tests?

Added to documentation?

bdougie commented Apr 27, 2023 • edited

Anush008 commented Apr 27, 2023

bdougie commented Apr 27, 2023

Anush008 commented Apr 27, 2023 • edited

Anush008 commented Apr 27, 2023

bdougie commented Apr 28, 2023

bdougie left a comment

Choose a reason for hiding this comment

github-actions bot commented Apr 28, 2023

github-actions bot commented May 13, 2023

bdougie commented Apr 27, 2023 •

edited

Anush008 commented Apr 27, 2023 •

edited