From b7e2cd21bc432d194d719b6fb0daad4881bb71aa Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Mon, 21 Feb 2022 00:17:48 +0200
Subject: [PATCH] Can stop looking Closes #734

---
 app/components/play/GroupCard.tsx | 19 ++++++++++++++++---
 app/routes/play/looking.tsx       |  2 ++
 app/styles/play-looking.css       |  5 +++++
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/app/components/play/GroupCard.tsx b/app/components/play/GroupCard.tsx
index f6d6b7a6b..d5c1c96e0 100644
--- a/app/components/play/GroupCard.tsx
+++ b/app/components/play/GroupCard.tsx
@@ -1,6 +1,6 @@
 import clsx from "clsx";
 import { useFetcher } from "remix";
-import { Button } from "~/components/Button";
+import { Button, ButtonProps } from "~/components/Button";
 import type {
   LookingActionSchema,
   LookingLoaderDataGroup,
@@ -13,27 +13,36 @@ export function GroupCard({
   type,
   ranked,
   lookingForMatch,
+  isOwnGroup = false,
 }: {
   group: LookingLoaderDataGroup;
   isCaptain?: boolean;
   type?: "LIKES_GIVEN" | "NEUTRAL" | "LIKES_RECEIVED";
   ranked?: boolean;
   lookingForMatch: boolean;
+  isOwnGroup?: boolean;
 }) {
   const fetcher = useFetcher();
 
   const buttonText = () => {
+    if (isOwnGroup) return "Stop looking";
     if (type === "LIKES_GIVEN") return "Undo";
     if (type === "NEUTRAL") return "Let's play?";
 
     return lookingForMatch ? "Match up" : "Group up";
   };
   const buttonValue = (): LookingActionSchema["_action"] => {
+    if (isOwnGroup) return "LOOK_AGAIN";
     if (type === "LIKES_GIVEN") return "UNLIKE";
     if (type === "NEUTRAL") return "LIKE";
 
     return lookingForMatch ? "MATCH_UP" : "UNITE_GROUPS";
   };
+  const buttonVariant = (): ButtonProps["variant"] => {
+    if (isOwnGroup) return "minimal-destructive";
+
+    return type === "LIKES_GIVEN" ? "destructive" : undefined;
+  };
 
   return (
     <fetcher.Form method="post">
@@ -60,12 +69,16 @@ export function GroupCard({
         )}
         {isCaptain && (
           <Button
-            className="play-looking__card__button"
+            className={
+              isOwnGroup
+                ? "play-looking__card__button-small"
+                : "play-looking__card__button"
+            }
             type="submit"
             name="_action"
             value={buttonValue()}
             tiny
-            variant={type === "LIKES_GIVEN" ? "destructive" : undefined}
+            variant={buttonVariant()}
             loading={fetcher.state !== "idle"}
           >
             {buttonText()}
diff --git a/app/routes/play/looking.tsx b/app/routes/play/looking.tsx
index c23507a8b..372308d99 100644
--- a/app/routes/play/looking.tsx
+++ b/app/routes/play/looking.tsx
@@ -351,6 +351,8 @@ export default function LookingPage() {
         group={data.ownGroup}
         ranked={data.ownGroup.ranked}
         lookingForMatch={false}
+        isOwnGroup
+        isCaptain={data.isCaptain}
       />
       <LookingInfoText lastUpdated={lastUpdated} />
       <hr className="play-looking__divider" />
diff --git a/app/styles/play-looking.css b/app/styles/play-looking.css
index 1ff7e0e10..e8395d8e6 100644
--- a/app/styles/play-looking.css
+++ b/app/styles/play-looking.css
@@ -110,6 +110,11 @@
   margin-block-start: var(--s-2);
 }
 
+.play-looking__card__button-small {
+  font-size: var(--fonts-xxs) !important;
+  margin-block-start: var(--s-1);
+}
+
 .play-looking__member-card {
   display: flex;
   min-width: calc(50% - var(--s-4));