Check-in button -> green

app/components/Button.tsx

@@ -2,7 +2,12 @@ import classNames from "classnames";
 import * as React from "react";
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  variant?: "outlined" | "destructive" | "minimal" | "minimal-destructive";
+  variant?:
+    | "outlined"
+    | "outlined-success"
+    | "destructive"
+    | "minimal"
+    | "minimal-destructive";
   tiny?: boolean;
   loading?: boolean;
   loadingText?: string;
@@ -25,6 +30,7 @@ export function Button(props: ButtonProps) {
     <button
       className={classNames(className, {
         outlined: variant === "outlined",
+        "outlined-success": variant === "outlined-success",
         destructive: variant === "destructive",
         "minimal-destructive": variant === "minimal-destructive",
         minimal: variant === "minimal",

app/components/tournament/ActionSectionBeforeStartContent.tsx

@@ -117,7 +117,7 @@ export function ActionSectionBeforeStartContent({
           className="tournament__action-section__button-container"
         >
           <Button
-            variant="outlined"
+            variant="outlined-success"
             loadingText="Checking in..."
             type="submit"
             loading={fetcher.state !== "idle"}

app/styles/global.css

@@ -116,6 +116,12 @@ button.outlined {
   color: var(--theme);
 }
 
+button.outlined-success {
+  border-color: var(--theme-success);
+  background-color: transparent;
+  color: var(--theme-success);
+}
+
 button.tiny {
   font-size: var(--fonts-xs);
   padding-block: var(--s-1);