diff --git a/res/css/structures/_RoomSubList.scss b/res/css/structures/_RoomSubList.scss index 31996f23a21..40e6a6adb53 100644 --- a/res/css/structures/_RoomSubList.scss +++ b/res/css/structures/_RoomSubList.scss @@ -24,12 +24,14 @@ limitations under the License. .mx_RoomSubList_nonEmpty { min-height: 80px; flex: 1; + margin-bottom: 8px; } .mx_RoomSubList_labelContainer { display: flex; flex-direction: row; flex: 0 0 auto; + margin: 8px 19px 0 0; } .mx_RoomSubList_label { @@ -56,20 +58,14 @@ limitations under the License. } .mx_RoomSubList_badge { - display: inline-block; - min-width: 15px; - height: 15px; - position: absolute; - right: 8px; /*gutter */ - top: 7px; - border-radius: 8px; + height: 18px; + border-radius: 9px; color: $accent-fg-color; font-weight: 600; - font-size: 10px; - text-align: center; - padding-top: 1px; - padding-left: 4px; - padding-right: 4px; + font-size: 12px; + vertical-align: middle; + line-height: 18px; + padding: 0 4px; background-color: $accent-color; } @@ -77,10 +73,13 @@ limitations under the License. filter: brightness($focus-brightness); } +.mx_RoomSubList_addRoom, .mx_RoomSubList_badge { + margin: 5px; +} + .mx_RoomSubList_addRoom { background-color: $roomheader-addroom-color; color: $roomsublist-background; - margin: 5px 10px; border-radius: 9px; text-align: center; vertical-align: middle; diff --git a/res/css/views/elements/_ResizeHandle.scss b/res/css/views/elements/_ResizeHandle.scss index e9aa91fe257..153bdfe6ecc 100644 --- a/res/css/views/elements/_ResizeHandle.scss +++ b/res/css/views/elements/_ResizeHandle.scss @@ -18,7 +18,7 @@ limitations under the License. cursor: row-resize; flex: 0 0 auto; background: $panel-divider-color; - padding: 1px + background-clip: content-box; } .mx_ResizeHandle.mx_ResizeHandle_horizontal { diff --git a/res/css/views/rooms/_RoomList.scss b/res/css/views/rooms/_RoomList.scss index 3cb5be19524..29f5fcdadf9 100644 --- a/res/css/views/rooms/_RoomList.scss +++ b/res/css/views/rooms/_RoomList.scss @@ -62,3 +62,6 @@ limitations under the License. right: 60px; } +.mx_RoomList .mx_ResizeHandle { + padding: 4px 0; +} diff --git a/res/css/views/rooms/_RoomTile.scss b/res/css/views/rooms/_RoomTile.scss index 4ad057e3d64..781265a1080 100644 --- a/res/css/views/rooms/_RoomTile.scss +++ b/res/css/views/rooms/_RoomTile.scss @@ -20,7 +20,8 @@ limitations under the License. align-items: center; cursor: pointer; height: 40px; - margin: 0px 3px; + margin: 0 12px; + padding: 2px 12px; position: relative; background-color: $secondary-accent-color; } @@ -34,10 +35,7 @@ limitations under the License. .mx_RoomTile_avatar { flex: 0; - padding-top: 4px; - padding-bottom: 4px; - padding-left: 14px; - padding-right: 12px; + padding: 4px; width: 32px; height: 32px; } @@ -56,7 +54,7 @@ limitations under the License. .mx_RoomTile_name { flex: 1 5 auto; - font-size: 14px; + font-size: 16px; font-weight: 600; padding: 6px; color: $roomtile-name-color; @@ -70,11 +68,21 @@ limitations under the License. } .collapsed { + .mx_RoomTile { + margin: 2px; + padding: 2px 0 2px 12px; + } + .mx_RoomTile_name { display: none; } .mx_RoomTile_badge { + display: block; + position: absolute; + height: 15px; + right: 8px; + top: 2px; min-width: 12px; border-radius: 16px; padding: 0px 4px 0px 4px; @@ -85,14 +93,6 @@ limitations under the License. .mx_RoomTile_highlight .mx_RoomTile_badge:after { display: none; } - - .mx_RoomTile_badge { - display: block; - position: absolute; - height: 15px; - right: 5px; - top: 2px; - } } /* This is the bottom of the speech bubble */ @@ -113,7 +113,7 @@ limitations under the License. border-radius: 8px; color: $accent-fg-color; font-weight: 600; - font-size: 10px; + font-size: 12px; text-align: center; padding-top: 1px; padding-left: 4px; @@ -141,15 +141,19 @@ limitations under the License. .mx_RoomTile_unread, .mx_RoomTile_highlight { font-weight: 800; + + .mx_RoomTile_name { + color: $roomtile-selected-color; + } } .mx_RoomTile_selected { border-radius: 4px; background-color: $roomtile-selected-bg-color; -} -.mx_RoomTile_selected .mx_RoomTile_name { - color: $roomtile-selected-color; + .mx_RoomTile_name { + color: $roomtile-selected-color; + } } .mx_DNDRoomTile { diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss index 4e4b2cd66f0..f261285f393 100644 --- a/res/themes/dharma/css/_dharma.scss +++ b/res/themes/dharma/css/_dharma.scss @@ -20,7 +20,7 @@ $focus-bg-color: #dddddd; // button UI (white-on-green in light skin) $accent-fg-color: #ffffff; -$accent-color: #76CFA6; +$accent-color: #f56679; $selection-fg-color: $primary-bg-color; @@ -127,7 +127,7 @@ $roomsublist-label-fg-color: $roomtile-name-color; $roomsublist-label-bg-color: $tertiary-accent-color; $roomsublist-chevron-color: $accent-color; -$panel-divider-color: #ebedf8; +$panel-divider-color: #dee1f3; // ******************** diff --git a/src/components/structures/RoomSubList.js b/src/components/structures/RoomSubList.js index e00f0f2d03c..0c166a79282 100644 --- a/src/components/structures/RoomSubList.js +++ b/src/components/structures/RoomSubList.js @@ -328,9 +328,9 @@ const RoomSubList = React.createClass({ { chevron } { this.props.collapsed ? '' : this.props.label } - { badge } { incomingCall } + { badge } { addRoomButton } ); @@ -348,7 +348,7 @@ const RoomSubList = React.createClass({ {this._getHeaderJsx()} ; } else { - const heightEstimation = (len * 40) + 31; + const heightEstimation = (len * 40) + 31 + (8 + 8); const style = { flexGrow: `${heightEstimation}`, maxHeight: `${heightEstimation}px`, diff --git a/src/settings/handlers/ConfigSettingsHandler.js b/src/settings/handlers/ConfigSettingsHandler.js index 7a370249a79..67fff51e5b0 100644 --- a/src/settings/handlers/ConfigSettingsHandler.js +++ b/src/settings/handlers/ConfigSettingsHandler.js @@ -27,7 +27,7 @@ export default class ConfigSettingsHandler extends SettingsHandler { // Special case themes if (settingName === "theme") { - return config["default_theme"]; + return "dharma"; // config["default_theme"]; } const settingsConfig = config["settingDefaults"];