Stick to naming convention for css/html classes

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

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

@@ -1,30 +1,30 @@
-.RoomInfo {
+.RoomDetailsView {
     grid-area: right;
     flex-direction: column;
 }
 
-.RoomAvatar {
+.RoomDetailsView_avatar {
     display: flex;
 }
 
-.RoomName h2 {
+.RoomDetailsView_name h2 {
     text-align: center;
 }
 
-.SidebarRow {
+.RoomDetailsView_row {
     justify-content: space-between;
 }
 
-.SidebarLabel, .SidebarRow, .RoomInfo, .RoomEncryption {
+.RoomDetailsView_label, .RoomDetailsView_row, .RoomDetailsView, .EncryptionIconView {
     display: flex;
     align-items: center;
 }
 
-.RoomEncryption {
+.EncryptionIconView {
     justify-content: center;
 }
 
-.buttons {
+.RoomDetailsView_buttons {
     display: flex;
     justify-content: flex-end;
     width: 100%;

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

@@ -780,44 +780,44 @@ button.link {
 
 /* Right Panel */
 
-.RoomInfo {
+.RoomDetailsView {
     background: rgba(245, 245, 245, 0.90);
     padding: 10px;
 }
 
-.RoomAvatar {
+.RoomDetailsView_avatar {
     margin-top: 44px;
 }
 
-.RoomId {
+.RoomDetailsView_id {
     color: #737D8C;
     font-size: 12px;
 }
 
-.SidebarRow_collection{
+.RoomDetailsView_rows{
     margin-top: 36px;
     width: 100%;
 }
 
-.RoomName h2 {
+.RoomDetailsView_name h2 {
     margin-bottom: 4px;
     font-size: 1.8rem;
 }
 
-.SidebarRow {
+.RoomDetailsView_row {
     width: 90%;
     margin-bottom: 20px;
     font-weight: 500;
     font-size: 15px;
 }
 
-.SidebarLabel::before {
+.RoomDetailsView_label::before {
     padding-right: 16px;
     height: 20px;
     width: 20px;
 }
 
-.SidebarValue {
+.RoomDetailsView_value {
     color: #737D8C;
 }
 
@@ -831,7 +831,7 @@ button.link {
 
 /* Encryption icon next to avatar */
 
-.RoomEncryption {
+.EncryptionIconView {
     width: 52px;
     height: 52px;
     border-radius: 100%;
@@ -840,24 +840,24 @@ button.link {
     margin-left: -16px;
 }
 
-.encrypted, .unencrypted {
+.EncryptionIconView_encrypted, .EncryptionIconView_unencrypted {
     height: 24px;
     width: 24px;
 }
 
-.encrypted {
+.EncryptionIconView_encrypted {
     content: url("./icons/e2ee-normal.svg");
 }
 
-.unencrypted {
+.EncryptionIconView_unencrypted {
     content: url("./icons/e2ee-disabled.svg");
 }
 
-.RoomInfo .button-utility {
+.RoomDetailsView .button-utility {
     width: 24px;
     height: 24px;
 }
 
-.RoomInfo .close {
+.RoomDetailsView .close {
     background-image: url("./icons/clear.svg");
 }

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

@@ -6,48 +6,48 @@ export class RoomInfoView extends TemplateView {
 
     render(t, vm) {
         const encryptionString = () => vm.isEncrypted ? vm.i18n`On` : vm.i18n`Off`;
-        return t.div({ className: "RoomInfo" }, [
+        return t.div({ className: "RoomDetailsView" }, [
             this._createButton(t, vm),
-            t.div({ className: "RoomAvatar" },
+            t.div({ className: "RoomDetailsView_avatar" },
                 [
                     t.view(new AvatarView(vm, 52)),
-                    t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionAvatarView(isEncrypted))
+                    t.mapView(vm => vm.isEncrypted, isEncrypted => new EncryptionIconView(isEncrypted))
                 ]),
-            t.div({ className: "RoomName" }, [t.h2(vm => vm.name)]),
+            t.div({ className: "RoomDetailsView_name" }, [t.h2(vm => vm.name)]),
             this._createRoomAliasDisplay(vm),
-            t.div({ className: "SidebarRow_collection" },
+            t.div({ className: "RoomDetailsView_rows" },
                 [
-                    this._createSideBarRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }),
+                    this._createRightPanelRow(t, vm.i18n`People`, vm => vm.memberCount, { MemberCount: true }),
-                    this._createSideBarRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true })
+                    this._createRightPanelRow(t, vm.i18n`Encryption`, encryptionString, { EncryptionStatus: true })
                 ])
         ]);
     }
 
     _createRoomAliasDisplay(vm) {
-        return vm.canonicalAlias ? tag.div({ className: "RoomId" }, [text(vm.canonicalAlias)]) :
+        return vm.canonicalAlias ? tag.div({ className: "RoomDetailsView_id" }, [text(vm.canonicalAlias)]) :
             "";
     }
 
-    _createSideBarRow(t, label, value, labelClass, valueClass) {
+    _createRightPanelRow(t, label, value, labelClass, valueClass) {
-        const labelClassString = classNames({ SidebarLabel: true, ...labelClass });
+        const labelClassString = classNames({ RoomDetailsView_label: true, ...labelClass });
-        const valueClassString = classNames({ SidebarValue: true, ...valueClass });
+        const valueClassString = classNames({ RoomDetailsView_value: true, ...valueClass });
-        return t.div({ className: "SidebarRow" }, [
+        return t.div({ className: "RoomDetailsView_row" }, [
             t.div({ className: labelClassString }, [text(label)]),
             t.div({ className: valueClassString }, value)
         ]);
     }
 
     _createButton(t, vm) {
-        return t.div({ className: "buttons" },
+        return t.div({ className: "RoomDetailsView_buttons" },
             [
                 t.button({ className: "close button-utility", onClick: () => vm.closePanel() })
             ]);
     }
 }
 
-class EncryptionAvatarView extends TemplateView{
+class EncryptionIconView extends TemplateView{
     render(t, isEncrypted) {
-       return t.div({ className: "RoomEncryption" },
+       return t.div({ className: "EncryptionIconView" },
-            [t.div({ className: isEncrypted ? "encrypted" : "unencrypted" })]);
+            [t.div({ className: isEncrypted ? "EncryptionIconView_encrypted" : "EncryptionIconView_unencrypted" })]);
     }
 }