From 0ed5d1fbe3db62801cc37d6d1f7252fa2f366a00 Mon Sep 17 00:00:00 2001
From: MrMelbert <kmelbert4@gmail.com>
Date: Tue, 14 Nov 2023 14:40:47 -0600
Subject: [PATCH] Reformats the UI

---
 .../loadouts/loadout_ui/loadout_manager.dm    |  1 +
 .../tgui/interfaces/_LoadoutManager.tsx       | 22 +++++++++++--------
 2 files changed, 14 insertions(+), 9 deletions(-)

diff --git a/maplestation_modules/code/modules/loadouts/loadout_ui/loadout_manager.dm b/maplestation_modules/code/modules/loadouts/loadout_ui/loadout_manager.dm
index 77d0f0396766..6e443717fc00 100644
--- a/maplestation_modules/code/modules/loadouts/loadout_ui/loadout_manager.dm
+++ b/maplestation_modules/code/modules/loadouts/loadout_ui/loadout_manager.dm
@@ -173,6 +173,7 @@ GLOBAL_LIST_INIT(loadout_categories, init_loadout_categories())
 /datum/preference_middleware/loadout/proc/select_slot(list/params, mob/user)
 	preferences.write_preference(GLOB.preference_entries[/datum/preference/numeric/active_loadout], text2num(params["new_slot"]))
 	character_preview_view.update_body()
+	preferences.character_preview_view?.update_body()
 	preferences.update_static_data_for_all_viewers()
 
 /datum/preference_middleware/loadout/get_ui_data(mob/user)
diff --git a/tgui/packages/tgui/interfaces/_LoadoutManager.tsx b/tgui/packages/tgui/interfaces/_LoadoutManager.tsx
index f11fe3a3e2f8..93c3ce83e4d6 100644
--- a/tgui/packages/tgui/interfaces/_LoadoutManager.tsx
+++ b/tgui/packages/tgui/interfaces/_LoadoutManager.tsx
@@ -338,6 +338,19 @@ const LoadoutPreviewSection = (props, context) => {
           )}
         </Stack.Item>
         <Stack.Divider />
+        <Stack.Item align="center">
+          <Stack>
+            {loadoutSlots(max_loadout_slots).map((slot) => (
+              <Stack.Item key={slot}>
+                <Button
+                  color={slot === current_slot ? 'green' : 'grey'}
+                  content={slot}
+                  onClick={() => act('select_slot', { new_slot: slot })}
+                />
+              </Stack.Item>
+            ))}
+          </Stack>
+        </Stack.Item>
         <Stack.Item align="center">
           <Stack>
             <Stack.Item>
@@ -350,15 +363,6 @@ const LoadoutPreviewSection = (props, context) => {
                 }
               />
             </Stack.Item>
-            {loadoutSlots(max_loadout_slots).map((slot) => (
-              <Stack.Item key={slot}>
-                <Button
-                  color={slot === current_slot ? 'green' : ''}
-                  content={slot}
-                  onClick={() => act('select_slot', { new_slot: slot })}
-                />
-              </Stack.Item>
-            ))}
             <Stack.Item>
               <Button
                 icon="chevron-right"