Merge branch 'main' into vaporwave

src/assets/css/themes/_variables.vaporwave-dark.scss

@@ -0,0 +1,27 @@
+@import "./variables.vaporwave";
+
+// Colors
+$white: #fff;
+$gray-200: #ebebeb;
+$gray-600: #888;
+$gray-700: #444;
+$gray-800: #303030;
+$gray-900: #222;
+
+$light: $gray-700;
+
+$body-bg: $gray-900;
+$body-color: $gray-200;
+
+$card-bg: $body-bg;
+$navbar-dark-color: rgba($body-bg, 0.5);
+$navbar-light-active-color: rgba($gray-200, 0.9);
+$navbar-light-disabled-color: rgba($gray-200, 0.3);
+$navbar-light-color: rgba($white, 0.5);
+$nav-tabs-link-active-color: $purple;
+$input-bg: $gray-600;
+$input-color: $white;
+$input-disabled-bg: $gray-800;
+$input-border-color: $gray-800;
+$mark-bg: $gray-600;
+$pre-color: $gray-200;

src/assets/css/themes/_variables.vaporwave-light.scss

@@ -0,0 +1,13 @@
+@import "./variables.vaporwave";
+
+// Colors
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+
+$light: darken($gray-300, 1.5);
+
+$body-bg: $gray-100;
+$body-color: $gray-700;
+$text-muted: $gray-500;

src/assets/css/themes/_variables.vaporwave.scss

@@ -0,0 +1,32 @@
+@import "./variables";
+
+// Colors
+$gray-100: #f8f9fa;
+$gray-300: #dee2e6;
+$gray-500: #adb5bd;
+
+$blue: #01cdfe;
+$indigo: #b967ff;
+$purple: #b967ff;
+$pink: rgb(255, 64, 186);
+$red: rgb(255, 95, 110);
+$orange: rgb(255, 167, 93);
+$yellow: #fffb96;
+$green: #05ffa1;
+$teal: #01cdfe;
+$cyan: #01cdfe;
+
+$primary: $pink;
+$secondary: $blue;
+
+$enable-shadows: true;
+$enable-gradients: true;
+$enable-responsive-font-sizes: true;
+
+$border-radius: 1rem;
+$border-radius-lg: 1rem;
+$font-family-monospace: Arial, "Noto Sans", sans-serif;
+$yiq-text-light: $gray-300;
+$text-muted: $gray-500;
+$navbar-light-hover-color: rgba($primary, 0.7);
+$font-family-sans-serif: "Lucida Console", Monaco, monospace;

src/assets/css/themes/vaporwave-dark.scss

@@ -0,0 +1,32 @@
+@import "variables.vaporwave-dark";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
+
+.shadow-sm {
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.15),
+    rgba(255, 255, 255, 0)
+  );
+}
+
+.navbar {
+  background: none;
+}
+
+.dropdown-item:hover,
+option:disabled {
+  color: $secondary;
+}
+
+.btn-sm {
+  margin: 0.25rem;
+}
+
+.form-control::placeholder {
+  text-shadow: 0.5px 0.5px 0 $secondary, 0.5px -0.5px 0 $secondary,
+    -0.5px 0.5px 0 $secondary, -0.5px -0.5px 0 $secondary;
+}
+
+.input-group-text {
+  background: $gray-500;
+}

src/assets/css/themes/vaporwave-light.scss

@@ -0,0 +1,10 @@
+@import "variables.vaporwave-light";
+@import "../../../../node_modules/bootstrap/scss/bootstrap";
+
+.form-control::placeholder {
+  color: $gray-500;
+}
+
+.dropdown-item:hover:not(.active) {
+  background-color: $secondary;
+}

src/server/utils/build-themes-list.ts

@@ -12,7 +12,9 @@ const themes: ReadonlyArray<string> = [
   "litely",
   "litely-red",
   "litely-compact",
-  "i386",
+  "vaporwave-dark",
+  "vaporwave-light",
+  "i386"
 ];
 
 export async function buildThemeList(): Promise<ReadonlyArray<string>> {

src/shared/components/common/emoji-picker.tsx

@@ -32,7 +32,7 @@ export class EmojiPicker extends Component<EmojiPickerProps, EmojiPickerState> {
     return (
       <span className="emoji-picker">
         <button
-          className="btn btn-sm btn-link rounded-0 text-muted"
+          className="btn btn-sm text-muted"
           data-tippy-content={I18NextService.i18n.t("emoji")}
           aria-label={I18NextService.i18n.t("emoji")}
           disabled={this.props.disabled}

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

@@ -170,39 +170,34 @@ export class MarkdownTextArea extends Component<
                 <EmojiPicker
                   onEmojiClick={e => this.handleEmoji(this, e)}
                 ></EmojiPicker>
-                <label
-                  htmlFor={`file-upload-${this.id}`}
-                  className={classNames("mb-0", {
-                    pointer: UserService.Instance.myUserInfo,
-                  })}
-                  data-tippy-content={I18NextService.i18n.t("upload_image")}
-                >
-                  {this.state.imageUploadStatus ? (
-                    <Spinner />
-                  ) : (
-                    <button
-                      type="button"
-                      className="btn btn-sm btn-link rounded-0 text-muted mb-0"
-                      onClick={() => {
-                        document
-                          .getElementById(`file-upload-${this.id}`)
-                          ?.click();
-                      }}
-                    >
+                <form className="btn btn-sm text-muted fw-bold">
+                  <label
+                    htmlFor={`file-upload-${this.id}`}
+                    // TODO: Fix this linting violation
+                    // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+                    tabIndex={0}
+                    className={`mb-0 ${
+                      UserService.Instance.myUserInfo && "pointer"
+                    }`}
+                    data-tippy-content={I18NextService.i18n.t("upload_image")}
+                  >
+                    {this.state.imageUploadStatus ? (
+                      <Spinner />
+                    ) : (
                       <Icon icon="image" classes="icon-inline" />
-                    </button>
-                  )}
-                </label>
-                <input
-                  id={`file-upload-${this.id}`}
-                  type="file"
-                  accept="image/*,video/*"
-                  name="file"
-                  className="d-none"
-                  multiple
-                  disabled={!UserService.Instance.myUserInfo}
-                  onChange={linkEvent(this, this.handleImageUpload)}
-                />
+                    )}
+                  </label>
+                  <input
+                    id={`file-upload-${this.id}`}
+                    type="file"
+                    accept="image/*,video/*"
+                    name="file"
+                    className="d-none"
+                    multiple
+                    disabled={!UserService.Instance.myUserInfo}
+                    onChange={linkEvent(this, this.handleImageUpload)}
+                  />
+                </form>
                 {this.getFormatButton("header", this.handleInsertHeader)}
                 {this.getFormatButton(
                   "strikethrough",
@@ -353,7 +348,7 @@ export class MarkdownTextArea extends Component<
 
     return (
       <button
-        className="btn btn-sm btn-link rounded-0 text-muted"
+        className="btn btn-sm text-muted"
         data-tippy-content={I18NextService.i18n.t(type)}
         aria-label={I18NextService.i18n.t(type)}
         onClick={linkEvent(this, handleClick)}