diff --git a/src/platform/web/ui/css/right-panel.css b/src/platform/web/ui/css/right-panel.css index cc6453e0..20c2f300 100644 --- a/src/platform/web/ui/css/right-panel.css +++ b/src/platform/web/ui/css/right-panel.css @@ -16,15 +16,16 @@ text-align: center; } -.RoomDetailsView_row { - justify-content: space-between; -} - .RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .EncryptionIconView { display: flex; align-items: center; } +.RoomDetailsView_value { + display: flex; + justify-content: flex-end; +} + .EncryptionIconView { justify-content: center; } diff --git a/src/platform/web/ui/css/themes/element/icons/chevron-small.svg b/src/platform/web/ui/css/themes/element/icons/chevron-small.svg new file mode 100644 index 00000000..741e6be0 --- /dev/null +++ b/src/platform/web/ui/css/themes/element/icons/chevron-small.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/platform/web/ui/css/themes/element/theme.css b/src/platform/web/ui/css/themes/element/theme.css index 9e596bfb..9a6951c0 100644 --- a/src/platform/web/ui/css/themes/element/theme.css +++ b/src/platform/web/ui/css/themes/element/theme.css @@ -789,8 +789,11 @@ button.link { /* Right Panel */ -.RoomDetailsView { +.RightPanelView { background: rgba(245, 245, 245, 0.90); +} + +.RoomDetailsView { padding: 16px; } @@ -813,6 +816,24 @@ button.link { margin-bottom: 20px; font-weight: 500; font-size: 15px; + width: 100%; + background: none; + border: none; + padding: 0; +} + +button.RoomDetailsView_row { + cursor: pointer; +} + +button.RoomDetailsView_row::after { + content: url("./icons/chevron-small.svg"); + margin-left: 12px; +} + +.RoomDetailsView_row:not(button)::after{ + content: " "; + width: 19px; } .RoomDetailsView_label::before { @@ -821,8 +842,13 @@ button.link { width: 20px; } +.RoomDetailsView_label { + width: 200px; +} + .RoomDetailsView_value { color: #737D8C; + width: 50px; } .MemberCount::before {