Merge pull request #585 from vector-im/matthew/dynamic-svg

Make SVGs and CSS dynamically recolourable

src/skins/vector/css/matrix-react-sdk/structures/RoomView.css

@@ -208,7 +208,7 @@ hr.mx_RoomView_myReadMarker {
 
 .mx_RoomView_voipChevron {
     position: absolute;
-    bottom: -10px;
+    bottom: -11px;
     right: 11px;
 }
 
@@ -218,6 +218,10 @@ hr.mx_RoomView_myReadMarker {
     cursor: pointer;
 }
 
+.mx_RoomView_voipButton object {
+    pointer-events: none;
+}
+
 .mx_RoomView_unreadMessagesBar {
     color: #ff0064;
     cursor: pointer;
@@ -315,7 +319,7 @@ hr.mx_RoomView_myReadMarker {
     color: #76CFA6;
 }
 
-.mx_RoomView_tabCompleteEol img {
+.mx_RoomView_tabCompleteEol object {
     vertical-align: middle;
     margin-right: 8px;
     margin-top: -2px;

src/skins/vector/css/matrix-react-sdk/views/messages/MImageBody.css

@@ -25,6 +25,7 @@ limitations under the License.
 .mx_MImageBody_download {
     color: #76cfa6;
     cursor: pointer;
+    margin-left: -16px;
 }
 
 .mx_MImageBody_download a {
@@ -32,6 +33,9 @@ limitations under the License.
     text-decoration: none;
 }
 
-.mx_MImageBody_download img {
-    padding-right: 8px;
+.mx_MImageBody_download object {
+    padding-right: 4px;
+    margin-top: -4px;
+    vertical-align: middle;
+    pointer-events: none;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/MessageComposer.css

@@ -82,6 +82,13 @@ limitations under the License.
     cursor: pointer;
 }
 
+.mx_MessageComposer_upload object,
+.mx_MessageComposer_hangup object,
+.mx_MessageComposer_voicecall object,
+.mx_MessageComposer_videocall object {
+    pointer-events: none;
+}
+
 .mx_MessageComposer_videocall {
     padding-right: 10px;
     padding-top: 4px;
@@ -92,6 +99,6 @@ limitations under the License.
     padding-top: 4px;
 }
 
-.mx_MessageComposer_upload img {
+.mx_MessageComposer_upload object {
     margin-top: 5px;
 }

src/skins/vector/css/matrix-react-sdk/views/rooms/RoomHeader.css

@@ -138,6 +138,10 @@ limitations under the License.
     left: 4px;
 }
 
+.mx_RoomHeader_settingsButton object {
+    pointer-events: none;
+}
+
 .mx_RoomHeader_leftRow:hover .mx_RoomHeader_name {
     color: #76cfa6;
 }
@@ -203,10 +207,11 @@ limitations under the License.
     vertical-align: top;
     padding-left: 8px;
     padding-right: 8px;
+    cursor: pointer;
 }
 
-.mx_RoomHeader_button img {
-    cursor: pointer;
+.mx_RoomHeader_button object {
+    pointer-events: none;
 }
 
 .mx_RoomHeader_voipButton {

src/skins/vector/css/vector-web/structures/LeftPanel.css

@@ -61,7 +61,7 @@ limitations under the License.
     -webkit-flex: 0 0 140px;
     flex: 0 0 140px;
 
-    background-color: rgba(118,207,166,0.19);
+    background-color: rgba(118,207,166,0.2);
 }
 
 .mx_LeftPanel .mx_BottomLeftMenu .mx_RoomTile {

src/skins/vector/css/vector-web/structures/RightPanel.css

@@ -55,6 +55,10 @@ limitations under the License.
     position: relative;
 }
 
+.mx_RightPanel_headerButton object {
+    pointer-events: none;
+}
+
 .mx_RightPanel_headerButton_highlight {
     position: absolute;
     bottom: -2px;

src/skins/vector/css/vector-web/structures/RoomSubList.css

@@ -33,6 +33,7 @@ limitations under the License.
 
 .mx_RoomSubList_chevron {
     padding-left: 5px;
+    pointer-events: none;
 }
 
 .collapsed .mx_RoomSubList_chevron  {