Add Alert

app/components/Alert.tsx

@@ -0,0 +1,16 @@
+import { AlertIcon } from "./icons/Alert";
+
+export function Alert({
+  children,
+  type,
+}: {
+  children: React.ReactNode;
+  type: "warning";
+}) {
+  return (
+    <div data-type={type} className="alert">
+      <AlertIcon />
+      {children}
+    </div>
+  );
+}

app/components/icons/Alert.tsx

@@ -0,0 +1,16 @@
+export function AlertIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      viewBox="0 0 20 20"
+      fill="currentColor"
+    >
+      <path
+        fillRule="evenodd"
+        d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+        clipRule="evenodd"
+      />
+    </svg>
+  );
+}

app/routes/to/$organization.$tournament/manage-roster.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
-import { useMatches, LinksFunction } from "remix";
+import { LinksFunction, useMatches } from "remix";
+import { Alert } from "~/components/Alert";
 import { TeamRoster } from "~/components/tournament/TeamRoster";
 import { FindTournamentByNameForUrlI } from "~/services/tournament";
 import styles from "~/styles/tournament-manage-roster.css";
@@ -32,6 +33,11 @@ export default function ManageRosterPage() {
 
   return (
     <div className="tournament__manage-roster">
+      {ownTeam.members.length < 4 && (
+        <Alert type="warning">
+          You need at least 4 players in your roster (max 6)
+        </Alert>
+      )}
       <TeamRoster team={ownTeam} />
       <div className="tournament__manage-roster__actions-container">
         <div>

app/styles/global.css

@@ -5,6 +5,7 @@
   --text: rgb(255 255 255 / 95%);
   --text-lighter: rgb(255 255 255 / 55%);
   --theme-error: rgb(219 70 65);
+  --theme-warning: #f5f587;
   --theme: hsl(255deg 66.7% 55.3%);
   --theme-transparent: hsl(255deg 66.7% 55.3% / 40%);
   --theme-secondary: hsl(85deg 66.7% 55.3%);
@@ -157,3 +158,23 @@ fieldset {
   font-weight: var(--bold);
   margin-block-start: var(--s-1);
 }
+
+.alert {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  border-radius: var(--rounded);
+  padding: var(--s-2-5);
+  background: url("/svg/background-pattern.svg");
+  background-color: var(--bg-lighter);
+  font-weight: var(--bold);
+  font-size: var(--fonts-sm);
+}
+
+.alert > svg {
+  width: 1.5rem;
+}
+
+.alert[data-type="warning"] > svg {
+  fill: var(--theme-warning);
+}

app/styles/tournament-manage-roster.css

@@ -1,8 +1,9 @@
 .tournament__manage-roster {
   display: flex;
   flex-direction: column;
-  gap: var(--s-10);
+  gap: var(--s-8);
   margin-block-start: var(--s-4);
+  width: 100%;
 }
 
 .tournament__manage-roster__actions-container {