[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 <[email protected]>

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,57 +85,81 @@ 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,
                       }),
                     )
                   }
                 />
-              )}
-            </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