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

🌓 Dark mode fixes #599

Merged
merged 13 commits into from
Sep 7, 2023
Merged

🌓 Dark mode fixes #599

merged 13 commits into from
Sep 7, 2023

Conversation

michalsmiarowski
Copy link
Contributor

@michalsmiarowski michalsmiarowski commented Aug 21, 2023 •
edited
Loading

Closes: #435

Also fixes the dark mode issues that were placed in Coda (see here, here and here)

Fixes:

1. Change OutlineListItem color for dark mode - b274717

Changes the color of the border for MY ACTIVITY items

Screenshots

Before:

image

After:
image

2. Fix darkmode color for BridgeProcessStep - b914db0

Changes the color of the title of BridgeProcessStep (for example Unminting in progress)

Screenshots

Before:

After:

3. Fix color for TransactionDetailsItem (dark mode) - a573ff4

Makes the TransactionDetailsItem values lighter

Screenshots

Before:

After:
image

4. Fix color for bridge process step subtitles - 125b257

Makes the Bridge Process Step subtitle lighter.

Screenshots

Before:
image

image

After:
image

image

5. Fix the colors in Step component (dark mode) - 72da36e

Screenshots

Before:
image

After:
image

6. Fix ProtocolHistory colors for dark mode - 7ed9785

Screenshots

Before:
image

After:
image

7. Fix dark mode issues for step 1 minting - 363f759

  • change body text to gray.300 for dark mode
  • change placeholder text for the input to gray.500 for dark mode
Screenshots

Before:
image

After:
image

8. Fix dark mode colors for tBTC Explorer - 9ae95cd

Screenshots

Before:
image

After:
image

@michalsmiarowski
Change OutlineListItem color for dark mode
b274717 
Change OutlineListItem color for dark mode to `gray.700`.
@michalsmiarowski
Fix darkmode color for BridgeProcessStep
b914db0 
The title should have `gray.300` color in dark mode.
@michalsmiarowski
Fix color for TransactionDetailsItem (dark mode)
a573ff4 
The color for `TransactionDetailsItem` and `TransactionDetailsAmountItem` should
be `gray.300` for the dark mode.
@michalsmiarowski
Fix color for bridge process step subtitles
125b257 
Labels such as "step 1" or "Minting/Minted", "Unminting/Unminted" should be
colored with `brand.300` for the dark mode.
@michalsmiarowski
Fix the colors in Step component (dark mode)
72da36e 
The color of step indicator and the horizontal line next to the step should be
`brand.300` for dark mode.
@michalsmiarowski
Fix ProtocolHistory colors for dark mode
7ed9785 
- change the white base color of the gradient to #323A47 (`gray.800`)
- change the color of amounts to `brand.300`
@michalsmiarowski
Fix dark mode issues for step 1 minting
363f759 
- change body text to `gray.300` for dark mode
- change placeholder text for the input to `gray.500` for dark mode
@michalsmiarowski
Fix typo
0b31232
@michalsmiarowski
Fix dark mode colors for tBTC Explorer
9ae95cd 
- replace the Metric Box background color to `gray.700` in dark mode
- replace the background color of odd row (history rows) to `gray.700` in dark
mode
@michalsmiarowski michalsmiarowski added this to the v1.10.0 milestone Aug 21, 2023
@github-actions
Copy link

Preview uploaded to https://preview.dashboard.test.threshold.network/dark-mode-fixes/index.html.

@SorinQ
Copy link
Contributor

SorinQ commented Aug 21, 2023 •
edited
Loading

Congrats!

Just two things:

  1. The gradient's color here should be the same as the background which I think is #333A47

Group 24

  1. A. Please use a different color for the stroke: the next light grey in the palette after the one we use for the rectangle background. If none is available, then just remove the stroke.

B. Please ensure that the 'tBTC AMOUNT' table title is the same color as the other titles. This comment also applies to the light version. Thanks

Group 23

r-czajkowski
r-czajkowski reviewed Aug 22, 2023
View reviewed changes
Copy link
Collaborator

@r-czajkowski r-czajkowski left a comment

Choose a reason for hiding this comment

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

Maybe let's use the useColorModeValue hook on the top of the component because in case of conditional rendering, we will get a warning in console. WDYT?

@github-actions
Copy link

github-actions bot commented Sep 1, 2023

Preview uploaded to https://preview.dashboard.test.threshold.network/dark-mode-fixes/index.html.

@michalsmiarowski michalsmiarowski self-assigned this Sep 6, 2023
@github-actions
Copy link

github-actions bot commented Sep 6, 2023

Preview uploaded to https://preview.dashboard.test.threshold.network/dark-mode-fixes/index.html.

@michalsmiarowski
Use useColorModeValue hook outside of JSX
88bae6b 
This will prevent eny errors in the console.
@michalsmiarowski
Copy link
Contributor Author

@SorinQ

  1. The gradient's color here should be the same as the background which I think is #333A47

Group 24

Fixed in eb03a43

  1. A. Please use a different color for the stroke: the next light grey in the palette after the one we use for the rectangle background. If none is available, then just remove the stroke.

Fixed in f6fff3b

Not sure if I did this one correctly. I've used gray.500 for dark mode and keep gray.100 for ligh mode. Let me know if that looks ok on the preview.

B. Please ensure that the 'tBTC AMOUNT' table title is the same color as the other titles. This comment also applies to the light version. Thanks

Fixed in a986c20

From the code it looks like the rest of the titles should be the same color as tBTC AMOUNT (instead of the other way around) so that's what I did. Let me know if that looks ok on the preview.

@michalsmiarowski
Copy link
Contributor Author

Maybe let's use the useColorModeValue hook on the top of the component because in case of conditional rendering, we will get a warning in console. WDYT?

Good idea @r-czajkowski. Fixed it in 88bae6b

@github-actions
Copy link

github-actions bot commented Sep 7, 2023

Preview uploaded to https://preview.dashboard.test.threshold.network/dark-mode-fixes/index.html.

@SorinQ SorinQ merged commit 127844b into main Sep 7, 2023
5 checks passed
@SorinQ SorinQ deleted the dark-mode-fixes branch September 7, 2023 14:13
@SorinQ SorinQ restored the dark-mode-fixes branch September 7, 2023 14:13
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@r-czajkowski r-czajkowski r-czajkowski approved these changes

@SorinQ SorinQ Awaiting requested review from SorinQ

Assignees

@michalsmiarowski michalsmiarowski

Labels
None yet
Projects
None yet
Milestone
v1.10.0
Development

Successfully merging this pull request may close these issues.

(MEDIUM) Fix dark mode issues for tBTC
3 participants
@michalsmiarowski @SorinQ @r-czajkowski