Fix ranked/unranked appearing in looking

app/components/play/GroupCard.tsx

@@ -63,6 +63,7 @@ export function GroupCard({
         )}
         {isCaptain && (
           <Button
+            className="play-looking__card__button"
             type="submit"
             name="_action"
             value={buttonValue()}

app/models/LFGGroup.server.ts

@@ -130,13 +130,12 @@ export function findActiveByMember(user: { id: string }) {
   });
 }
 
-export function findLookingByType(type: LfgGroupType, ranked: boolean | null) {
+export function findLookingByType(type: LfgGroupType, ranked?: boolean) {
   return db.lfgGroup.findMany({
     where: {
       type,
       looking: true,
-      // For ranked groups we show both ranked and unranked options
-      ranked: ranked === false ? false : undefined,
+      ranked,
     },
     select: {
       id: true,

app/routes/play/looking.tsx

@@ -160,14 +160,19 @@ export const loader: LoaderFunction = async ({ context }) => {
   if (!ownGroup) return redirect("/play");
   if (!ownGroup.looking) return redirect("/play/add-players");
 
-  const groups = await LFGGroup.findLookingByType(
-    ownGroup.type,
-    ownGroup.ranked
-  );
-
   const lookingForMatch =
     ownGroup.type === "VERSUS" &&
     ownGroup.members.length === LFG_GROUP_FULL_SIZE;
+
+  const groups = await LFGGroup.findLookingByType(
+    ownGroup.type,
+    // before we are looking for a match show both ranked and unranked
+    // groups and allow that status to change
+    lookingForMatch && typeof ownGroup.ranked === "boolean"
+      ? ownGroup.ranked
+      : undefined
+  );
+
   const likesGiven = ownGroup.likedGroups.reduce(
     (acc, lg) => acc.add(lg.targetId),
     new Set<string>()

app/styles/play-looking.css

@@ -72,10 +72,14 @@
   flex-wrap: wrap;
   justify-content: center;
   gap: var(--s-2);
-  margin-block-end: var(--s-3);
+  margin-block-end: var(--s-1);
   margin-block-start: var(--s-1-5);
 }
 
+.play-looking__card__button {
+  margin-block-start: var(--s-2);
+}
+
 .play-looking__member-card {
   display: flex;
   min-width: calc(50% - var(--s-4));