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.
This commit is contained in:
brecert 2021-09-11 11:53:50 -04:00
parent a4138b52b0
commit 806e3108cb
No known key found for this signature in database
GPG key ID: 1B2E56B9EC985B96

View file

@ -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 {
@ -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>
)}