Improve addons display

client/src/components/Server/ExpansionsBar.tsx

@@ -1,12 +1,4 @@
-import { AddCircleTwoTone } from '@mui/icons-material';
-import {
-  Box,
-  IconButton,
-  ToggleButton,
-  ToggleButtonGroup,
-  Tooltip,
-  useTheme,
-} from '@mui/material';
+import { Box, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 import { ServerData } from '../../data/ServerData';
 
 const expansionButtons = [
@@ -61,12 +53,9 @@ type ExpansionBarProps = { server: ServerData };
 
 export default function ExpansionBar({ server }: ExpansionBarProps) {
   const { expansions } = server;
-  const theme = useTheme();
 
   const addons = ['acp', 'amk', 'asa', 'abyssea', 'voidwatch', 'rov', 'tvr'];
-
   let enabledAddons = addons.filter((prop) => expansions[prop]);
-
   enabledAddons = enabledAddons.map((prop) => {
     if (prop === 'abyssea' || prop === 'voidwatch') {
       return prop.charAt(0).toUpperCase() + prop.slice(1);
@@ -76,6 +65,18 @@ export default function ExpansionBar({ server }: ExpansionBarProps) {
 
   return (
     <Box className="my-1 flex items-center">
+      <Tooltip
+        title={
+          enabledAddons.length !== 0 && (
+            <div style={{ whiteSpace: 'pre-line' }}>
+              {enabledAddons.join('\n')}
+            </div>
+          )
+        }
+        placement="right"
+        disableInteractive
+        arrow
+      >
         <ToggleButtonGroup
           size="small"
           value={
@@ -85,33 +86,25 @@ export default function ExpansionBar({ server }: ExpansionBarProps) {
               expansions.toau && 'toau',
               expansions.wotg && 'wotg',
               expansions.soa && 'soa',
+              enabledAddons.length !== 0 && 'addons',
             ]
           }
           sx={{ '& button': { maxHeight: '1rem' } }}
         >
           {expansionButtons}
-      </ToggleButtonGroup>
           {enabledAddons.length !== 0 && (
-        <Tooltip
-          title={
-            <div style={{ whiteSpace: 'pre-line' }}>
-              {enabledAddons.join('\n')}
-            </div>
-          }
-          placement="right"
-          disableInteractive
-          arrow
+            <ToggleButton
+              key="addons"
+              value="addons"
+              aria-label="addons-enabled"
+              className="py-0"
+              disabled
             >
-          <IconButton className="p-0" disableRipple>
-            <AddCircleTwoTone
-              style={{
-                maxHeight: '1rem',
-                color: theme.palette.text.primary,
-              }}
-            />
-          </IconButton>
-        </Tooltip>
+              +
+            </ToggleButton>
           )}
+        </ToggleButtonGroup>
+      </Tooltip>
     </Box>
   );
 }

client/src/pages/About.tsx

@@ -144,24 +144,6 @@ MAIN.ENABLE_TVR`;
                 http://play.myserver.com/api/).
               </Typography>
             </Box>
-            <Box className="mb-3">
-              <Typography align="center" variant="h6">
-                What if my server isn&apos;t running LSB?
-              </Typography>
-              <Typography
-                component="p"
-                variant="body1"
-                color={(theme) => alpha(theme.palette.text.primary, 0.87)}
-              >
-                If you&apos;re not on LSB, you could fake the API response.
-                Right now the only required settings are <b>MAIN.SERVER_NAME</b>
-                , <b>MAIN.MAX_LEVEL</b>, and <b>LOGIN.LOGIN_LIMIT</b>.
-                You&apos;ll want to look at the LSB settings and serve whatever
-                relevant changes you&apos;ve made using the LSB equivalent.
-                Settings should be served at <b>/api/settings</b> and total
-                active sessions should be served at <b>/api/sessions</b>.
-              </Typography>
-            </Box>
             <Box className="mb-3">
               <Typography align="center" variant="h6">
                 How can I add a link to the server website?
@@ -195,6 +177,23 @@ MAIN.ENABLE_TVR`;
                 <CodeCard title="Settings" content={recommendedSettings} />
               </Typography>
             </Box>
+            <Box className="mb-3">
+              <Typography align="center" variant="h6">
+                What if my server isn&apos;t running LSB?
+              </Typography>
+              <Typography
+                component="p"
+                variant="body1"
+                color={(theme) => alpha(theme.palette.text.primary, 0.87)}
+              >
+                If you&apos;re not running LSB, you could fake the API response.
+                You&apos;ll want to look at the LSB settings and serve whatever
+                relevant changes you&apos;ve made using the LSB equivalent, the
+                above listed settings at minimum. Settings should be served at{' '}
+                <b>/api/settings</b> and total active sessions should be served
+                at <b>/api/sessions</b>.
+              </Typography>
+            </Box>
           </AccordionDetails>
         </Accordion>
       </Card>