Improve design of the rich text editor (#9533)

New design for rich text composer

res/css/views/rooms/wysiwyg_composer/_EditWysiwygComposer.pcss

@@ -24,7 +24,7 @@ limitations under the License.
     gap: 8px;
     padding: 8px var(--EditWysiwygComposer-padding-inline);
 
-    .mx_WysiwygComposer_content {
+    .mx_WysiwygComposer_Editor_content {
         border-radius: 4px;
         border: solid 1px $primary-hairline-color;
         background-color: $background;

res/css/views/rooms/wysiwyg_composer/_SendWysiwygComposer.pcss

@@ -22,32 +22,65 @@ limitations under the License.
     /* fixed line height to prevent emoji from being taller than text */
     line-height: $font-18px;
     justify-content: center;
-    margin-right: 6px;
-    /* don't grow wider than available space */
-    min-width: 0;
+    margin-right: 13px;
+    gap: 8px;
 
-    .mx_WysiwygComposer_container {
-        flex: 1;
+    .mx_FormattingButtons {
+        margin-left: 12px;
+    }
+
+    .mx_WysiwygComposer_Editor {
+        border: 1px solid;
+        border-color: $quinary-content;
+        padding: 6px 11px 6px 12px;
         display: flex;
-        flex-direction: column;
-        /* min-height at this level so the mx_BasicMessageComposer_input */
-        /* still stays vertically centered when less than 55px. */
-        /* We also set this to ensure the voice message recording widget */
-        /* doesn't cause a jump. */
-        min-height: 55px;
+        align-items: flex-end;
+        gap: 10px;
 
-        .mx_WysiwygComposer_content {
-            border: 1px solid;
-            border-radius: 20px;
-            padding: 8px 10px;
-            /* this will center the contenteditable */
-            /* in it's parent vertically */
-            /* while keeping the autocomplete at the top */
-            /* of the composer. The parent needs to be a flex container for this to work. */
-            margin: auto 0;
-            /* max-height at this level so autocomplete doesn't get scrolled too */
-            max-height: 140px;
-            overflow-y: auto;
+        .mx_E2EIcon {
+            margin: 0 0 7px 0;
+            width: 12px;
+            height: 12px;
+        }
+
+        &[data-is-expanded="true"] {
+            border-radius: 14px;
+
+            .mx_WysiwygComposer_Editor_container {
+                margin-top: 3px;
+                margin-bottom: 3px;
+            }
+        }
+
+        &[data-is-expanded="false"] {
+            border-radius: 40px;
+        }
+
+        .mx_WysiwygComposer_Editor_container {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            min-height: 22px;
+            margin-bottom: 2px;
+            /* don't grow wider than available space */
+            width: 0;
+
+            .mx_WysiwygComposer_Editor_content {
+                /* this will center the contenteditable */
+                /* in it's parent vertically */
+                /* while keeping the autocomplete at the top */
+                /* of the composer. The parent needs to be a flex container for this to work. */
+                margin: auto 0;
+                /* max-height at this level so autocomplete doesn't get scrolled too */
+                max-height: 140px;
+                overflow-y: auto;
+            }
         }
     }
 }
+
+.mx_SendWysiwygComposer-focused {
+    .mx_WysiwygComposer_Editor {
+        border-color: $quaternary-content;
+    }
+}

res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss

@@ -14,15 +14,13 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_WysiwygComposer_container {
-    position: relative;
-
+.mx_WysiwygComposer_Editor_container {
     @keyframes visualbell {
         from { background-color: $visual-bell-bg-color; }
         to { background-color: $background; }
     }
 
-    .mx_WysiwygComposer_content {
+    .mx_WysiwygComposer_Editor_content {
         white-space: pre-wrap;
         word-wrap: break-word;
         outline: none;

res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss

@@ -17,6 +17,7 @@ limitations under the License.
 .mx_FormattingButtons {
     display: flex;
     justify-content: flex-start;
+    gap: 8px;
 
     .mx_FormattingButtons_Button {
         --size: 28px;
@@ -26,18 +27,9 @@ limitations under the License.
         line-height: var(--size);
         width: auto;
         padding-left: 22px;
-        margin-right: 8px;
         background-color: transparent;
         border: none;
 
-        &:first-child {
-            margin-left: 12px;
-        }
-
-        &:last-child {
-            margin-right: auto;
-        }
-
         &::before {
             content: '';
             position: absolute;