From 0be6da42d34f2a87864e0acab8836d3ac6463229 Mon Sep 17 00:00:00 2001
From: Claire <claire.github-309c@sitedethib.com>
Date: Sun, 6 Nov 2022 13:30:37 +0100
Subject: Change glitch-soc composer classes to match upstream

---
 .../features/compose/components/compose_form.js    |   8 +-
 .../glitch/features/compose/components/dropdown.js |  49 +-
 .../features/compose/components/dropdown_menu.js   |   6 +-
 .../glitch/features/compose/components/options.js  |   3 +-
 .../features/compose/components/publisher.js       |  32 +-
 .../features/compose/components/reply_indicator.js |   8 +-
 .../features/compose/components/textarea_icons.js  |   2 +-
 .../glitch/features/compose/components/upload.js   |   8 +-
 .../features/compose/components/upload_form.js     |   4 +-
 .../features/compose/components/upload_progress.js |  13 +-
 .../glitch/features/compose/components/warning.js  |   2 +-
 .../flavours/glitch/styles/accessibility.scss      |   8 +-
 .../glitch/styles/components/compose_form.scss     | 717 +++++++++++++++++++++
 .../glitch/styles/components/composer.scss         | 712 --------------------
 .../flavours/glitch/styles/components/index.scss   |   2 +-
 .../flavours/glitch/styles/components/modal.scss   |   4 +-
 .../glitch/styles/components/single_column.scss    |   6 +-
 .../flavours/glitch/styles/containers.scss         |   2 +-
 app/javascript/flavours/glitch/styles/rtl.scss     |   6 +-
 19 files changed, 795 insertions(+), 797 deletions(-)
 create mode 100644 app/javascript/flavours/glitch/styles/components/compose_form.scss
 delete mode 100644 app/javascript/flavours/glitch/styles/components/composer.scss

(limited to 'app/javascript/flavours')

