Can stop looking Closes #734

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()}

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" />

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));