diff --git a/external/lang b/external/lang index 0ac705b5..1d3e85e7 160000 --- a/external/lang +++ b/external/lang @@ -1 +1 @@ -Subproject commit 0ac705b5599bf9ddf538f3ada1bffd67b2206b57 +Subproject commit 1d3e85e7f6d0ad7a590854e240d7c47291f3e2cf diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx index 7bbf0b66..68579ba1 100644 --- a/src/components/common/ServerHeader.tsx +++ b/src/components/common/ServerHeader.tsx @@ -20,27 +20,31 @@ interface Props { } const ServerBanner = styled.div>` - background-color: var(--secondary-header); flex-shrink: 0; display: flex; flex-direction: column; justify-content: end; - background-size: cover !important; - background-position: center center !important; + background-size: cover; + background-repeat: norepeat; + background-position: center center; ${(props) => - props.background && - css` - height: 120px; - .container { - background: linear-gradient( - 0deg, - var(--secondary-background), - transparent - ); - } - `} + props.background + ? css` + height: 120px; + + .container { + background: linear-gradient( + 0deg, + var(--secondary-background), + transparent + ); + } + ` + : css` + background-color: var(--secondary-header); + `} .container { height: var(--header-height); @@ -70,10 +74,7 @@ export default observer(({ server }: Props) => {
{server.flags && server.flags & 1 ? ( diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx index 9fa31811..7f5d560a 100644 --- a/src/pages/RevoltApp.tsx +++ b/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}> - +