From da278920dc6c31627af1b5084709d48768ee75ef Mon Sep 17 00:00:00 2001
From: Mo <mnokhb@gmail.com>
Date: Sat, 6 Jan 2018 01:37:04 +0000
Subject: [PATCH 1/4] Scale setting required styles to allow scalable UI

---
 .../views/rooms/_EventTile.scss                | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index cfc46e85ab4..0a7bd37faf3 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -18,7 +18,7 @@ limitations under the License.
     max-width: 100%;
     clear: both;
     padding-top: 18px;
-    font-size: 14px;
+    font-size: 0.875em;
     position: relative;
 }
 
@@ -45,7 +45,7 @@ limitations under the License.
 
 .mx_EventTile .mx_SenderProfile {
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: 0.875em;
     display: block; /* anti-zalgo, with overflow hidden */
     overflow-y: hidden;
     cursor: pointer;
@@ -77,7 +77,7 @@ limitations under the License.
     visibility: hidden;
     white-space: nowrap;
     color: $event-timestamp-color;
-    font-size: 10px;
+    font-size: 0.625em;
     left: 0px;
     width: 46px; /* 8 + 30 (avatar) + 8 */
     text-align: center;
@@ -102,8 +102,8 @@ limitations under the License.
 
 /* HACK to override line-height which is already marked important elsewhere */
 .mx_EventTile_bigEmoji.mx_EventTile_bigEmoji {
-    font-size: 48px ! important;
-    line-height: 48px ! important;
+    font-size: 3em ! important;
+    line-height: 3em ! important;
 }
 
 /* this is used for the tile for the event which is selected via the URL.
@@ -257,7 +257,7 @@ limitations under the License.
 
 .mx_EventTile_readAvatarRemainder {
     color: $event-timestamp-color;
-    font-size: 11px;
+    font-size: 0.688em;
     position: absolute;
 }
 
@@ -337,7 +337,7 @@ limitations under the License.
     white-space: normal ! important;
     line-height: inherit ! important;
     color: inherit; // inherit the colour from the dark or light theme by default (but not for code blocks)
-    font-size: 14px;
+    font-size: 0.875em;
 }
 
 /* have to use overlay rather than auto otherwise Linux and Windows
@@ -419,7 +419,7 @@ limitations under the License.
     .mx_EventTile.mx_EventTile_info {
         // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
         padding-top: 0px;
-        font-size: 13px;
+        font-size: 0.813em;
         .mx_EventTile_line {
             line-height: 20px;
         }
@@ -429,7 +429,7 @@ limitations under the License.
     }
 
     .mx_EventTile .mx_SenderProfile {
-        font-size: 13px;
+        font-size: 0.813em;
     }
 
     .mx_EventTile.mx_EventTile_emote {

From 655f7cbf06adae66b0ce14e75df885b851862708 Mon Sep 17 00:00:00 2001
From: Mo <mnokhb@gmail.com>
Date: Sun, 7 Jan 2018 00:45:06 +0000
Subject: [PATCH 2/4] SettingsSlider styles

---
 postcss.config.js                             |   2 +-
 src/skins/vector/css/_components.scss         |   1 +
 .../views/elements/_SettingsSlider.scss       | 129 ++++++++++++++++++
 3 files changed, 131 insertions(+), 1 deletion(-)
 create mode 100644 src/skins/vector/css/matrix-react-sdk/views/elements/_SettingsSlider.scss

diff --git a/postcss.config.js b/postcss.config.js
index 5305d9ed9e9..4853403abf5 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,11 +1,11 @@
 module.exports = {
     plugins: [
         require("postcss-import")(),
+        require("postcss-mixins")(),
         require("autoprefixer")(),
         require("postcss-simple-vars")(),
         require("postcss-extend")(),
         require("postcss-nested")(),
-        require("postcss-mixins")(),
         require("postcss-strip-inline-comments")(),
     ],
     "parser": "postcss-scss",
diff --git a/src/skins/vector/css/_components.scss b/src/skins/vector/css/_components.scss
index 0dd6a1b1b79..eba157ef998 100644
--- a/src/skins/vector/css/_components.scss
+++ b/src/skins/vector/css/_components.scss
@@ -36,6 +36,7 @@
 @import "./matrix-react-sdk/views/elements/_EditableItemList.scss";
 @import "./matrix-react-sdk/views/elements/_MemberEventListSummary.scss";
 @import "./matrix-react-sdk/views/elements/_ProgressBar.scss";
+@import "./matrix-react-sdk/views/elements/_SettingsSlider.scss";
 @import "./matrix-react-sdk/views/elements/_RichText.scss";
 @import "./matrix-react-sdk/views/elements/_RoleButton.scss";
 @import "./matrix-react-sdk/views/elements/_ToolTipButton.scss";
diff --git a/src/skins/vector/css/matrix-react-sdk/views/elements/_SettingsSlider.scss b/src/skins/vector/css/matrix-react-sdk/views/elements/_SettingsSlider.scss
new file mode 100644
index 00000000000..2c6d55b577b
--- /dev/null
+++ b/src/skins/vector/css/matrix-react-sdk/views/elements/_SettingsSlider.scss
@@ -0,0 +1,129 @@
+// Styling Cross-Browser Compatible Range Inputs with Sass
+// *Modified to work with postcss*
+// Github: https://github.com/darlanrod/input-range-sass
+// Author: Darlan Rod https://github.com/darlanrod
+// Version 1.4.1
+// MIT License
+
+$track-color: #eceff1;
+$thumb-color: $accent-color;
+
+$thumb-radius: 12px;
+$thumb-height: 24px;
+$thumb-width: 24px;
+$thumb-shadow-size: 4px;
+$thumb-shadow-blur: 4px;
+$thumb-shadow-color: $accent-fg-color;
+$thumb-border-width: 2px;
+$thumb-border-color: $accent-color;
+
+$track-width: 100%;
+$track-height: 8px;
+$track-shadow-size: 1px;
+$track-shadow-blur: 1px;
+$track-shadow-color: rgba(0, 0, 0, .2);
+$track-border-width: 2px;
+$track-border-color: #cfd8dc;
+
+$track-radius: 5px;
+$contrast: 5%;
+
+@define-mixin shadow $shadow-size, $shadow-blur, $shadow-color {
+  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color, 0 0 $shadow-size lighten($shadow-color, 5%);
+}
+
+@define-mixin track {
+  cursor: pointer;
+  height: $track-height;
+  transition: all .2s ease;
+  width: $track-width;
+}
+
+@define-mixin thumb {
+  @mixin shadow $thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color;
+  background: $thumb-color;
+  border: $thumb-border-width solid $thumb-border-color;
+  border-radius: $thumb-radius;
+  cursor: pointer;
+  height: $thumb-height;
+  width: $thumb-width;
+}
+
+.mx_SettingsSlider_label {
+    text-align: center;
+}
+
+.mx_SettingsSlider input[type='range'] {
+  -webkit-appearance: none;
+  margin: calc($thumb-height / 2) 0;
+  width: $track-width;
+
+  &:focus {
+    outline: 0;
+
+    &::-webkit-slider-runnable-track {
+      background: lighten($track-color, $contrast);
+    }
+
+    &::-ms-fill-lower {
+      background: $track-color;
+    }
+
+    &::-ms-fill-upper {
+      background: lighten($track-color, $contrast);
+    }
+  }
+
+  &::-webkit-slider-runnable-track {
+    @mixin track;
+    @mixin shadow $track-shadow-size, $track-shadow-blur, $track-shadow-color;
+    background: $track-color;
+    border: $track-border-width solid $track-border-color;
+    border-radius: $track-radius;
+  }
+
+  &::-webkit-slider-thumb {
+    @mixin thumb;
+    -webkit-appearance: none;
+    margin-top: calc(((-$track-border-width * 2 + $track-height) / 2) - ($thumb-height / 2));
+  }
+
+  &::-moz-range-track {
+    @mixin track;
+    @mixin shadow $track-shadow-size, $track-shadow-blur, $track-shadow-color;
+    background: $track-color;
+    border: $track-border-width solid $track-border-color;
+    border-radius: $track-radius;
+  }
+
+  &::-moz-range-thumb {
+    @mixin thumb;
+  }
+
+  &::-ms-track {
+    @mixin track;
+    background: transparent;
+    border-color: transparent;
+    border-width: calc($thumb-height / 2) 0;
+    color: transparent;
+  }
+
+  &::-ms-fill-lower {
+    @mixin shadow $track-shadow-size, $track-shadow-blur, $track-shadow-color;
+    background: darken($track-color, $contrast);
+    border: $track-border-width solid $track-border-color;
+    border-radius: calc($track-radius * 2);
+  }
+
+  &::-ms-fill-upper {
+    @mixin shadow $track-shadow-size, $track-shadow-blur, $track-shadow-color;
+    background: $track-color;
+    border: $track-border-width solid $track-border-color;
+    border-radius: calc($track-radius * 2);
+  }
+
+  &::-ms-thumb {
+    @mixin thumb;
+    margin-top: 0;
+  }
+}
\ No newline at end of file

From 69f26a58c0384256fe391c02511a341ef84d46c0 Mon Sep 17 00:00:00 2001
From: Mo <mnokhb@gmail.com>
Date: Sun, 7 Jan 2018 21:52:41 +0000
Subject: [PATCH 3/4] Scale setting: make room view scalable for chat font
 scale

---
 .../vector/css/matrix-react-sdk/views/rooms/_EventTile.scss | 6 +++---
 .../css/matrix-react-sdk/views/rooms/_MessageComposer.scss  | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
index 0a7bd37faf3..3acc267a225 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_EventTile.scss
@@ -53,7 +53,7 @@ limitations under the License.
     padding-bottom: 0px;
     padding-top: 0px;
     margin: 0px;
-    line-height: 22px;
+    line-height: 1.375em;
 }
 
 .mx_EventTile .mx_SenderProfile .mx_SenderProfile_name,
@@ -93,7 +93,7 @@ limitations under the License.
     padding-bottom: 2px;
     border-radius: 4px;
     min-height: 24px;
-    line-height: 22px;
+    line-height: 1.375em;
 }
 
 .mx_EventTile_info .mx_EventTile_line {
@@ -421,7 +421,7 @@ limitations under the License.
         padding-top: 0px;
         font-size: 0.813em;
         .mx_EventTile_line {
-            line-height: 20px;
+            line-height: 1.250em;
         }
         .mx_EventTile_avatar {
             top: 4px;
diff --git a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
index e6b1a1f0d06..c7d704d9cd0 100644
--- a/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
+++ b/src/skins/vector/css/matrix-react-sdk/views/rooms/_MessageComposer.scss
@@ -76,7 +76,7 @@ limitations under the License.
     min-height: 60px;
     justify-content: center;
     align-items: flex-start;
-    font-size: 14px;
+    font-size: 0.875em;
     margin-right: 6px;
 }
 
@@ -196,7 +196,7 @@ limitations under the License.
 
     flex-direction: row;
     align-items: center;
-    font-size: 10px;
+    font-size: 0.625em;
     color: $greyed-fg-color;
 }
 

From d38f0fa666bed3e56cfb2f05b969feaf4ee43fd0 Mon Sep 17 00:00:00 2001
From: Mo <mnokhb@gmail.com>
Date: Sun, 7 Jan 2018 22:07:17 +0000
Subject: [PATCH 4/4] Settings panel use available space

---
 .../css/matrix-react-sdk/structures/_UserSettings.scss      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
index f6341dd6cd7..224b2ae4eea 100644
--- a/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
+++ b/src/skins/vector/css/matrix-react-sdk/structures/_UserSettings.scss
@@ -31,6 +31,10 @@ limitations under the License.
     flex: 0 0 70px;
 }
 
+.mx_UserSettings .mx_RoomHeader .mx_RoomHeader_simpleHeader {
+    margin-left: 0;
+}
+
 .mx_UserSettings_body {
     order: 2;
 
@@ -42,7 +46,6 @@ limitations under the License.
 
 .mx_UserSettings h3 {
     clear: both;
-    margin-left: 63px;
     text-transform: uppercase;
     color: $h3-color;
     font-weight: 600;
@@ -78,7 +81,6 @@ limitations under the License.
 }
 
 .mx_UserSettings_section {
-    margin-left: 63px;
     margin-top: 28px;
     margin-bottom: 28px;
 }