Redesign direct messages column (#9022)

app/javascript/styles/mastodon/components.scss

@@ -801,7 +801,7 @@
   padding: 8px 10px;
   padding-left: 68px;
   position: relative;
-  min-height: 48px;
+  min-height: 54px;
   border-bottom: 1px solid lighten($ui-base-color, 8%);
   cursor: default;
 
@@ -823,7 +823,7 @@
     margin-top: 8px;
   }
 
-  &.status-direct {
+  &.status-direct:not(.read) {
     background: lighten($ui-base-color, 8%);
     border-bottom-color: lighten($ui-base-color, 12%);
   }
@@ -1133,6 +1133,18 @@
     vertical-align: middle;
     margin-right: 5px;
   }
+
+  &-composite {
+    @include avatar-radius();
+    overflow: hidden;
+
+    & > div {
+      @include avatar-radius();
+      float: left;
+      position: relative;
+      box-sizing: border-box;
+    }
+  }
 }
 
 a .account__avatar {
@@ -5497,49 +5509,3 @@ noscript {
     }
   }
 }
-
-.conversation {
-  padding: 14px 10px;
-  border-bottom: 1px solid lighten($ui-base-color, 8%);
-  cursor: pointer;
-
-  &--unread {
-    background: lighten($ui-base-color, 8%);
-    border-bottom-color: lighten($ui-base-color, 12%);
-  }
-
-  &__header {
-    display: flex;
-    margin-bottom: 15px;
-  }
-
-  &__avatars {
-    overflow: hidden;
-    flex: 1 1 auto;
-
-    & > div {
-      display: flex;
-      flex-wrap: none;
-      width: 900px;
-    }
-
-    .account__avatar {
-      margin-right: 10px;
-    }
-  }
-
-  &__time {
-    flex: 0 0 auto;
-    font-size: 14px;
-    color: $darker-text-color;
-    text-align: right;
-
-    .display-name {
-      color: $secondary-text-color;
-    }
-  }
-
-  .attachment-list.compact {
-    margin-top: 15px;
-  }
-}