make OptionModal pretty

src/ui/Duel/Message/NeosModal/index.module.scss

@@ -7,7 +7,7 @@
   top: -webkit-fill-available;
   margin: auto;
   height: fit-content;
-  transition: 0.3s;
+  transition: 0.2s;
 }
 
 .mini {
@@ -15,7 +15,7 @@
   bottom: 0 !important;
   transform: translateY(calc(50% - 66px));
   .ant-modal-body {
-    animation: fadeout 0.3s forwards;
+    animation: fadeout 0.1s forwards;
   }
 }
 

src/ui/Duel/Message/OptionModal/index.module.scss

+.container {
+  :global(.ant-pro-checkcard-header) {
+    font-family: var(--theme-font);
+    font-size: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  :global(.ant-pro-checkcard) {
+    background-color: #1414142b;
+  }
+
+  :global(.ant-pro-checkcard-checked) {
+    &::before {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      content: "";
+      z-index: 1;
+      background-color: #0023bf32;
+      box-shadow: 0 0 0 1px #0087e6 inset;
+    }
+
+    &::after {
+      display: none;
+    }
+  }
+
+  .check-card-group {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 0.625rem;
+  }
+
+  .check-card {
+    max-width: 12.5rem;
+    margin-inline-end: 0;
+    margin-block-end: 0;
+  }
+}

src/ui/Duel/Message/OptionModal/index.tsx

@@ -16,6 +16,7 @@ import { Container } from "@/container";
 import { getUIContainer } from "@/container/compat";
 
 import { NeosModal } from "../NeosModal";
+import styles from "./index.module.scss";
 
 type Options = { info: string; response: number }[];
 
@@ -67,35 +68,27 @@ export const OptionModal = () => {
       {grouped.map(
         (options, i) =>
           i === page && (
-            <CheckCard.Group
-              key={i}
-              bordered
-              multiple
-              value={selecteds[i]}
-              style={{
-                display: "grid",
-                gridTemplateColumns: "repeat(2, 1fr)",
-                gap: "0.625rem",
-              }}
-              onChange={(values: any) => {
-                const v = selecteds.map((x, i) => (i === page ? values : x));
-                setSelecteds(v);
-              }}
-            >
-              {options.map((option, idx) => (
-                <CheckCard
-                  key={idx}
-                  style={{
-                    width: "12.5rem",
-                    fontSize: "1rem",
-                    marginInlineEnd: 0,
-                    marginBlockEnd: 0,
-                  }}
-                  title={option.info}
-                  value={option.response}
-                />
-              ))}
-            </CheckCard.Group>
+            <div className={styles.container} key={i}>
+              <CheckCard.Group
+                bordered
+                multiple
+                value={selecteds[i]}
+                className={styles["check-card-group"]}
+                onChange={(values: any) => {
+                  const v = selecteds.map((x, i) => (i === page ? values : x));
+                  setSelecteds(v);
+                }}
+              >
+                {options.map((option, idx) => (
+                  <CheckCard
+                    key={idx}
+                    className={styles["check-card"]}
+                    description={option.info}
+                    value={option.response}
+                  />
+                ))}
+              </CheckCard.Group>
+            </div>
           ),
       )}
     </NeosModal>