From fa4dab7e94ff35febd045333e27c98b4b33ad002 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 29 Nov 2021 13:45:17 +0200
Subject: [PATCH] Add Alert

---
 app/components/Alert.tsx                      | 16 ++++++++++++++
 app/components/icons/Alert.tsx                | 16 ++++++++++++++
 .../manage-roster.tsx                         |  8 ++++++-
 app/styles/global.css                         | 21 +++++++++++++++++++
 app/styles/tournament-manage-roster.css       |  3 ++-
 5 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 app/components/Alert.tsx
 create mode 100644 app/components/icons/Alert.tsx

diff --git a/app/components/Alert.tsx b/app/components/Alert.tsx
new file mode 100644
index 000000000..2be6e25ab
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/components/icons/Alert.tsx b/app/components/icons/Alert.tsx
new file mode 100644
index 000000000..5230d923b
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/app/routes/to/$organization.$tournament/manage-roster.tsx b/app/routes/to/$organization.$tournament/manage-roster.tsx
index 92ed67cf4..13f936930 100644
--- a/app/routes/to/$organization.$tournament/manage-roster.tsx
+++ b/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>
diff --git a/app/styles/global.css b/app/styles/global.css
index bd34681cc..8928f17a8 100644
--- a/app/styles/global.css
+++ b/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);
+}
diff --git a/app/styles/tournament-manage-roster.css b/app/styles/tournament-manage-roster.css
index 999944b6b..bcfc7f6c0 100644
--- a/app/styles/tournament-manage-roster.css
+++ b/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 {