Merge pull request #2710 from nickofolas/improvement/tabs

Update `<Tabs>` sizing and style

src/Corporation/ui/CityTabs.tsx

@@ -30,7 +30,7 @@ export function CityTabs(props: IProps): React.ReactElement {
   }
   return (
     <>
-      <Tabs variant="fullWidth" value={city} onChange={handleChange}>
+      <Tabs variant="fullWidth" value={city} onChange={handleChange} sx={{ minWidth: 'fit-content', maxWidth: '65%' }}>
         {Object.values(division.offices).map(
           (office: OfficeSpace | 0) => office !== 0 && <Tab key={office.loc} label={office.loc} value={office.loc} />,
         )}

src/Corporation/ui/CorporationRoot.tsx

@@ -38,7 +38,7 @@ export function CorporationRoot(): React.ReactElement {
 
   return (
     <Context.Corporation.Provider value={corporation}>
-      <Tabs variant="fullWidth" value={divisionName} onChange={handleChange}>
+      <Tabs variant="fullWidth" value={divisionName} onChange={handleChange} sx={{ minWidth: 'fit-content', maxWidth: '65%' }}>
         <Tab label={corporation.name} value={"Overview"} />
         {corporation.divisions.map((div) => (
           <Tab key={div.name} label={div.name} value={div.name} />

src/Gang/ui/GangRoot.tsx

@@ -32,7 +32,7 @@ export function GangRoot(): React.ReactElement {
 
   return (
     <Context.Gang.Provider value={gang}>
-      <Tabs variant="fullWidth" value={value} onChange={handleChange}>
+      <Tabs variant="fullWidth" value={value} onChange={handleChange} sx={{ minWidth: 'fit-content', maxWidth: '45%' }}>
         <Tab label="Management" />
         <Tab label="Equipment" />
         <Tab label="Territory" />

src/Themes/ui/Theme.tsx

@@ -336,6 +336,24 @@ export function refreshTheme(): void {
               color: Settings.theme.primary,
             },
           },
+          root: {
+            backgroundColor: Settings.theme.backgroundsecondary,
+            border: "1px solid " + Settings.theme.well,
+            margin: '3px',
+
+            "&.Mui-selected": {
+              backgroundColor: Settings.theme.button
+            },
+          },
+        },
+      },
+      MuiTabs: {
+        defaultProps: {
+          TabIndicatorProps: {
+            style: {
+              display: "none"
+            }
+          }
         },
       },
       MuiAlert: {

src/ui/ActiveScripts/ActiveScriptsRoot.tsx

@@ -31,9 +31,9 @@ export function ActiveScriptsRoot(props: IProps): React.ReactElement {
   }
   return (
     <>
-      <Tabs variant="fullWidth" value={tab} onChange={handleChange}>
+      <Tabs variant="fullWidth" value={tab} onChange={handleChange} sx={{ minWidth: 'fit-content', maxWidth: '25%' }}>
         <Tab label={"Active"} value={"active"} />
-        <Tab label={"Recent"} value={"recent"} />
+        <Tab label={"Recently Killed"} value={"recent"} />
       </Tabs>
 
       {tab === "active" && <ActiveScriptsPage workerScripts={props.workerScripts} />}