From 90e627bbc70b9f959d8de61114aee871a997f328 Mon Sep 17 00:00:00 2001
From: Serena Li <serena.li.usa@gmail.com>
Date: Tue, 20 Feb 2024 23:32:01 -0500
Subject: [PATCH] Style requestscrimmodal

---
 frontend2/src/components/EpisodeSwitcher.tsx  |   2 +-
 .../src/components/elements/Checkbox.tsx      |  44 ++++++
 frontend2/src/components/elements/Pill.tsx    |   8 +-
 .../src/components/elements/SelectMenu.tsx    |   2 +-
 .../elements/SelectMultipleMenu.tsx           |   4 +-
 .../tables/scrimmaging/RequestScrimModal.tsx  | 146 ++++++++++--------
 6 files changed, 131 insertions(+), 75 deletions(-)
 create mode 100644 frontend2/src/components/elements/Checkbox.tsx

diff --git a/frontend2/src/components/EpisodeSwitcher.tsx b/frontend2/src/components/EpisodeSwitcher.tsx
index 05c1375ba..486f52190 100644
--- a/frontend2/src/components/EpisodeSwitcher.tsx
+++ b/frontend2/src/components/EpisodeSwitcher.tsx
@@ -36,7 +36,7 @@ const EpisodeSwitcher: React.FC = () => {
               queryFn: async () => await getEpisodeInfo({ id: newEpisodeId }),
             }))().catch((e) => toast.error((e as Error).message));
           setEpisodeId(newEpisodeId);
-          navigate(`${newEpisodeId}/home`);
+          navigate(`/${newEpisodeId}/home`);
         }}
       >
         <div className="relative">
