diff --git a/res/css/structures/_LeftPanel.scss b/res/css/structures/_LeftPanel.scss index 354dc87b8f..3c3c5f4444 100644 --- a/res/css/structures/_LeftPanel.scss +++ b/res/css/structures/_LeftPanel.scss @@ -111,9 +111,9 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations } .mx_LeftPanel_exploreButton { - width: 28px; - height: 28px; - border-radius: 20px; + width: 32px; + height: 32px; + border-radius: 8px; background-color: $roomlist-button-bg-color; position: relative; margin-left: 8px; @@ -121,15 +121,15 @@ $tagPanelWidth: 56px; // only applies in this file, used for calculations &::before { content: ''; position: absolute; - top: 6px; - left: 6px; + top: 8px; + left: 8px; width: 16px; height: 16px; - mask-image: url('$(res)/img/feather-customised/compass.svg'); + mask-image: url('$(res)/img/element-icons/roomlist/explore.svg'); mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-fg-color; + background: $secondary-fg-color; } } } diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss index 39a3dee30b..031ac37f9c 100644 --- a/res/css/structures/_RoomSearch.scss +++ b/res/css/structures/_RoomSearch.scss @@ -17,7 +17,7 @@ limitations under the License. // Note: this component expects to be contained within a flexbox .mx_RoomSearch { flex: 1; - border-radius: 20px; + border-radius: 8px; background-color: $roomlist-button-bg-color; height: 28px; padding: 2px; @@ -29,9 +29,9 @@ limitations under the License. .mx_RoomSearch_icon { width: 16px; height: 16px; - mask: url('$(res)/img/feather-customised/search-input.svg'); + mask: url('$(res)/img/element-icons/roomlist/search.svg'); mask-repeat: no-repeat; - background: $primary-fg-color; + background-color: $secondary-fg-color; margin-left: 7px; } @@ -46,7 +46,7 @@ limitations under the License. line-height: $font-16px; &:not(.mx_RoomSearch_inputExpanded)::placeholder { - color: $primary-fg-color !important; // !important to override default app-wide styles + color: $tertiary-fg-color !important; // !important to override default app-wide styles } } @@ -54,11 +54,11 @@ limitations under the License. .mx_RoomSearch_clearButton { width: 16px; height: 16px; - mask-image: url('$(res)/img/feather-customised/x.svg'); + mask-image: url('$(res)/img/element-icons/roomlist/search-clear.svg'); mask-position: center; mask-size: contain; mask-repeat: no-repeat; - background: $primary-fg-color; + background-color: $secondary-fg-color; margin-right: 8px; } } diff --git a/res/img/element-icons/roomlist/search-clear.svg b/res/img/element-icons/roomlist/search-clear.svg new file mode 100644 index 0000000000..29fc097600 --- /dev/null +++ b/res/img/element-icons/roomlist/search-clear.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M9 16C12.866 16 16 12.866 16 9C16 5.13401 12.866 2 9 2C5.13401 2 2 5.13401 2 9C2 12.866 5.13401 16 9 16ZM5.96967 5.96967C6.26256 5.67678 6.73744 5.67678 7.03033 5.96967L9 7.93934L10.9697 5.96967C11.2626 5.67678 11.7374 5.67678 12.0303 5.96967C12.3232 6.26256 12.3232 6.73744 12.0303 7.03033L10.0607 9L12.0303 10.9697C12.3232 11.2626 12.3232 11.7374 12.0303 12.0303C11.7374 12.3232 11.2626 12.3232 10.9697 12.0303L9 10.0607L7.03033 12.0303C6.73744 12.3232 6.26256 12.3232 5.96967 12.0303C5.67678 11.7374 5.67678 11.2626 5.96967 10.9697L7.93934 9L5.96967 7.03033C5.67678 6.73744 5.67678 6.26256 5.96967 5.96967Z" fill="black"/> +</svg> diff --git a/res/img/element-icons/roomlist/search.svg b/res/img/element-icons/roomlist/search.svg new file mode 100644 index 0000000000..b706092a5c --- /dev/null +++ b/res/img/element-icons/roomlist/search.svg @@ -0,0 +1,3 @@ +<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M12.1333 8.06667C12.1333 10.3126 10.3126 12.1333 8.06667 12.1333C5.82071 12.1333 4 10.3126 4 8.06667C4 5.82071 5.82071 4 8.06667 4C10.3126 4 12.1333 5.82071 12.1333 8.06667ZM12.9992 11.5994C13.7131 10.6044 14.1333 9.38463 14.1333 8.06667C14.1333 4.71614 11.4172 2 8.06667 2C4.71614 2 2 4.71614 2 8.06667C2 11.4172 4.71614 14.1333 8.06667 14.1333C9.38457 14.1333 10.6043 13.7131 11.5992 12.9993C11.6274 13.0369 11.6586 13.0729 11.6928 13.1071L14.2928 15.7071C14.6833 16.0977 15.3165 16.0977 15.707 15.7071C16.0975 15.3166 16.0975 14.6834 15.707 14.2929L13.107 11.6929C13.0728 11.6587 13.0368 11.6276 12.9992 11.5994Z" fill="black"/> +</svg> diff --git a/res/img/feather-customised/compass.svg b/res/img/feather-customised/compass.svg deleted file mode 100644 index 3296260803..0000000000 --- a/res/img/feather-customised/compass.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-compass"><circle cx="12" cy="12" r="10"></circle><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"></polygon></svg> \ No newline at end of file diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 287723ec9c..fe1103a529 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -16,6 +16,7 @@ $room-highlight-color: #343a46; // typical text (dark-on-white in light skin) $primary-fg-color: $text-primary-color; $secondary-fg-color: $primary-fg-color; +$tertiary-fg-color: $primary-fg-color; $primary-bg-color: $bg-color; $muted-fg-color: $header-panel-text-primary-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index e5ae7f866e..0aa9bd0394 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -24,6 +24,7 @@ $header-panel-bg-color: #f3f8fd; // typical text (dark-on-white in light skin) $primary-fg-color: #2e2f32; $secondary-fg-color: $primary-fg-color; +$tertiary-fg-color: $primary-fg-color; $primary-bg-color: #ffffff; $muted-fg-color: #61708b; // Commonly used in headings and relevant alt text diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index e9ade7eb97..5a86a29248 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -171,7 +171,7 @@ $header-divider-color: #91A1C0; $theme-button-bg-color: #e3e8f0; -$roomlist-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons +$roomlist-button-bg-color: rgba(141, 151, 165, 0.2); // Buttons include the filter box, explore button, and sublist buttons $roomlist-bg-color: rgba(245, 245, 245, 0.90); $roomlist-header-color: $tertiary-fg-color; $roomsublist-divider-color: $primary-fg-color;