Add styling for RoomInfoView

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

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

@@ -22,7 +22,6 @@ limitations under the License.
     font-size: 10px;
 }
 
-
 .hydrogen {
     font-family: 'Inter', sans-serif, 'emoji';
     background-color: white;
@@ -48,14 +47,37 @@ limitations under the License.
     color: white;
 }
 
-.hydrogen .avatar.usercolor1 { background-color: var(--usercolor1); }
+.hydrogen .avatar.usercolor1 {
-.hydrogen .avatar.usercolor2 { background-color: var(--usercolor2); }
+    background-color: var(--usercolor1);
-.hydrogen .avatar.usercolor3 { background-color: var(--usercolor3); }
+}
-.hydrogen .avatar.usercolor4 { background-color: var(--usercolor4); }
+
-.hydrogen .avatar.usercolor5 { background-color: var(--usercolor5); }
+.hydrogen .avatar.usercolor2 {
-.hydrogen .avatar.usercolor6 { background-color: var(--usercolor6); }
+    background-color: var(--usercolor2);
-.hydrogen .avatar.usercolor7 { background-color: var(--usercolor7); }
+}
-.hydrogen .avatar.usercolor8 { background-color: var(--usercolor8); }
+
+.hydrogen .avatar.usercolor3 {
+    background-color: var(--usercolor3);
+}
+
+.hydrogen .avatar.usercolor4 {
+    background-color: var(--usercolor4);
+}
+
+.hydrogen .avatar.usercolor5 {
+    background-color: var(--usercolor5);
+}
+
+.hydrogen .avatar.usercolor6 {
+    background-color: var(--usercolor6);
+}
+
+.hydrogen .avatar.usercolor7 {
+    background-color: var(--usercolor7);
+}
+
+.hydrogen .avatar.usercolor8 {
+    background-color: var(--usercolor8);
+}
 
 .logo {
     height: 48px;
@@ -66,12 +88,15 @@ limitations under the License.
 }
 
 /** buttons */
+
 .button-row {
     display: flex;
 }
+
 .button-row>* {
     margin-right: 10px;
 }
+
 .button-row>*:last-child {
     margin-right: 0px;
 }
@@ -107,7 +132,6 @@ a.button-action {
     display: block;
 }
 
-
 .button-action.secondary {
     color: #03B381;
 }
@@ -172,7 +196,8 @@ a.button-action {
     border-radius: 16px;
     height: 32px;
     align-items: center;
-    padding-left: 30px; /* 8 + 14 (icon) + 8*/
+    padding-left: 30px;
+    /* 8 + 14 (icon) + 8*/
     box-sizing: border-box;
 }
 
@@ -180,6 +205,7 @@ a.button-action {
     border: 1px #e1e3e6 solid;
     background-color: white;
 }
+
 .FilterField:focus-within button {
     border-color: white;
 }
@@ -200,13 +226,16 @@ a.button-action {
 }
 
 .FilterField button {
-    width: 30px; /* 32 - 1 (top) - 1 (bottom) */
+    width: 30px;
-    height: 30px; /* 32 - 1 (top) - 1 (bottom) */
+    /* 32 - 1 (top) - 1 (bottom) */
+    height: 30px;
+    /* 32 - 1 (top) - 1 (bottom) */
     background-position: center;
     background-color: #e1e3e6;
     background-repeat: no-repeat;
     background-image: url('icons/clear.svg');
-    border: 7px solid transparent; /* 8 - 1 */
+    border: 7px solid transparent;
+    /* 8 - 1 */
     border-radius: 100%;
     box-sizing: border-box;
 }
@@ -332,7 +361,6 @@ a {
     align-items: center;
 }
 
-
 .SessionStatusView button.link {
     color: currentcolor;
     text-align: left;
@@ -386,6 +414,7 @@ a {
 .SessionPickerView .session-actions>* {
     margin-right: 10px;
 }
+
 .SessionPickerView .session-actions>*:last-child {
     margin-right: 0px;
 }
@@ -417,7 +446,6 @@ a {
     color: #8D99A5;
 }
 
-
 .RoomGridView>div.focus-ring {
     border: 2px solid rgba(134, 193, 165, 1);
     border-radius: 12px;
@@ -425,7 +453,8 @@ a {
 
 .middle-header {
     box-sizing: border-box;
-    flex: 0 0 56px; /* 12 + 32 + 12 to align with filter field + margin */
+    flex: 0 0 56px;
+    /* 12 + 32 + 12 to align with filter field + margin */
     background: white;
     padding: 0 16px;
     border-bottom: 1px solid rgba(245, 245, 245, 0.90);
@@ -487,7 +516,6 @@ a {
     border: none;
     text-indent: 200%;
     overflow: hidden;
-
     background-color: #03B381;
     background-image: url('icons/send.svg');
     background-repeat: no-repeat;
@@ -587,23 +615,15 @@ button.link {
 .lightbox {
     background-color: rgba(0, 0, 0, 0.75);
     display: grid;
-    grid-template:
+    grid-template: "content close" auto "content details" 1fr / 1fr auto;
-        "content close"   auto
-        "content details" 1fr /
-        1fr      auto;
     color: white;
     padding: 4px;
 }
 
 @media (max-aspect-ratio: 1/1) {
     .lightbox {
-        grid-template:
+        grid-template: "close" auto "content" 1fr "details" auto / 1fr;
-            "close"   auto
-            "content" 1fr
-            "details" auto /
-            1fr;
     }
-
     .lightbox .details {
         width: 100% !important;
     }
@@ -693,10 +713,7 @@ button.link {
 .InviteView_roomProfile {
     display: grid;
     gap: 4px;
-    grid-template:
+    grid-template: "avatar name" auto "avatar description" 1fr / 72px 1fr;
-        "avatar name" auto
-        "avatar description" 1fr /
-        72px 1fr;
     align-self: center;
     margin-bottom: 24px;
 }
@@ -769,3 +786,72 @@ button.link {
     max-width: 200px;
     width: 100%;
 }
+
+/* Right Panel */
+
+.RoomInfo {
+    background: rgba(245, 245, 245, 0.90);
+    padding: 10px;
+}
+
+.RoomAvatar {
+    margin-top: 44px;
+}
+
+.RoomId {
+    color: #737D8C;
+    font-size: 12px;
+    margin-bottom: 36px;
+}
+
+.RoomName h2 {
+    margin-bottom: 4px;
+}
+
+.SidebarRow {
+    width: 90%;
+    margin-bottom: 20px;
+    font-weight: 500;
+    font-size: 15px;
+}
+
+.SidebarLabel::before {
+    padding-right: 16px;
+    height: 20px;
+    width: 20px;
+}
+
+.SidebarValue {
+    color: #737D8C;
+}
+
+.MemberCount::before {
+    content: url("./icons/room-members.svg");
+}
+
+.EncryptionStatus::before {
+    content: url("./icons/encryption-status.svg");
+}
+
+/* Encryption icon next to avatar */
+.RoomEncryption {
+    width:  52px;
+    height: 52px;
+    border-radius: 100%;
+    background: #737D8C;
+    border: 3px solid #F2F5F8;
+    margin-left: -16px;
+}
+
+.encrypted, .unencrypted {
+    height: 24px;
+    width: 24px;
+}
+
+.encrypted {
+    content: url("./icons/e2ee-normal.svg");
+}
+
+.unencrypted {
+    content: url("./icons/e2ee-disabled.svg");
+}