Add basic UI and styling

Signed-off-by: RMidhunSuresh <rmidhunsuresh@gmail.com>

src/domain/session/rightpanel/MemberDetailsViewModel.js

@@ -31,6 +31,10 @@ export class MemberDetailsViewModel extends ViewModel {
 
     get type() { return "member-details"; }
     
+    get role() {
+        return "Admin";
+    }
+
     _onMemberChange() {
         this._member = this._observableMember.get();
         this.emitChange();

src/platform/web/ui/css/right-panel.css

@@ -6,7 +6,7 @@
     flex-direction: column;
 }
 
-.RoomDetailsView {
+.RoomDetailsView, .MemberDetailsView {
     flex-direction: column;
     flex: 1;
 }
@@ -15,11 +15,11 @@
     display: flex;
 }
 
-.RoomDetailsView_name h2 {
+.RoomDetailsView_name h2, .MemberDetailsView_name h2 {
     text-align: center;
 }
 
-.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .EncryptionIconView {
+.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .MemberDetailsView, .EncryptionIconView {
     display: flex;
     align-items: center;
 }

src/platform/web/ui/css/themes/element/theme.css

@@ -807,7 +807,7 @@ button.link {
     padding-top: 0;
 }
 
-.RoomDetailsView_id {
+.RoomDetailsView_id, .MemberDetailsView_id {
     color: #737D8C;
     font-size: 12px;
 }
@@ -817,7 +817,7 @@ button.link {
     width: 100%;
 }
 
-.RoomDetailsView_name h2 {
+.RoomDetailsView_name h2, .MemberDetailsView_name h2 {
     margin-bottom: 4px;
     font-size: 1.8rem;
 }
@@ -929,6 +929,24 @@ button.RoomDetailsView_row::after {
     flex: 1;
 }
 
+/* Member details panel */
+.MemberDetailsView_section {
+    box-sizing: border-box;
+    padding: 16px;
+    width: 100%;
+}
+
+.MemberDetailsView_label {
+    font-size: 12px;
+    font-weight: 600;
+    color: #8d99a5;
+}
+
+.MemberDetailsView_value {
+    margin-left: 8px;
+    font-size: 12px;
+}
+
 .LazyListParent {
     overflow-y: auto;
 }

src/platform/web/ui/session/rightpanel/MemberDetailsView.js

@@ -15,14 +15,24 @@ limitations under the License.
 */
 
 import {AvatarView} from "../../AvatarView.js";
+import {classNames} from "../../general/html.js";
 import {TemplateView} from "../../general/TemplateView.js";
 
 export class MemberDetailsView extends TemplateView {
     render(t, vm) {
-        return t.div({ className: "MemberDetailsView" },
+        return t.div({className: "MemberDetailsView"},
             [   t.view(new AvatarView(vm, 128)),
-                t.div({ className: "MemberDetailsView_name" }, vm.name),
-                t.div({ className: "MemberDetailsView_userId" }, vm.userId)
+                t.div({className: "MemberDetailsView_name"}, [t.h2(vm.name)]),
+                t.div({ className: "MemberDetailsView_id" }, vm.userId),
+                this._createSection(t, "ROLE", {}, vm.role)
             ]);
     }
+
+    _createSection(t, label, labelClass, value) {
+        const labelClassString = classNames({MemberDetailsView_label: true, ...labelClass});
+        return t.div({className: "MemberDetailsView_section"}, [
+            t.div({className: labelClassString}, [label]),
+            t.div({className: "MemberDetailsView_value"}, value)
+        ]);
+    }
 }