Merge pull request #2619 from matrix-org/jryans/dark-theme-redesign

Add redesigned dark theme

res/css/views/dialogs/_CreateGroupDialog.scss

@@ -43,10 +43,9 @@ limitations under the License.
 
 .mx_CreateGroupDialog_prefix,
 .mx_CreateGroupDialog_suffix {
-    height: 35px;
     padding: 0px 5px;
     line-height: 37px;
-    background-color: $input-border-color;
+    background-color: $input-darker-bg-color;
     border: 1px solid $input-border-color;
     text-align: center;
 }

res/css/views/elements/_AccessibleButton.scss

@@ -40,8 +40,7 @@ limitations under the License.
 }
 
 .mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
-    color: $button-primary-disabled-fg-color;
-    background-color: $button-primary-disabled-bg-color;
+    opacity: 0.4;
 }
 
 .mx_AccessibleButton_hasKind.mx_AccessibleButton_kind_primary_sm {
@@ -51,8 +50,7 @@ limitations under the License.
 }
 
 .mx_AccessibleButton_kind_primary_sm.mx_AccessibleButton_disabled {
-    color: $button-primary-disabled-fg-color;
-    background-color: $button-primary-disabled-bg-color;
+    opacity: 0.4;
 }
 
 .mx_AccessibleButton_kind_danger {
@@ -74,4 +72,4 @@ limitations under the License.
 .mx_AccessibleButton_kind_danger_sm.mx_AccessibleButton_disabled {
     color: $button-danger-disabled-fg-color;
     background-color: $button-danger-disabled-bg-color;
-}
+}

res/css/views/elements/_Field.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-/* TODO: Consider unifying with general input styles in _dharma.scss */
+/* TODO: Consider unifying with general input styles in _light.scss */
 
 .mx_Field {
     position: relative;
@@ -31,6 +31,7 @@ limitations under the License.
     transition: border-color 0.25s;
     border: 1px solid $input-border-color;
     padding: 8px 9px;
+    color: $primary-fg-color;
     background-color: $primary-bg-color;
 }
 

res/css/views/rooms/_MessageComposer.scss

@@ -180,27 +180,36 @@ limitations under the License.
     color: $accent-color;
 }
 
-.mx_MessageComposer_upload,
-.mx_MessageComposer_hangup,
-.mx_MessageComposer_voicecall,
-.mx_MessageComposer_videocall,
-.mx_MessageComposer_apps,
-.mx_MessageComposer_stickers {
-    /*display: table-cell;*/
-    /*vertical-align: middle;*/
-    /*padding-left: 10px;*/
-    padding-right: 12px;
+.mx_MessageComposer_button {
+    margin-right: 12px;
     cursor: pointer;
     padding-top: 4px;
+    height: 20px;
+    width: 20px;
+    background-color: $composer-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
+    mask-position: center;
 }
 
-.mx_MessageComposer_upload object,
-.mx_MessageComposer_hangup object,
-.mx_MessageComposer_voicecall object,
-.mx_MessageComposer_videocall object,
-.mx_MessageComposer_apps object,
-.mx_MessageComposer_stickers object {
-    pointer-events: none;
+.mx_MessageComposer_upload {
+    mask-image: url('$(res)/img/feather-icons/paperclip.svg');
+}
+
+.mx_MessageComposer_hangup {
+    mask-image: url('$(res)/img/hangup.svg');
+}
+
+.mx_MessageComposer_voicecall {
+    mask-image: url('$(res)/img/feather-icons/phone.svg');
+}
+
+.mx_MessageComposer_videocall {
+    mask-image: url('$(res)/img/feather-icons/video.svg');
+}
+
+.mx_MessageComposer_stickers {
+    mask-image: url('$(res)/img/feather-icons/face.svg');
 }
 
 .mx_MessageComposer_formatting {

res/css/views/rooms/_RoomHeader.scss

@@ -58,7 +58,6 @@ limitations under the License.
 
 .mx_RoomHeader_buttons {
     display: flex;
-    align-items: center;
     background-color: $primary-bg-color;
     padding-right: 5px;
 }
@@ -116,10 +115,6 @@ limitations under the License.
     opacity: 0.6;
 }
 
-.mx_RoomHeader_settingsButton object {
-    pointer-events: none;
-}
-
 .mx_RoomHeader_name,
 .mx_RoomHeader_avatar,
 .mx_RoomHeader_avatarPicker,
@@ -199,10 +194,32 @@ limitations under the License.
 .mx_RoomHeader_button {
     margin-left: 10px;
     cursor: pointer;
+    height: 20px;
+    width: 20px;
+    background-color: $roomheader-button-color;
+    mask-repeat: no-repeat;
+    mask-size: contain;
 }
 
-.mx_RoomHeader_button object {
-    pointer-events: none;
+.mx_RoomHeader_settingsButton {
+    mask-image: url('$(res)/img/feather-icons/settings.svg');
+}
+
+.mx_RoomHeader_forgetButton {
+    mask-image: url('$(res)/img/leave.svg');
+    width: 26px;
+}
+
+.mx_RoomHeader_searchButton {
+    mask-image: url('$(res)/img/feather-icons/search.svg');
+}
+
+.mx_RoomHeader_shareButton {
+    mask-image: url('$(res)/img/feather-icons/share.svg');
+}
+
+.mx_RoomHeader_manageIntegsButton {
+    mask-image: url('$(res)/img/feather-icons/grid.svg');
 }
 
 .mx_RoomHeader_showPanel {
@@ -219,6 +236,7 @@ limitations under the License.
 
 .mx_RoomHeader_pinnedButton {
     position: relative;
+    mask-image: url('$(res)/img/icons-pin.svg');
 }
 
 .mx_RoomHeader_pinsIndicator {