diff --git a/res/css/structures/_LeftPanel2.scss b/res/css/structures/_LeftPanel2.scss index 3b8fb58be5..eca50bb639 100644 --- a/res/css/structures/_LeftPanel2.scss +++ b/res/css/structures/_LeftPanel2.scss @@ -16,12 +16,10 @@ limitations under the License. // TODO: Rename to mx_LeftPanel during replacement of old component -// TODO: Put these variables in the right place, or namespace them. -$tagPanelWidth: 70px; -$roomListMinimizedWidth: 50px; +$tagPanelWidth: 70px; // only applies in this file, used for calculations .mx_LeftPanel2 { - background-color: $header-panel-bg-color; + background-color: $roomlist2-bg-color; min-width: 260px; max-width: 50%; @@ -108,7 +106,7 @@ $roomListMinimizedWidth: 50px; width: 28px; height: 28px; border-radius: 20px; - background-color: #fff; // TODO: Variable and theme + background-color: $roomlist2-button-bg-color; position: relative; margin-left: 8px; diff --git a/res/css/structures/_RoomSearch.scss b/res/css/structures/_RoomSearch.scss index 31061f7a16..eddc4cd064 100644 --- a/res/css/structures/_RoomSearch.scss +++ b/res/css/structures/_RoomSearch.scss @@ -18,7 +18,7 @@ limitations under the License. .mx_RoomSearch { flex: 1; border-radius: 20px; - background-color: #fff; // TODO: Variable & theme + background-color: $roomlist2-button-bg-color; height: 26px; padding: 2px; diff --git a/res/css/views/rooms/_NotificationBadge.scss b/res/css/views/rooms/_NotificationBadge.scss index 9f9698bac5..521f1dfc20 100644 --- a/res/css/views/rooms/_NotificationBadge.scss +++ b/res/css/views/rooms/_NotificationBadge.scss @@ -27,7 +27,7 @@ limitations under the License. // ^- The count is an element floating within that. &.mx_NotificationBadge_visible { - background-color: $roomtile2-badge-color; + background-color: $roomtile2-default-badge-bg-color; // Create a flexbox to order the count a bit easier display: flex; diff --git a/res/css/views/rooms/_RoomSublist2.scss b/res/css/views/rooms/_RoomSublist2.scss index e57f03cefc..3f5f654494 100644 --- a/res/css/views/rooms/_RoomSublist2.scss +++ b/res/css/views/rooms/_RoomSublist2.scss @@ -108,7 +108,7 @@ limitations under the License. // This is the same color as the left panel background because it needs // to occlude the lastmost tile in the list. - background-color: $header-panel-bg-color; + background-color: $roomlist2-bg-color; // Update the render() function for RoomSublist2 if these change // Update the ListLayout class for minVisibleTiles if these change. @@ -198,7 +198,7 @@ limitations under the License. height: 24px; margin-left: 16px; visibility: visible; - background-color: #fff; // TODO: Variable and theme + background-color: $roomlist2-button-bg-color; } } } @@ -226,7 +226,7 @@ limitations under the License. width: 32px !important; // !important to override hover styles height: 32px !important; // !important to override hover styles margin-left: 0 !important; // !important to override hover styles - background-color: #fff; // TODO: Variable and theme + background-color: $roomlist2-button-bg-color; margin-top: 8px; &::before { @@ -261,7 +261,7 @@ limitations under the License. // This is the same color as the left panel background because it needs // to occlude the sublist title - background-color: $header-panel-bg-color; + background-color: $roomlist2-bg-color; &::before { top: 0; diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 9fb36ef1a3..50f3c08782 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -103,6 +103,24 @@ $eventtile-meta-color: $roomtopic-color; $header-divider-color: $header-panel-text-primary-color; +// ******************** + +// V2 Room List +// TODO: Remove the 2 from all of these when the new list takes over + +$theme-button-bg-color: #e3e8f0; + +$roomlist2-button-bg-color: #1A1D23; // Buttons include the filter box, explore button, and sublist buttons +$roomlist2-bg-color: $header-panel-bg-color; + +$roomsublist2-divider-color: #e9eaeb; + +$roomtile2-preview-color: #9e9e9e; +$roomtile2-default-badge-bg-color: #61708b; +$roomtile2-selected-bg-color: #1A1D23; + +// ******************** + $roomtile-name-color: $header-panel-text-primary-color; $roomtile-selected-color: $text-primary-color; $roomtile-notified-color: $text-primary-color; diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 3c6f6aa5a4..18a25b2663 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -172,14 +172,22 @@ $header-divider-color: #91A1C0; // ******************** -// TODO: Update variables for new room list -// TODO: Dark theme -$roomtile2-preview-color: #9e9e9e; -$roomtile2-badge-color: #61708b; -$roomtile2-selected-bg-color: #FFF; +// V2 Room List +// TODO: Remove the 2 from all of these when the new list takes over + $theme-button-bg-color: #e3e8f0; + +$roomlist2-button-bg-color: #fff; // Buttons include the filter box, explore button, and sublist buttons +$roomlist2-bg-color: $header-panel-bg-color; + $roomsublist2-divider-color: #e9eaeb; +$roomtile2-preview-color: #9e9e9e; +$roomtile2-default-badge-bg-color: #61708b; +$roomtile2-selected-bg-color: #FFF; + +// ******************** + $roomtile-name-color: #61708b; $roomtile-badge-fg-color: $accent-fg-color; $roomtile-selected-color: #212121;