Fix: Message copy brackets and icon changes

external/lang

@@ -1 +1 @@
-Subproject commit e200511dcb2c655e6ee89580fee9ef96c9f1f387
+Subproject commit dad00381aaaafc1ab829816dffc31f0f37ee56a9

src/components/common/messaging/Message.tsx

@@ -55,9 +55,7 @@ function Message({ attachContext, message, contrast, content: replacement, head:
                 </MessageInfo>
                 <MessageContent>
                     { head && <span className="detail">
-                        <span className="author">
+                        <Username className="author" user={user} onContextMenu={userContext} onClick={openProfile} />
-                            <Username user={user} onContextMenu={userContext} onClick={openProfile} />
-                        </span>
                         <MessageDetail message={message} position="top" />
                     </span> }
                     { replacement ?? <Markdown content={content} /> }

src/components/common/messaging/MessageBase.tsx

@@ -61,6 +61,7 @@ export default styled.div<BaseMessageProps>`
 
     .author {
         cursor: pointer;
+        font-weight: 600 !important;
         
         &:hover {
             text-decoration: underline;
@@ -68,9 +69,6 @@ export default styled.div<BaseMessageProps>`
     }
     
     .copy {
-        width: 0;
-        height: 0;
-        opacity: 0;
         display: block;
         overflow: hidden;
     }
@@ -92,13 +90,23 @@ export const MessageInfo = styled.div`
     flex-direction: row;
     justify-content: center;
 
-    ::selection {
+    .copyBracket {
-        background-color: transparent;
+        opacity: 0;
-        color: var(--tertiary-foreground);
+        position: absolute;
+    }
+
+    .copyTime {
+        opacity: 0;
+        position: absolute;
     }
 
     svg {
+        user-select: none;
         cursor: pointer;
+
+        &:active {
+            transform: translateY(1px);
+        }
     }
 
     time {
@@ -106,11 +114,19 @@ export const MessageInfo = styled.div`
     }
 
     time, .edited {
+        margin-top: 1px;
         cursor: default;
         display: inline;
         font-size: 10px;
         color: var(--tertiary-foreground);
     }
+
+    time, .edited > div {
+        &::selection {
+            background-color: transparent;
+            color: var(--tertiary-foreground);
+        }
+    }
 `;
 
 export const MessageContent = styled.div`
@@ -118,7 +134,7 @@ export const MessageContent = styled.div`
     flex-grow: 1;
     display: flex;
     overflow: hidden;
-    font-size: 0.875rem;
+    font-size: .875rem;
     flex-direction: column;
     justify-content: center;
 `;
