feat(header): new glass header on channel view

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

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<{

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;

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);
 `;
 

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`

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%;