Merge pull request #2710 from nickofolas/improvement/tabs

Update `<Tabs>` sizing and style
This commit is contained in:
hydroflame 2022-03-07 17:22:06 -05:00 committed by GitHub
commit 3310928598
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 23 additions and 5 deletions

@ -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} />,
)}

@ -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} />

@ -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" />

@ -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: {

@ -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} />}