diff --git a/app/javascript/flavours/glitch/features/compose/components/compose_form.js b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
index 0be14e495..516648f4b 100644
--- a/app/javascript/flavours/glitch/features/compose/components/compose_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/compose_form.js
@@ -305,12 +305,12 @@ class ComposeForm extends ImmutablePureComponent {
     const countText = this.getFulltextForCharacterCounting();
 
     return (
-      <div className='composer'>
+      <div className='compose-form'>
         <WarningContainer />
 
         <ReplyIndicatorContainer />
 
-        <div className={`composer--spoiler ${spoiler ? 'composer--spoiler--visible' : ''}`} ref={this.setRef}>
+        <div className={`spoiler-input ${spoiler ? 'spoiler-input--visible' : ''}`} ref={this.setRef}>
           <AutosuggestInput
             placeholder={intl.formatMessage(messages.spoiler_placeholder)}
             value={spoilerText}
@@ -352,7 +352,7 @@ class ComposeForm extends ImmutablePureComponent {
           </div>
         </AutosuggestTextarea>
 
-        <div className='composer--options-wrapper'>
+        <div className='compose-form__buttons-wrapper'>
           <OptionsContainer
             advancedOptions={advancedOptions}
             disabled={isSubmitting}
@@ -364,7 +364,7 @@ class ComposeForm extends ImmutablePureComponent {
             sensitive={sensitive || (spoilersAlwaysOn && spoilerText && spoilerText.length > 0)}
             spoiler={spoilersAlwaysOn ? (spoilerText && spoilerText.length > 0) : spoiler}
           />
-          <div className='compose--counter-wrapper'>
+          <div className='character-counter__wrapper'>
             <CharacterCounter text={countText} max={maxChars} />
           </div>
         </div>
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.js b/app/javascript/flavours/glitch/features/compose/components/dropdown.js
index 829f6d00f..6b6d3de94 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown.js
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.js
@@ -16,7 +16,6 @@ import { assignHandlers } from 'flavours/glitch/utils/react_helpers';
 export default class ComposerOptionsDropdown extends React.PureComponent {
 
   static propTypes = {
-    active: PropTypes.bool,
     disabled: PropTypes.bool,
     icon: PropTypes.string,
     items: PropTypes.arrayOf(PropTypes.shape({
@@ -162,7 +161,6 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
   //  Rendering.
   render () {
     const {
-      active,
       disabled,
       title,
       icon,
@@ -174,35 +172,34 @@ export default class ComposerOptionsDropdown extends React.PureComponent {
       closeOnChange,
     } = this.props;
     const { open, placement } = this.state;
-    const computedClass = classNames('composer--options--dropdown', {
-      active,
-      open,
-      top: placement === 'top',
-    });
 
-    //  The result.
+    const active = value && items.findIndex(({ name }) => name === value) === (placement === 'bottom' ? 0 : (items.length - 1));
+
     return (
       <div
-        className={computedClass}
+        className={classNames('privacy-dropdown', placement, { active: open })}
         onKeyDown={this.handleKeyDown}
       >
-        <IconButton
-          active={open || active}
-          className='value'
-          disabled={disabled}
-          icon={icon}
-          inverted
-          onClick={this.handleToggle}
-          onMouseDown={this.handleMouseDown}
-          onKeyDown={this.handleButtonKeyDown}
-          onKeyPress={this.handleKeyPress}
-          size={18}
-          style={{
-            height: null,
-            lineHeight: '27px',
-          }}
-          title={title}
-        />
+        <div className={classNames('privacy-dropdown__value', { active })}>
+          <IconButton
+            active={open}
+            className='privacy-dropdown__value-icon'
+            disabled={disabled}
+            icon={icon}
+            inverted
+            onClick={this.handleToggle}
+            onMouseDown={this.handleMouseDown}
+            onKeyDown={this.handleButtonKeyDown}
+            onKeyPress={this.handleKeyPress}
+            size={18}
+            style={{
+              height: null,
+              lineHeight: '27px',
+            }}
+            title={title}
+          />
+        </div>
+
         <Overlay
           containerPadding={20}
           placement={placement}
diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
index 21835e628..09e8fc35a 100644
--- a/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
+++ b/app/javascript/flavours/glitch/features/compose/components/dropdown_menu.js
@@ -156,7 +156,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
 
     const active = (name === (this.props.value || this.state.value));
 
-    const computedClass = classNames('composer--options--dropdown--content--item', { active });
+    const computedClass = classNames('privacy-dropdown__option', { active });
 
     let contents = this.props.renderItemContents && this.props.renderItemContents(item, i);
 
@@ -165,7 +165,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
         <React.Fragment>
           {icon && <Icon className='icon' fixedWidth id={icon} />}
 
-          <div className='content'>
+          <div className='privacy-dropdown__option__content'>
             <strong>{text}</strong>
             {meta}
           </div>
@@ -218,7 +218,7 @@ export default class ComposerOptionsDropdownContent extends React.PureComponent
           // size will be used to determine the coordinate of the menu by
           // react-overlays
           <div
-            className='composer--options--dropdown--content'
+            className='privacy-dropdown__dropdown'
             ref={this.handleRef}
             role='listbox'
             style={{
diff --git a/app/javascript/flavours/glitch/features/compose/components/options.js b/app/javascript/flavours/glitch/features/compose/components/options.js
index 32a464011..47bd9b056 100644
--- a/app/javascript/flavours/glitch/features/compose/components/options.js
+++ b/app/javascript/flavours/glitch/features/compose/components/options.js
@@ -228,7 +228,7 @@ class ComposerOptions extends ImmutablePureComponent {
 
     //  The result.
     return (
-      <div className='composer--options'>
+      <div className='compose-form__buttons'>
         <input
           accept={acceptContentTypes}
           disabled={disabled || !allowMedia}
@@ -309,7 +309,6 @@ class ComposerOptions extends ImmutablePureComponent {
         )}
         <LanguageDropdown />
         <Dropdown
-          active={advancedOptions && advancedOptions.some(value => !!value)}
           disabled={disabled || isEditing}
           icon='ellipsis-h'
           items={advancedOptions ? [
diff --git a/app/javascript/flavours/glitch/features/compose/components/publisher.js b/app/javascript/flavours/glitch/features/compose/components/publisher.js
index 50baad065..9d53b7ee3 100644
--- a/app/javascript/flavours/glitch/features/compose/components/publisher.js
+++ b/app/javascript/flavours/glitch/features/compose/components/publisher.js
@@ -48,7 +48,7 @@ class Publisher extends ImmutablePureComponent {
     const { countText, disabled, intl, onSecondarySubmit, privacy, sideArm, isEditing } = this.props;
 
     const diff = maxChars - length(countText || '');
-    const computedClass = classNames('composer--publisher', {
+    const computedClass = classNames('compose-form__publish', {
       disabled: disabled,
       over: diff < 0,
     });
@@ -72,22 +72,26 @@ class Publisher extends ImmutablePureComponent {
     return (
       <div className={computedClass}>
         {sideArm && !isEditing && sideArm !== 'none' ? (
+          <div className='compose-form__publish-button-wrapper'>
+            <Button
+              className='side_arm'
+              disabled={disabled}
+              onClick={onSecondarySubmit}
+              style={{ padding: null }}
+              text={<Icon id={privacyIcons[sideArm]} />}
+              title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`}
+            />
+          </div>
+        ) : null}
+        <div className='compose-form__publish-button-wrapper'>
           <Button
-            className='side_arm'
+            className='primary'
+            text={publishText}
+            title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`}
+            onClick={this.handleSubmit}
             disabled={disabled}
-            onClick={onSecondarySubmit}
-            style={{ padding: null }}
-            text={<Icon id={privacyIcons[sideArm]} />}
-            title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`}
           />
-        ) : null}
-        <Button
-          className='primary'
-          text={publishText}
-          title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`}
-          onClick={this.handleSubmit}
-          disabled={disabled}
-        />
+        </div>
       </div>
     );
   };
diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js
index 37ae9cab9..7ad9e2b64 100644
--- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js
+++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.js
@@ -49,10 +49,10 @@ class ReplyIndicator extends ImmutablePureComponent {
 
     //  The result.
     return (
-      <article className='composer--reply'>
-        <header>
+      <article className='reply-indicator'>
+        <header className='reply-indicator__header'>
           <IconButton
-            className='cancel'
+            className='reply-indicator__cancel'
             icon='times'
             onClick={this.handleClick}
             title={intl.formatMessage(messages.cancel)}
@@ -66,7 +66,7 @@ class ReplyIndicator extends ImmutablePureComponent {
           )}
         </header>
         <div
-          className='content translate'
+          className='reply-indicator__content translate'
           dangerouslySetInnerHTML={{ __html: content || '' }}
         />
         {attachments.size > 0 && (
diff --git a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js
index b875fb15e..25c2443b1 100644
--- a/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js
+++ b/app/javascript/flavours/glitch/features/compose/components/textarea_icons.js
@@ -38,7 +38,7 @@ class TextareaIcons extends ImmutablePureComponent {
   render () {
     const { advancedOptions, intl } = this.props;
     return (
-      <div className='composer--textarea--icons'>
+      <div className='compose-form__textarea-icons'>
         {advancedOptions ? iconMap.map(
           ([key, icon, message]) => advancedOptions.get(key) ? (
             <span
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.js b/app/javascript/flavours/glitch/features/compose/components/upload.js
index 32638342c..94ac6c499 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload.js
+++ b/app/javascript/flavours/glitch/features/compose/components/upload.js
@@ -39,17 +39,17 @@ export default class Upload extends ImmutablePureComponent {
     const y = ((focusY / -2) + .5) * 100;
 
     return (
-      <div className='composer--upload_form--item' tabIndex='0' role='button'>
+      <div className='compose-form__upload' tabIndex='0' role='button'>
         <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12, }) }}>
           {({ scale }) => (
-            <div style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
-              <div className='composer--upload_form--actions'>
+            <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
+              <div className='compose-form__upload__actions'>
                 <button className='icon-button' onClick={this.handleUndoClick}><Icon id='times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
                 {!isEditingStatus && (<button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='pencil' /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>)}
               </div>
 
               {(media.get('description') || '').length === 0 && (
-                <div className='composer--upload_form--item__warning'>
+                <div className='compose-form__upload__warning'>
                   <button className='icon-button' onClick={this.handleFocalPointClick}><Icon id='info-circle' /> <FormattedMessage id='upload_form.description_missing' defaultMessage='No description added' /></button>
                 </div>
               )}
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_form.js b/app/javascript/flavours/glitch/features/compose/components/upload_form.js
index 35880ddcc..7ebbac963 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_form.js
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_form.js
@@ -14,11 +14,11 @@ export default class UploadForm extends ImmutablePureComponent {
     const { mediaIds } = this.props;
 
     return (
-      <div className='composer--upload_form'>
+      <div className='compose-form__upload-wrapper'>
         <UploadProgressContainer />
 
         {mediaIds.size > 0 && (
-          <div className='content'>
+          <div className='compose-form__uploads-wrapper'>
             {mediaIds.map(id => (
               <UploadContainer id={id} key={id} />
             ))}
diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js
index c7c33c418..39ac31053 100644
--- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.js
+++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.js
@@ -29,17 +29,18 @@ export default class UploadProgress extends React.PureComponent {
     }
 
     return (
-      <div className='composer--upload_form--progress'>
-        <Icon id='upload' />
+      <div className='upload-progress'>
+        <div className='upload-progress__icon'>
+          <Icon id='upload' />
+        </div>
 
-        <div className='message'>
+        <div className='upload-progress__message'>
           {message}
 
-          <div className='backdrop'>
+          <div className='upload-progress__backdrop'>
             <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
               {({ width }) =>
-                (<div className='tracker' style={{ width: `${width}%` }}
-                />)
+                <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
               }
             </Motion>
           </div>
diff --git a/app/javascript/flavours/glitch/features/compose/components/warning.js b/app/javascript/flavours/glitch/features/compose/components/warning.js
index 4009be8c6..803b7f86a 100644
--- a/app/javascript/flavours/glitch/features/compose/components/warning.js
+++ b/app/javascript/flavours/glitch/features/compose/components/warning.js
@@ -15,7 +15,7 @@ export default class Warning extends React.PureComponent {
     return (
       <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
         {({ opacity, scaleX, scaleY }) => (
-          <div className='composer--warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
+          <div className='compose-form__warning' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
             {message}
           </div>
         )}
diff --git a/app/javascript/flavours/glitch/styles/accessibility.scss b/app/javascript/flavours/glitch/styles/accessibility.scss
index 9b36bfd8d..7bffb2e26 100644
--- a/app/javascript/flavours/glitch/styles/accessibility.scss
+++ b/app/javascript/flavours/glitch/styles/accessibility.scss
@@ -29,22 +29,22 @@ $emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
 
 .hicolor-privacy-icons {
   .status__visibility-icon.fa-globe,
-  .composer--options--dropdown--content--item .fa-globe {
+  .privacy-dropdown__option .fa-globe {
     color: #1976d2;
   }
 
   .status__visibility-icon.fa-unlock,
-  .composer--options--dropdown--content--item .fa-unlock {
+  .privacy-dropdown__option .fa-unlock {
     color: #388e3c;
   }
 
   .status__visibility-icon.fa-lock,
-  .composer--options--dropdown--content--item .fa-lock {
+  .privacy-dropdown__option .fa-lock {
     color: #ffa000;
   }
 
   .status__visibility-icon.fa-envelope,
-  .composer--options--dropdown--content--item .fa-envelope {
+  .privacy-dropdown__option .fa-envelope {
     color: #d32f2f;
   }
 }
diff --git a/app/javascript/flavours/glitch/styles/components/compose_form.scss b/app/javascript/flavours/glitch/styles/components/compose_form.scss
new file mode 100644
index 000000000..72d3aad1d
--- /dev/null
+++ b/app/javascript/flavours/glitch/styles/components/compose_form.scss
@@ -0,0 +1,717 @@
+.compose-form {
+  padding: 10px;
+
+  .emoji-picker-dropdown {
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    ::-webkit-scrollbar-track:hover,
+    ::-webkit-scrollbar-track:active {
+      background-color: rgba($base-overlay-background, 0.3);
+    }
+  }
+}
+
+.character-counter {
+  cursor: default;
+  font-family: $font-sans-serif, sans-serif;
+  font-size: 14px;
+  font-weight: 600;
+  color: $lighter-text-color;
+
+  &.character-counter--over {
+    color: $warning-red;
+  }
+}
+
+.no-reduce-motion .spoiler-input {
+  transition: height 0.4s ease, opacity 0.4s ease;
+}
+
+.spoiler-input {
+  height: 0;
+  transform-origin: bottom;
+  opacity: 0.0;
+
+  &.spoiler-input--visible {
+    height: 36px;
+    margin-bottom: 11px;
+    opacity: 1.0;
+  }
+
+  input {
+    display: block;
+    box-sizing: border-box;
+    margin: 0;
+    border: 0;
+    border-radius: 4px;
+    padding: 10px;
+    width: 100%;
+    outline: 0;
+    color: $inverted-text-color;
+    background: $simple-background-color;
+    font-size: 14px;
+    font-family: inherit;
+    resize: vertical;
+
+    &::placeholder {
+      color: $dark-text-color;
+    }
+
+    &:focus { outline: 0 }
+    @include single-column('screen and (max-width: 630px)') { font-size: 16px }
+  }
+}
+
+.compose-form__warning {
+  color: $inverted-text-color;
+  margin-bottom: 15px;
+  background: $ui-primary-color;
+  box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
+  padding: 8px 10px;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 400;
+
+  a {
+    color: $lighter-text-color;
+    font-weight: 500;
+    text-decoration: underline;
+
+    &:active,
+    &:focus,
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}
+
+.compose-form__sensitive-button {
+  padding: 10px;
+  padding-top: 0;
+
+  font-size: 14px;
+  font-weight: 500;
+
+  &.active {
+    color: $highlight-text-color;
+  }
+
+  input[type=checkbox] {
+    display: none;
+  }
+
+  .checkbox {
+    display: inline-block;
+    position: relative;
+    border: 1px solid $ui-primary-color;
+    box-sizing: border-box;
+    width: 18px;
+    height: 18px;
+    flex: 0 0 auto;
+    margin-left: 5px;
+    margin-right: 10px;
+    top: -1px;
+    border-radius: 4px;
+    vertical-align: middle;
+
+    &.active {
+      border-color: $highlight-text-color;
+      background: $highlight-text-color;
+    }
+  }
+}
+
+.reply-indicator {
+  margin: 0 0 10px;
+  border-radius: 4px;
+  padding: 10px;
+  background: $ui-primary-color;
+  min-height: 23px;
+  overflow-y: auto;
+  flex: 0 2 auto;
+}
+
+.reply-indicator__header {
+  margin-bottom: 5px;
+  overflow: hidden;
+
+  & > .account.small { color: $inverted-text-color; }
+}
+
+.reply-indicator__cancel {
+  float: right;
+  line-height: 24px;
+}
+
+.reply-indicator__content {
+  position: relative;
+  margin: 10px 0;
+  padding: 0 12px;
+  font-size: 14px;
+  line-height: 20px;
+  color: $inverted-text-color;
+  word-wrap: break-word;
+  font-weight: 400;
+  overflow: visible;
+  white-space: pre-wrap;
+  padding-top: 5px;
+  overflow: hidden;
+
+  p, pre, blockquote {
+    margin-bottom: 20px;
+    white-space: pre-wrap;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  h1, h2, h3, h4, h5 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+  }
+
+  h1, h2 {
+    font-weight: 700;
+    font-size: 18px;
+  }
+
+  h2 {
+    font-size: 16px;
+  }
+
+  h3, h4, h5 {
+    font-weight: 500;
+  }
+
+  blockquote {
+    padding-left: 10px;
+    border-left: 3px solid $inverted-text-color;
+    color: $inverted-text-color;
+    white-space: normal;
+
+    p:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  b, strong {
+    font-weight: 700;
+  }
+
+  em, i {
+    font-style: italic;
+  }
+
+  sub {
+    font-size: smaller;
+    vertical-align: sub;
+  }
+
+  sup {
+    font-size: smaller;
+    vertical-align: super;
+  }
+
+  ul, ol {
+    margin-left: 1em;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  a {
+    color: $lighter-text-color;
+    text-decoration: none;
+
+    &:hover { text-decoration: underline }
+
+    &.mention {
+      &:hover {
+        text-decoration: none;
+
+        span { text-decoration: underline }
+      }
+    }
+  }
+
+  .emojione {
+    width: 20px;
+    height: 20px;
+    margin: -5px 0 0;
+  }
+}
+
+.compose-form .compose-form__autosuggest-wrapper {
+  position: relative;
+}
+
+.compose-form .autosuggest-textarea,
+.compose-form .autosuggest-input {
+  position: relative;
+  width: 100%;
+
+  label {
+    .autosuggest-textarea__textarea {
+      display: block;
+      box-sizing: border-box;
+      margin: 0;
+      border: 0;
+      border-radius: 4px 4px 0 0;
+      padding: 10px 32px 0 10px;
+      width: 100%;
+      min-height: 100px;
+      outline: 0;
+      color: $inverted-text-color;
+      background: $simple-background-color;
+      font-size: 14px;
+      font-family: inherit;
+      resize: none;
+      scrollbar-color: initial;
+
+      &::placeholder {
+        color: $dark-text-color;
+      }
+
+      &::-webkit-scrollbar {
+        all: unset;
+      }
+
+      &:focus {
+        outline: 0;
+      }
+
+      @include single-column('screen and (max-width: 630px)') {
+        font-size: 16px;
+      }
+
+      @include limited-single-column('screen and (max-width: 600px)') {
+        height: 100px !important; // prevent auto-resize textarea
+        resize: vertical;
+      }
+    }
+  }
+}
+
+.compose-form__textarea-icons {
+  display: block;
+  position: absolute;
+  top: 29px;
+  right: 5px;
+  bottom: 5px;
+  overflow: hidden;
+
+  & > .textarea_icon {
+    display: block;
+    margin: 2px 0 0 2px;
+    width: 24px;
+    height: 24px;
+    color: $lighter-text-color;
+    font-size: 18px;
+    line-height: 24px;
+    text-align: center;
+    opacity: .8;
+  }
+}
+
+.autosuggest-textarea__suggestions-wrapper {
+  position: relative;
+  height: 0;
+}
+
+.autosuggest-textarea__suggestions {
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  top: 100%;
+  border-radius: 0 0 4px 4px;
+  padding: 6px;
+  width: 100%;
+  color: $inverted-text-color;
+  background: $ui-secondary-color;
+  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
+  font-size: 14px;
+  z-index: 99;
+  display: none;
+}
+
+.autosuggest-textarea__suggestions--visible {
+  display: block;
+}
+
+.autosuggest-textarea__suggestions__item {
+  padding: 10px;
+  cursor: pointer;
+  border-radius: 4px;
+
+  &:hover,
+  &:focus,
+  &:active,
+  &.selected { background: darken($ui-secondary-color, 10%) }
+
+  > .account,
+  > .emoji,
+  > .autosuggest-hashtag {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    line-height: 18px;
+    font-size: 14px;
+  }
+
+  .autosuggest-hashtag {
+    justify-content: space-between;
+
+    &__name {
+      flex: 1 1 auto;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    strong {
+      font-weight: 500;
+    }
+
+    &__uses {
+      flex: 0 0 auto;
+      text-align: right;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  & > .account.small {
+    .display-name {
+      & > span { color: $lighter-text-color }
+    }
+  }
+}
+
+.compose-form__upload-wrapper {
+  overflow: hidden;
+}
+
+.compose-form__uploads-wrapper {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  font-family: inherit;
+  padding: 5px;
+  overflow: hidden;
+}
+
+.compose-form__upload {
+  flex: 1 1 0;
+  margin: 5px;
+  min-width: 40%;
+
+  .compose-form__upload-thumbnail {
+    position: relative;
+    border-radius: 4px;
+    height: 140px;
+    width: 100%;
+    background-color: $base-shadow-color;
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    overflow: hidden;
+
+    & > .close { mix-blend-mode: difference }
+  }
+
+  .icon-button {
+    flex: 0 1 auto;
+    color: $secondary-text-color;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 10px;
+    font-family: inherit;
+
+    &:hover,
+    &:focus,
+    &:active {
+      color: lighten($secondary-text-color, 7%);
+    }
+  }
+
+  &__warning {
+    position: absolute;
+    z-index: 2;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    box-sizing: border-box;
+    background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+  }
+}
+
+.compose-form__upload__actions {
+  background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.upload-progress {
+  display: flex;
+  padding: 10px;
+  color: $darker-text-color;
+  overflow: hidden;
+
+  .fa {
+    font-size: 34px;
+    margin-right: 10px;
+  }
+
+  span {
+    display: block;
+    font-size: 12px;
+    font-weight: 500;
+    text-transform: uppercase;
+  }
+}
+
+.upload-progress__message {
+  flex: 1 1 auto;
+}
+
+.upload-progress__backdrop {
+  position: relative;
+  margin-top: 5px;
+  border-radius: 6px;
+  width: 100%;
+  height: 6px;
+  background: $ui-base-lighter-color;
+}
+
+.upload-progress__tracker {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 6px;
+  border-radius: 6px;
+  background: $ui-highlight-color;
+}
+
+.compose-form__modifiers {
+  color: $inverted-text-color;
+  font-family: inherit;
+  font-size: 14px;
+  background: $simple-background-color;
+}
+
+.compose-form__buttons-wrapper {
+  padding: 10px;
+  background: darken($simple-background-color, 8%);
+  border-radius: 0 0 4px 4px;
+  height: 27px;
+  display: flex;
+  justify-content: space-between;
+  flex: 0 0 auto;
+}
+
+.compose-form__buttons {
+  display: flex;
+  flex: 0 0 auto;
+
+  & .icon-button,
+  & .text-icon-button {
+    display: inline-block;
+    box-sizing: content-box;
+    padding: 0 3px;
+    height: 27px;
+    line-height: 27px;
+    vertical-align: bottom;
+  }
+
+  & > hr {
+    display: inline-block;
+    margin: 0 3px;
+    border-width: 0 0 0 1px;
+    border-style: none none none solid;
+    border-color: transparent transparent transparent darken($simple-background-color, 24%);
+    padding: 0;
+    width: 0;
+    height: 27px;
+    background: transparent;
+  }
+}
+
+.character-counter__wrapper {
+  align-self: center;
+  margin-right: 4px;
+}
+
+.privacy-dropdown.active {
+  .privacy-dropdown__value {
+    background: $simple-background-color;
+    border-radius: 4px 4px 0 0;
+    box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
+
+    .icon-button {
+      transition: none;
+    }
+
+    &.active {
+      background: $ui-highlight-color;
+
+      .icon-button {
+        color: $primary-text-color;
+      }
+    }
+  }
+
+  &.top .privacy-dropdown__value {
+    border-radius: 0 0 4px 4px;
+  }
+
+  .privacy-dropdown__dropdown {
+    display: block;
+    box-shadow: 2px 4px 6px rgba($base-shadow-color, 0.1);
+  }
+}
+
+.privacy-dropdown__dropdown {
+  position: absolute;
+  border-radius: 4px;
+  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+  background: $simple-background-color;
+  overflow: hidden;
+  transform-origin: 50% 0;
+}
+
+.privacy-dropdown__option {
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  color: $inverted-text-color;
+  cursor: pointer;
+
+  .privacy-dropdown__option__content {
+    flex: 1 1 auto;
+    color: $lighter-text-color;
+
+    &:not(:first-child) { margin-left: 10px }
+
+    strong {
+      display: block;
+      color: $inverted-text-color;
+      font-weight: 500;
+    }
+  }
+
+  &:hover,
+  &.active {
+    background: $ui-highlight-color;
+    color: $primary-text-color;
+
+    .privacy-dropdown__option__content {
+      color: $primary-text-color;
+
+      strong { color: $primary-text-color }
+    }
+  }
+
+  &.active:hover { background: lighten($ui-highlight-color, 4%) }
+}
+
+.compose-form__publish {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+  flex: 0 0 auto;
+  column-gap: 5px;
+
+  .compose-form__publish-button-wrapper {
+    overflow: hidden;
+    padding-top: 10px;
+
+    button {
+      padding: 7px 10px;
+      text-align: center;
+    }
+
+    & > .side_arm {
+      width: 36px;
+    }
+  }
+}
+
+.language-dropdown {
+  &__dropdown {
+    position: absolute;
+    background: $simple-background-color;
+    box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
+    border-radius: 4px;
+    overflow: hidden;
+    z-index: 2;
+
+    &.top {
+      transform-origin: 50% 100%;
+    }
+
+    &.bottom {
+      transform-origin: 50% 0;
+    }
+
+    .emoji-mart-search {
+      padding-right: 10px;
+    }
+
+    .emoji-mart-search-icon {
+      right: 10px + 5px;
+    }
+
+    .emoji-mart-scroll {
+      padding: 0 10px 10px;
+    }
+
+    &__results {
+      &__item {
+        cursor: pointer;
+        color: $inverted-text-color;
+        font-weight: 500;
+        padding: 10px;
+        border-radius: 4px;
+
+        &:focus,
+        &:active,
+        &:hover {
+          background: $ui-secondary-color;
+        }
+
+        &__common-name {
+          color: $darker-text-color;
+        }
+
+        &.active {
+          background: $ui-highlight-color;
+          color: $primary-text-color;
+          outline: 0;
+
+          .language-dropdown__dropdown__results__item__common-name {
+            color: $secondary-text-color;
+          }
+
+          &:hover {
+            background: lighten($ui-highlight-color, 4%);
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/app/javascript/flavours/glitch/styles/components/composer.scss b/app/javascript/flavours/glitch/styles/components/composer.scss
deleted file mode 100644
index da086833c..000000000
--- a/app/javascript/flavours/glitch/styles/components/composer.scss
+++ /dev/null
@@ -1,712 +0,0 @@
-.composer {
-  padding: 10px;
-
-  .emoji-picker-dropdown {
-    position: absolute;
-    top: 0;
-    right: 0;
-
-    ::-webkit-scrollbar-track:hover,
-    ::-webkit-scrollbar-track:active {
-      background-color: rgba($base-overlay-background, 0.3);
-    }
-  }
-}
-
-.character-counter {
-  cursor: default;
-  font-family: $font-sans-serif, sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  color: $lighter-text-color;
-
-  &.character-counter--over {
-    color: $warning-red;
-  }
-}
-
-.no-reduce-motion .composer--spoiler {
-  transition: height 0.4s ease, opacity 0.4s ease;
-}
-
-.composer--spoiler {
-  height: 0;
-  transform-origin: bottom;
-  opacity: 0.0;
-
-  &.composer--spoiler--visible {
-    height: 36px;
-    margin-bottom: 11px;
-    opacity: 1.0;
-  }
-
-  input {
-    display: block;
-    box-sizing: border-box;
-    margin: 0;
-    border: 0;
-    border-radius: 4px;
-    padding: 10px;
-    width: 100%;
-    outline: 0;
-    color: $inverted-text-color;
-    background: $simple-background-color;
-    font-size: 14px;
-    font-family: inherit;
-    resize: vertical;
-
-    &::placeholder {
-      color: $dark-text-color;
-    }
-
-    &:focus { outline: 0 }
-    @include single-column('screen and (max-width: 630px)') { font-size: 16px }
-  }
-}
-
-.composer--warning {
-  color: $inverted-text-color;
-  margin-bottom: 15px;
-  background: $ui-primary-color;
-  box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3);
-  padding: 8px 10px;
-  border-radius: 4px;
-  font-size: 13px;
-  font-weight: 400;
-
-  a {
-    color: $lighter-text-color;
-    font-weight: 500;
-    text-decoration: underline;
-
-    &:active,
-    &:focus,
-    &:hover {
-      text-decoration: none;
-    }
-  }
-}
-
-.compose-form__sensitive-button {
-  padding: 10px;
-  padding-top: 0;
-
-  font-size: 14px;
-  font-weight: 500;
-
-  &.active {
-    color: $highlight-text-color;
-  }
-
-  input[type=checkbox] {
-    display: none;
-  }
-
-  .checkbox {
-    display: inline-block;
-    position: relative;
-    border: 1px solid $ui-primary-color;
-    box-sizing: border-box;
-    width: 18px;
-    height: 18px;
-    flex: 0 0 auto;
-    margin-left: 5px;
-    margin-right: 10px;
-    top: -1px;
-    border-radius: 4px;
-    vertical-align: middle;
-
-    &.active {
-      border-color: $highlight-text-color;
-      background: $highlight-text-color;
-    }
-  }
-}
-
-.composer--reply {
-  margin: 0 0 10px;
-  border-radius: 4px;
-  padding: 10px;
-  background: $ui-primary-color;
-  min-height: 23px;
-  overflow-y: auto;
-  flex: 0 2 auto;
-
-  & > header {
-    margin-bottom: 5px;
-    overflow: hidden;
-
-    & > .account.small { color: $inverted-text-color; }
-
-    & > .cancel {
-      float: right;
-      line-height: 24px;
-    }
-  }
-
-  & > .content {
-    position: relative;
-    margin: 10px 0;
-    padding: 0 12px;
-    font-size: 14px;
-    line-height: 20px;
-    color: $inverted-text-color;
-    word-wrap: break-word;
-    font-weight: 400;
-    overflow: visible;
-    white-space: pre-wrap;
-    padding-top: 5px;
-    overflow: hidden;
-
-    p, pre, blockquote {
-      margin-bottom: 20px;
-      white-space: pre-wrap;
-
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    h1, h2, h3, h4, h5 {
-      margin-top: 20px;
-      margin-bottom: 20px;
-    }
-
-    h1, h2 {
-      font-weight: 700;
-      font-size: 18px;
-    }
-
-    h2 {
-      font-size: 16px;
-    }
-
-    h3, h4, h5 {
-      font-weight: 500;
-    }
-
-    blockquote {
-      padding-left: 10px;
-      border-left: 3px solid $inverted-text-color;
-      color: $inverted-text-color;
-      white-space: normal;
-
-      p:last-child {
-        margin-bottom: 0;
-      }
-    }
-
-    b, strong {
-      font-weight: 700;
-    }
-
-    em, i {
-      font-style: italic;
-    }
-
-    sub {
-      font-size: smaller;
-      vertical-align: sub;
-    }
-
-    sup {
-      font-size: smaller;
-      vertical-align: super;
-    }
-
-    ul, ol {
-      margin-left: 1em;
-
-      p {
-        margin: 0;
-      }
-    }
-
-    ul {
-      list-style-type: disc;
-    }
-
-    ol {
-      list-style-type: decimal;
-    }
-
-    a {
-      color: $lighter-text-color;
-      text-decoration: none;
-
-      &:hover { text-decoration: underline }
-
-      &.mention {
-        &:hover {
-          text-decoration: none;
-
-          span { text-decoration: underline }
-        }
-      }
-    }
-  }
-
-  .emojione {
-    width: 20px;
-    height: 20px;
-    margin: -5px 0 0;
-  }
-}
-
-.compose-form__autosuggest-wrapper,
-.autosuggest-input {
-  position: relative;
-  width: 100%;
-
-  label {
-    .autosuggest-textarea__textarea {
-      display: block;
-      box-sizing: border-box;
-      margin: 0;
-      border: 0;
-      border-radius: 4px 4px 0 0;
-      padding: 10px 32px 0 10px;
-      width: 100%;
-      min-height: 100px;
-      outline: 0;
-      color: $inverted-text-color;
-      background: $simple-background-color;
-      font-size: 14px;
-      font-family: inherit;
-      resize: none;
-      scrollbar-color: initial;
-
-      &::placeholder {
-        color: $dark-text-color;
-      }
-
-      &::-webkit-scrollbar {
-        all: unset;
-      }
-
-      &:disabled {
-        background: $ui-secondary-color;
-      }
-
-      &:focus {
-        outline: 0;
-      }
-
-      @include single-column('screen and (max-width: 630px)') {
-        font-size: 16px;
-      }
-
-      @include limited-single-column('screen and (max-width: 600px)') {
-        height: 100px !important; // prevent auto-resize textarea
-        resize: vertical;
-      }
-    }
-  }
-}
-
-.composer--textarea--icons {
-  display: block;
-  position: absolute;
-  top: 29px;
-  right: 5px;
-  bottom: 5px;
-  overflow: hidden;
-
-  & > .textarea_icon {
-    display: block;
-    margin: 2px 0 0 2px;
-    width: 24px;
-    height: 24px;
-    color: $lighter-text-color;
-    font-size: 18px;
-    line-height: 24px;
-    text-align: center;
-    opacity: .8;
-  }
-}
-
-.autosuggest-textarea__suggestions-wrapper {
-  position: relative;
-  height: 0;
-}
-
-.autosuggest-textarea__suggestions {
-  display: block;
-  position: absolute;
-  box-sizing: border-box;
-  top: 100%;
-  border-radius: 0 0 4px 4px;
-  padding: 6px;
-  width: 100%;
-  color: $inverted-text-color;
-  background: $ui-secondary-color;
-  box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4);
-  font-size: 14px;
-  z-index: 99;
-  display: none;
-}
-
-.autosuggest-textarea__suggestions--visible {
-  display: block;
-}
-
-.autosuggest-textarea__suggestions__item {
-  padding: 10px;
-  cursor: pointer;
-  border-radius: 4px;
-
-  &:hover,
-  &:focus,
-  &:active,
-  &.selected { background: darken($ui-secondary-color, 10%) }
-
-  > .account,
-  > .emoji,
-  > .autosuggest-hashtag {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    line-height: 18px;
-    font-size: 14px;
-  }
-
-  .autosuggest-hashtag {
-    justify-content: space-between;
-
-    &__name {
-      flex: 1 1 auto;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    strong {
-      font-weight: 500;
-    }
-
-    &__uses {
-      flex: 0 0 auto;
-      text-align: right;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-  }
-
-  & > .account.small {
-    .display-name {
-      & > span { color: $lighter-text-color }
-    }
-  }
-}
-
-.composer--upload_form {
-  overflow: hidden;
-
-  & > .content {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    font-family: inherit;
-    padding: 5px;
-    overflow: hidden;
-  }
-}
-
-.composer--upload_form--item {
-  flex: 1 1 0;
-  margin: 5px;
-  min-width: 40%;
-
-  & > div {
-    position: relative;
-    border-radius: 4px;
-    height: 140px;
-    width: 100%;
-    background-color: $base-shadow-color;
-    background-position: center;
-    background-size: cover;
-    background-repeat: no-repeat;
-    overflow: hidden;
-
-    & > .close { mix-blend-mode: difference }
-  }
-
-  .icon-button {
-    flex: 0 1 auto;
-    color: $secondary-text-color;
-    font-size: 14px;
-    font-weight: 500;
-    padding: 10px;
-    font-family: inherit;
-
-    &:hover,
-    &:focus,
-    &:active {
-      color: lighten($secondary-text-color, 7%);
-    }
-  }
-
-  &__warning {
-    position: absolute;
-    z-index: 2;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    box-sizing: border-box;
-    background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-  }
-}
-
-.composer--upload_form--actions {
-  background: linear-gradient(180deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent);
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-
-.composer--upload_form--progress {
-  display: flex;
-  padding: 10px;
-  color: $darker-text-color;
-  overflow: hidden;
-
-  & > .fa {
-    font-size: 34px;
-    margin-right: 10px;
-  }
-
-  & > .message {
-    flex: 1 1 auto;
-
-    & > span {
-      display: block;
-      font-size: 12px;
-      font-weight: 500;
-      text-transform: uppercase;
-    }
-
-    & > .backdrop {
-      position: relative;
-      margin-top: 5px;
-      border-radius: 6px;
-      width: 100%;
-      height: 6px;
-      background: $ui-base-lighter-color;
-
-      & > .tracker {
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 6px;
-        border-radius: 6px;
-        background: $ui-highlight-color;
-      }
-    }
-  }
-}
-
-.compose-form__modifiers {
-  color: $inverted-text-color;
-  font-family: inherit;
-  font-size: 14px;
-  background: $simple-background-color;
-}
-
-.composer--options-wrapper {
-  padding: 10px;
-  background: darken($simple-background-color, 8%);
-  border-radius: 0 0 4px 4px;
-  height: 27px;
-  display: flex;
-  justify-content: space-between;
-  flex: 0 0 auto;
-}
-
-.composer--options {
-  display: flex;
-  flex: 0 0 auto;
-
-  & .icon-button,
-  & .text-icon-button {
-    display: inline-block;
-    box-sizing: content-box;
-    padding: 0 3px;
-    height: 27px;
-    line-height: 27px;
-    vertical-align: bottom;
-  }
-
-  & > hr {
-    display: inline-block;
-    margin: 0 3px;
-    border-width: 0 0 0 1px;
-    border-style: none none none solid;
-    border-color: transparent transparent transparent darken($simple-background-color, 24%);
-    padding: 0;
-    width: 0;
-    height: 27px;
-    background: transparent;
-  }
-}
-
-.compose--counter-wrapper {
-  align-self: center;
-  margin-right: 4px;
-}
-
-.composer--options--dropdown {
-  &.open {
-    & > .value {
-      border-radius: 4px 4px 0 0;
-      box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-      color: $primary-text-color;
-      background: $ui-highlight-color;
-      transition: none;
-    }
-    &.top {
-      & > .value {
-        border-radius: 0 0 4px 4px;
-        box-shadow: 0 4px 4px rgba($base-shadow-color, 0.1);
-      }
-    }
-  }
-}
-
-.composer--options--dropdown--content {
-  position: absolute;
-  border-radius: 4px;
-  box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-  background: $simple-background-color;
-  overflow: hidden;
-  transform-origin: 50% 0;
-}
-
-.composer--options--dropdown--content--item {
-  display: flex;
-  align-items: center;
-  padding: 10px;
-  color: $inverted-text-color;
-  cursor: pointer;
-
-  & > .content {
-    flex: 1 1 auto;
-    color: $lighter-text-color;
-
-    &:not(:first-child) { margin-left: 10px }
-
-    strong {
-      display: block;
-      color: $inverted-text-color;
-      font-weight: 500;
-    }
-  }
-
-  &:hover,
-  &.active {
-    background: $ui-highlight-color;
-    color: $primary-text-color;
-
-    & > .content {
-      color: $primary-text-color;
-
-      strong { color: $primary-text-color }
-    }
-  }
-
-  &.active:hover { background: lighten($ui-highlight-color, 4%) }
-}
-
-.composer--publisher {
-  padding-top: 10px;
-  text-align: right;
-  white-space: nowrap;
-  overflow: hidden;
-  justify-content: flex-end;
-  flex: 0 0 auto;
-
-  & > .primary {
-    display: inline-block;
-    margin: 0;
-    padding: 7px 10px;
-    text-align: center;
-  }
-
-  & > .side_arm {
-    display: inline-block;
-    margin: 0 5px;
-    padding: 7px 0;
-    width: 36px;
-    text-align: center;
-  }
-
-  &.over {
-    & > .count { color: $warning-red }
-  }
-}
-
-.language-dropdown {
-  &__dropdown {
-    position: absolute;
-    background: $simple-background-color;
-    box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4);
-    border-radius: 4px;
-    overflow: hidden;
-    z-index: 2;
-
-    &.top {
-      transform-origin: 50% 100%;
-    }
-
-    &.bottom {
-      transform-origin: 50% 0;
-    }
-
-    .emoji-mart-search {
-      padding-right: 10px;
-    }
-
-    .emoji-mart-search-icon {
-      right: 10px + 5px;
-    }
-
-    .emoji-mart-scroll {
-      padding: 0 10px 10px;
-    }
-
-    &__results {
-      &__item {
-        cursor: pointer;
-        color: $inverted-text-color;
-        font-weight: 500;
-        padding: 10px;
-        border-radius: 4px;
-
-        &:focus,
-        &:active,
-        &:hover {
-          background: $ui-secondary-color;
-        }
-
-        &__common-name {
-          color: $darker-text-color;
-        }
-
-        &.active {
-          background: $ui-highlight-color;
-          color: $primary-text-color;
-          outline: 0;
-
-          .language-dropdown__dropdown__results__item__common-name {
-            color: $secondary-text-color;
-          }
-
-          &:hover {
-            background: lighten($ui-highlight-color, 4%);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/app/javascript/flavours/glitch/styles/components/index.scss b/app/javascript/flavours/glitch/styles/components/index.scss
index c3276b035..b00038afd 100644
--- a/app/javascript/flavours/glitch/styles/components/index.scss
+++ b/app/javascript/flavours/glitch/styles/components/index.scss
@@ -1738,7 +1738,7 @@ noscript {
 @import 'domains';
 @import 'status';
 @import 'modal';
-@import 'composer';
+@import 'compose_form';
 @import 'columns';
 @import 'regeneration_indicator';
 @import 'directory';
diff --git a/app/javascript/flavours/glitch/styles/components/modal.scss b/app/javascript/flavours/glitch/styles/components/modal.scss
index cd96f83d6..711d4d5b2 100644
--- a/app/javascript/flavours/glitch/styles/components/modal.scss
+++ b/app/javascript/flavours/glitch/styles/components/modal.scss
@@ -1290,11 +1290,11 @@
   }
 }
 
-.modal-root__container .composer--options--dropdown {
+.modal-root__container .privacy-dropdown {
   flex-grow: 0;
 }
 
-.modal-root__container .composer--options--dropdown--content {
+.modal-root__container .privacy-dropdown__dropdown {
   pointer-events: auto;
   z-index: 9999;
 }
diff --git a/app/javascript/flavours/glitch/styles/components/single_column.scss b/app/javascript/flavours/glitch/styles/components/single_column.scss
index 1f1d7d68d..d91306151 100644
--- a/app/javascript/flavours/glitch/styles/components/single_column.scss
+++ b/app/javascript/flavours/glitch/styles/components/single_column.scss
@@ -41,7 +41,7 @@
     flex: 0 1 48px;
   }
 
-  .composer {
+  .compose-form {
     flex: 1;
     overflow-y: hidden;
     display: flex;
@@ -59,10 +59,6 @@
   .autosuggest-textarea__textarea {
     overflow-y: hidden;
   }
-
-  .compose-form__upload-thumbnail {
-    height: 80px;
-  }
 }
 
 .navigation-panel {
diff --git a/app/javascript/flavours/glitch/styles/containers.scss b/app/javascript/flavours/glitch/styles/containers.scss
index 75472646e..a3aee7eef 100644
--- a/app/javascript/flavours/glitch/styles/containers.scss
+++ b/app/javascript/flavours/glitch/styles/containers.scss
@@ -37,7 +37,7 @@
 }
 
 .compose-standalone {
-  .composer {
+  .compose-form {
     width: 400px;
     margin: 0 auto;
     padding: 20px 0;
diff --git a/app/javascript/flavours/glitch/styles/rtl.scss b/app/javascript/flavours/glitch/styles/rtl.scss
index 31d1de376..2419691cd 100644
--- a/app/javascript/flavours/glitch/styles/rtl.scss
+++ b/app/javascript/flavours/glitch/styles/rtl.scss
@@ -36,15 +36,11 @@ body.rtl {
     margin-left: 5px;
   }
 
-  .composer .compose--counter-wrapper {
+  .compose-form .character-counter__wrapper {
     margin-right: 0;
     margin-left: 4px;
   }
 
-  .composer--publisher {
-    text-align: left;
-  }
-
   .boost-modal__status-time,
   .favourite-modal__status-time {
     float: left;
-- 
cgit