From 6ab28dc82d418ed861a7aeb57935be391d4b926a Mon Sep 17 00:00:00 2001
From: NovaBot <154629622+NovaBot13@users.noreply.github.com>
Date: Sun, 14 Apr 2024 20:32:27 -0400
Subject: [PATCH] [MIRROR] Makes TGchat General settings better (#1993)

* Makes TGchat General settings better (#82652)

## About The Pull Request
Removes dropdowns from General settings tab into TGchat
Replace it with map() and Collapsible

| Before | After |
| - | - |
|
![image](https://github.com/tgstation/tgstation/assets/69762909/b9956aef-3c99-4ec0-b7bd-d23db75a9c71)
|
![image](https://github.com/tgstation/tgstation/assets/69762909/35504396-99a7-402c-97b6-3496013d9b2b)
|

## Why It's Good For The Game
Dropdowns sucks. At least in TGchat settings, it's not the first time
they've been broken, but now it's trivially extremely inconvenient.
Now, it's faster to change the theme/font, plus a font preview has been
added, as it was before with GoonChat

<details>
<summary>Video</summary>


https://github.com/tgstation/tgstation/assets/69762909/b440db53-e78e-4440-ba33-b8e7ecade00a
</details>



## Changelog

:cl:
qol: General settings tab into TGchat, looks better now, and is more
convenient to use. Also, each button has a font written on it.
/:cl:

* Makes TGchat General settings better

---------

Co-authored-by: Aylong <69762909+AyIong@users.noreply.github.com>
---
 .../tgui-panel/settings/SettingsPanel.jsx     | 107 +++++++++++-------
 1 file changed, 66 insertions(+), 41 deletions(-)

diff --git a/tgui/packages/tgui-panel/settings/SettingsPanel.jsx b/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
index 130f59d8053..e5691037bba 100644
--- a/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
+++ b/tgui/packages/tgui-panel/settings/SettingsPanel.jsx
@@ -5,14 +5,15 @@
  */
 
 import { toFixed } from 'common/math';
+import { capitalize } from 'common/string';
 import { useLocalState } from 'tgui/backend';
 import { useDispatch, useSelector } from 'tgui/backend';
 import {
   Box,
   Button,
+  Collapsible,
   ColorBox,
   Divider,
-  Dropdown,
   Input,
   LabeledList,
   NumberInput,
@@ -84,37 +85,62 @@ export const SettingsGeneral = (props) => {
     <Section>
       <LabeledList>
         <LabeledList.Item label="Theme">
-          <Dropdown
-            selected={theme}
-            options={THEMES}
-            onSelected={(value) =>
-              dispatch(
-                updateSettings({
-                  theme: value,
-                }),
-              )
-            }
-          />
+          {THEMES.map((THEME) => (
+            <Button
+              key={THEME}
+              content={capitalize(THEME)}
+              selected={theme === THEME}
+              color="transparent"
+              onClick={() =>
+                dispatch(
+                  updateSettings({
+                    theme: THEME,
+                  }),
+                )
+              }
+            />
+          ))}
         </LabeledList.Item>
         <LabeledList.Item label="Font style">
-          <Stack inline align="baseline">
-            <Stack.Item>
-              {(!freeFont && (
-                <Dropdown
-                  selected={fontFamily}
-                  options={FONTS}
-                  onSelected={(value) =>
-                    dispatch(
-                      updateSettings({
-                        fontFamily: value,
-                      }),
-                    )
-                  }
-                />
-              )) || (
+          <Stack.Item>
+            {(!freeFont && (
+              <Collapsible
+                title={fontFamily}
+                width={'100%'}
+                buttons={
+                  <Button
+                    content="Custom font"
+                    icon={freeFont ? 'lock-open' : 'lock'}
+                    color={freeFont ? 'good' : 'bad'}
+                    onClick={() => {
+                      setFreeFont(!freeFont);
+                    }}
+                  />
+                }
+              >
+                {FONTS.map((FONT) => (
+                  <Button
+                    key={FONT}
+                    content={FONT}
+                    fontFamily={FONT}
+                    selected={fontFamily === FONT}
+                    color="transparent"
+                    onClick={() =>
+                      dispatch(
+                        updateSettings({
+                          fontFamily: FONT,
+                        }),
+                      )
+                    }
+                  />
+                ))}
+              </Collapsible>
+            )) || (
+              <Stack>
                 <Input
+                  width={'100%'}
                   value={fontFamily}
-                  onChange={(e, value) =>
+                  onChange={(value) =>
                     dispatch(
                       updateSettings({
                         fontFamily: value,
@@ -122,19 +148,18 @@ export const SettingsGeneral = (props) => {
                     )
                   }
                 />
-              )}
-            </Stack.Item>
-            <Stack.Item>
-              <Button
-                content="Custom font"
-                icon={freeFont ? 'lock-open' : 'lock'}
-                color={freeFont ? 'good' : 'bad'}
-                onClick={() => {
-                  setFreeFont(!freeFont);
-                }}
-              />
-            </Stack.Item>
-          </Stack>
+                <Button
+                  ml={0.5}
+                  content="Custom font"
+                  icon={freeFont ? 'lock-open' : 'lock'}
+                  color={freeFont ? 'good' : 'bad'}
+                  onClick={() => {
+                    setFreeFont(!freeFont);
+                  }}
+                />
+              </Stack>
+            )}
+          </Stack.Item>
         </LabeledList.Item>
         <LabeledList.Item label="Font size">
           <NumberInput