random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-05-10 18:33:52 +01: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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
src/Explorer/Controls/Settings/SettingsComponent.less
View File

@ -1,38 +1,42 @@
@import "../../../../less/Common/Constants";
// @import "../../../../less/Common/Constants";
.settingsV2MainContainer {
height: 100%;
overflow-y: auto;
width: 100%;
}
// .settingsV2MainContainer {
// height: 100%;
// overflow-y: auto;
// width: 100%;
// background-color: var(--colorNeutralBackground1);
// color: var(--colorNeutralForeground1);
// }
.settingsV2ToolTip {
padding: 10px;
font: 12px @DataExplorerFont;
max-width: 300px;
}
// .settingsV2ToolTip {
// padding: 10px;
// font: 12px @DataExplorerFont;
// max-width: 300px;
// }
.autoPilotSelector span {
height: 25px;
font: 14px @DataExplorerFont;
}
// .autoPilotSelector span {
// height: 25px;
// font: 14px @DataExplorerFont;
// }
.settingsV2TabsContainer {
padding: @LargeSpace @LargeSpace 30px @LargeSpace;
height: 100%;
overflow-y: auto;
width: 100%;
font-family: @DataExplorerFont;
}
// .settingsV2TabsContainer {
// padding: @LargeSpace @LargeSpace 30px @LargeSpace;
// height: 100%;
// overflow-y: auto;
// width: 100%;
// font-family: @DataExplorerFont;
// background-color: var(--colorNeutralBackground1);
// color: var(--colorNeutralForeground1);
// }
.settingsV2Editor {
width: 100%;
height: 60vh;
}
// .settingsV2Editor {
// width: 100%;
// height: 60vh;
// }
.settingsV2EditorSpinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
// .settingsV2EditorSpinner {
// position: absolute;
// top: 50%;
// left: 50%;
// transform: translate(-50%, -50%);
// }

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>
);

28
src/Explorer/Controls/Settings/SettingsRenderUtils.tsx
View File

