random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-10-13 15:28:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

fixed all the issues of css

Browse Source
This commit is contained in:
Sakshi Gupta 2025-09-24 01:21:00 +05:30
parent 9a78fd0b7b
commit c42fe99c1a
22 changed files with 361 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/Common/Upload/Upload.tsx
View File

@ -50,7 +50,7 @@ export const Upload: FunctionComponent<UploadProps> = ({
const title = label + " to upload";
return (
<div>
<span className="renewUploadItemsHeader">{label}</span>
<span className="renewUploadItemsHeader" style={{ color: "var(--colorNeutralForeground1)" }}>{label}</span>
{tooltip && <InfoTooltip>{tooltip}</InfoTooltip>}
<Stack horizontal>
<TextField styles={{ fieldGroup: { width: 300 } }} readOnly value={selectedFilesTitle.toString()} />

10
src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx
View File

@ -58,7 +58,7 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
aria-expanded={this.state.isExpanded}
>
<Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
<Label>{this.props.title}</Label>
<Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>{this.props.title}</Label>
{this.props.tooltipContent && (
<TooltipHost
directionalHint={DirectionalHint.bottomLeftEdge}
@ -79,6 +79,14 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
id={`delete-${this.props.title.split(" ").join("-")}`}
iconProps={{ iconName: "Delete" }}
style={{ height: 27, marginRight: "20px" }}
styles={{
rootHovered: {
backgroundColor: "transparent",
},
rootPressed: {
backgroundColor: "transparent",
}
}}
onClick={(event) => {
event.stopPropagation();
this.props.onDelete();

27
src/Explorer/Controls/FullTextSeach/FullTextPoliciesComponent.tsx
View File

@ -33,6 +33,7 @@ export interface FullTextPolicyData {
const labelStyles = {
root: {
fontSize: 12,
color: "var(--colorNeutralForeground1)"
},
};
@ -222,7 +223,31 @@ export const FullTextPoliciesComponent: React.FunctionComponent<FullTextPolicies
</Stack>
</CollapsibleSectionComponent>
))}
<DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
<DefaultButton
id={`add-vector-policy`}
styles={{
root: {
maxWidth: 170,
fontSize: 12,
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralStroke1)"
},
rootHovered: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootPressed: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootDisabled: {
backgroundColor: "transparent"
}
}}
onClick={onAdd}>
Add full text path
</DefaultButton>
</Stack>

2
src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx
View File

@ -116,7 +116,7 @@ export class ComputedPropertiesComponent extends React.Component<
{unsavedEditorWarningMessage("computedProperties")}
</MessageBar>
)}
<Text style={{ marginLeft: "30px", marginBottom: "10px" }}>
<Text style={{ marginLeft: "30px", marginBottom: "10px", color: "var(--colorNeutralForeground1)" }}>
<Link target="_blank" href="https://aka.ms/computed-properties-preview/">
{"Learn more"} <FontIcon iconName="NavigateExternalInline" />
</Link>

74
src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx
View File

@ -102,11 +102,57 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
return (
<div>
<Pivot onLinkClick={onPivotChange} selectedKey={ContainerPolicyTabTypes[selectedTab]}>
<Pivot
onLinkClick={onPivotChange}
selectedKey={ContainerPolicyTabTypes[selectedTab]}
styles={{
root: {
color: "var(--colorNeutralForeground1)"
},
link: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
selectors: {
':hover': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
},
':active': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
}
}
},
linkIsSelected: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
selectors: {
':before': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "var(--colorBrandForeground1)"
},
':hover': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
},
':active': {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent"
}
}
},
linkContent: {
color: "inherit"
},
text: {
color: "inherit"
}
}}
>
{isVectorSearchEnabled && (
<PivotItem
itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.VectorPolicyTab]}
style={{ marginTop: 20 }}
style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
headerText="Vector Policy"
>
<Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@ -128,7 +174,7 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
{isFullTextSearchEnabled && (
<PivotItem
itemKey={ContainerPolicyTabTypes[ContainerPolicyTabTypes.FullTextPolicyTab]}
style={{ marginTop: 20 }}
style={{ marginTop: 20, color: "var(--colorNeutralForeground1)" }}
headerText="Full Text Policy"
>
<Stack {...titleAndInputStackProps} styles={{ root: { position: "relative", maxWidth: "400px" } }}>
@ -144,7 +190,27 @@ export const ContainerPolicyComponent: React.FC<ContainerPolicyComponentProps> =
) : (
<DefaultButton
id={"create-full-text-policy"}
styles={{ root: { fontSize: 12 } }}
styles={{
root: {
fontSize: 12,
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootHovered: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootPressed: {
color: "var(--colorNeutralForeground1)",
backgroundColor: "transparent",
borderColor: "var(--colorNeutralForeground1)"
},
rootDisabled: {
backgroundColor: "transparent"
}
}}
onClick={() => {
checkAndSendFullTextPolicyToSettings({
defaultLanguage: getFullTextLanguageOptions()[0].key as never,

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

@ -191,7 +191,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
Learn more
</Link>
</MessageBar>
<Text>
<Text styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>
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>

11
src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx
View File

@ -65,7 +65,7 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
return (
<Stack tokens={{ childrenGap: "m" }} styles={{ root: { width: "70%", maxWidth: 700 } }}>
<Label>Throughput Buckets</Label>
<Label styles={{ root: { color: "var(--colorNeutralForeground1)" } }}>Throughput Buckets</Label>
<Stack>
{throughputBuckets?.map((bucket) => (
<Stack key={bucket.id} horizontal tokens={{ childrenGap: 8 }} verticalAlign="center">
@ -77,7 +77,14 @@ export const ThroughputBucketsComponent: FC<ThroughputBucketsComponentProps> = (
onChange={(newValue) => handleBucketChange(bucket.id, newValue)}
showValue={false}
label={`Bucket ${bucket.id}${bucket.id === 1 ? " (Data Explorer Query Bucket)" : ""}`}
styles={{ root: { flex: 2, maxWidth: 400 } }}
styles={{
root: { flex: 2, maxWidth: 400 },
titleLabel: {
color: bucket.maxThroughputPercentage === 100 ?
"var(--colorNeutralForeground4)" :
"var(--colorNeutralForeground1)"
}
}}
disabled={bucket.maxThroughputPercentage === 100}
/>
<TextField

6
src/Explorer/Controls/ThroughputInput/CostEstimateText/CostEstimateText.tsx
View File

@ -54,8 +54,8 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
if (isAutoscale) {
return (
<Stack style={{ marginBottom: 6 }}>
<Text variant="small">
<Stack style={{ marginBottom: 6 , color: "var(--colorNeutralForeground1)" }}>
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
{estimatedMonthlyCost} ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b>
{currencySign + calculateEstimateNumber(monthlyPrice / 10)} -{" "}
@ -70,7 +70,7 @@ export const CostEstimateText: FunctionComponent<CostEstimateTextProps> = ({
return (
<Stack style={{ marginBottom: 8 }}>
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
Estimated cost ({currency}){iconWithEstimatedCostDisclaimer}:{" "}
<b>
{currencySign + calculateEstimateNumber(hourlyPrice)} hourly /{" "}

4
src/Explorer/Controls/ThroughputInput/ThroughputInput.less
View File

@ -10,9 +10,13 @@
font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace;
}
// .throughputInputSpacing{
// color: "var(--colorNeutralForeground1)";
// }
.throughputInputSpacing > :not(:last-child) {
margin-bottom: @DefaultSpace;
color: "var(--colorNeutralForeground1)";
}
.capacitycalculator-link:focus {

18
src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx
View File

@ -193,7 +193,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<div className="throughputInputContainer throughputInputSpacing">
<Stack horizontal>
<span className="mandatoryStar">*&nbsp;</span>
<Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
<Text aria-label="Throughput header" variant="small" style={{ lineHeight: "20px", fontWeight: 600 , color: "var(--colorNeutralForeground1)"}}>
{getThroughputLabelText()}
</Text>
<InfoTooltip>{PricingUtils.getRuToolTipText()}</InfoTooltip>
@ -236,14 +236,14 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{isAutoscaleSelected && (
<Stack className="throughputInputSpacing">
<Text style={{ marginTop: -2, fontSize: 12 }}>
<Text style={{ marginTop: -2, fontSize: 12 ,color: "var(--colorNeutralForeground1)" }}>
Your container throughput will automatically scale up to the maximum value you select, from a minimum of 10%
of that value.
</Text>
<Stack horizontal verticalAlign="end" tokens={{ childrenGap: 8 }}>
<Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }}>
Minimum RU/s
</Text>
<InfoTooltip>The minimum RU/s your container will scale to</InfoTooltip>
@ -260,6 +260,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "var(--colorNeutralForeground1)",
}}
>
{Math.round(throughput / 10).toString()}
@ -272,6 +273,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
fontSize: 12,
fontWeight: 400,
paddingBottom: 6,
color: "var(--colorNeutralForeground1)"
}}
>
x 10 =
@ -279,7 +281,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<Stack tokens={{ childrenGap: 4 }}>
<Stack horizontal verticalAlign="center" tokens={{ childrenGap: 4 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }}>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600,color: "var(--colorNeutralForeground1)" }}>
Maximum RU/s
</Text>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>
@ -289,7 +291,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
type="number"
styles={{
fieldGroup: { width: 100, height: 27, flexShrink: 0 },
field: { fontSize: 14, fontWeight: 400 },
field: { fontSize: 14, fontWeight: 400 , color: "var(--colorNeutralForeground1)"},
}}
onChange={(_event, newInput?: string) => onThroughputValueChange(newInput)}
step={AutoPilotUtils.autoPilotIncrementStep}
@ -305,7 +307,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
<CostEstimateText requestUnits={throughput} isAutoscale={isAutoscaleSelected} />
<Stack className="throughputInputSpacing">
<Text variant="small" aria-label="ruDescription">
<Text variant="small" aria-label="ruDescription" style={{color: "var(--colorNeutralForeground1)" }}>
Estimate your required RU/s with&nbsp;
<Link
className="underlinedLink"
@ -324,7 +326,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
{!isAutoscaleSelected && (
<Stack className="throughputInputSpacing">
<Text variant="small" aria-label="ruDescription">
<Text variant="small" aria-label="ruDescription" style={{color: "var(--colorNeutralForeground1)" }}>
Estimate your required RU/s with&nbsp;
<Link
className="underlinedLink"
@ -337,7 +339,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
.
</Text>
<Stack horizontal>
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600 }} aria-label="maxRUDescription">
<Text variant="small" style={{ lineHeight: "20px", fontWeight: 600, color: "var(--colorNeutralForeground1)" }} aria-label="maxRUDescription">
{isDatabase ? "Database" : getCollectionName()} Required RU/s
</Text>
<InfoTooltip>{getAutoScaleTooltip()}</InfoTooltip>

44
src/Explorer/Menus/NotificationConsole/NotificationConsole.less
View File

@ -30,11 +30,11 @@
flex-shrink:0;
&:hover {
background-color:@NotificationHigh;
background-color: @NotificationHigh;
}
&:active {
background-color:@NotificationHigh;
background-color: @NotificationHigh;
}
&:focus {
@ -190,3 +190,43 @@
}
}
}
// Dark theme specific overrides
body.isDarkMode {
.notificationConsoleContainer {
.notificationConsoleHeader {
background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1);
&:hover {
background-color: var(--colorNeutralBackground3);
color: var(--colorNeutralForeground1);
}
&:active {
background-color: var(--colorNeutralBackground4);
color: var(--colorNeutralForeground1);
}
}
.notificationConsoleContents {
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
.clearNotificationsButton {
border: @ButtonBorderWidth solid var(--colorNeutralStroke1);
&:hover {
background-color: var(--colorNeutralBackground3);
color: var(--colorNeutralForeground1);
}
&:active {
border: @ButtonBorderWidth dashed var(--colorBrandForeground1);
background-color: var(--colorBrandBackground);
color: var(--colorNeutralForegroundOnBrand);
}
}
}
}
}

56
src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
View File

@ -349,9 +349,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label={`Share throughput across ${getCollectionName(true).toLocaleLowerCase()}`}
checked={this.state.isSharedThroughputChecked}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ isSharedThroughputChecked: isChecked })
@ -648,7 +653,27 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
{userContext.apiType === "SQL" && (
<Stack className="panelGroupSpacing">
<DefaultButton
styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
styles={{
root: {
padding: 0,
width: 200,
height: 30,
backgroundColor: 'var(--colorNeutralBackground2)',
color: 'var(--colorNeutralForeground1)',
borderColor: 'var(--colorNeutralStroke1)'
},
rootHovered: {
backgroundColor: 'var(--colorNeutralBackground3)',
color: 'var(--colorNeutralForeground1)',
},
rootPressed: {
backgroundColor: 'var(--colorBrandBackgroundPressed)',
color: 'var(--colorNeutralForegroundOnBrand)',
},
label: {
fontSize: 12
}
}}
hidden={this.state.useHashV1}
disabled={this.state.subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
onClick={() => this.setState({ subPartitionKeys: [...this.state.subPartitionKeys, ""] })}
@ -656,7 +681,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
Add hierarchical partition key
</DefaultButton>
{this.state.subPartitionKeys.length > 0 && (
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
partition your data with up to three levels of keys for better data distribution. Requires .NET
V3, Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@ -677,9 +702,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label={`Provision dedicated throughput for this ${getCollectionName().toLocaleLowerCase()}`}
checked={this.state.enableDedicatedThroughput}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ enableDedicatedThroughput: isChecked })
@ -768,7 +798,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
<ActionButton
iconProps={{ iconName: "Add" }}
styles={{ root: { padding: 0 }, label: { fontSize: 12 } }}
styles={{ root: { padding: 0 }, label: { fontSize: 12 , color: "var(--colorNeutralForeground1)"}}}
onClick={() => this.setState({ uniqueKeys: [...this.state.uniqueKeys, ""] })}
>
Add unique key
@ -934,9 +964,14 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label="Create a Wildcard Index on all fields"
checked={this.state.createMongoWildCardIndex}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ createMongoWildCardIndex: isChecked })
@ -951,15 +986,20 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
checked={this.state.useHashV1}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) =>
this.setState({ useHashV1: isChecked, subPartitionKeys: [] })
}
/>
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the
created container will use a legacy partitioning scheme that supports partition key values of size
only up to 101 bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}

7
src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx
View File

@ -224,9 +224,14 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
<Checkbox
title="Provision shared throughput"
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}}
label="Provision throughput"
checked={databaseCreateNewShared}

9
src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/AdvancedComponent.tsx
View File

@ -32,15 +32,20 @@ export const AdvancedComponent = (props: AdvancedComponentProps): JSX.Element =>
label="My application uses an older Cosmos .NET or Java SDK version (.NET V1 or Java V2)"
checked={useHashV1}
styles={{
text: { fontSize: 12 },
text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
checkbox: { width: 12, height: 12 },
label: { padding: 0, alignItems: "center", wordWrap: "break-word", whiteSpace: "break-spaces" },
root: {
selectors: {
':hover .ms-Checkbox-text': { color: "var(--colorNeutralForeground1)" }
}
}
}}
onChange={(ev: React.FormEvent<HTMLElement>, isChecked: boolean) => {
useHashV1CheckboxOnChange(isChecked);
}}
/>
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" /> To ensure compatibility with older SDKs, the created
container will use a legacy partitioning scheme that supports partition key values of size only up to 101
bytes. If this is enabled, you will not be able to use hierarchical partition keys.{" "}

2
src/Explorer/Panes/AddGlobalSecondaryIndexPanel/Components/PartitionKeyComponent.tsx
View File

@ -117,7 +117,7 @@ export const PartitionKeyComponent = (props: PartitionKeyComponentProps): JSX.El
Add hierarchical partition key
</DefaultButton>
{subPartitionKeys.length > 0 && (
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to partition your
data with up to three levels of keys for better data distribution. Requires .NET V3, Java V4 SDK, or preview
JavaScript V3 SDK.{" "}

4
src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx
View File

@ -135,7 +135,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
return (
<RightPaneForm formError={formError} isExecuting={isExecuting} onSubmit={submit} submitButtonText="OK">
<Stack tokens={{ childrenGap: 10 }} className="panelMainContent">
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
When changing a container’s partition key, you will need to create a destination container with the correct
partition key. You may also select an existing destination container.&nbsp;
<Link
@ -346,7 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
Add hierarchical partition key
</DefaultButton>
{subPartitionKeys.length > 0 && (
<Text variant="small">
<Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
<Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
Java V4 SDK, or preview JavaScript V3 SDK.{" "}

9
src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx
View File

@ -94,7 +94,14 @@ export const LoadQueryPane: FunctionComponent = (): JSX.Element => {
value={selectedFileName}
autoFocus
readOnly
styles={{ fieldGroup: { width: 300 } }}
styles={{
fieldGroup: { width: 300, color: "var(--colorNeutralForeground1)" },
subComponentStyles: {
label: {
root: { color: "var(--colorNeutralForeground1)" }
}
}
}}
/>
<label htmlFor="importQueryInputId" className="customFileUpload">
<Image {...imageProps} src={folderIcon} alt="upload files" />

66
src/Explorer/Panes/PanelComponent.less
View File

@ -37,18 +37,18 @@
.panelTextField {
font-size: @mediumFontSize;
border: 1px solid var(--colorNeutralStroke1, #605e5c);
border: 1px solid var(--colorNeutralStroke1);
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground2, @BaseLight);
background-color: var(--colorNeutralBackground2);
padding: 4px 10px;
width: @newCollectionPaneInputWidth;
&::placeholder {
color: var(--colorNeutralForeground3, @BaseMediumHigh);
color: var(--colorNeutralForeground3);
}
&:focus {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
border-color: var(--colorCompoundBrandStroke1);
outline: none;
}
}
@ -60,7 +60,7 @@
.panelRadioBtnLabel {
font-size: @mediumFontSize;
padding: 0 @LargeSpace 0 @SmallSpace;
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
}
.panelSectionSpinner {
@ -70,47 +70,42 @@
transform: translate(-50%, -50%);
}
// Override Fluent UI component styles to use theme variables
.ms-Dropdown {
.ms-Dropdown-title {
background-color: var(--colorNeutralBackground2, @BaseLight);
border-color: var(--colorNeutralStroke1, #605e5c);
color: var(--colorNeutralForeground1, @BaseHigh);
background-color: var(--colorNeutralBackground2);
border-color: var(--colorNeutralStroke1);
color: var(--colorNeutralForeground1);
}
.ms-Dropdown-caretDownWrapper {
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
}
}
.ms-Checkbox {
.ms-Checkbox-label {
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
}
}
.ms-TextField {
.ms-TextField-fieldGroup {
background-color: var(--colorNeutralBackground2, @BaseLight);
border-color: var(--colorNeutralStroke1, #605e5c);
background-color: var(--colorNeutralBackground2);
border-color: var(--colorNeutralStroke1);
}
.ms-TextField-field {
background-color: var(--colorNeutralBackground2, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1);
&::placeholder {
color: var(--colorNeutralForeground3, @BaseMediumHigh);
color: var(--colorNeutralForeground3);
}
}
}
.ms-Text {
color: var(--colorNeutralForeground1, @BaseHigh);
}
span, label {
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
}
}
@ -124,14 +119,14 @@
}
.panelHeader {
color: var(--colorNeutralForeground1, @BaseDark);
color: var(--colorNeutralForeground1);
font-size: @largeFontSize;
font-weight: 400;
}
.panelInfoErrorContainer {
background-color: var(--colorNeutralBackground3, @BaseLow);
color: var(--colorNeutralForeground1, @BaseHigh);
background-color: var(--colorNeutralBackground3);
color: var(--colorNeutralForeground1);
padding: @DefaultSpace;
display: inline-flex;
margin: 20px 34px 0 34px;
@ -143,15 +138,15 @@
}
.panelWarningIcon {
color: var(--colorPaletteYellowForeground1, @WarningIconColor);
color: var(--colorPaletteYellowForeground1);
}
.panelErrorIcon {
color: var(--colorPaletteRedForeground1, @ErrorIconColor);
color: var(--colorPaletteRedForeground1);
}
.panelLargeInfoIcon {
color: var(--colorBrandForeground1, @InfoIconColor);
color: var(--colorBrandForeground1);
}
.panelWarningErrorDetailsLinkContainer {
@ -160,22 +155,22 @@
padding-left: @MediumSpace;
.paneErrorLink {
color: var(--colorBrandForeground1, @LinkColor);
color: var(--colorBrandForeground1);
cursor: pointer;
font-size: @mediumFontSize;
}
.panelWarningErrorMessage {
color: var(--colorNeutralForeground1, @BaseHigh);
color: var(--colorNeutralForeground1);
}
}
}
.panelFooter {
padding: 16px 34px;
border-top: solid 1px var(--colorNeutralStroke1, #bbbbbb);
background-color: var(--colorNeutralBackground1, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
border-top: solid 1px var(--colorNeutralStroke1);
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
& button {
height: 30px;
@ -197,7 +192,7 @@
.addRemoveIcon [alt="editEntity"]:focus,
.addRemoveIconLabel [alt="editEntity"]:focus {
border: 1px dashed var(--colorNeutralStroke1, #605e5c);
border: 1px dashed var(--colorNeutralStroke1);
outline: none;
}
@ -240,7 +235,7 @@
}
.removeIcon {
color: @InfoIconColor;
color: "var(--colorNeutralForeground1)";
}
.backImageIcon {
@ -248,7 +243,7 @@
}
[alt="back"]:focus {
border: 1px solid var(--colorCompoundBrandStroke1, @SelectionColor);
border: 1px solid var(--colorCompoundBrandStroke1);
outline: none;
}
@ -297,3 +292,4 @@
background-color: var(--overlayBackground);
}
}

11
src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx
View File

@ -147,7 +147,16 @@ export const SaveQueryPane: FunctionComponent<SaveQueryPaneProps> = ({
<div className="panelFormWrapper" style={{ flexGrow: 1 }}>
<div className="panelMainContent">
{!isSaveQueryEnabled() ? (
<Text variant="small">{setupSaveQueriesText}</Text>
<Text
variant="small"
styles={{
root: {
color: 'var(--colorNeutralForeground1)',
}
}}
>
{setupSaveQueriesText}
</Text>
) : (
<TextField
id="saveQueryInput"

8
src/Main.tsx
View File

@ -64,6 +64,7 @@ import "./Shared/appInsights";
import { useConfig } from "./hooks/useConfig";
import { useKnockoutExplorer } from "./hooks/useKnockoutExplorer";
import { isDarkMode } from "./hooks/useTheme";
import "./less/DarkModeMenus.less";
import "./less/ThemeSystem.less";
// Initialize icons before React is loaded
initializeIcons(undefined, { disableWarnings: true });
@ -124,11 +125,8 @@ const App = (): JSX.Element => {
}}
>
<div id="freeTierTeachingBubble"> </div>
{/* Main Command Bar - Start */}
<CommandBar container={explorer} />
{/* Collections Tree and Tabs - Begin */}
<SidebarContainer explorer={explorer} />
{/* Collections Tree and Tabs - End */}
<div
className="dataExplorerErrorConsoleContainer"
role="contentinfo"
@ -155,21 +153,17 @@ const App = (): JSX.Element => {
};
const Root: React.FC = () => {
// Force dark theme
const currentTheme = isDarkMode ? webDarkTheme : webLightTheme;
// Apply theme to body for Fluent UI v8 components
useEffect(() => {
if (isDarkMode) {
document.body.classList.add("isDarkMode");
document.body.style.backgroundColor = "var(--colorNeutralBackground1)";
document.body.style.color = "var(--colorNeutralForeground1)";
// loadTheme(appThemeFabric);
} else {
document.body.classList.remove("isDarkMode");
document.body.style.backgroundColor = "";
document.body.style.color = "";
// loadTheme(appThemeFabric);
}
}, [isDarkMode]);

57
src/less/DarkModeMenus.less Normal file
View File

@ -0,0 +1,57 @@
body.isDarkMode {
.ms-Callout.ms-ContextualMenu-Callout {
--bodyBackgroundColor: var(--colorNeutralBackground1);
--bodyTextColor: var(--colorNeutralForeground1);
.ms-Callout-main {
background-color: var(--colorNeutralBackground1);
}
}
.ms-ContextualMenu-container,
.ms-ContextualMenu-list,
.ms-ContextualMenu-list.is-open {
background-color: var(--colorNeutralBackground1);
}
.ms-ContextualMenu-item {
background-color: var(--colorNeutralBackground1);
}
.ms-ContextualMenu-link {
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground1);
&:hover, &:focus {
background-color: var(--colorNeutralBackground3);
}
}
.ms-ContextualMenu-itemText {
color: var(--colorNeutralForeground1);
}
.ms-ContextualMenu-icon {
color: var(--colorNeutralForeground1);
}
}
body.isDarkMode {
.fui-MenuPopover {
background-color: var(--colorNeutralBackground1);
}
.fui-MenuList {
background-color: var(--colorNeutralBackground1);
}
.fui-MenuItem {
color: var(--colorNeutralForeground1);
background-color: var(--colorNeutralBackground1);
&:hover, &:focus {
background-color: var(--colorNeutralBackground3);
}
}
}

37
src/less/ThemeSystem.less
View File

@ -7,6 +7,7 @@
--colorNeutralForeground1: @BaseHigh;
--colorNeutralForeground2: @BaseMediumHigh;
--colorNeutralForeground3: @BaseMedium;
--colorNeutralForeground4: @BaseLow;
--colorNeutralStroke1: @BaseMedium;
--colorCompoundBrandStroke1: @SelectionColor;
--colorBrandForeground1: @LinkColor;
@ -26,6 +27,7 @@ body.isDarkMode {
--colorNeutralForeground1: #ffffff;
--colorNeutralForeground2: #d2d2d2;
--colorNeutralForeground3: #a0a0a0;
--colorNeutralForeground4: #6e6e6e;
--colorNeutralStroke1: #484848;
--colorCompoundBrandStroke1: #4db6e8;
--colorBrandForeground1: #4db6e8;
@ -39,31 +41,31 @@ body.isDarkMode {
// Theme Mixins
.theme-background() {
background-color: var(--colorNeutralBackground1, @BaseLight);
color: var(--colorNeutralForeground1, @BaseHigh);
background-color: var(--colorNeutralBackground1);
color: var(--colorNeutralForeground1);
}
.theme-surface() {
background-color: var(--colorNeutralBackground2, @BaseLow);
color: var(--colorNeutralForeground1, @BaseHigh);
background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1);
}
.theme-border() {
border-color: var(--colorNeutralStroke1, @BaseMedium);
border-color: var(--colorNeutralStroke1);
}
.theme-input() {
background-color: var(--colorNeutralBackground2, @BaseLow);
color: var(--colorNeutralForeground1, @BaseHigh);
border: 1px solid var(--colorNeutralStroke1, @BaseMedium);
background-color: var(--colorNeutralBackground2);
color: var(--colorNeutralForeground1);
border: 1px solid var(--colorNeutralStroke1);
&::placeholder {
color: var(--colorNeutralForeground3, @BaseMedium);
color: var(--colorNeutralForeground3);
}
&:focus,
&:focus-within {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor);
border-color: var(--colorCompoundBrandStroke1);
outline: none;
}
}
@ -72,21 +74,8 @@ body.isDarkMode {
.ms-TextField {
.ms-TextField-fieldGroup {
&:focus-within {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ;
border-color: var(--colorCompoundBrandStroke1) ;
}
}
}
}
.theme-panel() {
.theme-background();
.theme-border();
}
:global {
.ms-Fabric--isFocusVisible .ms-Button:focus::after,
.ms-Fabric--isFocusVisible .ms-TextField:focus::after,
.ms-Fabric--isFocusVisible *[data-is-focusable="true"]:focus::after {
border-color: var(--colorCompoundBrandStroke1, @SelectionColor) ;
}
}