Skip to content
This repository has been archived by the owner on Aug 11, 2021. It is now read-only.

Feat - url for dark version of placeholder images #540

Open
wants to merge 2 commits into
base: master
Choose a base branch
from

Conversation

nico3333fr
Copy link
Contributor

Short description of what this resolves:

Missing support of dark mode version for placeholder illustrations.

Changes proposed in this pull request:

  • added urlDarkVersion property (not mandatory, in some cases, the image could fit in both cases ^^)
  • if specified, will be displayed
  • added a class hide-on-darkmode in case of dark version (to hide the "light" version)

Snapshot

image

Copy link
Contributor

@EpokK EpokK left a comment

Choose a reason for hiding this comment

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

I don't think it's a good idea to add a property for the dark theme like that. I prefer if we could get this information via a React hook config or css directly. I suppose, you already check the second choice. Check with @econdepe how to know if dark is applied.

@nico3333fr
Copy link
Contributor Author

Yes, we already had this discussion with @econdepe, this rely on CSS.

Copy link
Member

@mmso mmso left a comment

Choose a reason for hiding this comment

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

I'm ok with this for now and we can think of how to improve it later

@econdepe
Copy link
Contributor

We introduced a dummy class in in the PR #537 for an unrelated issue (Nico needed it in the subscription flow). Since the class is there, it does make sense to re-use it as in this PR, but I agree a React hook would look nicer.

@mmso
Copy link
Member

mmso commented Jan 24, 2020

I think this suggestion looks slightly better than this PR though:

// somewhere
export const getLightOrDark = (light, dark) => {
    return document.body.classList.contains('isDarkMode') ? dark : light;
};
// elsewhere
<IllustrationPlaceholder
    url={getDarkOrLight(lighImageImport, darkImageImport)}
    ...
/>

I think it's as fast as doing this, and then we can refactor with the ThemeProvider later

@econdepe econdepe force-pushed the feat/darkModeIllustrationPlaceholder branch from 9d3b3b5 to 6294701 Compare January 24, 2020 16:37
@econdepe
Copy link
Contributor

Sorry about the force-pushes (the first one was unintentional...). The helper is available in ProtonMail/proton-shared#114
This PR now just moves a constant to proton-shared

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants