From 59bedae15ea86ff027b7fd6c6aeb786259cd139b Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Wed, 9 Jan 2019 15:32:37 -0600
Subject: [PATCH] Define SCSS variable for resource dir

Adds a `$res` SCSS variable set to the path from the root SCSS file to the `res`
directory.

This is a different base path than previously used in CSS URLs (it goes up 3
directories instead of 2), because Webpack will now be resolving images relative
to the root SCSS file, so the path corresponds to a source tree location,
instead of a path in the build output tree.

Defining this variable has two main goals:

* URLs are a bit easier to read
* The path can be overridden, which is needed for riot-web themes like Status
---
 res/themes/status/css/_StatusLogin.scss | 4 ++--
 res/themes/status/css/_paths.scss       | 5 +++++
 res/themes/status/css/_status.scss      | 4 ++--
 res/themes/status/css/status.scss       | 1 +
 4 files changed, 10 insertions(+), 4 deletions(-)
 create mode 100644 res/themes/status/css/_paths.scss

diff --git a/res/themes/status/css/_StatusLogin.scss b/res/themes/status/css/_StatusLogin.scss
index 68727274..437a9a23 100644
--- a/res/themes/status/css/_StatusLogin.scss
+++ b/res/themes/status/css/_StatusLogin.scss
@@ -100,8 +100,8 @@ limitations under the License.
         font-size: 16px;
         line-height: 25px;
         background-color: $form-bg-color;
-        background-image: url(../../themes/status/img/dot.svg);
-        box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);    
+        background-image: url("$(status)/img/dot.svg");
+        box-shadow: 0px 5px 16px 0px rgba(25,12,46,0.16);
         position: relative;
         text-align: center;
     }
diff --git a/res/themes/status/css/_paths.scss b/res/themes/status/css/_paths.scss
new file mode 100644
index 00000000..3a1140ec
--- /dev/null
+++ b/res/themes/status/css/_paths.scss
@@ -0,0 +1,5 @@
+// Path from root SCSS file (such as `status.scss`) to `res` dir in `matrix-react-sdk`
+$res: ../../../../node_modules/matrix-react-sdk/res;
+
+// Path from root SCSS file (such as `status.scss`) to `status` dir in `riot-web`
+$status: ..;
diff --git a/res/themes/status/css/_status.scss b/res/themes/status/css/_status.scss
index afca5ac0..c2ce5dd2 100644
--- a/res/themes/status/css/_status.scss
+++ b/res/themes/status/css/_status.scss
@@ -187,8 +187,8 @@ $event-redacted-border-color: #cccccc;
 // event timestamp
 $event-timestamp-color: #acacac;
 
-$edit-button-url: "../../img/icon_context_message.svg";
-$copy-button-url: "../../img/icon_copy_message.svg";
+$edit-button-url: "$(res)/img/icon_context_message.svg";
+$copy-button-url: "$(res)/img/icon_copy_message.svg";
 
 // e2e
 $e2e-verified-color: #76cfa5; // N.B. *NOT* the same as $accent-color
diff --git a/res/themes/status/css/status.scss b/res/themes/status/css/status.scss
index 52113fe8..c5fa1fe1 100644
--- a/res/themes/status/css/status.scss
+++ b/res/themes/status/css/status.scss
@@ -1,3 +1,4 @@
+@import "_paths.scss";
 @import "_fonts.scss";
 @import "../../../../node_modules/matrix-react-sdk/res/themes/light/css/_base.scss";
 @import "_status.scss";