From 9d3b3b5d390ac5d00409a8888034b271d15f4685 Mon Sep 17 00:00:00 2001
From: Nicolas Hoffmann <dante3333@gmail.com>
Date: Fri, 24 Jan 2020 15:01:26 +0100
Subject: [PATCH 1/2] Feat - url for dark mode version of placeholder images

---
 containers/illustration/IllustrationPlaceholder.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/containers/illustration/IllustrationPlaceholder.js b/containers/illustration/IllustrationPlaceholder.js
index 325c3e5ff..ec6eefd24 100644
--- a/containers/illustration/IllustrationPlaceholder.js
+++ b/containers/illustration/IllustrationPlaceholder.js
@@ -2,12 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { classnames } from '../../helpers/component';
 
-const IllustrationPlaceholder = ({ className, title, text, url, uppercase, children }) => {
+const IllustrationPlaceholder = ({ className, title, text, url, urlDarkVersion = '', uppercase, children }) => {
     const info = typeof text === 'string' ? <p>{text}</p> : text;
+    const darkImg = urlDarkVersion !== '' ? <img src={urlDarkVersion} alt={title} className="p1 mb1 display-on-darkmode" /> : null;
 
     return (
         <div className={classnames(['flex flex-column flex-items-center w100', className])}>
-            <img src={url} alt={title} className="p1 mb1" />
+            <img src={url} alt={title} className={classnames(['p1 mb1', darkImg && 'hide-on-darkmode'])} />
+            {darkImg}
             <h2 className={classnames(['bold', uppercase && 'uppercase'])}>{title}</h2>
             {info}
             {children}
@@ -20,6 +22,7 @@ IllustrationPlaceholder.propTypes = {
     title: PropTypes.string.isRequired,
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     url: PropTypes.string.isRequired,
+    urlDarkVersion: PropTypes.string,
     uppercase: PropTypes.bool,
     children: PropTypes.node
 };

From 8494de99cf19476e9b7bf6c334b66e92305fbccb Mon Sep 17 00:00:00 2001
From: econdepe <econdepe@protonmail.com>
Date: Fri, 24 Jan 2020 17:36:38 +0100
Subject: [PATCH 2/2] refactor. Move dummy class constant to proton-shared

---
 containers/illustration/IllustrationPlaceholder.js | 7 ++-----
 containers/themes/ThemeInjector.js                 | 3 +--
 2 files changed, 3 insertions(+), 7 deletions(-)

diff --git a/containers/illustration/IllustrationPlaceholder.js b/containers/illustration/IllustrationPlaceholder.js
index ec6eefd24..325c3e5ff 100644
--- a/containers/illustration/IllustrationPlaceholder.js
+++ b/containers/illustration/IllustrationPlaceholder.js
@@ -2,14 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { classnames } from '../../helpers/component';
 
-const IllustrationPlaceholder = ({ className, title, text, url, urlDarkVersion = '', uppercase, children }) => {
+const IllustrationPlaceholder = ({ className, title, text, url, uppercase, children }) => {
     const info = typeof text === 'string' ? <p>{text}</p> : text;
-    const darkImg = urlDarkVersion !== '' ? <img src={urlDarkVersion} alt={title} className="p1 mb1 display-on-darkmode" /> : null;
 
     return (
         <div className={classnames(['flex flex-column flex-items-center w100', className])}>
-            <img src={url} alt={title} className={classnames(['p1 mb1', darkImg && 'hide-on-darkmode'])} />
-            {darkImg}
+            <img src={url} alt={title} className="p1 mb1" />
             <h2 className={classnames(['bold', uppercase && 'uppercase'])}>{title}</h2>
             {info}
             {children}
@@ -22,7 +20,6 @@ IllustrationPlaceholder.propTypes = {
     title: PropTypes.string.isRequired,
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     url: PropTypes.string.isRequired,
-    urlDarkVersion: PropTypes.string,
     uppercase: PropTypes.bool,
     children: PropTypes.node
 };
diff --git a/containers/themes/ThemeInjector.js b/containers/themes/ThemeInjector.js
index ff1bb5d23..9781673bf 100644
--- a/containers/themes/ThemeInjector.js
+++ b/containers/themes/ThemeInjector.js
@@ -2,11 +2,10 @@ import React, { useState, useEffect } from 'react';
 import { useMailSettings, useOrganization } from 'react-components';
 import { getThemeIdentifier, getTheme, toStyle, isDarkTheme } from 'proton-shared/lib/themes/helpers';
 import { PROTON_THEMES, DEFAULT_THEME } from 'proton-shared/lib/themes/themes';
+import { DARK_MODE_CLASS } from 'proton-shared/lib/constants';
 
 const protonThemeIdentifiers = Object.values(PROTON_THEMES).map(({ identifier }) => identifier);
 
-const DARK_MODE_CLASS = 'isDarkMode';
-
 const ThemeInjector = () => {
     const [{ Theme: userTheme = '' } = {}] = useMailSettings();
     const [{ Theme: orgTheme = '' } = {}] = useOrganization();