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 {