From 936344b012dfd6d07091eb8c7ad605c165a5365d Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 6 Oct 2020 13:41:49 +0100 Subject: [PATCH 1/5] Make back button a circle --- res/css/views/right_panel/_BaseCard.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index 26f846fe0a..3ff3b52531 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -40,6 +40,7 @@ limitations under the License. width: 20px; margin: 12px; top: 0; + border-radius: 10px; &::before { content: ""; @@ -55,7 +56,6 @@ limitations under the License. } .mx_BaseCard_back { - border-radius: 4px; left: 0; &::before { @@ -66,7 +66,6 @@ limitations under the License. } .mx_BaseCard_close { - border-radius: 10px; right: 0; &::before { From 3d0db1b022c7da270d6f14c34ea1be225ce3c2dc Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 6 Oct 2020 13:54:21 +0100 Subject: [PATCH 2/5] Change invite icon --- res/css/views/rooms/_MemberList.scss | 20 +++++++++++++++----- res/img/element-icons/room/invite.svg | 4 ++-- 2 files changed, 17 insertions(+), 7 deletions(-) diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 2366667c95..02ef9dc367 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -96,11 +96,21 @@ limitations under the License. } .mx_MemberList_invite span { - background-image: url('$(res)/img/element-icons/room/invite.svg'); - background-repeat: no-repeat; - background-position: center left; - background-size: 20px; - padding: 8px 0 8px 25px; + padding: 8px 0; + display: inline-flex; + + &::before { + content: ''; + display: inline-block; + background-color: #fff; + mask-image: url('$(res)/img/element-icons/room/invite.svg'); + mask-position: center; + mask-repeat: no-repeat; + mask-size: 20px; + width: 20px; + height: 20px; + margin-right: 5px; + } } .mx_MemberList_inviteCommunity span { diff --git a/res/img/element-icons/room/invite.svg b/res/img/element-icons/room/invite.svg index f713e57d73..655f9f118a 100644 --- a/res/img/element-icons/room/invite.svg +++ b/res/img/element-icons/room/invite.svg @@ -1,3 +1,3 @@ - - + + From 43ea5de320b5ccff91962c0797e4a17d450321a1 Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Tue, 6 Oct 2020 14:48:43 +0100 Subject: [PATCH 3/5] Adjust Settings styles --- res/css/_common.scss | 2 +- res/css/structures/_TabbedView.scss | 21 +++++++++---------- .../views/dialogs/_RoomSettingsDialog.scss | 1 - res/css/views/dialogs/_SettingsDialog.scss | 1 - 4 files changed, 11 insertions(+), 14 deletions(-) diff --git a/res/css/_common.scss b/res/css/_common.scss index aafd6e5297..3346394edd 100644 --- a/res/css/_common.scss +++ b/res/css/_common.scss @@ -262,7 +262,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus { font-weight: 300; font-size: $font-15px; position: relative; - padding: 25px 30px 30px 30px; + padding: 24px; max-height: 80%; box-shadow: 2px 15px 30px 0 $dialog-shadow-color; border-radius: 8px; diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss index 4a4bb125a3..39a8ebed32 100644 --- a/res/css/structures/_TabbedView.scss +++ b/res/css/structures/_TabbedView.scss @@ -17,7 +17,7 @@ limitations under the License. .mx_TabbedView { margin: 0; - padding: 0 0 0 58px; + padding: 0 0 0 16px; display: flex; flex-direction: column; position: absolute; @@ -25,6 +25,7 @@ limitations under the License. bottom: 0; left: 0; right: 0; + margin-top: 8px; } .mx_TabbedView_tabLabels { @@ -35,13 +36,13 @@ limitations under the License. } .mx_TabbedView_tabLabel { + display: flex; + align-items: center; vertical-align: text-top; cursor: pointer; - display: block; - border-radius: 3px; - font-size: $font-14px; - min-height: 24px; // use min-height instead of height to allow the label to overflow a bit - margin-bottom: 6px; + padding: 8px 0; + border-radius: 8px; + font-size: $font-13px; position: relative; } @@ -51,9 +52,8 @@ limitations under the License. } .mx_TabbedView_maskedIcon { - margin-left: 6px; - margin-right: 9px; - margin-top: 1px; + margin-left: 8px; + margin-right: 16px; width: 16px; height: 16px; display: inline-block; @@ -65,10 +65,9 @@ limitations under the License. mask-repeat: no-repeat; mask-size: 16px; width: 16px; - height: 22px; + height: 16px; mask-position: center; content: ''; - vertical-align: middle; } .mx_TabbedView_tabLabel_active .mx_TabbedView_maskedIcon::before { diff --git a/res/css/views/dialogs/_RoomSettingsDialog.scss b/res/css/views/dialogs/_RoomSettingsDialog.scss index d4199a1e66..9bcde6e1e0 100644 --- a/res/css/views/dialogs/_RoomSettingsDialog.scss +++ b/res/css/views/dialogs/_RoomSettingsDialog.scss @@ -48,7 +48,6 @@ limitations under the License. white-space: nowrap; overflow: hidden; margin: 0 auto; - padding-left: 40px; padding-right: 80px; } diff --git a/res/css/views/dialogs/_SettingsDialog.scss b/res/css/views/dialogs/_SettingsDialog.scss index ec813a1a07..6c4ed35c5a 100644 --- a/res/css/views/dialogs/_SettingsDialog.scss +++ b/res/css/views/dialogs/_SettingsDialog.scss @@ -36,7 +36,6 @@ limitations under the License. } .mx_Dialog_title { - text-align: center; margin-bottom: 24px; } } From 73ce2fac8a5faf0398c55d4df972f0b9f954e41f Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 8 Oct 2020 09:56:58 +0100 Subject: [PATCH 4/5] Add comment on colour --- res/css/views/rooms/_MemberList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index 02ef9dc367..d54377d88f 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -102,7 +102,7 @@ limitations under the License. &::before { content: ''; display: inline-block; - background-color: #fff; + background-color: #fff; // Same colour for all themes mask-image: url('$(res)/img/element-icons/room/invite.svg'); mask-position: center; mask-repeat: no-repeat; From 576ea6df088e3644711a956d3db6245833d3448c Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Thu, 8 Oct 2020 10:01:05 +0100 Subject: [PATCH 5/5] Use same colour variable as text --- res/css/views/rooms/_MemberList.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/res/css/views/rooms/_MemberList.scss b/res/css/views/rooms/_MemberList.scss index d54377d88f..f00907aeef 100644 --- a/res/css/views/rooms/_MemberList.scss +++ b/res/css/views/rooms/_MemberList.scss @@ -102,7 +102,7 @@ limitations under the License. &::before { content: ''; display: inline-block; - background-color: #fff; // Same colour for all themes + background-color: $button-fg-color; mask-image: url('$(res)/img/element-icons/room/invite.svg'); mask-position: center; mask-repeat: no-repeat;