From 5148247f0c4fc23b6e7e9fbf3253bf8e19f25d39 Mon Sep 17 00:00:00 2001
From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com>
Date: Wed, 22 Dec 2021 22:36:12 +0200
Subject: [PATCH] Check-in button -> green

---
 app/components/Button.tsx                                 | 8 +++++++-
 .../tournament/ActionSectionBeforeStartContent.tsx        | 2 +-
 app/styles/global.css                                     | 6 ++++++
 3 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
index 4a5ae1b71..4fc1c6b61 100644
--- a/app/components/Button.tsx
+++ b/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",
diff --git a/app/components/tournament/ActionSectionBeforeStartContent.tsx b/app/components/tournament/ActionSectionBeforeStartContent.tsx
index 3e26ea2d9..967e568bb 100644
--- a/app/components/tournament/ActionSectionBeforeStartContent.tsx
+++ b/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"}
diff --git a/app/styles/global.css b/app/styles/global.css
index e2efac1c3..03c54840d 100644
--- a/app/styles/global.css
+++ b/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);