From 66e2a8e844207ed79d8d8d58f0591266afaccee7 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 19 Aug 2023 10:54:09 +0300
Subject: [PATCH] Group card: Preferred mode first

---
 .../sendouq/components/ModePrefenceIcons.tsx  | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/app/features/sendouq/components/ModePrefenceIcons.tsx b/app/features/sendouq/components/ModePrefenceIcons.tsx
index ea2b6b6ea..058076c36 100644
--- a/app/features/sendouq/components/ModePrefenceIcons.tsx
+++ b/app/features/sendouq/components/ModePrefenceIcons.tsx
@@ -2,6 +2,17 @@ import { ModeImage } from "~/components/Image";
 import type { Group } from "~/db/types";
 import { assertUnreachable } from "~/utils/types";
 
+const SZOnly = () => <ModeImage mode="SZ" size={16} />;
+
+const AllModes = () => (
+  <>
+    <ModeImage mode="SZ" size={16} />
+    <ModeImage mode="TC" size={16} />
+    <ModeImage mode="RM" size={16} />
+    <ModeImage mode="CB" size={16} />
+  </>
+);
+
 export function ModePreferenceIcons({
   preference,
 }: {
@@ -15,7 +26,6 @@ export function ModePreferenceIcons({
       case "NO_PREFERENCE":
         return "=";
       case "PREFER_ALL_MODES":
-        return "<";
       case "PREFER_SZ":
         return ">";
       default:
@@ -25,19 +35,18 @@ export function ModePreferenceIcons({
 
   return (
     <>
-      {preference !== "ALL_MODES_ONLY" ? (
-        <ModeImage mode="SZ" size={16} />
+      {["SZ_ONLY", "PREFER_SZ"].includes(preference) ? <SZOnly /> : null}
+      {["ALL_MODES_ONLY", "PREFER_ALL_MODES", "NO_PREFERENCE"].includes(
+        preference
+      ) ? (
+        <AllModes />
       ) : null}
       {comparisonSign ? (
         <span className="text-main-forced">{comparisonSign}</span>
       ) : null}
-      {preference !== "SZ_ONLY" ? (
-        <>
-          <ModeImage mode="SZ" size={16} />
-          <ModeImage mode="TC" size={16} />
-          <ModeImage mode="RM" size={16} />
-          <ModeImage mode="CB" size={16} />
-        </>
+      {["PREFER_SZ"].includes(preference) ? <AllModes /> : null}
+      {["PREFER_ALL_MODES", "NO_PREFERENCE"].includes(preference) ? (
+        <SZOnly />
       ) : null}
     </>
   );