diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx index cbeaf59903390bca7f5d8bd7d21201d37c2cab45..048e8b1281440711205bb5d0bf0922a4d29df723 100644 --- a/src/components/ui/Header.tsx +++ b/src/components/ui/Header.tsx @@ -25,6 +25,11 @@ export default styled.div<Props>` flex-shrink: 0; } + .menu { + margin-inline-end: 8px; + color: var(--secondary-foreground); + } + /*@media only screen and (max-width: 768px) { padding: 0 12px; }*/ diff --git a/src/context/Theme.tsx b/src/context/Theme.tsx index 3dcd10a7441dd7cd5408fd3b4631de5ae11077d8..1b04a2e2f30f8d952755f9fd8a6ecb5acab5e2ce 100644 --- a/src/context/Theme.tsx +++ b/src/context/Theme.tsx @@ -335,13 +335,7 @@ function Theme({ children, options }: Props) { return ( <ThemeContext.Provider value={theme}> <Helmet> - <meta - name="theme-color" - content={ - isTouchscreenDevice - ? theme["primary-header"] - : theme["background"] - } + <meta name="theme-color" content={theme["background"]} /> </Helmet> <GlobalTheme theme={theme} /> diff --git a/src/pages/channels/ChannelHeader.tsx b/src/pages/channels/ChannelHeader.tsx index e26a472a943bafd7bbef2599bbf97901afad6087..31cb705efc50e169282017f32328961b32e7f786 100644 --- a/src/pages/channels/ChannelHeader.tsx +++ b/src/pages/channels/ChannelHeader.tsx @@ -1,4 +1,4 @@ -import { At, Hash } from "@styled-icons/boxicons-regular"; +import { At, Hash, Menu } from "@styled-icons/boxicons-regular"; import { Notepad, Group } from "@styled-icons/boxicons-solid"; import { Channel, User } from "revolt.js"; import styled from "styled-components"; @@ -89,6 +89,11 @@ export default function ChannelHeader({ return ( <Header placement="primary"> + {isTouchscreenDevice && + <div className="menu"> + <Menu size={27} /> + </div> + } {icon} <Info> <span className="name">{name}</span> diff --git a/src/pages/channels/actions/HeaderActions.tsx b/src/pages/channels/actions/HeaderActions.tsx index dcb2ed0afb049b6aac84bf6b10ddcbe09f9e39f4..ad35435d7f596fc62dd169e9c29fe79eab429e26 100644 --- a/src/pages/channels/actions/HeaderActions.tsx +++ b/src/pages/channels/actions/HeaderActions.tsx @@ -1,9 +1,9 @@ -import { Sidebar as SidebarIcon } from "@styled-icons/boxicons-regular"; import { UserPlus, Cog, PhoneCall, PhoneOutgoing, + Group } from "@styled-icons/boxicons-solid"; import { useHistory } from "react-router-dom"; @@ -65,11 +65,10 @@ export default function HeaderActions({ <VoiceActions channel={channel} /> {(channel.channel_type === "Group" || channel.channel_type === "TextChannel") && - !isTouchscreenDevice && ( <IconButton onClick={toggleSidebar}> - <SidebarIcon size={22} /> + <Group size={25} /> </IconButton> - )} + } </> ); } diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx index 9c8ca77a8627a9113d7423b5b53d92e3a1d5e5db..93f8ce7ca6905bb9a0a7d1289ecf06d9d3b9c24a 100644 --- a/src/pages/settings/GenericSettings.tsx +++ b/src/pages/settings/GenericSettings.tsx @@ -75,7 +75,7 @@ export function GenericSettings({ content={ isTouchscreenDevice ? theme["primary-header"] - : theme["secondary-background"] + : theme["background"] } /> </Helmet>