Fix: Set global emoji pack.

Fix: Use conditional links for bottom navigation.
Fix: Margin error on queued messages.

src/components/common/messaging/Message.tsx

@@ -38,7 +38,7 @@ function Message({ attachContext, message, contrast, content: replacement, head:
         <>
             { message.replies?.map((message_id, index) => <MessageReply index={index} id={message_id} channel={message.channel} />) }
             <MessageBase id={message._id}
-                head={head && !message.replies}
+                head={head && !(message.replies && message.replies.length > 0)}
                 contrast={contrast}
                 sending={typeof queued !== 'undefined'}
                 mention={message.mentions?.includes(client.user!._id)}

src/components/navigation/BottomNavigation.tsx

@@ -1,9 +1,9 @@
-import styled, { css } from "styled-components";
-import { Link } from "react-router-dom";
 import IconButton from "../ui/IconButton";
 import UserIcon from "../common/user/UserIcon";
+import styled, { css } from "styled-components";
 import { useSelf } from "../../context/revoltjs/hooks";
 import { useHistory, useLocation } from "react-router";
+import ConditionalLink from "../../lib/ConditionalLink";
 import { MessageCircle, Users } from "@styled-icons/feather";
 
 const NavigationBase = styled.div`
@@ -54,18 +54,18 @@ export default function BottomNavigation() {
                 </IconButton>
             </Button>
             <Button active={friendsActive}>
-                <Link to="/friends">
+                <ConditionalLink active={friendsActive} to="/friends">
                     <IconButton>
                         <Users size={26} />
                     </IconButton>
-                </Link>
+                </ConditionalLink>
             </Button>
             <Button active={settingsActive}>
-                <Link to="/settings">
+                <ConditionalLink active={settingsActive} to="/settings">
                     <IconButton>
                         <UserIcon target={user} size={26} status={true} />
                     </IconButton>
-                </Link>
+                </ConditionalLink>
             </Button>
         </NavigationBase>
     );

src/components/ui/Button.tsx

@@ -10,6 +10,7 @@ export default styled.button<Props>`
     padding: 8px;
     font-size: 16px;
     text-align: center;
+    font-family: 'Open Sans', sans-serif;
 
     transition: 0.2s ease opacity;
     transition: 0.2s ease background-color;

src/redux/reducers/settings.ts

@@ -2,6 +2,7 @@ import { filter } from ".";
 import { SyncUpdateAction } from "./sync";
 import { Sounds } from "../../assets/sounds/Audio";
 import { Theme, ThemeOptions } from "../../context/Theme";
+import { setEmojiPack } from "../../components/common/Emoji";
 
 export type SoundOptions = {
     [key in Sounds]?: boolean
@@ -57,7 +58,7 @@ export function settings(
     state = {} as Settings,
     action: SettingsAction
 ): Settings {
-    // setEmojiPack(state.appearance?.emojiPack ?? 'mutant');
+    setEmojiPack(state.appearance?.emojiPack ?? 'mutant');
 
     switch (action.type) {
         case "SETTINGS_SET_THEME":