From 806e3108cb7c24a672f2d6b44d9efe4e21f41a41 Mon Sep 17 00:00:00 2001
From: brecert <me@bree.dev>
Date: Sat, 11 Sep 2021 11:53:50 -0400
Subject: [PATCH] Improve reply mention styling

- [#220] reply mention now uses translations
- reply mention styling improved
  - `@` fits better
  - `min-width: 6ch` is used to remove shifting between `on` and `off` lengths, mostly for the english `on/off` but could be modified to work with any language in the future.
---
 src/components/common/messaging/bars/ReplyBar.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/common/messaging/bars/ReplyBar.tsx b/src/components/common/messaging/bars/ReplyBar.tsx
index 2f0fc52e..461c5eb2 100644
--- a/src/components/common/messaging/bars/ReplyBar.tsx
+++ b/src/components/common/messaging/bars/ReplyBar.tsx
@@ -47,11 +47,13 @@ const Base = styled.div`
     }
 
     .toggle {
-        gap: 4px;
+        gap: 2px;
         display: flex;
         font-size: 12px;
         align-items: center;
         font-weight: 600;
+        text-transform: uppercase;
+        min-width: 6ch;
     }
 
     .username {
@@ -150,7 +152,7 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                     </>
                                 )}
                                 {message.author_id ===
-                                "00000000000000000000000000" ? (
+                                    "00000000000000000000000000" ? (
                                     <SystemMessage message={message} hideInfo />
                                 ) : (
                                     <Markdown
@@ -188,8 +190,8 @@ export default observer(({ channel, replies, setReplies }: Props) => {
                                         });
                                     }}>
                                     <span class="toggle">
-                                        <At size={16} />{" "}
-                                        {reply.mention ? "ON" : "OFF"}
+                                        <At size={15} />
+                                        <Text id={reply.mention ? 'general.on' : 'general.off'} />
                                     </span>
                                 </IconButton>
                             )}