From ebba5bdd80d8c18e72d66d58dd895e103e25a28a Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 17:47:42 -0400
Subject: [PATCH 1/4] feat: Move text formatting bar above textarea

---
 src/assets/css/main.css                       | 12 +--
 .../components/common/language-select.tsx     |  9 +-
 .../components/common/markdown-textarea.tsx   | 87 +++++++++----------
 3 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/src/assets/css/main.css b/src/assets/css/main.css
index 82f8433e..e316ab92 100644
--- a/src/assets/css/main.css
+++ b/src/assets/css/main.css
@@ -46,7 +46,7 @@
 }
 
 .md-div p:last-child {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
 
 .md-div img {
@@ -371,7 +371,7 @@ br.big {
 }
 
 .tribute-container li {
-  padding: 5px 5px;
+  padding: 5px;
   cursor: pointer;
 }
 
@@ -410,13 +410,7 @@ br.big {
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
 }
-.lang-select-action {
-  width: 100px;
-}
 
-.lang-select-action:focus {
-  width: auto;
-}
-em-emoji-picker {
+.emoji-picker {
   width: 100%;
 }
diff --git a/src/shared/components/common/language-select.tsx b/src/shared/components/common/language-select.tsx
index fac3216f..09e9c968 100644
--- a/src/shared/components/common/language-select.tsx
+++ b/src/shared/components/common/language-select.tsx
@@ -100,12 +100,9 @@ export class LanguageSelect extends Component<LanguageSelectProps, any> {
 
     return (
       <select
-        className={classNames(
-          "lang-select-action",
-          this.props.iconVersion
-            ? "btn btn-sm text-muted"
-            : "form-control custom-select"
-        )}
+        className={classNames("lang-select-action", {
+          "form-control custom-select": !this.props.iconVersion,
+        })}
         id={this.id}
         onChange={linkEvent(this, this.handleLanguageChange)}
         aria-label={i18n.t("language_select_placeholder")}
diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index a4459ac0..7405638f 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -143,46 +143,6 @@ export class MarkdownTextArea extends Component<
           }
         />
         <div className="form-group row">
-          <div className={`col-sm-12`}>
-            <textarea
-              id={this.id}
-              className={`form-control ${this.state.previewMode && "d-none"}`}
-              value={this.state.content}
-              onInput={linkEvent(this, this.handleContentChange)}
-              onPaste={linkEvent(this, this.handleImageUploadPaste)}
-              onKeyDown={linkEvent(this, this.handleKeyBinds)}
-              required
-              disabled={this.isDisabled}
-              rows={2}
-              maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
-              placeholder={this.props.placeholder}
-            />
-            {this.state.previewMode && this.state.content && (
-              <div
-                className="card border-secondary card-body md-div"
-                dangerouslySetInnerHTML={mdToHtml(this.state.content)}
-              />
-            )}
-            {this.state.imageUploadStatus &&
-              this.state.imageUploadStatus.total > 1 && (
-                <ProgressBar
-                  className="mt-2"
-                  striped
-                  animated
-                  value={this.state.imageUploadStatus.uploaded}
-                  max={this.state.imageUploadStatus.total}
-                  text={i18n.t("pictures_uploded_progess", {
-                    uploaded: this.state.imageUploadStatus.uploaded,
-                    total: this.state.imageUploadStatus.total,
-                  })}
-                />
-              )}
-          </div>
-          <label className="sr-only" htmlFor={this.id}>
-            {i18n.t("body")}
-          </label>
-        </div>
-        <div className="row">
           <div className="col-sm-12 d-flex flex-wrap">
             {this.getFormatButton("bold", this.handleInsertBold)}
             {this.getFormatButton("italic", this.handleInsertItalic)}
@@ -237,7 +197,46 @@ export class MarkdownTextArea extends Component<
             </a>
           </div>
 
-          <div className="col-sm-12 d-flex align-items-center flex-wrap">
+          <div className="col-sm-12 mt-2">
+            <textarea
+              id={this.id}
+              className={`form-control ${this.state.previewMode && "d-none"}`}
+              value={this.state.content}
+              onInput={linkEvent(this, this.handleContentChange)}
+              onPaste={linkEvent(this, this.handleImageUploadPaste)}
+              onKeyDown={linkEvent(this, this.handleKeyBinds)}
+              required
+              disabled={this.isDisabled}
+              rows={2}
+              maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
+              placeholder={this.props.placeholder}
+            />
+            {this.state.previewMode && this.state.content && (
+              <div
+                className="card border-secondary card-body md-div"
+                dangerouslySetInnerHTML={mdToHtml(this.state.content)}
+              />
+            )}
+            {this.state.imageUploadStatus &&
+              this.state.imageUploadStatus.total > 1 && (
+                <ProgressBar
+                  className="mt-2"
+                  striped
+                  animated
+                  value={this.state.imageUploadStatus.uploaded}
+                  max={this.state.imageUploadStatus.total}
+                  text={i18n.t("pictures_uploded_progess", {
+                    uploaded: this.state.imageUploadStatus.uploaded,
+                    total: this.state.imageUploadStatus.total,
+                  })}
+                />
+              )}
+          </div>
+          <label className="sr-only" htmlFor={this.id}>
+            {i18n.t("body")}
+          </label>
+
+          <div className="col-sm-12 d-flex align-items-center flex-wrap mt-2">
             {this.props.showLanguage && (
               <LanguageSelect
                 iconVersion
@@ -257,7 +256,7 @@ export class MarkdownTextArea extends Component<
             {this.props.buttonTitle && (
               <button
                 type="submit"
-                className="btn btn-sm btn-secondary mr-2"
+                className="btn btn-sm btn-secondary ml-2"
                 disabled={this.isDisabled}
               >
                 {this.state.loading ? (
@@ -270,7 +269,7 @@ export class MarkdownTextArea extends Component<
             {this.props.replyType && (
               <button
                 type="button"
-                className="btn btn-sm btn-secondary mr-2"
+                className="btn btn-sm btn-secondary ml-2"
                 onClick={linkEvent(this, this.handleReplyCancel)}
               >
                 {i18n.t("cancel")}
@@ -278,7 +277,7 @@ export class MarkdownTextArea extends Component<
             )}
             {this.state.content && (
               <button
-                className={`btn btn-sm btn-secondary mr-2 ${
+                className={`btn btn-sm btn-secondary ml-2 ${
                   this.state.previewMode && "active"
                 }`}
                 onClick={linkEvent(this, this.handlePreviewToggle)}

From f9f4caf2601879930720ee753fadf78a42726368 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 19:49:28 -0400
Subject: [PATCH 2/4] feat: Redesign the format bar / textarea into a single
 bordered area with divider

---
 .../components/common/markdown-textarea.tsx   | 206 ++++++++++--------
 1 file changed, 115 insertions(+), 91 deletions(-)

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 7405638f..5d932204 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/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,100 +144,123 @@ export class MarkdownTextArea extends Component<
           }
         />
         <div className="form-group row">
-          <div className="col-sm-12 d-flex flex-wrap">
-            {this.getFormatButton("bold", this.handleInsertBold)}
-            {this.getFormatButton("italic", this.handleInsertItalic)}
-            {this.getFormatButton("link", this.handleInsertLink)}
-            <EmojiPicker
-              onEmojiClick={e => this.handleEmoji(this, e)}
-              disabled={this.isDisabled}
-            ></EmojiPicker>
-            <form className="btn btn-sm text-muted font-weight-bold">
-              <label
-                htmlFor={`file-upload-${this.id}`}
-                className={`mb-0 ${
-                  UserService.Instance.myUserInfo && "pointer"
-                }`}
-                data-tippy-content={i18n.t("upload_image")}
-              >
-                {this.state.imageUploadStatus ? (
-                  <Spinner />
-                ) : (
-                  <Icon icon="image" classes="icon-inline" />
-                )}
-              </label>
-              <input
-                id={`file-upload-${this.id}`}
-                type="file"
-                accept="image/*,video/*"
-                name="file"
-                className="d-none"
-                multiple
-                disabled={!UserService.Instance.myUserInfo || this.isDisabled}
-                onChange={linkEvent(this, this.handleImageUpload)}
-              />
-            </form>
-            {this.getFormatButton("header", this.handleInsertHeader)}
-            {this.getFormatButton(
-              "strikethrough",
-              this.handleInsertStrikethrough
-            )}
-            {this.getFormatButton("quote", this.handleInsertQuote)}
-            {this.getFormatButton("list", this.handleInsertList)}
-            {this.getFormatButton("code", this.handleInsertCode)}
-            {this.getFormatButton("subscript", this.handleInsertSubscript)}
-            {this.getFormatButton("superscript", this.handleInsertSuperscript)}
-            {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
-            <a
-              href={markdownHelpUrl}
-              className="btn btn-sm text-muted font-weight-bold"
-              title={i18n.t("formatting_help")}
-              rel={relTags}
+          <div className="col-12">
+            <div
+              className="rounded bg-white"
+              style={{
+                border: "1px solid var(--bs-border-color)",
+              }}
             >
-              <Icon icon="help-circle" classes="icon-inline" />
-            </a>
-          </div>
-
-          <div className="col-sm-12 mt-2">
-            <textarea
-              id={this.id}
-              className={`form-control ${this.state.previewMode && "d-none"}`}
-              value={this.state.content}
-              onInput={linkEvent(this, this.handleContentChange)}
-              onPaste={linkEvent(this, this.handleImageUploadPaste)}
-              onKeyDown={linkEvent(this, this.handleKeyBinds)}
-              required
-              disabled={this.isDisabled}
-              rows={2}
-              maxLength={this.props.maxLength ?? markdownFieldCharacterLimit}
-              placeholder={this.props.placeholder}
-            />
-            {this.state.previewMode && this.state.content && (
               <div
-                className="card border-secondary card-body md-div"
-                dangerouslySetInnerHTML={mdToHtml(this.state.content)}
-              />
-            )}
-            {this.state.imageUploadStatus &&
-              this.state.imageUploadStatus.total > 1 && (
-                <ProgressBar
-                  className="mt-2"
-                  striped
-                  animated
-                  value={this.state.imageUploadStatus.uploaded}
-                  max={this.state.imageUploadStatus.total}
-                  text={i18n.t("pictures_uploded_progess", {
-                    uploaded: this.state.imageUploadStatus.uploaded,
-                    total: this.state.imageUploadStatus.total,
-                  })}
-                />
-              )}
-          </div>
-          <label className="sr-only" htmlFor={this.id}>
-            {i18n.t("body")}
-          </label>
+                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)}
+                <EmojiPicker
+                  onEmojiClick={e => this.handleEmoji(this, e)}
+                  disabled={this.isDisabled}
+                ></EmojiPicker>
+                <form className="btn btn-sm text-muted font-weight-bold">
+                  <label
+                    htmlFor={`file-upload-${this.id}`}
+                    className={`mb-0 ${
+                      UserService.Instance.myUserInfo && "pointer"
+                    }`}
+                    data-tippy-content={i18n.t("upload_image")}
+                  >
+                    {this.state.imageUploadStatus ? (
+                      <Spinner />
+                    ) : (
+                      <Icon icon="image" classes="icon-inline" />
+                    )}
+                  </label>
+                  <input
+                    id={`file-upload-${this.id}`}
+                    type="file"
+                    accept="image/*,video/*"
+                    name="file"
+                    className="d-none"
+                    multiple
+                    disabled={
+                      !UserService.Instance.myUserInfo || this.isDisabled
+                    }
+                    onChange={linkEvent(this, this.handleImageUpload)}
+                  />
+                </form>
+                {this.getFormatButton("header", this.handleInsertHeader)}
+                {this.getFormatButton(
+                  "strikethrough",
+                  this.handleInsertStrikethrough
+                )}
+                {this.getFormatButton("quote", this.handleInsertQuote)}
+                {this.getFormatButton("list", this.handleInsertList)}
+                {this.getFormatButton("code", this.handleInsertCode)}
+                {this.getFormatButton("subscript", this.handleInsertSubscript)}
+                {this.getFormatButton(
+                  "superscript",
+                  this.handleInsertSuperscript
+                )}
+                {this.getFormatButton("spoiler", this.handleInsertSpoiler)}
+                <a
+                  href={markdownHelpUrl}
+                  className="btn btn-sm text-muted font-weight-bold"
+                  title={i18n.t("formatting_help")}
+                  rel={relTags}
+                >
+                  <Icon icon="help-circle" classes="icon-inline" />
+                </a>
+              </div>
 
-          <div className="col-sm-12 d-flex align-items-center flex-wrap mt-2">
+              <div>
+                <textarea
+                  id={this.id}
+                  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)}
+                  onKeyDown={linkEvent(this, this.handleKeyBinds)}
+                  required
+                  disabled={this.isDisabled}
+                  rows={2}
+                  maxLength={
+                    this.props.maxLength ?? markdownFieldCharacterLimit
+                  }
+                  placeholder={this.props.placeholder}
+                />
+                {this.state.previewMode && this.state.content && (
+                  <div
+                    className="card border-secondary card-body md-div"
+                    dangerouslySetInnerHTML={mdToHtml(this.state.content)}
+                  />
+                )}
+                {this.state.imageUploadStatus &&
+                  this.state.imageUploadStatus.total > 1 && (
+                    <ProgressBar
+                      className="mt-2"
+                      striped
+                      animated
+                      value={this.state.imageUploadStatus.uploaded}
+                      max={this.state.imageUploadStatus.total}
+                      text={i18n.t("pictures_uploded_progess", {
+                        uploaded: this.state.imageUploadStatus.uploaded,
+                        total: this.state.imageUploadStatus.total,
+                      })}
+                    />
+                  )}
+              </div>
+              <label className="sr-only" htmlFor={this.id}>
+                {i18n.t("body")}
+              </label>
+            </div>
+          </div>
+
+          <div className="col-12 d-flex align-items-center flex-wrap mt-2">
             {this.props.showLanguage && (
               <LanguageSelect
                 iconVersion

From 3d24a108ae4f642124c4b75e0bfe48494a478067 Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 20:02:07 -0400
Subject: [PATCH 3/4] feat: Fix some colors on dark mode

---
 src/assets/css/themes/darkly.css                   | 1 +
 src/assets/css/themes/litely.css                   | 1 +
 src/shared/components/common/markdown-textarea.tsx | 6 +++---
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/assets/css/themes/darkly.css b/src/assets/css/themes/darkly.css
index a2b09177..49399db2 100644
--- a/src/assets/css/themes/darkly.css
+++ b/src/assets/css/themes/darkly.css
@@ -19,6 +19,7 @@
   --warning: #f39c12;
   --danger: #e74c3c;
   --light: #303030;
+  --medium-light: var(--secondary);
   --dark: #dee2e6;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
diff --git a/src/assets/css/themes/litely.css b/src/assets/css/themes/litely.css
index 9f7d685d..f9d2b2d3 100644
--- a/src/assets/css/themes/litely.css
+++ b/src/assets/css/themes/litely.css
@@ -19,6 +19,7 @@
   --warning: #ffc107;
   --danger: #873208;
   --light: #f8f9fa;
+  --medium-light: var(--bs-gray-300);
   --dark: #343a40;
   --breakpoint-xs: 0;
   --breakpoint-sm: 576px;
diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 5d932204..3d0ab555 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -146,15 +146,15 @@ export class MarkdownTextArea extends Component<
         <div className="form-group row">
           <div className="col-12">
             <div
-              className="rounded bg-white"
+              className="rounded bg-light"
               style={{
-                border: "1px solid var(--bs-border-color)",
+                border: "1px solid var(--medium-light)",
               }}
             >
               <div
                 className="d-flex flex-wrap"
                 style={{
-                  "border-bottom": "1px solid var(--bs-border-color)",
+                  "border-bottom": "1px solid var(--medium-light)",
                 }}
               >
                 {this.getFormatButton("bold", this.handleInsertBold)}

From f037220d5eba071a7a52be8be7fd05c0d233a61c Mon Sep 17 00:00:00 2001
From: Jay Sitter <jay@jaysitter.com>
Date: Fri, 16 Jun 2023 20:13:25 -0400
Subject: [PATCH 4/4] fix: Fix rounded textarea in Markdown box

---
 src/shared/components/common/markdown-textarea.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/shared/components/common/markdown-textarea.tsx b/src/shared/components/common/markdown-textarea.tsx
index 3d0ab555..5ecbb472 100644
--- a/src/shared/components/common/markdown-textarea.tsx
+++ b/src/shared/components/common/markdown-textarea.tsx
@@ -146,7 +146,7 @@ export class MarkdownTextArea extends Component<
         <div className="form-group row">
           <div className="col-12">
             <div
-              className="rounded bg-light"
+              className="rounded bg-light overflow-hidden"
               style={{
                 border: "1px solid var(--medium-light)",
               }}
@@ -218,7 +218,7 @@ export class MarkdownTextArea extends Component<
               <div>
                 <textarea
                   id={this.id}
-                  className={classNames("form-control border-0", {
+                  className={classNames("form-control border-0 rounded-0", {
                     "d-none": this.state.previewMode,
                   })}
                   value={this.state.content}