Merge remote-tracking branch 'origin/develop' into develop

res/css/structures/_RoomSubList.scss

@@ -99,13 +99,13 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     pointer-events: none;
-    background-image: url('$(res)/img/topleft-chevron.svg');
+    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
-    background-repeat: no-repeat;
+    mask-repeat: no-repeat;
     transition: transform 0.2s ease-in;
     width: 10px;
-    height: 10px;
+    height: 6px;
-    background-position: center;
     margin-left: 2px;
+    background-color: $roomsublist-label-fg-color;
 }
 
 .mx_RoomSubList_chevronDown {

res/css/structures/_TopLeftMenuButton.scss

@@ -41,4 +41,9 @@ limitations under the License.
 
 .mx_TopLeftMenuButton_chevron {
     margin: 0 7px;
+    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask-repeat: no-repeat;
+    width: 10px;
+    height: 6px;
+    background-color: $roomsublist-label-fg-color;
 }

res/css/views/auth/_LanguageSelector.scss

@@ -25,6 +25,6 @@ limitations under the License.
     color: $authpage-lang-color;
 }
 
-.mx_Auth_language .mx_Dropdown_arrow::before {
+.mx_Auth_language .mx_Dropdown_arrow {
     background: $authpage-lang-color;
 }

res/css/views/elements/_Dropdown.scss

@@ -42,20 +42,9 @@ limitations under the License.
 }
 
 .mx_Dropdown_arrow {
-    display: block;
-    position: relative;
     width: 10px;
     height: 6px;
     padding-right: 8px;
-}
-
-.mx_Dropdown_arrow::before {
-    content: "";
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
     mask-repeat: no-repeat;
     background: $primary-fg-color;

res/css/views/elements/_Field.scss

@@ -26,12 +26,33 @@ limitations under the License.
 .mx_Field textarea {
     font-weight: normal;
     font-family: $font-family;
+    font-size: 14px;
     border-radius: 4px;
     transition: border-color 0.25s;
     border: 1px solid $input-border-color;
     padding: 8px 9px;
 }
 
+.mx_Field select {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+}
+
+// Can't add pseudo-elements to a select directly, so we use its parent.
+.mx_Field_select::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    width: 10px;
+    height: 6px;
+    mask: url('$(res)/img/feather-icons/dropdown-arrow.svg');
+    mask-repeat: no-repeat;
+    background: $primary-fg-color;
+    z-index: 1;
+    pointer-events: none;
+}
+
 .mx_Field input:focus,
 .mx_Field select:focus,
 .mx_Field textarea:focus {

res/img/topleft-chevron.svg

@@ -1,86 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="9.946106"
-   height="5.5662179"
-   viewBox="0 0 9.946106 5.5662179"
-   version="1.1"
-   id="svg14"
-   sodipodi:docname="topleft-chevron.svg"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)">
-  <metadata
-     id="metadata18">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title>dropdown</dc:title>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="1277"
-     inkscape:window-height="653"
-     id="namedview16"
-     showgrid="false"
-     fit-margin-top="0.5"
-     fit-margin-left="0.5"
-     fit-margin-right="0.5"
-     fit-margin-bottom="0.5"
-     inkscape:zoom="35.2"
-     inkscape:cx="4.6570922"
-     inkscape:cy="2.9102278"
-     inkscape:window-x="459"
-     inkscape:window-y="90"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg14" />
-  <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
-  <title
-     id="title2">dropdown</title>
-  <desc
-     id="desc4">Created with Sketch.</desc>
-  <defs
-     id="defs6" />
-  <g
-     id="Page-1"
-     style="fill:none;fill-rule:evenodd;stroke:none;stroke-width:1;stroke-linecap:round"
-     transform="translate(-0.3429078,-0.34400861)">
-    <g
-       id="matrix-my-stuff-no-lines-message-context-menu-smaller-icons"
-       transform="translate(-203,-25)"
-       style="stroke:#61708b;stroke-width:1.6">
-      <g
-         id="Group-3"
-         transform="translate(128,15)">
-        <g
-           id="dropdown"
-           transform="translate(76,11)">
-          <path
-             d="M 0.5,0.5 4.3586853,3.7542227"
-             id="Line-5"
-             inkscape:connector-curvature="0" />
-          <path
-             d="M 8.1319327,0.56042139 4.3586853,3.7542227"
-             id="Line-5-Copy"
-             inkscape:connector-curvature="0" />
-        </g>
-      </g>
-    </g>
-  </g>
-</svg>

src/components/structures/TopLeftMenuButton.js

@@ -97,7 +97,7 @@ export default class TopLeftMenuButton extends React.Component {
                     resizeMethod="crop"
                 />
                 { nameElement }
-                <img className="mx_TopLeftMenuButton_chevron" src={require("../../../res/img/topleft-chevron.svg")} width="11" height="6" />
+                <span className="mx_TopLeftMenuButton_chevron"></span>
             </AccessibleButton>
         );
     }

src/components/views/elements/Field.js

@@ -60,7 +60,7 @@ export default class Field extends React.PureComponent {
         const element = this.props.element || "input";
         const fieldInput = React.createElement(element, extraProps, this.props.children);
 
-        return <div className="mx_Field">
+        return <div className={`mx_Field mx_Field_${element}`}>
             {fieldInput}
             <label htmlFor={this.props.id}>{this.props.label}</label>
         </div>;