diff --git a/app/components/Alert.tsx b/app/components/Alert.tsx index a555a0244..3e05634ac 100644 --- a/app/components/Alert.tsx +++ b/app/components/Alert.tsx @@ -2,7 +2,7 @@ import { AlertIcon } from "./icons/Alert"; export function Alert(props: { children: React.ReactNode; - type: "warning"; + type: "warning" | "info"; "data-cy"?: string; }) { return ( diff --git a/app/routes/to/$organization.$tournament/manage-roster.tsx b/app/routes/to/$organization.$tournament/manage-roster.tsx index e11a3dbc2..903b0e46a 100644 --- a/app/routes/to/$organization.$tournament/manage-roster.tsx +++ b/app/routes/to/$organization.$tournament/manage-roster.tsx @@ -125,69 +125,77 @@ export default function ManageRosterPage() { return (
- {ownTeam.members.length < 4 && ( + {ownTeam.members.length < TOURNAMENT_TEAM_ROSTER_MIN_SIZE && ( // TODO: show alert when team is full You need at least {TOURNAMENT_TEAM_ROSTER_MIN_SIZE} players in your roster to play (max {TOURNAMENT_TEAM_ROSTER_MAX_SIZE}) )} + {ownTeam.members.length >= TOURNAMENT_TEAM_ROSTER_MAX_SIZE && ( + // TODO: show alert when team is full + + Your team is full - more players can't be added + + )}
-
-
- - - -
- {trustingUsers.length > 0 && ( + {ownTeam.members.length < TOURNAMENT_TEAM_ROSTER_MAX_SIZE && ( +
- - - - - - + + +
- )} -
+ {trustingUsers.length > 0 && ( +
+ + + + + + +
+ )} +
+ )}
); } diff --git a/app/styles/global.css b/app/styles/global.css index 7ba3899f1..a74e84bd2 100644 --- a/app/styles/global.css +++ b/app/styles/global.css @@ -6,6 +6,7 @@ --text-lighter: rgb(255 255 255 / 55%); --theme-error: rgb(219 70 65); --theme-warning: #f5f587; + --theme-info: #a3a6ff; --theme: hsl(255deg 66.7% 55.3%); --theme-transparent: hsl(255deg 66.7% 55.3% / 40%); --theme-secondary: hsl(85deg 66.7% 55.3%); @@ -213,3 +214,7 @@ select::selection { .alert[data-type="warning"] > svg { fill: var(--theme-warning); } + +.alert[data-type="info"] > svg { + fill: var(--theme-info); +}