From 31d74da8e7479b850dda2d95eaceb8df36a1398c Mon Sep 17 00:00:00 2001
From: Paul <paulmakles@gmail.com>
Date: Sat, 3 Jul 2021 22:35:49 +0100
Subject: [PATCH] Remove gradient on server banners.
---
src/components/common/ServerHeader.tsx | 2 +-
src/components/ui/Header.tsx | 23 ++++++++++++-----------
2 files changed, 13 insertions(+), 12 deletions(-)
diff --git a/src/components/common/ServerHeader.tsx b/src/components/common/ServerHeader.tsx
index 4ed11aa..1218cdd 100644
--- a/src/components/common/ServerHeader.tsx
+++ b/src/components/common/ServerHeader.tsx
@@ -24,7 +24,7 @@ export default function ServerHeader({ server, ctx }: Props) {
<Header borders
placement="secondary"
background={typeof bannerURL !== 'undefined'}
- style={{ background: bannerURL ? `linear-gradient(to bottom, transparent 50%, #000e), url('${bannerURL}')` : undefined }}>
+ style={{ background: bannerURL ? `url('${bannerURL}')` : undefined }}>
<ServerName>
{ server.name }
</ServerName>
diff --git a/src/components/ui/Header.tsx b/src/components/ui/Header.tsx
index f3948d6..3765239 100644
--- a/src/components/ui/Header.tsx
+++ b/src/components/ui/Header.tsx
@@ -7,19 +7,19 @@ interface Props {
}
export default styled.div<Props>`
- display: flex;
- height: 48px;
- font-weight: 600;
- align-items: center;
- user-select: none;
gap: 6px;
+ height: 48px;
flex: 0 auto;
- padding: 0 16px;
+ display: flex;
flex-shrink: 0;
+ padding: 0 16px;
+ font-weight: 600;
+ user-select: none;
+ align-items: center;
- background-color: var(--primary-header);
background-size: cover !important;
background-position: center !important;
+ background-color: var(--primary-header);
svg {
flex-shrink: 0;
@@ -33,10 +33,11 @@ export default styled.div<Props>`
height: 56px;
}
-
${ props => props.background && css`
- height: 120px;
+ height: 120px !important;
align-items: flex-end;
+
+ text-shadow: 0px 0px 1px black;
` }
${ props => props.placement === 'secondary' && css`
@@ -44,7 +45,7 @@ export default styled.div<Props>`
padding: 14px;
` }
- ${ props => props.borders && css`
- /*border-start-start-radius: 8px;*/
+ ${ props => props.borders && css`
+ border-end-start-radius: 8px;
` }
`;
--
GitLab