diff --git a/frontend2/src/components/elements/Checkbox.tsx b/frontend2/src/components/elements/Checkbox.tsx
new file mode 100644
index 000000000..e8c93ed67
--- /dev/null
+++ b/frontend2/src/components/elements/Checkbox.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import Icon from "./Icon";
+import { Switch } from "@headlessui/react";
+import FormLabel from "./FormLabel";
+
+interface CheckboxProps {
+  disabled?: boolean;
+  checked?: boolean;
+  onChange: (checked: boolean) => void;
+  label?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  disabled = false,
+  checked = false,
+  onChange,
+  label,
+}) => {
+  return (
+    <Switch.Group as="div" className="flex flex-row items-center gap-2">
+      {label !== undefined && (
+        <Switch.Label>
+          <FormLabel label={label} />
+        </Switch.Label>
+      )}
+      <Switch
+        checked={checked}
+        onChange={onChange}
+        disabled={disabled}
+        className={`inline-flex h-5 w-5 items-center justify-center rounded
+                  ring-2 ring-inset ring-cyan-600/50 focus:outline-none
+                  focus:ring-2 ui-checked:bg-cyan-500 ui-checked:ring-0`}
+      >
+        <Icon
+          size="xs"
+          name="check"
+          className={checked ? "text-cyan-100 opacity-100" : "opacity-0"}
+        />
+      </Switch>
+    </Switch.Group>
+  );
+};
+
+export default Checkbox;
diff --git a/frontend2/src/components/elements/Pill.tsx b/frontend2/src/components/elements/Pill.tsx
index 3b372e4cd..f7ddcc2ab 100644
--- a/frontend2/src/components/elements/Pill.tsx
+++ b/frontend2/src/components/elements/Pill.tsx
@@ -4,7 +4,7 @@ import Icon from "./Icon";
 interface PillProps {
   text: string;
   deletable?: boolean;
-  onDelete?: (ev?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+  onDelete?: (ev?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
   className?: string;
 }
 
@@ -20,15 +20,15 @@ const Pill: React.FC<PillProps> = ({
     >
       <span>{text}</span>
       {deletable && (
-        <button
+        <div
           onClick={(ev) => {
             onDelete?.(ev);
             ev.stopPropagation();
           }}
-          className="cursor-pointer items-center rounded "
+          className="cursor-pointer items-center rounded hover:text-cyan-950"
         >
           <Icon name="x_mark" size="xs" />
-        </button>
+        </div>
       )}
     </div>
   );
diff --git a/frontend2/src/components/elements/SelectMenu.tsx b/frontend2/src/components/elements/SelectMenu.tsx
index 2a6aa303c..3ce90a26e 100644
--- a/frontend2/src/components/elements/SelectMenu.tsx
+++ b/frontend2/src/components/elements/SelectMenu.tsx
@@ -62,7 +62,7 @@ function SelectMenu<T extends React.Key | null | undefined>({
             </span>
             <div
               className="absolute inset-y-0 right-0 mr-2 flex transform items-center
-              transition duration-300 ui-open:rotate-180"
+              transition duration-300 ui-open:rotate-180 ui-not-open:rotate-0"
             >
               <Icon name="chevron_down" size="sm" />
             </div>
diff --git a/frontend2/src/components/elements/SelectMultipleMenu.tsx b/frontend2/src/components/elements/SelectMultipleMenu.tsx
index 0f108f0d5..674efc4a2 100644
--- a/frontend2/src/components/elements/SelectMultipleMenu.tsx
+++ b/frontend2/src/components/elements/SelectMultipleMenu.tsx
@@ -78,7 +78,7 @@ function SelectMultipleMenu<T extends React.Key | null | undefined>({
             </div>
             <div
               className="flex transform items-center
-              transition duration-300 ui-open:rotate-180"
+              transition duration-300 ui-open:rotate-180 ui-not-open:rotate-0"
             >
               <Icon name="chevron_down" size="sm" />
             </div>
@@ -101,7 +101,7 @@ function SelectMultipleMenu<T extends React.Key | null | undefined>({
                   value={option.value}
                 >
                   <div className="overflow-x-auto pr-2">{option.label}</div>
-                  <span className=" hidden items-center text-cyan-900 ui-selected:flex">
+                  <span className="hidden items-center text-cyan-900 ui-selected:flex">
                     <Icon name="check" size="sm" />
                   </span>
                 </Listbox.Option>
diff --git a/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx b/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx
index 2d00b35ad..006765eb5 100644
--- a/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx
+++ b/frontend2/src/components/tables/scrimmaging/RequestScrimModal.tsx
@@ -13,9 +13,7 @@ import { clone } from "lodash";
 import SelectMenu from "components/elements/SelectMenu";
 import SelectMultipleMenu from "components/elements/SelectMultipleMenu";
 import Button from "components/elements/Button";
-import DescriptiveCheckbox, {
-  CheckboxState,
-} from "components/elements/DescriptiveCheckbox";
+import Checkbox from "components/elements/Checkbox";
 
 interface RequestScrimModalProps {
   teamToRequest: TeamPublic;
@@ -24,7 +22,7 @@ interface RequestScrimModalProps {
   closeModal: () => void;
 }
 
-// Team statuses that allow for ranked scrims.
+// Only allow ranked scrims against "Regular" teams.
 const ALLOWS_RANKED = Status526Enum.R;
 const MAX_MAPS_PER_SCRIM = 10;
 const ORDER_OPTIONS = [
@@ -73,82 +71,96 @@ const RequestScrimModal: React.FC<RequestScrimModalProps> = ({
       title={`Request scrimmage with ${teamToRequest.name}`}
     >
       {
-        <div className="mt-4 flex flex-col gap-2">
-          <SelectMenu
-            disabled={ranked}
-            label="Player Order"
-            options={ORDER_OPTIONS}
-            value={selectedOrder}
-            onChange={(newOrder) => {
-              setSelectedOrder(newOrder);
-            }}
-          />
-          <SelectMultipleMenu<string>
-            errorMessage={mapErrorMessage}
-            disabled={ranked}
-            label="Select Maps"
-            placeholder={ranked ? "Random 3 maps!" : "Select up to 10 maps..."}
-            options={
-              maps.map((map) => ({
-                value: map.name,
-                label: map.name,
-              })) ?? []
-            }
-            value={selectedMapNames}
-            onChange={(newMapNames) => {
-              if (newMapNames.length > MAX_MAPS_PER_SCRIM) {
-                setMapErrorMessage("You can only select up to 10 maps.");
-                return;
-              }
-              setMapErrorMessage(undefined);
-              setSelectedMapNames(newMapNames);
-            }}
-          />
-          <Button
-            disabled={ranked}
-            label={"Use random 3 maps"}
-            onClick={() => {
-              setSelectedMapNames(getRandomMaps());
-            }}
-          />
-          <DescriptiveCheckbox
-            status={ranked ? CheckboxState.CHECKED : CheckboxState.UNCHECKED}
-            title="Ranked?"
+        <div className="mt-4 flex flex-col gap-4">
+          <Checkbox
             disabled={teamToRequest.status !== ALLOWS_RANKED}
-            description="Request a ranked scrimmage. All ranked scrimmages are played with alternating player order on 3 random maps."
+            checked={ranked}
             onChange={(checked) => {
               if (checked) {
                 setSelectedOrder(PlayerOrderEnum.QuestionMark);
                 setSelectedMapNames([]);
+                setMapErrorMessage(undefined);
               } else {
                 setSelectedMapNames(getRandomMaps());
               }
               setRanked(checked);
             }}
+            label="Ranked?"
           />
-          <Button
-            label="Request Scrimmage"
-            fullWidth
-            loading={request.isPending}
-            onClick={() => {
-              void request
-                .mutateAsync({
-                  episodeId,
-                  scrimmageRequestRequest: {
-                    requested_to: teamToRequest.id,
-                    is_ranked: ranked,
-                    map_names: selectedMapNames,
-                    player_order: selectedOrder,
-                  },
-                })
-                .then(() => {
-                  closeModal();
-                })
-                .catch((err: string) => {
-                  console.error(`Error requesting scrimmage: ${err}`);
-                });
+          <SelectMenu
+            disabled={ranked}
+            label="Player order"
+            options={ORDER_OPTIONS}
+            value={selectedOrder}
+            onChange={(newOrder): void => {
+              setSelectedOrder(newOrder);
             }}
           />
+          <div className="flex flex-col gap-2">
+            <SelectMultipleMenu<string>
+              errorMessage={mapErrorMessage}
+              disabled={ranked}
+              label="Maps"
+              placeholder={
+                ranked ? "Random 3 maps!" : "Select up to 10 maps..."
+              }
+              options={
+                maps.map((map) => ({
+                  value: map.name,
+                  label: map.name,
+                })) ?? []
+              }
+              value={ranked ? [] : selectedMapNames}
+              onChange={(newMapNames) => {
+                setSelectedMapNames(newMapNames);
+                if (newMapNames.length > MAX_MAPS_PER_SCRIM) {
+                  setMapErrorMessage("You can only select up to 10 maps.");
+                } else if (newMapNames.length === 0) {
+                  setMapErrorMessage("You must select at least one map");
+                } else {
+                  setMapErrorMessage(undefined);
+                }
+              }}
+            />
+            <div
+              hidden={ranked}
+              onClick={() => {
+                setMapErrorMessage(undefined);
+                setSelectedMapNames(getRandomMaps());
+              }}
+              className="mt-0 cursor-pointer text-sm text-cyan-600"
+            >
+              [Click to use 3 random maps]
+            </div>
+          </div>
+          <div className="mt-2 flex flex-row gap-4">
+            <Button
+              label="Request Scrimmage"
+              variant="dark"
+              fullWidth
+              disabled={mapErrorMessage !== undefined}
+              loading={request.isPending}
+              onClick={() => {
+                void request
+                  .mutateAsync({
+                    episodeId,
+                    scrimmageRequestRequest: {
+                      requested_to: teamToRequest.id,
+                      is_ranked: ranked,
+                      map_names: selectedMapNames,
+                      player_order: selectedOrder,
+                    },
+                  })
+                  .then(() => {
+                    closeModal();
+                  })
+                  .catch((err: string) => {
+                    console.error(`Error requesting scrimmage: ${err}`);
+                  });
+              }}
+            />
+            <Button fullWidth label="Cancel" onClick={closeModal} />
+          </div>
         </div>
       }
     </Modal>