From e917c0d92e8d6a62f40b66ff08c6356826ff57b8 Mon Sep 17 00:00:00 2001
From: "J. Ryan Stinnett" <jryans@gmail.com>
Date: Thu, 30 Jul 2020 16:41:00 +0100
Subject: [PATCH] Replace all chevrons with a single icon

This replaces all chevrons with a single icon, affecting components like the
room list, network dropdown, and rebrand modal.

Rather than having files for each direction that can get out of sync, this
change uses one direction and rotates in CSS for the others.

Fixes https://github.com/vector-im/riot-web/issues/14663
---
 res/css/views/dialogs/_RebrandDialog.scss     |  7 +++---
 res/css/views/directory/_NetworkDropdown.scss |  6 ++---
 res/css/views/rooms/_RoomSublist.scss         | 23 +++++++++----------
 res/img/feather-customised/chevron-down.svg   |  4 ++--
 res/img/feather-customised/chevron-right.svg  |  1 -
 res/img/feather-customised/chevron-up.svg     |  1 -
 6 files changed, 20 insertions(+), 22 deletions(-)
 delete mode 100644 res/img/feather-customised/chevron-right.svg
 delete mode 100644 res/img/feather-customised/chevron-up.svg

diff --git a/res/css/views/dialogs/_RebrandDialog.scss b/res/css/views/dialogs/_RebrandDialog.scss
index 6c916e0f1d..61af4dd10f 100644
--- a/res/css/views/dialogs/_RebrandDialog.scss
+++ b/res/css/views/dialogs/_RebrandDialog.scss
@@ -53,11 +53,12 @@ limitations under the License.
 .mx_RebrandDialog_chevron::after {
     content: '';
     display: inline-block;
-    width: 24px;
-    height: 24px;
+    width: 18px;
+    height: 18px;
     mask-position: center;
     mask-size: contain;
     mask-repeat: no-repeat;
     background-color: $muted-fg-color;
-    mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
+    mask-image: url('$(res)/img/feather-customised/chevron-down.svg');
+    transform: rotate(-90deg);
 }
diff --git a/res/css/views/directory/_NetworkDropdown.scss b/res/css/views/directory/_NetworkDropdown.scss
index bd5c67c7ed..c35776062b 100644
--- a/res/css/views/directory/_NetworkDropdown.scss
+++ b/res/css/views/directory/_NetworkDropdown.scss
@@ -145,9 +145,9 @@ limitations under the License.
     &::after {
         content: "";
         position: absolute;
-        width: 24px;
-        height: 24px;
-        right: -28px; // - (24 + 4)
+        width: 18px;
+        height: 18px;
+        right: -22px; // - (18 + 4)
         mask-repeat: no-repeat;
         mask-position: center;
         mask-size: contain;
diff --git a/res/css/views/rooms/_RoomSublist.scss b/res/css/views/rooms/_RoomSublist.scss
index b907d06d36..a32c11c15c 100644
--- a/res/css/views/rooms/_RoomSublist.scss
+++ b/res/css/views/rooms/_RoomSublist.scss
@@ -142,17 +142,15 @@ limitations under the License.
             .mx_RoomSublist_collapseBtn {
                 display: inline-block;
                 position: relative;
-                width: 12px;
-                height: 12px;
-                margin-right: 8px;
+                width: 14px;
+                height: 14px;
+                margin-right: 6px;
 
                 &::before {
                     content: '';
-                    width: 12px;
-                    height: 12px;
+                    width: 18px;
+                    height: 18px;
                     position: absolute;
-                    top: 1px;
-                    left: 1px;
                     mask-position: center;
                     mask-size: contain;
                     mask-repeat: no-repeat;
@@ -161,7 +159,7 @@ limitations under the License.
                 }
 
                 &.mx_RoomSublist_collapseBtn_collapsed::before {
-                    mask-image: url('$(res)/img/feather-customised/chevron-right.svg');
+                    transform: rotate(-90deg);
                 }
             }
         }
@@ -251,14 +249,15 @@ limitations under the License.
 
         .mx_RoomSublist_showNButtonChevron {
             position: relative;
-            width: 16px;
-            height: 16px;
+            width: 18px;
+            height: 18px;
             margin-left: 12px;
-            margin-right: 18px;
+            margin-right: 16px;
             mask-position: center;
             mask-size: contain;
             mask-repeat: no-repeat;
             background: $roomtile-preview-color;
+            left: -1px; // adjust for image position
         }
 
         .mx_RoomSublist_showMoreButtonChevron {
@@ -266,7 +265,7 @@ limitations under the License.
         }
 
         .mx_RoomSublist_showLessButtonChevron {
-            mask-image: url('$(res)/img/feather-customised/chevron-up.svg');
+            transform: rotate(180deg);
         }
     }
 
diff --git a/res/img/feather-customised/chevron-down.svg b/res/img/feather-customised/chevron-down.svg
index bcb185ede7..a091913b42 100644
--- a/res/img/feather-customised/chevron-down.svg
+++ b/res/img/feather-customised/chevron-down.svg
@@ -1,3 +1,3 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M6 9L12 15L18 9" stroke="#2E2F32" stroke-linecap="round" stroke-linejoin="round"/>
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 7.5L9 10.5L12 7.5" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/res/img/feather-customised/chevron-right.svg b/res/img/feather-customised/chevron-right.svg
deleted file mode 100644
index 258de414a1..0000000000
--- a/res/img/feather-customised/chevron-right.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"><polyline points="9 18 15 12 9 6"></polyline></svg>
\ No newline at end of file
diff --git a/res/img/feather-customised/chevron-up.svg b/res/img/feather-customised/chevron-up.svg
deleted file mode 100644
index 4eb5ecc33e..0000000000
--- a/res/img/feather-customised/chevron-up.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-up"><polyline points="18 15 12 9 6 15"></polyline></svg>
\ No newline at end of file