random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-01-01 15:22:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

settings theme changes

Browse Source
This commit is contained in:
Sakshi Gupta
2025-04-30 15:23:32 +05:30
parent 8dd2571444
commit 14568b032e
9 changed files with 223 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
src/Explorer/Controls/Settings/SettingsComponent.tsx
View File

@@ -1,4 +1,4 @@
import { IPivotItemProps, IPivotProps, Pivot, PivotItem } from "@fluentui/react";
import { IPivotItemProps, IPivotProps, Pivot, PivotItem, Stack, getTheme } from "@fluentui/react";
import {
ComputedPropertiesComponent,
ComputedPropertiesComponentProps,
@@ -1137,6 +1137,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
};
public render(): JSX.Element {
const theme = getTheme();
const scaleComponentProps: ScaleComponentProps = {
collection: this.collection,
database: this.database,
@@ -1340,28 +1341,101 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
selectedKey: SettingsV2TabTypes[this.state.selectedTab],
};
const pivotItems = tabs.map((tab) => {
const pivotItemProps: IPivotItemProps = {
itemKey: SettingsV2TabTypes[tab.tab],
style: { marginTop: 20 },
headerText: getTabTitle(tab.tab),
};
return (
<PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
{tab.content}
</PivotItem>
);
});
const pivotStyles = {
root: {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)',
selectors: {
'& .ms-Pivot-link': {
color: 'var(--colorNeutralForeground1)'
},
'& .ms-Pivot-link.is-selected::before': {
backgroundColor: 'var(--colorCompoundBrandBackground)'
},
}
},
link: {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)',
selectors: {
'&:hover': {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)'
},
'&:active': {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)'
},
'&[aria-selected="true"]': {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)',
selectors: {
'&:hover': {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)'
},
'&:active': {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)'
}
}
}
}
},
itemContainer: {
// padding: '20px 24px',
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)'
}
};
const contentStyles = {
root: {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)',
// padding: '20px 24px'
}
};
return (
<div className="settingsV2MainContainer">
<div className="settingsV2MainContainer" style={{
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)',
position: 'relative'
} as React.CSSProperties}>
{this.shouldShowKeyspaceSharedThroughputMessage() && (
<div>This table shared throughput is configured at the keyspace</div>
)}
<div className="settingsV2TabsContainer">
<Pivot {...pivotProps}>{pivotItems}</Pivot>
<div className="settingsV2TabsContainer" style={{
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)',
position: 'relative',
padding: '20px 24px'
} as React.CSSProperties}>
<Pivot {...pivotProps} styles={pivotStyles}>
{tabs.map((tab) => {
const pivotItemProps: IPivotItemProps = {
itemKey: SettingsV2TabTypes[tab.tab],
style: {
marginTop: 20,
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)'
},
headerText: getTabTitle(tab.tab),
};
return (
<PivotItem key={pivotItemProps.itemKey} {...pivotItemProps}>
<Stack styles={contentStyles}>
{tab.content}
</Stack>
</PivotItem>
);
})}
</Pivot>
</div>
</div>
);