mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-26 05:04:15 +00:00
Dark theme for Explorer (#2185)
* First dark theme commits for command bar * Updated theme on sidebar * Updated tabs, sidebar, splash screen * settings theme changes * Dark theme applied to Monaco editor * Dark theme to stored procedures * Fixed sidebar scroll * Updated scroll issue in sidebar * Command bar items fixed * Fixed lint errors * fixed lint errors * settings side panel fixed * Second last iteration for css * Fixed all the issues of css * Updated the theme icon for now on DE to change the theme from portal/DE itself * Formatting issue resolved * Remove CloudShellTerminalComponent changes - revert to master version * Fixed test issue * Fixed formatting issue * Fix tests: update snapshots and revert xterm imports for compatibility * Fix xterm imports in CloudShellTerminalComponent to use @xterm packages * Fix Cloud Shell component imports for compatibility * Update test snapshots * Fix xterm package consistency across all CloudShell components * Fix TypeScript compilation errors in CloudShell components and query Documents - Standardized xterm package imports across CloudShell components to use legacy 'xterm' package - Fixed Terminal type compatibility issues in CommonUtils.tsx - Added type casting for enableQueryControl property in queryDocuments.ts to handle Azure Cosmos SDK interface limitations - Applied code formatting to ensure consistency * Update failing snapshot tests - Updated TreeNodeComponent snapshot tests for loading states - Updated ThroughputInputAutoPilotV3Component snapshots for number formatting changes (10,00,000 -> 1,000,000) - All snapshot tests now pass * Fixed test issue * Fixed test issue * Updated the buttons for theme * Updated the Theme changes based on portal theme changes * Updated review comments * Updated the duplicate code and fixed the fabric react error * Few places styling added and resolving few comments * Fixed errors * Fixed comments * Fixed comments * Fixed comments * Fixed full text policy issue for mongoru accounts * Resolved comments for class Name and few others * Added css for homepage in ru accounts * Final commit with all the feedback issues resolved * Lint error resolved * Updated the review comments and few Ui issues * Resolved review comments and changed header bg and active state color * Moved svg code to different file and imported * css fixed for the hpome page boxed for ru account * Lint errors * Fixed boxes issue in ru accounts * Handled the initial theme from the portal * Updated snap * Update snapshots for TreeNodeComponent and CreateCopyJobScreensProvider tests * Fix duplicate DataExplorerRoot test id causing Playwright strict mode violation * Fix locale-dependent number formatting in ThroughputInputAutoPilotV3Component --------- Co-authored-by: Sakshi Gupta <sakshig+microsoft@microsoft.com> Co-authored-by: Sakshi Gupta <sakshig@microsoft.com>
This commit is contained in:
sakshigupta12feb
GitHub
@@ -63,7 +63,7 @@ export interface PriceBreakdown {
|
||||
|
||||
export type editorType = "indexPolicy" | "computedProperties" | "dataMasking";
|
||||
|
||||
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "windowtext" } };
|
||||
export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } };
|
||||
|
||||
export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = {
|
||||
label: {
|
||||
@@ -119,15 +119,89 @@ export const addMongoIndexSubElementsTokens: IStackTokens = {
|
||||
|
||||
export const mediumWidthStackStyles: IStackStyles = { root: { width: 600 } };
|
||||
|
||||
export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = { root: { paddingLeft: 10, width: 210 } };
|
||||
export const shortWidthTextFieldStyles: Partial<ITextFieldStyles> = {
|
||||
root: { paddingLeft: 10, width: 210 },
|
||||
fieldGroup: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
borderColor: "var(--colorNeutralStroke1)",
|
||||
},
|
||||
field: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
},
|
||||
};
|
||||
|
||||
export const shortWidthDropDownStyles: Partial<IDropdownStyles> = { dropdown: { paddingleft: 10, width: 202 } };
|
||||
export const shortWidthDropDownStyles: Partial<IDropdownStyles> = {
|
||||
dropdown: { paddingLeft: 10, width: 202 },
|
||||
title: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
borderColor: "var(--colorNeutralStroke1)",
|
||||
},
|
||||
caretDown: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
callout: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
border: "1px solid var(--colorNeutralStroke1)",
|
||||
},
|
||||
dropdownItems: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
},
|
||||
dropdownItem: {
|
||||
backgroundColor: "transparent",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
selectors: {
|
||||
"&:hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&:focus": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
dropdownItemSelected: {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.08)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
selectors: {
|
||||
"&:hover": {
|
||||
backgroundColor: "rgba(255, 255, 255, 0.1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
dropdownOptionText: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
};
|
||||
|
||||
export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
|
||||
root: {
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
selectors: {
|
||||
":hover": {
|
||||
background: "transparent",
|
||||
backgroundColor: "var(--colorNeutralBackground1Hover)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
":hover .ms-DetailsRow-cell": {
|
||||
backgroundColor: "var(--colorNeutralBackground1Hover)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"&.ms-DetailsRow": {
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
cell: {
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
selectors: {
|
||||
":hover": {
|
||||
backgroundColor: "var(--colorNeutralBackground1Hover)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -135,9 +209,11 @@ export const transparentDetailsRowStyles: Partial<IDetailsRowStyles> = {
|
||||
|
||||
export const transparentDetailsHeaderStyle: Partial<IDetailsColumnStyles> = {
|
||||
root: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
selectors: {
|
||||
":hover": {
|
||||
background: "transparent",
|
||||
background: "var(--colorNeutralBackground1Hover)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -149,6 +225,35 @@ export const customDetailsListStyles: Partial<IDetailsListStyles> = {
|
||||
".ms-FocusZone": {
|
||||
paddingTop: 0,
|
||||
},
|
||||
".ms-DetailsHeader": {
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
},
|
||||
".ms-DetailsHeader-cell": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
selectors: {
|
||||
":hover": {
|
||||
backgroundColor: "var(--colorNeutralBackground1Hover)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
".ms-DetailsHeader-cellTitle": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-DetailsRow": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-DetailsRow-cell": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
// Tooltip styling for cells
|
||||
".ms-TooltipHost": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-DetailsRow-cell .ms-TooltipHost": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -166,7 +271,18 @@ export const separatorStyles: Partial<ISeparatorStyles> = {
|
||||
};
|
||||
|
||||
export const messageBarStyles: Partial<IMessageBarStyles> = {
|
||||
root: { marginTop: "5px", backgroundColor: "white" },
|
||||
root: {
|
||||
marginTop: "5px",
|
||||
backgroundColor: "var(--colorNeutralBackground1)",
|
||||
selectors: {
|
||||
"&.ms-MessageBar--severeWarning": {
|
||||
backgroundColor: "var(--colorNeutralBackground4)",
|
||||
},
|
||||
"&.ms-MessageBar--warning": {
|
||||
backgroundColor: "var(--colorNeutralBackground3)",
|
||||
},
|
||||
},
|
||||
},
|
||||
text: { fontSize: 14 },
|
||||
};
|
||||
|
||||
@@ -222,9 +338,11 @@ 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>}
|
||||
@@ -238,7 +356,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>
|
||||
@@ -285,7 +403,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.
|
||||
@@ -303,7 +421,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>
|
||||
@@ -339,7 +457,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>
|
||||
@@ -459,9 +577,13 @@ export const changeFeedPolicyToolTip: JSX.Element = (
|
||||
);
|
||||
|
||||
export const mongoIndexingPolicyDisclaimer: JSX.Element = (
|
||||
<Text>
|
||||
<Text style={{ color: "var(--colorNeutralForeground1)" }}>
|
||||
For queries that filter on multiple properties, create multiple single field indexes instead of a compound index.
|
||||
<Link href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types" target="_blank">
|
||||
<Link
|
||||
href="https://docs.microsoft.com/azure/cosmos-db/mongodb-indexing#index-types"
|
||||
target="_blank"
|
||||
style={{ color: "var(--colorBrandForeground1)" }}
|
||||
>
|
||||
{` Compound indexes `}
|
||||
</Link>
|
||||
are only used for sorting query results. If you need to add a compound index, you can create one using the Mongo
|
||||
@@ -470,7 +592,7 @@ export const mongoIndexingPolicyDisclaimer: JSX.Element = (
|
||||
);
|
||||
|
||||
export const mongoCompoundIndexNotSupportedMessage: JSX.Element = (
|
||||
<Text>
|
||||
<Text style={{ color: "var(--colorNeutralForeground1)" }}>
|
||||
Collections with compound indexes are not yet supported in the indexing editor. To modify indexing policy for this
|
||||
collection, use the Mongo Shell.
|
||||
</Text>
|
||||
@@ -519,14 +641,50 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes
|
||||
fieldGroup: {
|
||||
height: 25,
|
||||
width: 300,
|
||||
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "",
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "var(--colorNeutralStroke1)",
|
||||
selectors: {
|
||||
":disabled": {
|
||||
backgroundColor: StyleConstants.BaseMedium,
|
||||
borderColor: StyleConstants.BaseMediumHigh,
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
borderColor: "var(--colorNeutralStroke1)",
|
||||
color: "var(--colorNeutralForeground2)",
|
||||
},
|
||||
input: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
"input:disabled": {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground2)",
|
||||
},
|
||||
"input#autopilotInput": {
|
||||
backgroundColor: "var(--colorNeutralBackground4)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
field: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
selectors: {
|
||||
":disabled": {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground2)",
|
||||
},
|
||||
},
|
||||
},
|
||||
subComponentStyles: {
|
||||
label: {
|
||||
root: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
suffix: {
|
||||
backgroundColor: "var(--colorNeutralBackground2)",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
border: "1px solid var(--colorNeutralStroke1)",
|
||||
},
|
||||
});
|
||||
|
||||
export const getChoiceGroupStyles = (
|
||||
@@ -534,6 +692,28 @@ export const getChoiceGroupStyles = (
|
||||
baseline: isDirtyTypes,
|
||||
isHorizontal?: boolean,
|
||||
): Partial<IChoiceGroupStyles> => ({
|
||||
label: {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
root: {
|
||||
selectors: {
|
||||
".ms-ChoiceFieldLabel": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-ChoiceField:hover .ms-ChoiceFieldLabel": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-ChoiceField:hover .ms-ChoiceField-innerField": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-ChoiceField-innerField": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
},
|
||||
flexContainer: [
|
||||
{
|
||||
selectors: {
|
||||
@@ -548,6 +728,16 @@ export const getChoiceGroupStyles = (
|
||||
fontSize: 14,
|
||||
fontFamily: StyleConstants.DataExplorerFont,
|
||||
padding: "2px 5px",
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-ChoiceFieldLabel": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-ChoiceFieldLabel:hover": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
".ms-ChoiceField-field:hover .ms-ChoiceFieldLabel": {
|
||||
color: "var(--colorNeutralForeground1)",
|
||||
},
|
||||
},
|
||||
display: isHorizontal ? "inline-flex" : "default",
|
||||
|
||||
Reference in New Issue
Block a user