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 (
- {server.flags && server.flags & 1 ? ( - } - placement={"bottom-start"}> - - - - - - ) : undefined} - {server.flags && server.flags & 2 ? ( - } - placement={"bottom-start"}> - - - - - - - - ) : undefined} + +
+
+ {server.flags && server.flags & 1 ? ( + + } + placement={"bottom-start"}> + + + + + + ) : undefined} + {server.flags && server.flags & 2 ? ( + + } + placement={"bottom-start"}> + + + + + + + + ) : undefined} + +
{server.name}
+ + /*
{ return ( - -
- -
{server.name}
-
-
- +