diff --git a/external/lang b/external/lang index 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b..e0c436c957206aecd416981ba0050f88aa32259e 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 2a9ef2c8025dd71a20fddca7c94cb7af30978c4b +Subproject commit e0c436c957206aecd416981ba0050f88aa32259e diff --git a/src/components/common/messaging/MessageBox.tsx b/src/components/common/messaging/MessageBox.tsx index d6cad740a97c5381077dd4de592e234c769d2abd..e3a11e28c5016bd5cc4746175caa483edfa0c170 100644 --- a/src/components/common/messaging/MessageBox.tsx +++ b/src/components/common/messaging/MessageBox.tsx @@ -1,5 +1,4 @@ -import { ShieldX } from "@styled-icons/boxicons-regular"; -import { Send } from "@styled-icons/boxicons-solid"; +import { Send, HappyAlt, ShieldX } from "@styled-icons/boxicons-solid"; import Axios, { CancelTokenSource } from "axios"; import { Channel } from "revolt.js"; import { ChannelPermission } from "revolt.js/dist/api/permissions"; @@ -40,6 +39,7 @@ import AutoComplete, { useAutoComplete } from "../AutoComplete"; import { PermissionTooltip } from "../Tooltip"; import FilePreview from "./bars/FilePreview"; import ReplyBar from "./bars/ReplyBar"; +import { Styleshare } from "@styled-icons/simple-icons"; type Props = { channel: Channel; @@ -65,29 +65,45 @@ const Base = styled.div` textarea { font-size: var(--text-size); background: transparent; + + &::placeholder { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } } `; const Blocked = styled.div` display: flex; align-items: center; - padding: 14px 0; user-select: none; font-size: var(--text-size); color: var(--tertiary-foreground); + .text { + padding: 14px 14px 14px 0; + } + svg { flex-shrink: 0; - margin-inline-end: 10px; } `; const Action = styled.div` - display: grid; + display: flex; place-items: center; > div { - padding: 10px 12px; + height: 48px; + width: 48px; + padding: 12px; + } + + .mobile { + @media (pointer: fine) { + display: none; + } } `; @@ -112,12 +128,16 @@ export default function MessageBox({ channel }: Props) { return ( <Base> <Blocked> + <Action> <PermissionTooltip permission="SendMessages" placement="top"> <ShieldX size={22} /> </PermissionTooltip> - <Text id="app.main.channel.misc.no_sending" /> + </Action> + <div className="text"> + <Text id="app.main.channel.misc.no_sending" /> + </div> </Blocked> </Base> ); @@ -477,13 +497,14 @@ export default function MessageBox({ channel }: Props) { onFocus={onFocus} onBlur={onBlur} /> - {isTouchscreenDevice && ( - <Action> - <IconButton onClick={send}> - <Send size={20} /> - </IconButton> - </Action> - )} + <Action> + {/*<IconButton onClick={emojiPicker}> + <HappyAlt size={20} /> + </IconButton>*/} + <IconButton className="mobile" onClick={send}> + <Send size={20} /> + </IconButton> + </Action> </Base> </> ); diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index a28bdb9cd72bc61cf7b62f354f70781c15aa462a..a28237e09407eb59fbde0c2e301fe113b5a27cf7 100644 --- a/src/pages/settings/Settings.module.scss +++ b/src/pages/settings/Settings.module.scss @@ -189,11 +189,15 @@ width: 40px; border: 3px solid var(--tertiary-background); cursor: pointer; - + svg { color: var(--secondary-foreground); } + &:hover { + background: var(--secondary-header); + } + &:active { transform: translateY(2px); } diff --git a/src/pages/settings/panes/Account.tsx b/src/pages/settings/panes/Account.tsx index 472fb05d393b3d8dfed6b159cb47f96e89ce2354..b66773191012a9c892d35decf1a178d7c06c3952 100644 --- a/src/pages/settings/panes/Account.tsx +++ b/src/pages/settings/panes/Account.tsx @@ -1,5 +1,5 @@ import { At } from "@styled-icons/boxicons-regular"; -import { Envelope, Key } from "@styled-icons/boxicons-solid"; +import { Envelope, Key, HelpCircle } from "@styled-icons/boxicons-solid"; import { Link, useHistory } from "react-router-dom"; import { Users } from "revolt.js/dist/api/objects"; @@ -60,7 +60,10 @@ export function Account() { size={72} onClick={() => switchPage("profile")} /> - <div className={styles.username}>@{user.username}</div> + <div className={styles.userDetail}> + <div className={styles.username}>@{user.username}</div> + <div className={styles.userid}><HelpCircle size={16} />{user._id}</div> + </div> </div> <div className={styles.details}> {( diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 763210f9fd29dc52d542daad907f67aa72a86de3..3dfe7a904a5fab02067b5115c1c869140429e0a5 100644 --- a/src/pages/settings/panes/Panes.module.scss +++ b/src/pages/settings/panes/Panes.module.scss @@ -21,6 +21,15 @@ font-size: 24px; font-weight: 600; } + + .userid { + font-size: .875rem; + font-weight: 600; + display: flex; + align-items: center; + gap: 4px; + color: var(--tertiary-foreground); + } } .details { diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 21a9b500c3845e34fd2213ec722415c0c04c91af..73530ade6421f979f74c216eb0daba23b85af6bc 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -10,7 +10,7 @@ --textarea-padding: 16px; --textarea-line-height: 20px; - --message-box-padding: 12px; + --message-box-padding: 14px 14px 14px 0; --bottom-navigation-height: 50px; }