chore: clean up contrasting colours code

src/components/common/messaging/bars/JumpToBottom.tsx

@@ -8,12 +8,17 @@ import { Text } from "preact-i18n";
 import { isTouchscreenDevice } from "../../../../lib/isTouchscreenDevice";
 import { getRenderer } from "../../../../lib/renderer/Singleton";
 
-const Bar = styled.div`
+export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
     z-index: 10;
     position: relative;
 
     > div {
-        top: -26px;
+        ${(props) =>
+            props.position === "bottom" &&
+            css`
+                top: -26px;
+            `}
+
         height: 28px;
         width: 100%;
         position: absolute;
@@ -24,10 +29,29 @@ const Bar = styled.div`
         padding: 0 8px;
         user-select: none;
         justify-content: space-between;
-        color: var(--secondary-foreground);
         transition: color ease-in-out 0.08s;
-        background: var(--secondary-background);
-        border-radius: var(--border-radius) var(--border-radius) 0 0;
+
+        ${(props) =>
+            props.accent
+                ? css`
+                      color: var(--accent-contrast);
+                      background: var(--accent);
+                  `
+                : css`
+                      color: var(--secondary-foreground);
+                      background: var(--secondary-background);
+                  `}
+
+        ${(props) =>
+            props.position === "top"
+                ? css`
+                      border-radius: 0 0 var(--border-radius)
+                          var(--border-radius);
+                  `
+                : css`
+                      border-radius: var(--border-radius) var(--border-radius) 0
+                          0;
+                  `}
 
         > div {
             display: flex;
@@ -58,7 +82,7 @@ export default observer(({ channel }: { channel: Channel }) => {
     if (renderer.state !== "RENDER" || renderer.atBottom) return null;
 
     return (
-        <Bar>
+        <Bar position="bottom">
             <div onClick={() => renderer.jumpToBottom(true)}>
                 <div>
                     <Text id="app.main.channel.misc.viewing_old" />

src/components/common/messaging/bars/NewMessages.tsx

@@ -0,0 +1,47 @@
+import { UpArrowAlt } from "@styled-icons/boxicons-regular";
+import { observer } from "mobx-react-lite";
+import { useHistory } from "react-router-dom";
+import { Channel } from "revolt.js/dist/maps/Channels";
+import { decodeTime } from "ulid";
+
+import { getRenderer } from "../../../../lib/renderer/Singleton";
+
+import { dayjs } from "../../../../context/Locale";
+
+import { Bar } from "./JumpToBottom";
+
+export default observer(
+    ({ channel, last_id }: { channel: Channel; last_id?: string }) => {
+        const renderer = getRenderer(channel);
+        const history = useHistory();
+        if (renderer.state !== "RENDER") return null;
+        if (!last_id) return null;
+
+        return (
+            <>
+                <Bar position="top" accent>
+                    <div
+                        onClick={() => {
+                            if (channel.channel_type === "TextChannel") {
+                                history.push(
+                                    `/server/${channel.server_id}/channel/${channel._id}/${last_id}`,
+                                );
+                            } else {
+                                history.push(
+                                    `/channel/${channel._id}/${last_id}`,
+                                );
+                            }
+                        }}>
+                        <div>
+                            New messages since{" "}
+                            {dayjs(decodeTime(last_id)).fromNow()}
+                        </div>
+                        <div>
+                            Click to jump to start. <UpArrowAlt size={20} />
+                        </div>
+                    </div>
+                </Bar>
+            </>
+        );
+    },
+);

src/components/common/user/UserShort.tsx

@@ -24,7 +24,7 @@ const BotBadge = styled.div`
     margin-inline-start: 2px;
     text-transform: uppercase;
 
-    color: var(--foreground);
+    color: var(--accent-contrast);
     background: var(--accent);
     border-radius: calc(var(--border-radius) / 2);
 `;

src/components/settings/appearance/ThemeOverrides.tsx

@@ -134,8 +134,8 @@ export default observer(() => {
                     </div>
                     <span
                         style={{
-                            color: getContrastingColour(
-                                theme.getVariable(key),
+                            color: theme.getContrastingVariable(
+                                key,
                                 theme.getVariable("primary-background"),
                             ),
                         }}>
@@ -168,14 +168,3 @@ export default observer(() => {
         </Container>
     );
 });
-
-function getContrastingColour(hex: string, fallback: string): string {
-    hex = hex.replace("#", "");
-    const r = parseInt(hex.substr(0, 2), 16);
-    const g = parseInt(hex.substr(2, 2), 16);
-    const b = parseInt(hex.substr(4, 2), 16);
-    const cc = (r * 299 + g * 587 + b * 114) / 1000;
-    if (isNaN(r) || isNaN(g) || isNaN(b) || isNaN(cc))
-        return getContrastingColour(fallback, "#fffff");
-    return cc >= 175 ? "black" : "white";
-}

src/components/ui/Header.tsx

@@ -102,23 +102,22 @@ interface PageHeaderProps {
 export const PageHeader = observer(
     ({ children, icon, noBurger }: PageHeaderProps) => {
         const layout = useApplicationState().layout;
+        const visible = layout.getSectionState(SIDEBAR_CHANNELS, true);
 
         return (
-            <Header placement="primary">
+            <Header placement="primary" borders={!visible}>
                 {!noBurger && <HamburgerAction />}
                 <IconContainer
                     onClick={() =>
                         layout.toggleSectionState(SIDEBAR_CHANNELS, true)
                     }>
-                    {!isTouchscreenDevice &&
-                        layout.getSectionState(SIDEBAR_CHANNELS, true) && (
-                            <ChevronLeft size={18} />
-                        )}
+                    {!isTouchscreenDevice && visible && (
+                        <ChevronLeft size={18} />
+                    )}
                     {icon}
-                    {!isTouchscreenDevice &&
-                        !layout.getSectionState(SIDEBAR_CHANNELS, true) && (
-                            <ChevronRight size={18} />
-                        )}
+                    {!isTouchscreenDevice && !visible && (
+                        <ChevronRight size={18} />
+                    )}
                 </IconContainer>
                 {children}
             </Header>