From eda0db294dbc1e9e79530bacb3898c418b7538c2 Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Thu, 8 May 2025 12:17:42 -0700
Subject: [PATCH] UX: Improve styles for add translation composer view (#158)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## :mag: Overview
This update ensures styles in composer look appropriate for the new
composer add translation view (recently added here:
https://github.com/discourse/discourse/pull/32564)


## 📷 Screenshots

### ← Before
<img width="1473" alt="Screenshot 2025-05-08 at 11 58 54"
src="https://github.com/user-attachments/assets/76fec3f6-1cbf-4b57-a765-c2cf003ba177"
/>

### → After
<img width="1476" alt="Screenshot 2025-05-08 at 11 58 42"
src="https://github.com/user-attachments/assets/f17e8dc5-3230-4a1f-9072-28a3c7415958"
/>
---
 scss/composer.scss | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/scss/composer.scss b/scss/composer.scss
index 281bde3..0b62ad1 100644
--- a/scss/composer.scss
+++ b/scss/composer.scss
@@ -91,3 +91,27 @@
     border-radius: var(--d-border-radius);
   }
 }
+
+.discourse-no-touch .translation-selector-dropdown {
+  .select-kit-header.btn-default {
+    background: var(--background-color);
+  }
+}
+
+#reply-control.composer-action-add_translation {
+  .d-editor-preview .d-editor-translation-preview-wrapper {
+    border-color: var(--d-sidebar-border-color);
+  }
+
+  .d-editor-preview .d-editor-translation-preview-wrapper__header {
+    top: 6.5rem;
+    padding: 0.25rem 0.75rem;
+    background: var(--background-color);
+    color: var(--accent-color);
+    border-radius: var(--d-border-radius-large);
+  }
+
+  .topic-title-translator input {
+    width: 47.25vw;
+  }
+}