diff --git a/external/lang b/external/lang index 2a9ef2c8..e0c436c9 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 d6cad740..e3a11e28 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 ( + - + +
+ +
); @@ -477,13 +497,14 @@ export default function MessageBox({ channel }: Props) { onFocus={onFocus} onBlur={onBlur} /> - {isTouchscreenDevice && ( - - - - - - )} + + {/* + + */} + + + + ); diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss index a28bdb9c..a28237e0 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 472fb05d..b6677319 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")} /> -
@{user.username}
+
+
@{user.username}
+
{user._id}
+
{( diff --git a/src/pages/settings/panes/Panes.module.scss b/src/pages/settings/panes/Panes.module.scss index 763210f9..3dfe7a90 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 21a9b500..73530ade 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; }