section name -> collapsible name

tgstation · Nov 3, 2024 · fe49518 · fe49518
1 parent 6a9bc3a
commit fe49518
Showing 1 changed file with 68 additions and 76 deletions.
diff --git 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>
   );
 };