From 746d0171428cf662d53de09ddf09512450bdee4d Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Mon, 27 Dec 2021 15:10:02 +0100
Subject: [PATCH] fix(header): rewrite of server header

---
 src/components/common/ServerHeader.tsx        | 124 ++++++++++++------
 .../navigation/left/ServerSidebar.tsx         |  30 +----
 2 files changed, 84 insertions(+), 70 deletions(-)

diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx
index a6a8ff1b..461a86cc 100644
--- a/src/components/common/ServerHeader.tsx
+++ b/src/components/common/ServerHeader.tsx
@@ -17,8 +17,31 @@ interface Props {
     server: Server;
 }
 
-const ServerName = styled.div`
-    flex-grow: 1;
+const ServerBanner = styled.div`
+    background-color: var(--primary-background);
+    //height: 120px; //USE IF SERVER BANNER IS APPLIED
+    flex-shrink: 0;
+    display: flex;
+    flex-direction: column;
+    justify-content: end;
+
+    .title {
+        height: 48px;
+        display: flex;
+        align-items: center;
+        padding: 10px;
+        font-weight: 600;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        gap: 8px;
+
+        .test {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
 `;
 
 export default observer(({ server }: Props) => {
@@ -26,45 +49,64 @@ export default observer(({ server }: Props) => {
 
     return (
         <div>
-            {server.flags && server.flags & 1 ? (
-                <Tooltip
-                    content={<Text id="app.special.server-badges.official" />}
-                    placement={"bottom-start"}>
-                    <svg width="20" height="20">
-                        <image
-                            xlinkHref="/assets/badges/verified.svg"
-                            height="20"
-                            width="20"
-                        />
-                        <image
-                            xlinkHref="/assets/badges/revolt_r.svg"
-                            height="15"
-                            width="15"
-                            x="2"
-                            y="3"
-                            style={
-                                "justify-content: center; align-items: center; filter: brightness(0);"
-                            }
-                        />
-                    </svg>
-                </Tooltip>
-            ) : undefined}
-            {server.flags && server.flags & 2 ? (
-                <Tooltip
-                    content={<Text id="app.special.server-badges.verified" />}
-                    placement={"bottom-start"}>
-                    <svg width="20" height="20">
-                        <image
-                            xlinkHref="/assets/badges/verified.svg"
-                            height="20"
-                            width="20"
-                        />
-                        <foreignObject x="2" y="2" width="15" height="15">
-                            <Check size={15} color="black" strokeWidth={8} />
-                        </foreignObject>
-                    </svg>
-                </Tooltip>
-            ) : undefined}
+            <ServerBanner>
+                <div className="title">
+                    <div>
+                        {server.flags && server.flags & 1 ? (
+                            <Tooltip
+                                content={
+                                    <Text id="app.special.server-badges.official" />
+                                }
+                                placement={"bottom-start"}>
+                                <svg width="20" height="20">
+                                    <image
+                                        xlinkHref="/assets/badges/verified.svg"
+                                        height="20"
+                                        width="20"
+                                    />
+                                    <image
+                                        xlinkHref="/assets/badges/revolt_r.svg"
+                                        height="15"
+                                        width="15"
+                                        x="2"
+                                        y="3"
+                                        style={
+                                            "justify-content: center; align-items: center; filter: brightness(0);"
+                                        }
+                                    />
+                                </svg>
+                            </Tooltip>
+                        ) : undefined}
+                        {server.flags && server.flags & 2 ? (
+                            <Tooltip
+                                content={
+                                    <Text id="app.special.server-badges.verified" />
+                                }
+                                placement={"bottom-start"}>
+                                <svg width="20" height="20">
+                                    <image
+                                        xlinkHref="/assets/badges/verified.svg"
+                                        height="20"
+                                        width="20"
+                                    />
+                                    <foreignObject
+                                        x="2"
+                                        y="2"
+                                        width="15"
+                                        height="15">
+                                        <Check
+                                            size={15}
+                                            color="black"
+                                            strokeWidth={8}
+                                        />
+                                    </foreignObject>
+                                </svg>
+                            </Tooltip>
+                        ) : undefined}
+                    </div>
+                    <div className="test">{server.name}</div>
+                </div>
+            </ServerBanner>
         </div>
         /*<Header
             borders
diff --git a/src/components/navigation/left/ServerSidebar.tsx b/src/components/navigation/left/ServerSidebar.tsx
index 9c1dac79..c7b4f74c 100644
--- a/src/components/navigation/left/ServerSidebar.tsx
+++ b/src/components/navigation/left/ServerSidebar.tsx
@@ -49,28 +49,6 @@ const ServerList = styled.div`
     }
 `;
 
-const ServerBanner = styled.div`
-    background-color: var(--primary-background);
-
-    .title {
-        height: 48px;
-        display: flex;
-        align-items: center;
-        padding: 10px;
-        font-weight: 600;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        gap: 8px;
-
-        .test {
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-    }
-`;
-
 interface Props {
     server: Server;
 }
@@ -164,13 +142,7 @@ export default observer(() => {
 
     return (
         <ServerBase>
-            <ServerBanner>
-                <div className="title">
-                    <ServerHeader server={server} />
-                    <div className="test">{server.name}</div>
-                </div>
-            </ServerBanner>
-
+            <ServerHeader server={server} />
             <ConnectionStatus />
             <ServerList
                 onContextMenu={attachContextMenu("Menu", {