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 cbeaf59..048e8b1 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 3dcd10a..1b04a2e 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 e26a472..31cb705 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 dcb2ed0..ad35435 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 9c8ca77..93f8ce7 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>
--
GitLab