Merge pull request #1803 from AllanWang/theme

Update theme

13 files changed, 47 insertions, 28 deletions

diff --git a/app/src/main/play/en-US/whatsnew b/app/src/main/play/en-US/whatsnew
index 1f46ec04..ea4ee41f 100644
--- a/app/src/main/play/en-US/whatsnew
+++ b/app/src/main/play/en-US/whatsnew
@@ -1,4 +1,5 @@
 v3.1.0
 
-* Fix multi account signin
-* Only clear out cookies on explicit logout; Facebook logout redirects no longer erase cookies
\ No newline at end of file
+* Fix multi account sign in
+* Only clear out cookies on explicit logout; Facebook logout redirects no longer erase cookies
+* Update themes
\ No newline at end of file
diff --git a/app/src/main/res/xml/frost_changelog.xml b/app/src/main/res/xml/frost_changelog.xml
index 9a917099..ed3ea6e7 100644
--- a/app/src/main/res/xml/frost_changelog.xml
+++ b/app/src/main/res/xml/frost_changelog.xml
@@ -7,9 +7,9 @@
     -->
 
     <version title="v3.1.0" />
-    <item text="Fix multi account signin" />
+    <item text="Fix multi account sign in" />
     <item text="Only clear out cookies on explicit logout; Facebook logout redirects no longer erase cookies" />
-    <item text="" />
+    <item text="Update themes" />
 
     <version title="v3.0.0" />
     <item text="Removed email support. Please use GitHub for all inquiries as I no longer have time to look through all emails" />
diff --git a/app/src/web/package-lock.json b/app/src/web/package-lock.json
index 120e84af..45cb1eeb 100644
--- a/app/src/web/package-lock.json
+++ b/app/src/web/package-lock.json
@@ -146,9 +146,9 @@
       }
     },
     "sass": {
-      "version": "1.38.2",
-      "resolved": "https://registry.npmjs.org/sass/-/sass-1.38.2.tgz",
-      "integrity": "sha512-Bz1fG6qiyF0FX6m/I+VxtdVKz1Dfmg/e9kfDy2PhWOkq3T384q2KxwIfP0fXpeI+EyyETdOauH+cRHQDFASllA==",
+      "version": "1.39.2",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.39.2.tgz",
+      "integrity": "sha512-4/6Vn2RPc+qNwSclUSKvssh7dqK1Ih3FfHBW16I/GfH47b3scbYeOw65UIrYG7PkweFiKbpJjgkf5CV8EMmvzw==",
       "requires": {
         "chokidar": ">=3.0.0 <4.0.0"
       }
diff --git a/app/src/web/package.json b/app/src/web/package.json
index a196211a..64988a42 100644
--- a/app/src/web/package.json
+++ b/app/src/web/package.json
@@ -10,7 +10,7 @@
   "dependencies": {
     "compile": "0.0.2",
     "run": "^1.4.0",
-    "sass": "^1.38.2",
+    "sass": "^1.39.2",
     "typescript": "^3.9.10"
   }
 }
diff --git a/app/src/web/scss/core/_base.scss b/app/src/web/scss/core/_base.scss
index f6b5c903..8f233119 100644
--- a/app/src/web/scss/core/_base.scss
+++ b/app/src/web/scss/core/_base.scss
@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @mixin placeholder {
   ::placeholder {
     @content;
@@ -80,7 +82,7 @@
   $encoded: "";
   $slice: 2000;
   $index: 0;
-  $loops: ceil(str-length($svg) / $slice);
+  $loops: ceil(math.div(str-length($svg), $slice));
 
   @for $i from 1 through $loops {
     $chunk: str-slice($svg, $index, $index + $slice - 1);
diff --git a/app/src/web/scss/messenger/core/_core_vars.scss b/app/src/web/scss/core/_core_vars.scss
index 66795299..c7bee823 100644
--- a/app/src/web/scss/messenger/core/_core_vars.scss
+++ b/app/src/web/scss/core/_core_vars.scss
@@ -1,28 +1,42 @@
 :root, .__fb-light-mode {
+  --accent: #{$accent} !important;
   --attachment-footer-background: #{$bg_opaque} !important;
-  --card-background-flat: #{$bg_opaque} !important;
+  --background-deemphasized: #{$background} !important;
   --card-background: #{$bg_opaque} !important;
+  --card-background-flat: #{$bg_opaque} !important;
   --comment-background: #{$bg_opaque2} !important;
   --comment-footer-background: #{$bg_opaque} !important;
-  --disabled-button-background: #{$bg_opaque} !important;
+  --darkreader-bg--fds-white: #{$bg_opaque} !important;
+  --darkreader-text--primary-text: #{$text} !important;
+  --darkreader-text--secondary-text: #{$text} !important;
+  --disabled-button-background: #{$divider} !important;
+  --disabled-button-text: #{$text_disabled} !important;
   --disabled-icon: #{$text_disabled} !important;
   --disabled-text: #{$text_disabled} !important;
   --divider: #{$divider} !important;
-  --hero-banner-background: #{$bg_opaque} !important;
+  --event-date: #{$accent} !important;
+  --glimmer-spinner-icon: #{$accent} !important;
+  --hero-banner-background: #{$bg_opaque2} !important;
   --highlight-bg: #{$bg_opaque2} !important;
-  --media-outer-border: #{$bg_opaque} !important;
-  --messenger-card-background: #{$bg_opaque} !important;
+  --media-outer-border: #{$divider} !important;
   --messenger-card-background: #{$bg_opaque} !important; // Main background; needs to be opaque to hide gradient used for sender card
   --messenger-reply-background: #{$bg_opaque2} !important;
-  --nav-bar-background-gradient-wash: #{$bg_opaque} !important;
-  --nav-bar-background-gradient: #{$bg_opaque} !important;
   --nav-bar-background: #{$bg_opaque} !important;
-  --new-notification-background: #{$bg_opaque2} !important;
-  --placeholder-text: #{$text} !important; // Date
+  --new-notification-background: #{$background2} !important;
+  --placeholder-icon: #{$text} !important;
+  --popover-background: #{$bg_opaque2} !important;
   --primary-icon: #{$text} !important;
   --primary-text: #{$text} !important;
+  --primary-button-text: #{$text} !important;
+  --primary-deemphasized-button-background: #{$divider} !important;
+  --primary-text-on-media: #{$text} !important;
+  --scroll-thumb: #{$accent} !important;
   --secondary-icon: #{$text} !important;
   --secondary-text: #{$text} !important;
+  --section-header-text: #{$text} !important;
+  --nav-bar-background-gradient-wash: #{$bg_opaque} !important;
+  --nav-bar-background-gradient: #{$bg_opaque} !important;
+  --placeholder-text: #{$text} !important; // Date
   --surface-background: #{$bg_opaque2} !important; // Emoji background
   --toggle-active-background: #{$bg_opaque2} !important;
   --wash: #{$bg_opaque2} !important;
diff --git a/app/src/web/scss/facebook/core/_core_bg.scss b/app/src/web/scss/facebook/core/_core_bg.scss
index c5269ccf..8e6ed2ce 100644
--- a/app/src/web/scss/facebook/core/_core_bg.scss
+++ b/app/src/web/scss/facebook/core/_core_bg.scss
@@ -30,7 +30,7 @@ html, body, :root, #root, #header, #MComposer, ._1upc, input, ._2f9r, ._59e9, ._
 
 // card related
 ._31nf, ._2v9s, ._d4i, article._55wo, ._10c_, ._2jl2, ._6150, ._50mi, ._4-dw, ._4_2z, ._5m_s, ._13fn, ._7kxe, [style*="background-color: #F5F8FF"],
-._84lx, ._517h, ._59pe:focus, ._59pe:hover, ._m_1, ._3eqz, ._6m2, ._6q-c {
+._84lx, ._517h, ._59pe:focus, ._59pe:hover, ._m_1, ._3eqz, ._6m2, ._6q-c, ._61r- {
   background: $card !important;
 }
 
diff --git a/app/src/web/scss/facebook/core/_core_border.scss b/app/src/web/scss/facebook/core/_core_border.scss
index 1929e546..883d4eae 100644
--- a/app/src/web/scss/facebook/core/_core_border.scss
+++ b/app/src/web/scss/facebook/core/_core_border.scss
@@ -42,7 +42,7 @@
 //friend card border
 ._d4i, ._f6s, .mentions-suggest-item, .mentions-suggest, .sharerAttachment,
 .mToken, #addMembersTypeahead .mToken.mTokenWeakReference, .mQuestionsPollResultsBar,
-._15q7, ._2q7v, ._4dwt ._16ii, ._3qdi::after, ._6q-c,
+._15q7, ._2q7v, ._4dwt ._16ii, ._3qdi::after, ._6q-c, ._61r-,
 ._2q7w, .acy, ._58ak, ._3t_l, ._4msa, ._3h8i, ._3clk, ._1kt6, ._1ksq,
 ._1_y5, ._lr0, ._5hgt, ._2cpp, ._50uu, ._50uw, ._31yd, ._1e3d, ._3xz7, ._1xoz,
 ._4kcb, ._2lut, .jewel .touchable-notification.touched, .touchable-notification .touchable.touched,
diff --git a/app/src/web/scss/facebook/core/_core_text.scss b/app/src/web/scss/facebook/core/_core_text.scss
index 8ac66758..60fd9c96 100644
--- a/app/src/web/scss/facebook/core/_core_text.scss
+++ b/app/src/web/scss/facebook/core/_core_text.scss
@@ -1,6 +1,6 @@
-html, body, input, ._42rv, ._4qau, ._dwm .descArea, ._eu5,
-._1tcc, ._3g9-, ._29z_, ._3xz7, ._ib-, ._3bg5 ._56dq, ._477i, ._2vxk, ._29e6, ._8wr8,
-.touched *, ._1_yj, ._1_yl, ._4pj9, ._2bdc, ._3qdh ._3qdn ._3qdk, ._3qdk ._48_q, ._7iah,
+html, body, input, ._42rv, ._4qau, ._dwm .descArea, ._eu5, ._wn-,
+._1tcc, ._3g9-, ._29z_, ._3xz7, ._ib-, ._3bg5 ._56dq, ._477i, ._2vxk, ._29e6, ._8wr8, ._52lz,
+.touched *, ._1_yj, ._1_yl, ._4pj9, ._2bdc, ._3qdh ._3qdn ._3qdk, ._3qdk ._48_q, ._7iah, ._61mn ._61mo,
 ._z-z, ._z-v, ._1e8d, ._36nl, ._36nm, ._2_11, ._2_rf, ._2ip_, ._403p, .cq, ._usr, #mErrorView .message,
 ._5xu2, ._3ml8, ._3mla, ._50vk, ._1m2u, ._31y7, ._4kcb, ._1lf6, ._1lf5, ._7-1j, ._4ajz, ._m_1 ._2aha,
 ._1lf4, ._1hiz, ._xod, ._5ag5, ._zmk, ._3t_h, ._5lm6, ._3clv, ._3zlc, ._36rd, ._6oby, ._6_qk,
diff --git a/app/src/web/scss/facebook/core/core.scss b/app/src/web/scss/facebook/core/core.scss
index d7e790d1..f03cdd68 100644
--- a/app/src/web/scss/facebook/core/core.scss
+++ b/app/src/web/scss/facebook/core/core.scss
@@ -1,5 +1,6 @@
 @import "../../core/colors";
 @import "../../core/base";
+@import "../../core/core_vars";
 @import "core_text";
 @import "core_bg";
 @import "core_border";
diff --git a/app/src/web/scss/messenger/core/core.scss b/app/src/web/scss/messenger/core/core.scss
index 89199222..7cebadb5 100644
--- a/app/src/web/scss/messenger/core/core.scss
+++ b/app/src/web/scss/messenger/core/core.scss
@@ -1,6 +1,6 @@
 @import "../../core/colors";
 @import "../../core/base";
-@import "core_vars";
+@import "../../core/core_vars";
 @import "core_text";
 @import "core_bg";
 @import "core_border";
diff --git a/docs/Changelog.md b/docs/Changelog.md
index 346b7087..50c1ab40 100644
--- a/docs/Changelog.md
+++ b/docs/Changelog.md
@@ -1,8 +1,9 @@
 # Changelog
 
 ## v3.1.0
-* Fix multi account signin
+* Fix multi account sign in
 * Only clear out cookies on explicit logout; Facebook logout redirects no longer erase cookies
+* Update themes
 
 ## v3.0.0
 * Removed email support. Please use GitHub for all inquiries as I no longer have time to look through all emails
diff --git a/docs/Theming.md b/docs/Theming.md
index dc027ba6..14fff12c 100644
--- a/docs/Theming.md
+++ b/docs/Theming.md
@@ -22,9 +22,9 @@ In the case of providing theme updates, identifying the relevant selectors will
 It is also useful to apply Frost's existing themes to see what is already configured and what is missing. To do so, I use the following tools:
 
 * [Visual Studio Code](https://code.visualstudio.com/) as the main IDE
-* [CSS & JS Injection](https://chrome.google.com/webstore/detail/css-and-javascript-inject/ckddknfdmcemedlmmebildepcmneakaa) or any other plugin that allows you to apply CSS to a web page.
-
-When opening the Frost project, navigating to `app/web` and install the npm packages. Run SASS to generate the files, and focus on `app/web/assets/css/core/core.css`; this is what you'll want to paste into the browser extension to see the updates. To update the theme, modify one of the `app/web/scss/core/_core_*.scss` files, which will update `core.css`. 
+* [Super CSS Inject](https://chrome.google.com/webstore/detail/super-css-inject/pcfpmmmjdgngeidaggcahhoncahmpiin) or any other plugin that allows you to apply CSS to a web page.
+    * Use [Web Server for Chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb) to deliver local files.
+When opening the Frost project, navigating to `app/web` and install the npm packages. Run SASS to generate the files, and focus on `app/web/assets/css/facebook/core/core.css`; this is what you'll want to paste into the browser extension to see the updates. To update the theme, modify one of the `app/web/scss/facebook/core/_core_*.scss` files, which will update `core.css`. 
 
 If the update works, the selected elements should change.
 Note that the core theme is intentionally a mix of weird colors, to make it easier to see changes.