From 9899560865c05c610b2ba52321ce2f93303224b3 Mon Sep 17 00:00:00 2001 From: Gavin Suntop Date: Wed, 16 Mar 2022 18:55:26 +0000 Subject: [PATCH] Bug 1746032 - STP dark mode r=thecount Differential Revision: https://phabricator.services.mozilla.com/D141257 --- .../pocket/content/panels/css/global.scss | 12 +++++ .../content/panels/css/main.compiled.css | 45 +++++++++++++++++++ .../pocket/content/panels/css/styleguide.scss | 8 ++++ .../content/panels/img/pocketlogo-dark.svg | 16 +++++++ .../components/ArticleList/ArticleList.scss | 12 +++++ .../panels/js/components/Button/Button.scss | 14 ++++++ .../panels/js/components/Header/Header.scss | 4 ++ .../PopularTopics/PopularTopics.scss | 9 ++++ .../pocket/content/panels/js/main.bundle.js | 6 +-- .../content/panels/js/style-guide/entry.js | 26 +++++++++++ .../content/panels/js/style-guide/overlay.js | 7 +-- .../pocket/content/panels/style-guide.html | 4 ++ 12 files changed, 154 insertions(+), 9 deletions(-) create mode 100644 browser/components/pocket/content/panels/img/pocketlogo-dark.svg diff --git a/browser/components/pocket/content/panels/css/global.scss b/browser/components/pocket/content/panels/css/global.scss index ed32a886e380..27e64768f3cf 100644 --- a/browser/components/pocket/content/panels/css/global.scss +++ b/browser/components/pocket/content/panels/css/global.scss @@ -1,5 +1,17 @@ +// Mixins + +@mixin theme_dark { + @at-root body.theme_dark & { + @content; + } +} + body { font: menu; + + &.theme_dark { + color: #FBFBFE; + } } hr { diff --git a/browser/components/pocket/content/panels/css/main.compiled.css b/browser/components/pocket/content/panels/css/main.compiled.css index c64732abfa7f..1b00a2983610 100644 --- a/browser/components/pocket/content/panels/css/main.compiled.css +++ b/browser/components/pocket/content/panels/css/main.compiled.css @@ -394,6 +394,9 @@ a:active { body { font: menu; } +body.theme_dark { + color: #FBFBFE; +} hr { margin: 12px -8px; @@ -1979,6 +1982,13 @@ button { padding: 20px; width: 260px; } +#stp_style_guide #dark_mode_toggle { + text-align: end; +} +body.theme_dark #stp_style_guide { + background: #42414c; +} + #stp_style_guide .stp_superheader { margin: 0; } @@ -2041,9 +2051,17 @@ button { margin-bottom: 8px; padding: 4px 8px; } +body.theme_dark .stp_popular_topics .stp_popular_topic { + background: #2B2A33; +} + .stp_popular_topics .stp_popular_topic .stp_popular_topic_link { color: #000; } +body.theme_dark .stp_popular_topics .stp_popular_topic .stp_popular_topic_link { + color: #FBFBFE; +} + .stp_popular_topics .stp_popular_topic .stp_popular_topic_link::after { content: " >"; } @@ -2061,6 +2079,10 @@ button { text-decoration: none; background-color: #ECECEE; } +body.theme_dark .stp_article_list .stp_article_list_link:hover { + background-color: #2B2A33; +} + .stp_article_list .stp_article_list_thumb, .stp_article_list .stp_article_list_thumb_placeholder { width: 40px; @@ -2077,6 +2099,10 @@ button { color: #15141A; margin: 0 0 4px; } +body.theme_dark .stp_article_list .stp_article_list_header { + color: #FBFBFE; +} + .stp_article_list .stp_article_list_publisher { font-style: normal; font-weight: normal; @@ -2085,6 +2111,9 @@ button { color: #52525E; margin: 4px 0 0; } +body.theme_dark .stp_article_list .stp_article_list_publisher { + color: #CFCFD8; +} .stp_header { display: flex; @@ -2100,6 +2129,9 @@ button { height: 32px; width: 121px; } +body.theme_dark .stp_header .stp_header_logo { + background: url(../img/pocketlogo-dark.svg) bottom center no-repeat; +} .stp_button { cursor: pointer; @@ -2113,6 +2145,10 @@ button { font-weight: 600; line-height: 1.27em; } +body.theme_dark .stp_button.stp_button_text { + color: #F0F0F4; +} + .stp_button.stp_button_primary { align-items: center; background: #0060DF; @@ -2125,6 +2161,11 @@ button { line-height: 1.27em; padding: 6px 12px; } +body.theme_dark .stp_button.stp_button_primary { + background: #00DDFF; + color: #15141A; +} + .stp_button.stp_button_secondary { align-items: center; background: #F0F0F4; @@ -2136,6 +2177,10 @@ button { line-height: 1.27em; padding: 6px 12px; } +body.theme_dark .stp_button.stp_button_secondary { + background: #2B2A33; + color: #FBFBFE; +} .stp_button_wide .stp_button { display: block; diff --git a/browser/components/pocket/content/panels/css/styleguide.scss b/browser/components/pocket/content/panels/css/styleguide.scss index 45cf1c105b2b..8968b571f866 100644 --- a/browser/components/pocket/content/panels/css/styleguide.scss +++ b/browser/components/pocket/content/panels/css/styleguide.scss @@ -1,9 +1,17 @@ #stp_style_guide { + #dark_mode_toggle { + text-align: end; + } + border: 1px solid #ddd; margin: 20px auto; padding: 20px; width: 260px; + @include theme_dark { + background: #42414c; + } + .stp_superheader { margin: 0; } diff --git a/browser/components/pocket/content/panels/img/pocketlogo-dark.svg b/browser/components/pocket/content/panels/img/pocketlogo-dark.svg new file mode 100644 index 000000000000..70e6ad7bf106 --- /dev/null +++ b/browser/components/pocket/content/panels/img/pocketlogo-dark.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss index 9d2ab457f1a4..b4c660f50603 100644 --- a/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss +++ b/browser/components/pocket/content/panels/js/components/ArticleList/ArticleList.scss @@ -10,6 +10,10 @@ &:hover { text-decoration: none; background-color: #ECECEE; + + @include theme_dark { + background-color: #2B2A33; + } } } @@ -29,6 +33,10 @@ line-height: 1.27em; color: #15141A; margin: 0 0 4px; + + @include theme_dark { + color: #FBFBFE; + } } .stp_article_list_publisher { @@ -38,5 +46,9 @@ line-height: 1.27em; color: #52525E; margin: 4px 0 0; + + @include theme_dark { + color: #CFCFD8; + } } } diff --git a/browser/components/pocket/content/panels/js/components/Button/Button.scss b/browser/components/pocket/content/panels/js/components/Button/Button.scss index 692ba640c903..4f35ee0d0297 100644 --- a/browser/components/pocket/content/panels/js/components/Button/Button.scss +++ b/browser/components/pocket/content/panels/js/components/Button/Button.scss @@ -9,6 +9,10 @@ font-style: normal; font-weight: 600; line-height: 1.27em; + + @include theme_dark { + color: #F0F0F4; + } } &.stp_button_primary { @@ -22,6 +26,11 @@ justify-content: center; line-height: 1.27em; padding: 6px 12px; + + @include theme_dark { + background: #00DDFF; + color: #15141A; + } } &.stp_button_secondary { @@ -34,6 +43,11 @@ font-weight: 600; line-height: 1.27em; padding: 6px 12px; + + @include theme_dark { + background: #2B2A33; + color: #FBFBFE; + } } } diff --git a/browser/components/pocket/content/panels/js/components/Header/Header.scss b/browser/components/pocket/content/panels/js/components/Header/Header.scss index 3ac351c99aec..fae6499bdcc2 100644 --- a/browser/components/pocket/content/panels/js/components/Header/Header.scss +++ b/browser/components/pocket/content/panels/js/components/Header/Header.scss @@ -11,5 +11,9 @@ background-size: contain; height: 32px; width: 121px; + + @include theme_dark { + background: url(../img/pocketlogo-dark.svg) bottom center no-repeat; + } } } diff --git a/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss index c10c69101f65..d95d0f59b14f 100644 --- a/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss +++ b/browser/components/pocket/content/panels/js/components/PopularTopics/PopularTopics.scss @@ -13,9 +13,18 @@ margin-bottom: 8px; padding: 4px 8px; + @include theme_dark { + background: #2B2A33; + + } + .stp_popular_topic_link { color: #000; + @include theme_dark { + color: #FBFBFE; + } + &::after { content: " >"; } diff --git a/browser/components/pocket/content/panels/js/main.bundle.js b/browser/components/pocket/content/panels/js/main.bundle.js index 2c63ae011df7..6805c3ba08a9 100644 --- a/browser/components/pocket/content/panels/js/main.bundle.js +++ b/browser/components/pocket/content/panels/js/main.bundle.js @@ -1318,15 +1318,13 @@ StyleGuideOverlay.prototype = { url: "https://example.org", alt: "Alt Text" }, { - title: "Article Title", - publisher: "Publisher", + title: "Article Title (No Publisher)", thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", url: "https://example.org", alt: "Alt Text" }, { - title: "Article Title", + title: "Article Title (No Thumbnail)", publisher: "Publisher", - thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", url: "https://example.org", alt: "Alt Text" }] diff --git a/browser/components/pocket/content/panels/js/style-guide/entry.js b/browser/components/pocket/content/panels/js/style-guide/entry.js index 0e1f55fd44a7..0fe8e9ef7885 100644 --- a/browser/components/pocket/content/panels/js/style-guide/entry.js +++ b/browser/components/pocket/content/panels/js/style-guide/entry.js @@ -8,6 +8,32 @@ function onDOMLoaded() { thePKT_PANEL.initStyleGuide(); } window.thePKT_PANEL.create(); + + setupDarkModeUI(); +} + +function setupDarkModeUI() { + let isDarkModeEnabled = false; // TODO: Use browser pref for starting value + let elDarkModeToggle = document.querySelector(`#dark_mode_toggle input`); + let elBody = document.querySelector(`body`); + + function setTheme() { + if (isDarkModeEnabled) { + elBody.classList.add(`theme_dark`); + elDarkModeToggle.checked = true; + } else { + elBody.classList.remove(`theme_dark`); + elDarkModeToggle.checked = false; + } + } + + setTheme(); + + elDarkModeToggle.addEventListener(`click`, function(e) { + e.preventDefault; + isDarkModeEnabled = !isDarkModeEnabled; + setTheme(); + }); } if (document.readyState != `loading`) { diff --git a/browser/components/pocket/content/panels/js/style-guide/overlay.js b/browser/components/pocket/content/panels/js/style-guide/overlay.js index 370175656f57..040bf967a2cd 100644 --- a/browser/components/pocket/content/panels/js/style-guide/overlay.js +++ b/browser/components/pocket/content/panels/js/style-guide/overlay.js @@ -55,18 +55,15 @@ StyleGuideOverlay.prototype = { alt: "Alt Text", }, { - title: "Article Title", - publisher: "Publisher", + title: "Article Title (No Publisher)", thumbnail: "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", url: "https://example.org", alt: "Alt Text", }, { - title: "Article Title", + title: "Article Title (No Thumbnail)", publisher: "Publisher", - thumbnail: - "https://img-getpocket.cdn.mozilla.net/80x80/https://www.raritanheadwaters.org/wp-content/uploads/2020/04/red-fox.jpg", url: "https://example.org", alt: "Alt Text", }, diff --git a/browser/components/pocket/content/panels/style-guide.html b/browser/components/pocket/content/panels/style-guide.html index 6a112d322f9e..ead050306959 100644 --- a/browser/components/pocket/content/panels/style-guide.html +++ b/browser/components/pocket/content/panels/style-guide.html @@ -18,6 +18,10 @@
+
+ + +

Save To Pocket:
Style Guide