From aefefc26a3cf1808ee7ae9c1ff7fd3c0800d2ff5 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Fri, 30 Dec 2022 23:21:37 +0200
Subject: [PATCH] Team: Banner placeholder when no image set

---
 app/features/team/routes/t.$customUrl.tsx | 10 +++++++---
 app/features/team/team.css                |  5 +++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/app/features/team/routes/t.$customUrl.tsx b/app/features/team/routes/t.$customUrl.tsx
index d694f5758..14fdf1e44 100644
--- a/app/features/team/routes/t.$customUrl.tsx
+++ b/app/features/team/routes/t.$customUrl.tsx
@@ -19,6 +19,7 @@ import type { DetailedTeamMember, TeamResultPeek } from "../team-types";
 import { Avatar } from "~/components/Avatar";
 import { useTranslation } from "~/hooks/useTranslation";
 import { Flag } from "~/components/Flag";
+import clsx from "clsx";
 
 export const meta: MetaFunction = ({
   data,
@@ -78,11 +79,14 @@ function TeamBanner() {
 
   return (
     <div
-      className="team__banner"
+      className={clsx("team__banner", {
+        team__banner__placeholder: !team.bannerSrc,
+      })}
       style={
         {
-          // xxx: some fallback banner image
-          "--team-banner-img": team.bannerSrc ? `url("${team.bannerSrc}")` : "",
+          "--team-banner-img": team.bannerSrc
+            ? `url("${team.bannerSrc}")`
+            : undefined,
         } as any
       }
     >
diff --git a/app/features/team/team.css b/app/features/team/team.css
index 5fdd7935a..227edbb21 100644
--- a/app/features/team/team.css
+++ b/app/features/team/team.css
@@ -15,6 +15,11 @@
   padding: var(--s-5);
 }
 
+.team__banner__placeholder {
+  height: 12rem;
+  background-color: var(--theme-transparent);
+}
+
 .team__banner__flags {
   grid-area: flags;
   margin-top: -5px;