New room list and chat header design

src/assets/css/chat.scss

@@ -45,15 +45,28 @@ body {
   border-bottom: 1px solid var(--v-divider-color);
   .chat-header-row {
     margin: 0;
-    padding: 4px 10px;
+    padding: 4px 10px 4px 28px;
     align-items: center;
     height: 100%;
+    button {
+      width: 26px;
+      height: 26px;
+      .v-icon {
+        width: 14px;
+        height: 14px;
+      }
+    }
+  }
+  .room-title-row {
+    display: flex;
+    align-items: center;
   }
-  .chat-header-members,
   .chat-header-name {
-    overflow: hidden;
     cursor: pointer;
   }
+  .chat-header-members {
+    overflow: hidden;
+  }
   .num-members {
     font-family: "Inter", sans-serif;
     font-weight: 400;
@@ -73,44 +86,72 @@ body {
     margin-bottom: $chat-standard-padding-xs;
   }
 
-  @media #{map-get($display-breakpoints, 'sm-and-down')} {
-    position: fixed;
-    z-index: 10;
-  }
-
   .icon-dropdown {
     margin: 0px 8px;
   }
 
   .notification-alert {
     display: inline-block;
-    background-color: #ff3300;
+    background-color: $alert-bg-color;
     width: 8px;
     height: 8px;
     border-radius: 4px;
     margin-bottom: 2px;
-  }
+    position: relative;
+    overflow: visible;
+    &.popup-open::after {
+      top: 5px;
+      color: #246bfd;
+    }
+    .missed-items-popup {
+      position: absolute;
+      bottom: -17px;
+      left: -20px;
+      transform: translateY(100%);
+      background: #246bfd;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      padding: 22px 18px 23px 18px;
+      z-index: 300;
+      user-select: none;
+      .text {
+        white-space: nowrap;
+        font-family: "Inter", sans-serif;
+        font-style: normal;
+        font-weight: 500;
+        font-size: 14px;
+        line-height: 20px;
+        color: #ffffff;
+      }
+      .button {
+        margin-left: 50px;
+        font-family: "Inter";
+        font-style: normal;
+        font-weight: 700;
+        font-size: 11.5411px;
+        line-height: 140%;
+        display: flex;
+        align-items: center;
+        text-align: center;
+        letter-spacing: 0.34px;
+        text-transform: uppercase;
+        color: #ffffff;
+      }
+    }
+    .missed-items-popup-background {
+      content: " ";
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: block;
+      z-index: 250;
+      backdrop-filter: blur(2px);
+      -webkit-backdrop-filter: blur(2px);
+    }
 }
-
-.room-list-notification-count {
-  position: absolute;
-  top: 10px;
-  left: 40px;
-  right: initial;
-  color: white;
-  background-color: black;
-  font-size: 10px;
-  min-width: 20px;
-  height: 20px;
-  border-radius: 10px;
-  border: 2px solid white;
-  text-align: center;
-  padding-left: 4px;
-  padding-right: 4px;
-  [dir="rtl"] & {
-    right: 40px;
-    left: initial;
-  }
 }
 
 .chat-root {
@@ -128,11 +169,6 @@ body {
   background-color: $chat-background;
   overflow: hidden;
 
-  .chat-room-invitations {
-    padding: 10px;
-    background-color: #f2f2f2;
-  }
-
   .chat-content {
     margin: 0;
     padding-top: $chat-standard-padding-s;
@@ -224,7 +260,7 @@ body {
       padding: 0;
       min-width: 48px;
 
-      &.input-more-icon  {
+      &.input-more-icon {
         svg {
           fill: black;
         }
@@ -709,7 +745,7 @@ body {
 .room-name-inline {
   font-family: "Poppins", sans-serif;
   font-weight: 700;
-  font-size: 18 * $chat-text-size;
+  font-size: 16 * $chat-text-size;
   text-transform: uppercase;
   color: var(--v-foreground-color);
   text-align: center;
@@ -787,6 +823,50 @@ body {
   }
 }
 
+.room-list {
+  .room-list-room {
+    color: white; // Used as selected item background
+    .v-avatar:not(.round) {
+      // Make avatars rounded squares!
+      border-radius: 8px;
+    }
+    .room-list-name,
+    .room-list-new-room {
+      font-family: "Inter";
+      font-style: normal;
+      font-weight: 600;
+      font-size: 16px;
+      line-height: 117%;
+      letter-spacing: 0.4px;
+      color: #0e252d;
+    }
+    .room-list-new-room {
+      font-weight: 400;
+    }
+    .room-list-new-messages {
+      font-family: "Inter", sans-serif;
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 117%;
+      letter-spacing: 0.4px;
+      color: #1d1d1d;
+      padding-left: 13px;
+      position: relative;
+      &::before {
+        position: absolute;
+        width: 6px;
+        height: 6px;
+        left: 0;
+        top: 5px;
+        background: $alert-bg-color;
+        border-radius: 3px;
+        content: " ";
+      }
+    }
+  }
+}
+
 .room-info {
   background-color: #e8e8e8;
   height: 100%;
@@ -1275,11 +1355,11 @@ body {
   background-color: var(--v-background-color);
   color: var(--v-foreground-color);
   overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
   .load-earlier {
     flex: 1 0 auto;
     padding: 20px;
@@ -1297,7 +1377,8 @@ body {
       height: 32px !important;
       margin-left: -8px !important;
     }
-    .list-enter-active, .list-leave-active {
+    .list-enter-active,
+    .list-leave-active {
       transition: all 1s;
     }
     .list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
@@ -1310,7 +1391,7 @@ body {
     padding: 20px;
     display: flex;
     flex-direction: column;
-    align-items:center;
+    align-items: center;
     justify-content: flex-end;
     width: 100%;
   }
@@ -1372,7 +1453,8 @@ body {
     height: 103px !important;
     margin: 0 !important;
   }
-  #btn-play, #btn-pause {
+  #btn-play,
+  #btn-pause {
     margin: 26px;
   }
   .mic-button {
@@ -1385,4 +1467,4 @@ body {
   right: 20px;
   bottom: 20px;
   position: absolute;
-}
+}