From 5378e8cc389e6ce7fa37350a01a4131ad107f827 Mon Sep 17 00:00:00 2001
From: jaype87 <jaype87@gmail.com>
Date: Fri, 6 May 2022 00:44:05 +0200
Subject: [PATCH 1/2] sort and color grafting list

---
 src/PersonObjects/Grafting/ui/GraftingRoot.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/PersonObjects/Grafting/ui/GraftingRoot.tsx b/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
index 3b9ff5738..72320b181 100644
--- a/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
+++ b/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
@@ -95,9 +95,9 @@ export const GraftingRoot = (): React.ReactElement => {
         {getGraftingAvailableAugs(player).length > 0 ? (
           <Paper sx={{ my: 1, width: "fit-content", display: "grid", gridTemplateColumns: "1fr 3fr" }}>
             <List sx={{ height: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}>
-              {getGraftingAvailableAugs(player).map((k, i) => (
+              {getGraftingAvailableAugs(player).sort((a, b) => GraftableAugmentations[a].cost - GraftableAugmentations[b].cost).map((k, i) => (
                 <ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
-                  <Typography>{k}</Typography>
+                  <Typography sx={{color: canGraft(player, GraftableAugmentations[k]) ? Settings.theme.primary : Settings.theme.disabled}}>{k}</Typography>
                 </ListItemButton>
               ))}
             </List>

From 1a8e31ed09bfc0b8b96b97ac8cb44e37b59780f4 Mon Sep 17 00:00:00 2001
From: jaype87 <jaype87@gmail.com>
Date: Fri, 6 May 2022 01:06:53 +0200
Subject: [PATCH 2/2] fix formating

---
 .../Grafting/ui/GraftingRoot.tsx              | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/PersonObjects/Grafting/ui/GraftingRoot.tsx b/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
index 72320b181..069a71842 100644
--- a/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
+++ b/src/PersonObjects/Grafting/ui/GraftingRoot.tsx
@@ -95,11 +95,21 @@ export const GraftingRoot = (): React.ReactElement => {
         {getGraftingAvailableAugs(player).length > 0 ? (
           <Paper sx={{ my: 1, width: "fit-content", display: "grid", gridTemplateColumns: "1fr 3fr" }}>
             <List sx={{ height: 400, overflowY: "scroll", borderRight: `1px solid ${Settings.theme.welllight}` }}>
-              {getGraftingAvailableAugs(player).sort((a, b) => GraftableAugmentations[a].cost - GraftableAugmentations[b].cost).map((k, i) => (
-                <ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
-                  <Typography sx={{color: canGraft(player, GraftableAugmentations[k]) ? Settings.theme.primary : Settings.theme.disabled}}>{k}</Typography>
-                </ListItemButton>
-              ))}
+              {getGraftingAvailableAugs(player)
+                .sort((a, b) => GraftableAugmentations[a].cost - GraftableAugmentations[b].cost)
+                .map((k, i) => (
+                  <ListItemButton key={i + 1} onClick={() => setSelectedAug(k)} selected={selectedAug === k}>
+                    <Typography
+                      sx={{
+                        color: canGraft(player, GraftableAugmentations[k])
+                          ? Settings.theme.primary
+                          : Settings.theme.disabled,
+                      }}
+                    >
+                      {k}
+                    </Typography>
+                  </ListItemButton>
+                ))}
             </List>
             <Box sx={{ m: 1 }}>
               <Typography variant="h6" sx={{ display: "flex", alignItems: "center", flexWrap: "wrap" }}>