@@ -135,9 +151,11 @@ export function MessageDetail({ message, position }: { message: MessageObject, p
         if (message.edited) {
             return (
                 <>
-                    <span className="copy">
+                    <time className="copyTime">
-                        [<time>{dayjs(decodeTime(message._id)).format("H:mm")}</time>]
+                        <i className="copyBracket">[</i>
-                    </span>
+                        {dayjs(decodeTime(message._id)).format("H:mm")}
+                        <i className="copyBracket">]</i>
+                    </time>
                     <span className="edited">
                         <Tooltip content={dayjs(message.edited).format("LLLL")}>
                             <Text id="app.main.channel.edited" />
@@ -149,9 +167,9 @@ export function MessageDetail({ message, position }: { message: MessageObject, p
             return (
                 <>
                     <time>
-                        <i className="copy">[</i>
+                        <i className="copyBracket">[</i>
                         { dayjs(decodeTime(message._id)).format("H:mm") }
-                        <i className="copy">]</i>
+                        <i className="copyBracket">]</i>
                     </time>
                 </>
             )

src/components/common/messaging/MessageBox.tsx

@@ -5,7 +5,8 @@ import { Channel } from "revolt.js";
 import styled from "styled-components";
 import { defer } from "../../../lib/defer";
 import IconButton from "../../ui/IconButton";
-import { Send, X } from '@styled-icons/boxicons-regular';
+import { X } from '@styled-icons/boxicons-regular';
+import { Send } from '@styled-icons/boxicons-solid';
 import { debounce } from "../../../lib/debounce";
 import Axios, { CancelTokenSource } from "axios";
 import { useTranslation } from "../../../lib/i18n";

src/components/common/user/UserShort.tsx

@@ -3,7 +3,7 @@ import UserIcon from "./UserIcon";
 import { Text } from "preact-i18n";
 
 export function Username({ user, ...otherProps }: { user?: User } & JSX.HTMLAttributes<HTMLElement>) {
-    return <b {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</b>;
+    return <span {...otherProps}>{ user?.username ?? <Text id="app.main.channel.unknown_user" /> }</span>;
 }
 
 export default function UserShort({ user, size }: { user?: User, size?: number }) {

src/components/navigation/BottomNavigation.tsx

@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { useSelf } from "../../context/revoltjs/hooks";
 import { useHistory, useLocation } from "react-router";
 import ConditionalLink from "../../lib/ConditionalLink";
-import { Message, Group } from "@styled-icons/boxicons-regular";
+import { Message, Group } from "@styled-icons/boxicons-solid";
 
 const NavigationBase = styled.div`
     z-index: 100;
@@ -50,13 +50,13 @@ export default function BottomNavigation() {
                             }
                         }
                     }}>
-                    <Message size={26} />
+                    <Message size={24} />
                 </IconButton>
             </Button>
             <Button active={friendsActive}>
                 <ConditionalLink active={friendsActive} to="/friends">
                     <IconButton>
-                        <Group size={26} />
+                        <Group size={25} />
                     </IconButton>
                 </ConditionalLink>
             </Button>

src/components/navigation/left/HomeSidebar.tsx

@@ -1,6 +1,6 @@
 import { Localizer, Text } from "preact-i18n";
 import { useContext, useEffect } from "preact/hooks";
-import { Home, UserDetail, Wrench, Save } from "@styled-icons/boxicons-solid";
+import { Home, UserDetail, Wrench, Notepad } from "@styled-icons/boxicons-solid";
 
 import Category from '../../ui/Category';
 import PaintCounter from "../../../lib/PaintCounter";
@@ -93,7 +93,7 @@ function HomeSidebar(props: Props) {
                 )}
                 <ConditionalLink active={obj?.channel_type === "SavedMessages"} to="/open/saved">
                     <ButtonItem active={obj?.channel_type === "SavedMessages"}>
-                        <Save size={20} />
+                        <Notepad size={20} />
                         <span><Text id="app.navigation.tabs.saved" /></span>
                     </ButtonItem>
                 </ConditionalLink>

src/components/ui/Modal.tsx

@@ -42,8 +42,6 @@ const ModalContainer = styled.div`
     border-radius: 8px;
     max-width: calc(100vw - 20px);
 
-    inline-size: min(100%, 500px);
-
     animation-name: ${zoomIn};
     animation-duration: 0.25s;
     animation-timing-function: cubic-bezier(.3,.3,.18,1.1);

src/pages/channels/ChannelHeader.tsx

@@ -8,7 +8,7 @@ import { getChannelName } from "../../context/revoltjs/util";
 import UserStatus from "../../components/common/user/UserStatus";
 import { AppContext } from "../../context/revoltjs/RevoltClient";
 import { At, Hash } from "@styled-icons/boxicons-regular";
-import { Save, Group } from "@styled-icons/boxicons-solid";
+import { Notepad, Group } from "@styled-icons/boxicons-solid";
 import { useStatusColour } from "../../components/common/user/UserIcon";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
 
@@ -62,7 +62,7 @@ export default function ChannelHeader({ channel, toggleSidebar }: ChannelHeaderP
     let icon, recipient;
     switch (channel.channel_type) {
         case "SavedMessages":
-            icon = <Save size={24} />;
+            icon = <Notepad size={24} />;
             break;
         case "DirectMessage":
             icon = <At size={24} />;

src/pages/friends/Friend.module.scss

@@ -6,12 +6,16 @@
     .overline {
         display: flex;
         position: sticky;
+        align-items: center;
         top: 0;
         background: var(--primary-background);
-        padding: 8px 0;
+        padding: 5px 0;
         z-index: 10;
+        cursor: pointer;
         
-        
+        svg {
+            margin-inline-end: 4px;
+        }
     }
 
     &[data-empty="true"] {
@@ -90,9 +94,16 @@
     }
 }
 
+.divider {
+    width: 1px;
+    height: 24px;
+    margin: 0 8px;
+    background: var(--primary-background);
+}
+
 @media only screen and (max-width: 768px) {
     .list {
-        padding: 0 12px 12px 12px;
+        padding: 0 8px 8px 8px;
     }
 
     .call {
@@ -100,7 +111,6 @@
     }
 }
 
-
 //! FIXME: Move this to the Header component, do this:
 // 1. Check if header has topic, if yes, flex-grow: 0 on the title.
 // 2. If header has no topic (example: friends page), flex-grow 1 on the header title.

src/pages/friends/Friends.tsx

@@ -1,8 +1,7 @@
-import styles from "./Friend.module.scss";
-import { UserDetail, Conversation, UserPlus } from "@styled-icons/boxicons-solid";
-
 import { Friend } from "./Friend";
 import { Text } from "preact-i18n";
+import styles from "./Friend.module.scss";
+import Tooltip from "../../components/common/Tooltip";
 import Header from "../../components/ui/Header";
 import Overline from "../../components/ui/Overline";
 import IconButton from "../../components/ui/IconButton";
@@ -10,6 +9,8 @@ import { useUsers } from "../../context/revoltjs/hooks";
 import { User, Users } from "revolt.js/dist/api/objects";
 import { isTouchscreenDevice } from "../../lib/isTouchscreenDevice";
 import { useIntermediate } from "../../context/intermediate/Intermediate";
+import { ChevronDown, ChevronRight } from "@styled-icons/boxicons-regular";
+import { UserDetail, Conversation, UserPlus, TennisBall } from "@styled-icons/boxicons-solid";
 
 export default function Friends() {
     const { openScreen } = useIntermediate();
@@ -39,12 +40,24 @@ export default function Friends() {
                 <div className={styles.title}>
                     <Text id="app.navigation.tabs.friends" />
                 </div>
-                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
+                <Tooltip content={"Create Group"} placement="bottom">
-                    <Conversation size={24} />
+                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'create_group' })}>
-                </IconButton>
+                        <Conversation size={24} />
-                <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
+                    </IconButton>
-                    <UserPlus size={24} />
+                </Tooltip>
-                </IconButton>
+                <Tooltip content={"Add Friend"} placement="bottom">
+                    <IconButton onClick={() => openScreen({ id: 'special_input', type: 'add_friend' })}>
+                        <UserPlus size={24} />
+                    </IconButton>
+                </Tooltip>
+                {/* 
+                <div className={styles.divider} />
+                <Tooltip content={"Friend Activity"} placement="bottom">
+                    <IconButton>
+                        <TennisBall size={24} />
+                    </IconButton>            
+                </Tooltip>
+                */}
             </Header>
             <div
                 className={styles.list}
@@ -60,6 +73,7 @@ export default function Friends() {
                 )}
                 {pending.length > 0 && (
                     <Overline className={styles.overline} type="subtle">
+                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
                         <Text id="app.special.friends.pending" /> —{" "}
                         {pending.length}
                     </Overline>
@@ -69,6 +83,7 @@ export default function Friends() {
                 ))}
                 {online.length > 0 && (
                     <Overline className={styles.overline} type="subtle">
+                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
                         <Text id="app.status.online" /> —{" "}
                         {online.length}
                     </Overline>
@@ -78,6 +93,7 @@ export default function Friends() {
                 ))}
                 {offline.length > 0 && (
                     <Overline className={styles.overline} type="subtle">
+                        <ChevronDown size={20} /> {/* TOFIX: Make each category collapsible */}
                         <Text id="app.status.offline" /> —{" "}
                         {offline.length}
                     </Overline>