@ -63,7 +63,7 @@ export interface PriceBreakdown {
export type editorType = "indexPolicy" | "computedProperties";
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: 'var(--colorNeutralForeground1)' } };
export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
label: {
@ -166,7 +166,7 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
};
export const messageBarStyles: Partial<IMessageBarStyles> = {
root: { marginTop: "5px", backgroundColor: "white" },
root: { marginTop: "5px", backgroundColor: 'var(--colorNeutralBackground1)' },
text: { fontSize: 14 },
};
@ -214,9 +214,9 @@ export const getEstimatedSpendingElement = (
const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : "";
return (
<Stack>
<Text style={{ fontWeight: 600 }}>Cost estimate*</Text>
<Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Cost estimate*</Text>
{costElement}
<Text style={{ fontWeight: 600, marginTop: 15 }}>How we calculate this</Text>
<Text style={{ fontWeight: 600, marginTop: 15, color: 'var(--colorNeutralForeground1)' }}>How we calculate this</Text>
<Stack id="throughputSpendElement" style={{ marginTop: 5 }}>
<span>
{numberOfRegions} region{numberOfRegions > 1 && <span>s</span>}
@ -230,7 +230,7 @@ export const getEstimatedSpendingElement = (
{priceBreakdown.pricePerRu}/RU
</span>
</Stack>
<Text style={{ marginTop: 15 }}>
<Text style={{ marginTop: 15, color: 'var(--colorNeutralForeground1)' }}>
<em>*{estimatedCostDisclaimer}</em>
</Text>
</Stack>
@ -272,7 +272,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = (
export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => {
return (
<Text styles={infoAndToolTipTextStyle} id="updateThroughputDelayedApplyWarningMessage">
<Text id="updateThroughputDelayedApplyWarningMessage">
Scaling up will take 4-6 hours as it exceeds what Azure Cosmos DB can instantly support currently based on your
number of physical partitions. You can increase your throughput to {instantMaximumThroughput} instantly or proceed
with this value and wait until the scale-up is completed.
@ -290,7 +290,7 @@ export const getUpdateThroughputBeyondSupportLimitMessage = (
Your request to increase throughput exceeds the pre-allocated capacity which may take longer than expected.
There are three options you can choose from to proceed:
</Text>
<ol style={{ fontSize: 14, color: "windowtext", marginTop: "5px" }}>
<ol style={{ fontSize: 14, color: 'var(--colorNeutralForeground1)', marginTop: "5px" }}>
<li>You can instantly scale up to {instantMaximumThroughput} RU/s.</li>
{instantMaximumThroughput < maximumThroughput && (
<li>You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.</li>
@ -326,7 +326,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele
};
export const saveThroughputWarningMessage: JSX.Element = (
<Text styles={infoAndToolTipTextStyle}>
<Text >
Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below
before saving your changes
</Text>
@ -509,11 +509,18 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
selectors: {
":disabled": {
backgroundColor: StyleConstants.BaseMedium,
backgroundColor:'var(--colorNeutralBackground1)',
borderColor: StyleConstants.BaseMediumHigh,
},
},
},
subComponentStyles: {
label: {
root: {
color: 'var(--colorNeutralForeground1)'
},
},
},
});
export const getChoiceGroupStyles = (
@ -521,6 +528,8 @@ export const getChoiceGroupStyles = (
baseline: isDirtyTypes,
isHorizontal?: boolean,
): Partial<IChoiceGroupStyles> => ({
label: {
color: 'var(--colorNeutralForeground1)', },
flexContainer: [
{
selectors: {
@ -535,6 +544,7 @@ export const getChoiceGroupStyles = (
fontSize: 14,
fontFamily: StyleConstants.DataExplorerFont,
padding: "2px 5px",
color: 'var(--colorNeutralForeground1)'
},
},
display: isHorizontal ? "inline-flex" : "default",

25
src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx
View File

@ -87,18 +87,23 @@ export class IndexingPolicyComponent extends React.Component<
};
private async createIndexingPolicyEditor(): Promise<void> {
if (!this.indexingPolicyDiv.current) {
return;
}
const value: string = JSON.stringify(this.props.indexingPolicyContent, undefined, 4);
const monaco = await loadMonaco();
this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
value: value,
language: "json",
readOnly: isIndexTransforming(this.props.indexTransformationProgress),
ariaLabel: "Indexing Policy",
});
if (this.indexingPolicyEditor) {
const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
this.props.logIndexingPolicySuccessMessage();
if (this.indexingPolicyDiv.current) {
this.indexingPolicyEditor = monaco.editor.create(this.indexingPolicyDiv.current, {
value: value,
language: "json",
readOnly: isIndexTransforming(this.props.indexTransformationProgress),
ariaLabel: "Indexing Policy",
});
if (this.indexingPolicyEditor) {
const indexingPolicyEditorModel = this.indexingPolicyEditor.getModel();
indexingPolicyEditorModel.onDidChangeContent(this.onEditorContentChange.bind(this));
this.props.logIndexingPolicySuccessMessage();
}
}
}

14
src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx
View File

@ -56,13 +56,15 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
const partitionKeyValue = getPartitionKeyValue();
const textHeadingStyle = {
root: { fontWeight: FontWeights.semibold, fontSize: 16 },
root: { fontWeight: FontWeights.semibold, fontSize: 16, color: 'var(--colorNeutralForeground1)' },
};
const textSubHeadingStyle = {
root: { fontWeight: FontWeights.semibold },
root: { fontWeight: FontWeights.semibold , color: 'var(--colorNeutralForeground1)' },
};
const textSubHeadingStyle1 = {
root: {color: 'var(--colorNeutralForeground1)' },
};
const startPollingforUpdate = (currentJob: DataTransferJobGetResults) => {
if (isCurrentJobInProgress(currentJob)) {
const jobName = currentJob?.properties?.jobName;
@ -158,8 +160,8 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
<Text styles={textSubHeadingStyle}>Partitioning</Text>
</Stack>
<Stack tokens={{ childrenGap: 5 }}>
<Text>{partitionKeyValue}</Text>
<Text>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
<Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
<Text styles={textSubHeadingStyle1}>{isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}</Text>
</Stack>
</Stack>
</Stack>
@ -174,7 +176,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({ da
Learn more
</Link>
</MessageBar>
<Text>
<Text styles={textSubHeadingStyle1}>
To change the partition key, a new destination container must be created or an existing destination container
selected. Data will then be copied to the destination container.
</Text>

33
src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx
View File

@ -1,4 +1,4 @@
import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField } from "@fluentui/react";
import { ChoiceGroup, IChoiceGroupOption, Label, Link, MessageBar, Stack, Text, TextField, getTheme, mergeStyleSets } from "@fluentui/react";
import * as React from "react";
import * as ViewModels from "../../../../Contracts/ViewModels";
import { userContext } from "../../../../UserContext";
@ -25,6 +25,13 @@ import {
} from "../SettingsUtils";
import { ToolTipLabelComponent } from "./ToolTipLabelComponent";
const theme = getTheme();
const classNames = mergeStyleSets({
hintText: {
color: 'var(--colorNeutralForeground1)', // theme-aware
},
});
export interface SubSettingsComponentProps {
collection: ViewModels.Collection;
timeToLive: TtlType;
@ -181,7 +188,19 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
userContext.apiType === "Mongo" ? (
<MessageBar
messageBarIconProps={{ iconName: "InfoSolid", className: "messageBarInfoIcon" }}
styles={{ text: { fontSize: 14 } }}
styles={{
root: {
backgroundColor: 'var(--colorNeutralBackground1)',
color: 'var(--colorNeutralForeground1)'
},
text: {
fontSize: 14,
color: theme.semanticColors.bodyText,
},
icon: {
color: theme.semanticColors.bodyText,
},
}}
>
To enable time-to-live (TTL) for your collection/documents,
<Link href="https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb-time-to-live" target="_blank">
@ -191,7 +210,7 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
</MessageBar>
) : (
<Stack {...titleAndInputStackProps}>
<ChoiceGroup
<ChoiceGroup
id="timeToLive"
label="Time to Live"
selectedKey={this.props.timeToLive}
@ -323,14 +342,14 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
)}
{userContext.apiType === "SQL" && this.isLargePartitionKeyEnabled() && (
<Text>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
<Text className={classNames.hintText}>Large {this.partitionKeyName.toLowerCase()} has been enabled.</Text>
)}
{userContext.apiType === "SQL" &&
(this.isHierarchicalPartitionedContainer() ? (
<Text>Hierarchically partitioned container.</Text>
) : (
<Text>Non-hierarchically partitioned container.</Text>
<Text className={classNames.hintText}>Hierarchically partitioned container.</Text>
) : (
<Text className={classNames.hintText}>Non-hierarchically partitioned container.</Text>
))}
</Stack>
);

45
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx
View File

@ -235,12 +235,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
);
return (
<div>
<Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
<Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
<Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
<Text style={{ width: "50%" }}>
<Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice / 10)} min
</Text>
<Text style={{ width: "50%" }}>
<Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)'}}>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)} max
</Text>
</Stack>
@ -253,12 +253,12 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return (
<Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
{newThroughput && newThroughputCostElement()}
<Text style={{ fontWeight: 600 }}>Current cost per month</Text>
<Stack horizontal style={{ marginTop: 5 }}>
<Text style={{ width: "50%" }}>
<Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Current cost per month</Text>
<Stack horizontal style={{ marginTop: 5, color: 'var(--colorNeutralForeground1)' }}>
<Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice / 10)} min
</Text>
<Text style={{ width: "50%" }}>
<Text style={{ width: "50%" , color: 'var(--colorNeutralForeground1)' }}>
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)} max
</Text>
</Stack>
@ -268,7 +268,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
return getEstimatedSpendingElement(costElement(), newThroughput ?? throughput, numberOfRegions, prices, true);
};
settingsAndScaleStyle = {
root: { width: "33%",
color: 'var(--colorNeutralForeground1)' },
};
private getEstimatedManualSpendElement = (
throughput: number,
serverId: string,
@ -288,36 +291,36 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
);
return (
<div>
<Text style={{ fontWeight: 600 }}>Updated cost per month</Text>
<Text style={{ fontWeight: 600, color: 'var(--colorNeutralForeground1)' }}>Updated cost per month</Text>
<Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
<Text style={{ width: "33%" }}>
<Text style={ this.settingsAndScaleStyle.root }>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
</Text>
<Text style={{ width: "33%" }}>
<Text style={ this.settingsAndScaleStyle.root }>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
</Text>
<Text style={{ width: "33%" }}>
<Text style={ this.settingsAndScaleStyle.root }>
{newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
</Text>
</Stack>
</div>
);
};
const costElement = (): JSX.Element => {
const prices: PriceBreakdown = getRuPriceBreakdown(throughput, serverId, numberOfRegions, isMultimaster, false);
return (
<Stack {...checkBoxAndInputStackProps} style={{ marginTop: 15 }}>
{newThroughput && newThroughputCostElement()}
<Text style={{ fontWeight: 600 }}>Current cost per month</Text>
<Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>Current cost per month</Text>
<Stack horizontal style={{ marginTop: 5 }}>
<Text style={{ width: "33%" }}>
<Text style={ this.settingsAndScaleStyle.root }>
{prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
</Text>
<Text style={{ width: "33%" }}>
<Text style={ this.settingsAndScaleStyle.root }>
{prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
</Text>
<Text style={{ width: "33%" }}>
<Text style={ this.settingsAndScaleStyle.root }>
{prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
</Text>
</Stack>
@ -402,8 +405,8 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
const capacity: string = this.props.isFixed ? "Fixed" : "Unlimited";
return (
<Stack {...titleAndInputStackProps}>
<Label>Storage capacity</Label>
<Text>{capacity}</Text>
<Label style={{ color: 'var(--colorNeutralForeground1)'}}>Storage capacity</Label>
<Text style={{ color: 'var(--colorNeutralForeground1)'}}>{capacity}</Text>
</Stack>
);
};
@ -608,7 +611,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
</Stack>
)}
{this.props.isAutoPilotSelected ? (
<Text style={{ marginTop: "40px" }}>
<Text style={{ marginTop: "40px" , color: 'var(--colorNeutralForeground1)'}}>
Based on usage, your {this.props.collectionName ? "container" : "database"} throughput will scale from{" "}
<b>
{AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} RU/s (10% of max RU/s) -{" "}
@ -630,7 +633,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
</>
)}
{!this.overrideWithProvisionedThroughputSettings() && (
<Text>
<Text style={{ color: 'var(--colorNeutralForeground1)'}}>
Estimate your required RU/s with
<Link target="_blank" href="https://cosmos.azure.com/capacitycalculator/">
{` capacity calculator`} <FontIcon iconName="NavigateExternalInline" />

4
src/Explorer/Controls/Settings/SettingsSubComponents/ToolTipLabelComponent.tsx
View File

@ -1,5 +1,5 @@
import { DirectionalHint, IIconStyles, Icon, Stack, Text, TooltipHost } from "@fluentui/react";
import * as React from "react";
import { Stack, Text, IIconStyles, Icon, TooltipHost, DirectionalHint } from "@fluentui/react";
import { toolTipLabelStackTokens } from "../SettingsRenderUtils";
export interface ToolTipLabelComponentProps {
@ -14,7 +14,7 @@ export class ToolTipLabelComponent extends React.Component<ToolTipLabelComponent
return (
<>
<Stack horizontal verticalAlign="center" tokens={toolTipLabelStackTokens}>
{this.props.label && <Text style={{ fontWeight: 600 }}>{this.props.label}</Text>}
{this.props.label && <Text style={{ fontWeight: 600 , color: 'var(--colorNeutralForeground1)'}}>{this.props.label}</Text>}
{this.props.toolTipElement && (
<TooltipHost
content={this.props.toolTipElement}

4
src/Main.tsx
View File

@ -2,7 +2,7 @@
import "./ReactDevTools";
// CSS Dependencies
import { initializeIcons, loadTheme } from "@fluentui/react";
import { initializeIcons, loadTheme, useTheme } from "@fluentui/react";
import { FluentProvider, makeStyles, webDarkTheme, webLightTheme } from "@fluentui/react-components";
import { Platform } from "ConfigContext";
import { QuickstartCarousel } from "Explorer/Quickstart/QuickstartCarousel";
@ -81,7 +81,7 @@ const App = (): JSX.Element => {
const isCarouselOpen = useCarousel((state) => state.shouldOpen);
const isCopilotCarouselOpen = useCarousel((state) => state.showCopilotCarousel);
const styles = useStyles();
const theme = useTheme();
if (config?.platform === Platform.Fabric) {
loadTheme(appThemeFabric);