From 76f43a4b986576e0de0efe671edeba3856a22d73 Mon Sep 17 00:00:00 2001
From: nizune <9-nizune@users.noreply.gitlab.insrt.uk>
Date: Thu, 8 Jul 2021 18:39:03 +0200
Subject: [PATCH] Added hamburger and member sidebar icons

---
 src/components/ui/Header.tsx                 | 5 +++++
 src/context/Theme.tsx                        | 8 +-------
 src/pages/channels/ChannelHeader.tsx         | 7 ++++++-
 src/pages/channels/actions/HeaderActions.tsx | 7 +++----
 src/pages/settings/GenericSettings.tsx       | 2 +-
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index cbeaf599..048e8b12 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 3dcd10a7..1b04a2e2 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 e26a472a..31cb705e 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 dcb2ed0a..ad35435d 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 9c8ca77a..93f8ce7c 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>