feat: Redesign the format bar / textarea into a single bordered area with divider

src/shared/components/common/markdown-textarea.tsx

@@ -1,4 +1,5 @@
 import autosize from "autosize";
+import classNames from "classnames";
 import { NoOptionI18nKeys } from "i18next";
 import { Component, linkEvent } from "inferno";
 import { Language } from "lemmy-js-client";
@@ -143,7 +144,19 @@ export class MarkdownTextArea extends Component<
           }
         />
         <div className="form-group row">
-          <div className="col-sm-12 d-flex flex-wrap">
+          <div className="col-12">
+            <div
+              className="rounded bg-white"
+              style={{
+                border: "1px solid var(--bs-border-color)",
+              }}
+            >
+              <div
+                className="d-flex flex-wrap"
+                style={{
+                  "border-bottom": "1px solid var(--bs-border-color)",
+                }}
+              >
                 {this.getFormatButton("bold", this.handleInsertBold)}
                 {this.getFormatButton("italic", this.handleInsertItalic)}
                 {this.getFormatButton("link", this.handleInsertLink)}
@@ -172,7 +185,9 @@ export class MarkdownTextArea extends Component<
                     name="file"
                     className="d-none"
                     multiple
-                disabled={!UserService.Instance.myUserInfo || this.isDisabled}
+                    disabled={
+                      !UserService.Instance.myUserInfo || this.isDisabled
+                    }
                     onChange={linkEvent(this, this.handleImageUpload)}
                   />
                 </form>
@@ -185,7 +200,10 @@ export class MarkdownTextArea extends Component<
                 {this.getFormatButton("list", this.handleInsertList)}
                 {this.getFormatButton("code", this.handleInsertCode)}
                 {this.getFormatButton("subscript", this.handleInsertSubscript)}
-            {this.getFormatButton("superscript", this.handleInsertSuperscript)}
+                {this.getFormatButton(
+                  "superscript",
+                  this.handleInsertSuperscript
+                )}
                 {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
                 <a
                   href={markdownHelpUrl}
@@ -197,10 +215,12 @@ export class MarkdownTextArea extends Component<
                 </a>
               </div>
 
-          <div className="col-sm-12 mt-2">
+              <div>
                 <textarea
                   id={this.id}
-              className={`form-control ${this.state.previewMode && "d-none"}`}
+                  className={classNames("form-control border-0", {
+                    "d-none": this.state.previewMode,
+                  })}
                   value={this.state.content}
                   onInput={linkEvent(this, this.handleContentChange)}
                   onPaste={linkEvent(this, this.handleImageUploadPaste)}
@@ -208,7 +228,9 @@ export class MarkdownTextArea extends Component<
                   required
                   disabled={this.isDisabled}
                   rows={2}
-              maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
+                  maxLength={
+                    this.props.maxLength ?? markdownFieldCharacterLimit
+                  }
                   placeholder={this.props.placeholder}
                 />
                 {this.state.previewMode && this.state.content && (
@@ -235,8 +257,10 @@ export class MarkdownTextArea extends Component<
               <label className="sr-only" htmlFor={this.id}>
                 {i18n.t("body")}
               </label>
+            </div>
+          </div>
 
-          <div className="col-sm-12 d-flex align-items-center flex-wrap mt-2">
+          <div className="col-12 d-flex align-items-center flex-wrap mt-2">
             {this.props.showLanguage && (
               <LanguageSelect
                 iconVersion