room directory makeover

res/css/_common.scss

@@ -157,7 +157,7 @@ textarea {
     font-weight: 300;
     font-size: 15px;
     position: relative;
-    padding: 0 58px 36px;
+    padding: 40px 58px 36px 58px;
     width: 60%;
     max-width: 704px;
     box-shadow: 2px 15px 30px 0 $dialog-shadow-color;
@@ -190,15 +190,36 @@ textarea {
     pointer-events: none;
 }
 
-.mx_Dialog_cancelButton {
-    position: absolute;
-    right: 11px;
-    top: 13px;
-    cursor: pointer;
+.mx_Dialog_header {
+    position: relative;
 }
 
-.mx_Dialog_cancelButton object {
-    pointer-events: none;
+.mx_Dialog_title {
+    font-weight: bold;
+    font-size: 22px;
+    line-height: 36px;
+    color: $primary-fg-color;
+}
+
+.mx_Dialog_header.mx_Dialog_headerWithButton > .mx_Dialog_title {
+    text-align: center;
+}
+
+.mx_Dialog_title.danger {
+    color: $warning-color;
+}
+
+.mx_Dialog_cancelButton {
+    mask: url('$(res)/img/feather-icons/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    width: 36px;
+    height: 36px;
+    background-color: $primary-fg-color;
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    right: 20px;
 }
 
 .mx_Dialog_content {
@@ -254,19 +275,6 @@ textarea {
     color: $accent-color;
 }
 
-.mx_Dialog_title {
-    min-height: 16px;
-    padding-top: 40px;
-    font-weight: bold;
-    font-size: 22px;
-    line-height: 1.4;
-    color: $primary-fg-color;
-}
-
-.mx_Dialog_title.danger {
-    color: $warning-color;
-}
-
 .mx_TextInputDialog_label {
     text-align: left;
     padding-bottom: 12px;

res/css/structures/_RoomDirectory.scss

@@ -14,29 +14,48 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_RoomDirectory {
+.mx_RoomDirectory_dialogWrapper > .mx_Dialog {
     max-width: 960px;
-    width: 100%;
-    margin-left: auto;
-    margin-right: auto;
-    margin-bottom: 12px;
-    color: $primary-fg-color;
-    word-break: break-word;
+    height: 100%;
+    padding: 20px;
+}
 
+.mx_RoomDirectory_dialog {
+    height: 100%;
     display: flex;
-
     flex-direction: column;
 }
 
-.mx_RoomDirectory .mx_RoomHeader_simpleHeader {
-    margin-left: 0px;
+.mx_RoomDirectory {
+    margin-bottom: 12px;
+    color: $primary-fg-color;
+    word-break: break-word;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+
+.mx_RoomDirectory .gm-scroll-view {
+    // little hack because gemini doesn't seem to detect
+    // the scrollbar width well in this instance
+    // when using css scrollbars
+    scrollbar-width: thin;
+}
+
+.mx_RoomDirectory_createRoom {
+    background-color: $button-bg-color;
+    border-radius: 4px;
+    padding: 8px;
+    color: $button-fg-color;
+    font-weight: 600;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 .mx_RoomDirectory_list {
     flex: 1;
-
     display: flex;
-
     flex-direction: column;
 }
 
@@ -45,22 +64,17 @@ limitations under the License.
 }
 
 .mx_RoomDirectory_listheader {
-    display: table;
-    table-layout: fixed;
-    width: 100%;
+    display: flex;
     margin-top: 12px;
     margin-bottom: 12px;
-    border-spacing: 5px;
 }
 
 .mx_RoomDirectory_searchbox {
-    display: table-cell;
-    vertical-align: middle;
+    flex: 1 !important;
 }
 
 .mx_RoomDirectory_listheader .mx_NetworkDropdown {
-    display: table-cell;
-    width: 200px;
+    flex: 0 0 200px;
 }
 
 .mx_RoomDirectory_tableWrapper {

res/css/views/directory/_NetworkDropdown.scss

@@ -35,13 +35,13 @@ limitations under the License.
     height: 0;
     position: absolute;
     right: 10px;
-    top: 14px;
+    top: 16px;
     width: 0
 }
 
 .mx_NetworkDropdown_networkoption {
-    height: 35px;
-    line-height: 35px;
+    height: 37px;
+    line-height: 37px;
     padding-left: 8px;
     padding-right: 8px;
     overflow: hidden;

res/css/views/elements/_DirectorySearchBox.scss

@@ -15,26 +15,10 @@ limitations under the License.
 */
 
 .mx_DirectorySearchBox {
-    position: relative;
-    border-radius: 3px;
-    border: 1px solid $strong-input-border-color;
-}
-
-.mx_DirectorySearchBox_container {
     display: flex;
     padding-left: 9px;
     padding-right: 9px;
-}
-
-.mx_DirectorySearchBox_input {
-    flex-grow: 1;
-    border: 0;
-    padding: 0;
-    font-weight: 300;
-    font-size: 13px;
-}
-input[type=text].mx_DirectorySearchBox_input:focus {
-    border: 0;
+    margin: 0 5px 0 0 !important;
 }
 
 .mx_DirectorySearchBox_joinButton {
@@ -54,16 +38,12 @@ input[type=text].mx_DirectorySearchBox_input:focus {
     cursor: pointer;
 }
 
-.mx_DirectorySearchBox_clear_wrapper {
-    display: table-cell;
-}
-
 .mx_DirectorySearchBox_clear {
-    display: inline-block;
-    vertical-align: middle;
-    background: url('$(res)/img/icon_context_delete.svg');
-    background-position: 0 50%;
-    background-repeat: no-repeat;
+    background-color: $warning-color;
+    mask: url('$(res)/img/cancel.svg');
+    mask-repeat: no-repeat;
+    mask-position: center;
+    mask-size: 10px;
     width: 15px;
     height: 15px;
     cursor: pointer;