ConversationView in React

stylesheets/components/CompositionArea.scss

@@ -183,4 +183,34 @@
       }
     }
   }
+
+  &__attach-file {
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    opacity: 0.5;
+    border: none;
+    background: transparent;
+
+    &:focus,
+    &:hover {
+      opacity: 1;
+    }
+
+    outline: none;
+
+    &:before {
+      content: '';
+      display: inline-block;
+      width: 24px;
+      height: 24px;
+
+      @include light-theme {
+        @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-75);
+      }
+      @include dark-theme {
+        @include color-svg('../images/icons/v2/plus-24.svg', $color-gray-15);
+      }
+    }
+  }
 }

stylesheets/components/ConversationView.scss

@@ -0,0 +1,56 @@
+// Copyright 2021 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+.ConversationView {
+  display: flex;
+  flex-direction: column;
+  overflow: initial;
+
+  &__pane {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: initial;
+    position: absolute;
+    width: 100%;
+  }
+
+  &__timeline {
+    &--container {
+      flex-grow: 1;
+      margin: 0;
+      max-width: 100%;
+      position: relative;
+    }
+
+    -webkit-padding-start: 0px;
+    height: 100%;
+    margin: 0;
+    overflow-x: hidden;
+    overflow-y: auto;
+    padding: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+
+  &__composition-area {
+    margin-bottom: 6px;
+
+    // We need to use the wrapper because the conversation view calculates the height of all
+    //   things in the composition area. A margin on an inner div won't be included in that
+    //   height calculation.
+    .quote-wrapper {
+      margin-left: 18px;
+      margin-right: 18px;
+      margin-top: 3px;
+    }
+
+    .preview-wrapper {
+      margin-top: 3px;
+      margin-left: 12px;
+      margin-right: 12px;
+      margin-bottom: 2px;
+    }
+  }
+}