cswimr/revite
1
0
Fork 0
mirror of https://github.com/revoltchat/revite.git synced 2024-12-26 07:22:10 -05:00
Code Issues Projects Releases Packages Wiki Activity

Improve reply mention styling

Browse source 
- [#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
1 changed files with 6 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/common/messaging/bars/ReplyBar.tsx
View file

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