fix(channel): last update before master merge

external/lang

@@ -1 +1 @@
-Subproject commit 1bf1a75b4dcc3b8543651c792ee0901b9db57e39
+Subproject commit 33af4890e56757c27a5bbd23e81d05f03c4a0cde

src/components/common/ServerHeader.tsx

@@ -26,9 +26,6 @@ const ServerBanner = styled.div<Props>`
     display: flex;
     flex-direction: column;
     justify-content: end;
-    /*background-position: center;
-    background-repeat: no-repeat;
-    background-size: cover;*/
 
     background-size: cover !important;
     background-position: center center !important;

src/components/common/messaging/bars/NewMessages.tsx

@@ -49,7 +49,7 @@ export default observer(
                         }
                     }}>
                     <div>
-                        New messages since{" "}
+                        <Text id="app.main.channel.misc.new_messages" />{" "}
                         {dayjs(decodeTime(last_id)).fromNow()}
                     </div>
                     <div>

src/components/common/messaging/embed/EmbedInvite.tsx

@@ -1,3 +1,4 @@
+import { Group } from "@styled-icons/boxicons-solid";
 import { autorun } from "mobx";
 import { observer } from "mobx-react-lite";
 import { useHistory } from "react-router-dom";
@@ -47,7 +48,7 @@ const EmbedInviteBase = styled.div`
 
 const EmbedInviteDetails = styled.div`
     flex-grow: 1;
-    padding-left: 12px;
+    padding-inline-start: 12px;
     ${() =>
         isTouchscreenDevice &&
         css`
@@ -63,7 +64,14 @@ const EmbedInviteName = styled.div`
 `;
 
 const EmbedInviteMemberCount = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 2px;
     font-size: 0.8em;
+
+    > svg {
+        color: var(--secondary-foreground);
+    }
 `;
 
 type Props = {
@@ -119,6 +127,7 @@ export function EmbedInvite({ code }: Props) {
                 <EmbedInviteDetails>
                     <EmbedInviteName>{invite.server_name}</EmbedInviteName>
                     <EmbedInviteMemberCount>
+                        <Group size={12} />
                         {invite.member_count.toLocaleString()}{" "}
                         {invite.member_count === 1 ? "member" : "members"}
                     </EmbedInviteMemberCount>

src/components/navigation/SidebarBase.tsx

@@ -8,6 +8,13 @@ export default styled.div`
     user-select: none;
     flex-direction: row;
     align-items: stretch;
+    /*background: var(--background);*/
+
+    background-color: rgba(
+        var(--background-rgb),
+        max(var(--min-opacity), 0.75)
+    );
+    backdrop-filter: blur(20px);
 
     /*> * > ::-webkit-scrollbar-thumb {
         width: 4px;

src/pages/RevoltApp.tsx

@@ -24,12 +24,38 @@ import ChannelSettings from "./settings/ChannelSettings";
 import ServerSettings from "./settings/ServerSettings";
 import Settings from "./settings/Settings";
 
+const AppContainer = styled.div`
+    background-size: cover !important;
+    background-position: center center !important;
+`;
+
+const StatusBar = styled.div`
+    height: 40px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 13px;
+    gap: 14px;
+
+    .button {
+        border: 1px solid white;
+        padding: 5px;
+        border-radius: var(--border-radius);
+    }
+`;
+
 const Routes = styled.div`
     min-width: 0;
     display: flex;
     flex-direction: column;
     position: relative;
     background: var(--primary-background);
+    /*background-color: rgba(
+        var(--primary-background-rgb),
+        max(var(--min-opacity), 0.75)
+    );*/
+    //backdrop-filter: blur(10px);
 `;
 
 export default function App() {
@@ -44,6 +70,11 @@ export default function App() {
 
     return (
         <>
+            {/*<StatusBar>
+                <div className="title">Planned outage: CDN (~2 hours)</div>
+                <div className="button">View status</div>
+            </StatusBar>*/}
+            <AppContainer>
                 {window.isNative && !window.native.getConfig().frame && (
                     <Titlebar />
                 )}
@@ -111,9 +142,15 @@ export default function App() {
                                 component={Channel}
                             />
                             <Route path="/server/:server" component={Channel} />
-                        <Route path="/channel/:channel" component={Channel} />
+                            <Route
+                                path="/channel/:channel"
+                                component={Channel}
+                            />
 
-                        <Route path="/settings/:page" component={Settings} />
+                            <Route
+                                path="/settings/:page"
+                                component={Settings}
+                            />
                             <Route path="/settings" component={Settings} />
 
                             <Route path="/dev" component={Developer} />
@@ -129,6 +166,7 @@ export default function App() {
                     <Notifications />
                     <StateMonitor />
                 </OverlappingPanels>
+            </AppContainer>
         </>
     );
 }

src/pages/settings/panes/Appearance.tsx

@@ -31,8 +31,8 @@ export const Appearance = observer(() => {
             <h3>
                 <Text id="app.settings.pages.appearance.theme_options.title" />
             </h3>
-            <DisplaySeasonalShim />
             <DisplayTransparencyShim />
+            <DisplaySeasonalShim />
             <hr />
             <DisplayFontShim />
             <DisplayLigaturesShim />