Merge branch 'ui/glass-header' of https://github.com/revoltchat/revite into ui/glass-header

external/lang

@@ -1 +1 @@
-Subproject commit 0ac705b5599bf9ddf538f3ada1bffd67b2206b57
+Subproject commit 1d3e85e7f6d0ad7a590854e240d7c47291f3e2cf

src/components/common/ServerHeader.tsx

@@ -20,19 +20,20 @@ interface Props {
 }
 
 const ServerBanner = styled.div<Omit<Props, "server">>`
-    background-color: var(--secondary-header);
     flex-shrink: 0;
     display: flex;
     flex-direction: column;
     justify-content: end;
 
-    background-size: cover !important;
+    background-size: cover;
-    background-position: center center !important;
+    background-repeat: norepeat;
+    background-position: center center;
 
     ${(props) =>
-        props.background &&
+        props.background
-        css`
+            ? css`
                   height: 120px;
+
                   .container {
                       background: linear-gradient(
                           0deg,
@@ -40,6 +41,9 @@ const ServerBanner = styled.div<Omit<Props, "server">>`
                           transparent
                       );
                   }
+              `
+            : css`
+                  background-color: var(--secondary-header);
               `}
 
     .container {
@@ -70,10 +74,7 @@ export default observer(({ server }: Props) => {
         <ServerBanner
             background={typeof bannerURL !== "undefined"}
             style={{
-                backgroundSize: "cover",
+                backgroundImage: bannerURL ? `url('${bannerURL}')` : undefined,
-                backgroundPosition: "center",
-                backgroundRepeat: "no-repeat",
-                background: bannerURL ? `url('${bannerURL}')` : undefined,
             }}>
             <div className="container">
                 {server.flags && server.flags & 1 ? (

src/pages/RevoltApp.tsx

@@ -5,6 +5,9 @@ import styled, { css } from "styled-components";
 import ContextMenus from "../lib/ContextMenus";
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
 
+import { useApplicationState } from "../mobx/State";
+import { SIDEBAR_CHANNELS } from "../mobx/stores/Layout";
+
 import Popovers from "../context/intermediate/Popovers";
 import Notifications from "../context/revoltjs/Notifications";
 import StateMonitor from "../context/revoltjs/StateMonitor";
@@ -45,12 +48,16 @@ const StatusBar = styled.div`
     }
 `;
 
-const Routes = styled.div.attrs({ "data-component": "routes" })`
+const Routes = styled.div.attrs({ "data-component": "routes" })<{
+    borders: boolean;
+}>`
     min-width: 0;
     display: flex;
-    flex-direction: column;
     position: relative;
+    flex-direction: column;
+
     background: var(--primary-background);
+
     /*background-color: rgba(
         var(--primary-background-rgb),
         max(var(--min-opacity), 0.75)
@@ -62,10 +69,17 @@ const Routes = styled.div.attrs({ "data-component": "routes" })`
         css`
             overflow: hidden;
         `}
+
+    ${(props) =>
+        props.borders &&
+        css`
+            border-start-start-radius: 8px;
+        `}
 `;
 
 export default function App() {
     const path = useLocation().pathname;
+    const layout = useApplicationState().layout;
     const fixedBottomNav =
         path === "/" || path === "/settings" || path.startsWith("/friends");
     const inChannel = path.includes("/channel");
@@ -107,7 +121,10 @@ export default function App() {
                         height: 50,
                     }}
                     docked={isTouchscreenDevice ? Docked.None : Docked.Left}>
-                    <Routes>
+                    <Routes
+                        borders={
+                            !layout.getSectionState(SIDEBAR_CHANNELS, true)
+                        }>
                         <Switch>
                             <Route
                                 path="/server/:server/channel/:channel/settings/:page"