From fe495186995fa1403231abe48de580b54b56a3ec Mon Sep 17 00:00:00 2001
From: Rune Knight <30399783+Runian@users.noreply.github.com>
Date: Sun, 3 Nov 2024 15:34:21 -0800
Subject: [PATCH] section name -> collapsible name

---
 .../tgui/interfaces/MutationSelector.tsx      | 144 +++++++++---------
 1 file changed, 68 insertions(+), 76 deletions(-)

diff --git a/tgui/packages/tgui/interfaces/MutationSelector.tsx b/tgui/packages/tgui/interfaces/MutationSelector.tsx
index fd1d6c2a5764f..2dbc586dc4892 100644
--- a/tgui/packages/tgui/interfaces/MutationSelector.tsx
+++ b/tgui/packages/tgui/interfaces/MutationSelector.tsx
@@ -78,33 +78,30 @@ const SurvivalMutationSection = (_props: any) => {
   const { survival_mutations, shell_chambers, cost, biomass } = data;
 
   return (
-    <Section
-      title={`Survival | Shell Chambers: ${shell_chambers}/3`}
-      key="Survival"
+    <Collapsible
+      title={`Survival Mutations | Shell Chambers: ${shell_chambers}/3`}
     >
-      <Collapsible title={`Survival Mutations`}>
-        {survival_mutations.map((mutation) => (
-          <Section
-            title={`${mutation.name}`}
-            mb={1}
-            key={mutation.name}
-            buttons={
-              <Button
-                content={`Buy (${cost})`}
-                key={mutation.name}
-                onClick={() => act('purchase', { upgrade_name: mutation.name })}
-                disabled={cost > biomass || shell_chambers === 0}
-                selected={mutation.owned}
-              />
-            }
-          >
-            <Flex direction="column-reverse" align={'left'}>
-              {mutation.desc}
-            </Flex>
-          </Section>
-        ))}
-      </Collapsible>
-    </Section>
+      {survival_mutations.map((mutation) => (
+        <Section
+          title={`${mutation.name}`}
+          mb={1}
+          key={mutation.name}
+          buttons={
+            <Button
+              content={`Buy (${cost})`}
+              key={mutation.name}
+              onClick={() => act('purchase', { upgrade_name: mutation.name })}
+              disabled={cost > biomass || shell_chambers === 0}
+              selected={mutation.owned}
+            />
+          }
+        >
+          <Flex direction="column-reverse" align={'left'}>
+            {mutation.desc}
+          </Flex>
+        </Section>
+      ))}
+    </Collapsible>
   );
 };
 
@@ -113,30 +110,28 @@ const AttackMutationSection = (_props: any) => {
   const { attack_mutations, spur_chambers, cost, biomass } = data;
 
   return (
-    <Section title={`Attack | Spur Chambers: ${spur_chambers}/3`} key="Attack">
-      <Collapsible title={`Attack Mutations`}>
-        {attack_mutations.map((mutation) => (
-          <Section
-            title={`${mutation.name}`}
-            mb={1}
-            key={mutation.name}
-            buttons={
-              <Button
-                content={`Buy (${cost})`}
-                key={mutation.name}
-                onClick={() => act('purchase', { upgrade_name: mutation.name })}
-                disabled={cost > biomass || spur_chambers === 0}
-                selected={mutation.owned}
-              />
-            }
-          >
-            <Flex direction="column-reverse" align={'left'}>
-              {mutation.desc}
-            </Flex>
-          </Section>
-        ))}
-      </Collapsible>
-    </Section>
+    <Collapsible title={`Attack Mutations | Spur Chambers: ${spur_chambers}/3`}>
+      {attack_mutations.map((mutation) => (
+        <Section
+          title={`${mutation.name}`}
+          mb={1}
+          key={mutation.name}
+          buttons={
+            <Button
+              content={`Buy (${cost})`}
+              key={mutation.name}
+              onClick={() => act('purchase', { upgrade_name: mutation.name })}
+              disabled={cost > biomass || spur_chambers === 0}
+              selected={mutation.owned}
+            />
+          }
+        >
+          <Flex direction="column-reverse" align={'left'}>
+            {mutation.desc}
+          </Flex>
+        </Section>
+      ))}
+    </Collapsible>
   );
 };
 
@@ -145,32 +140,29 @@ const UtilityMutationSection = (_props: any) => {
   const { utility_mutations, veil_chambers, cost, biomass } = data;
 
   return (
-    <Section
-      title={`Utility | Veil Chambers: ${veil_chambers}/3`}
-      key="Utility"
+    <Collapsible
+      title={`Utility Mutations | Veil Chambers: ${veil_chambers}/3`}
     >
-      <Collapsible title={`Utility Mutations`}>
-        {utility_mutations.map((mutation) => (
-          <Section
-            title={`${mutation.name}`}
-            mb={1}
-            key={mutation.name}
-            buttons={
-              <Button
-                content={`Buy (${cost})`}
-                key={mutation.name}
-                onClick={() => act('purchase', { upgrade_name: mutation.name })}
-                disabled={cost > biomass || veil_chambers === 0}
-                selected={mutation.owned}
-              />
-            }
-          >
-            <Flex direction="column-reverse" align={'left'}>
-              {mutation.desc}
-            </Flex>
-          </Section>
-        ))}
-      </Collapsible>
-    </Section>
+      {utility_mutations.map((mutation) => (
+        <Section
+          title={`${mutation.name}`}
+          mb={1}
+          key={mutation.name}
+          buttons={
+            <Button
+              content={`Buy (${cost})`}
+              key={mutation.name}
+              onClick={() => act('purchase', { upgrade_name: mutation.name })}
+              disabled={cost > biomass || veil_chambers === 0}
+              selected={mutation.owned}
+            />
+          }
+        >
+          <Flex direction="column-reverse" align={'left'}>
+            {mutation.desc}
+          </Flex>
+        </Section>
+      ))}
+    </Collapsible>
   );
 };