From 83f38d71ce58599c367a4261aba0b7230a01b5cc Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Sun, 26 Dec 2021 22:26:27 +0100
Subject: [PATCH] feat(header): new glass header on channel view

---
 src/components/common/messaging/bars/JumpToBottom.tsx | 1 +
 src/components/navigation/SidebarBase.tsx             | 6 ++++++
 src/components/ui/Header.tsx                          | 8 +++++++-
 src/pages/RevoltApp.tsx                               | 1 +
 src/pages/channels/Channel.tsx                        | 6 ++++++
 src/pages/channels/messaging/MessageArea.tsx          | 7 +++++++
 6 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/src/components/common/messaging/bars/JumpToBottom.tsx b/src/components/common/messaging/bars/JumpToBottom.tsx
index e6373a86..8e6a26af 100644
--- a/src/components/common/messaging/bars/JumpToBottom.tsx
+++ b/src/components/common/messaging/bars/JumpToBottom.tsx
@@ -37,6 +37,7 @@ export const Bar = styled.div<{ position: "top" | "bottom"; accent?: boolean }>`
         user-select: none;
         justify-content: space-between;
         transition: color ease-in-out 0.08s;
+        top: 48px;
 
         ${(props) =>
             props.accent
diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx
index dece8af5..d724a356 100644
--- a/src/components/navigation/SidebarBase.tsx
+++ b/src/components/navigation/SidebarBase.tsx
@@ -8,6 +8,12 @@ export default styled.div`
     user-select: none;
     flex-direction: row;
     align-items: stretch;
+
+    > * > ::-webkit-scrollbar-thumb {
+        width: 4px;
+        background-clip: content-box;
+        border-top: 48px solid transparent;
+    }
 `;
 
 export const GenericSidebarBase = styled.div<{
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index 6f21f66b..61c88ce1 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -31,7 +31,13 @@ const Header = styled.div<Props>`
     align-items: center;
     background-size: cover !important;
     background-position: center !important;
-    background-color: var(--primary-header);
+    //background-color: var(--primary-header);
+    background-color: rgba(54, 54, 54, 0.75);
+    backdrop-filter: blur(10px);
+    z-index: 20;
+
+    position: absolute;
+    width: 100%;
 
     /*> div {
         text-overflow: ellipsis;
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index bd82df73..f1c8a1f0 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -30,6 +30,7 @@ const Routes = styled.div`
     display: flex;
     overflow: hidden;
     flex-direction: column;
+    position: relative;
     background: var(--primary-background);
 `;
 
diff --git a/src/pages/channels/Channel.tsx b/src/pages/channels/Channel.tsx
index 1e0b4f99..df0dfe10 100644
--- a/src/pages/channels/Channel.tsx
+++ b/src/pages/channels/Channel.tsx
@@ -35,6 +35,12 @@ const ChannelMain = styled.div`
     min-height: 0;
     overflow: hidden;
     flex-direction: row;
+
+    > * > ::-webkit-scrollbar-thumb {
+        width: 4px;
+        background-clip: content-box;
+        border-top: 48px solid transparent;
+    }
 `;
 
 const ChannelContent = styled.div`
diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx
index 1b2c0278..7dafdd6f 100644
--- a/src/pages/channels/messaging/MessageArea.tsx
+++ b/src/pages/channels/messaging/MessageArea.tsx
@@ -39,8 +39,15 @@ const Area = styled.div`
     min-height: 0;
     overflow-x: hidden;
     overflow-y: scroll;
+    padding-top: 48px;
     word-break: break-word;
 
+    > * > ::-webkit-scrollbar-thumb {
+        width: 4px;
+        background-clip: content-box;
+        border-top: 80px solid transparent;
+    }
+
     > div {
         display: flex;
         min-height: 100%;