From c08e80670ea9895edbad4aa49a205f3ab6cc4635 Mon Sep 17 00:00:00 2001 From: Sakshi Gupta Date: Wed, 17 Sep 2025 17:46:00 +0530 Subject: [PATCH] command ar items fixed --- .../Controls/Settings/SettingsRenderUtils.tsx | 59 ++++++++++++-- .../ThroughputInputAutoPilotV3Component.tsx | 76 +++++++++++++++---- .../CommandBar/CommandBarComponentAdapter.tsx | 63 ++++++++++++--- 3 files changed, 163 insertions(+), 35 deletions(-) diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx index e54c74a5e..2c4bd52a4 100644 --- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx +++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx @@ -166,8 +166,19 @@ export const separatorStyles: Partial = { }; export const messageBarStyles: Partial = { - root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" }, - text: { fontSize: 14 }, + root: { + marginTop: "5px", + backgroundColor: "var(--colorNeutralBackground1)", + selectors: { + '&.ms-MessageBar--severeWarning': { + backgroundColor: "var(--colorNeutralBackground4)", + }, + '&.ms-MessageBar--warning': { + backgroundColor: "var(--colorNeutralBackground3)", + } + } + }, + text: { fontSize: 14 } }; export const throughputUnit = "RU/s"; @@ -509,20 +520,24 @@ export const getTextFieldStyles = (current: isDirtyTypes, baseline: isDirtyTypes height: 25, width: 300, borderColor: isDirty(current, baseline) ? StyleConstants.Dirty : "", - backgroundColor: "var(--colorNeutralBackground3)", selectors: { ":disabled": { backgroundColor: "var(--colorNeutralBackground1)", borderColor: StyleConstants.BaseMediumHigh, }, - "input:disabled": { - backgroundColor: "var(--colorNeutralBackground3)", + "input": { + color: "var(--colorNeutralForeground1)", + }, + "input#autopilotInput": { + backgroundColor: "var(--colorNeutralBackground4)", + color: "var(--colorNeutralForeground1)", }, }, - field: { - color: "var(--colorNeutralForeground1)", - }, }, + field: { + color: "var(--colorNeutralForeground1)", + }, + subComponentStyles: { label: { root: { @@ -540,6 +555,25 @@ export const getChoiceGroupStyles = ( 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: { @@ -556,6 +590,15 @@ export const getChoiceGroupStyles = ( 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", columnGap: isHorizontal ? "30px" : "default", diff --git a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx index 3f086a7d9..7fa49f5c1 100644 --- a/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx +++ b/src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx @@ -3,6 +3,7 @@ import { ChoiceGroup, FontIcon, IChoiceGroupOption, + IMessageBarStyles, IProgressIndicatorStyles, ISeparatorStyles, Label, @@ -37,11 +38,10 @@ import { getUpdateThroughputBeyondInstantLimitMessage, getUpdateThroughputBeyondSupportLimitMessage, manualToAutoscaleDisclaimerElement, - messageBarStyles, noLeftPaddingCheckBoxStyle, relaxedSpacingStackProps, saveThroughputWarningMessage, - titleAndInputStackProps, + titleAndInputStackProps } from "../../SettingsRenderUtils"; import { IsComponentDirtyResult, getSanitizedInputValue, isDirty } from "../../SettingsUtils"; import { ToolTipLabelComponent } from "../ToolTipLabelComponent"; @@ -383,7 +383,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {this.overrideWithProvisionedThroughputSettings() && ( {manualToAutoscaleDisclaimerElement} @@ -420,7 +420,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< { selectors: { "::before": { - backgroundColor: "rgb(200, 200, 200)", + backgroundColor: "var(--colorNeutralStroke2)", height: "3px", marginTop: "-1px", }, @@ -459,10 +459,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< { backgroundColor: this.getCurrentRuRange() === "instant" - ? "rgb(0, 120, 212)" + ? "var(--colorBrandBackground)" : this.getCurrentRuRange() === "delayed" - ? "rgb(255 216 109)" - : "rgb(251, 217, 203)", + ? "var(--colorStatusWarningBackground1)" + : "var(--colorStatusDangerBackground1)", }, ], }); @@ -547,12 +547,37 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< } }; + private darkThemeMessageBarStyles: Partial = { + root: { + marginTop: "5px", + selectors: { + '&.ms-MessageBar--severeWarning': { + backgroundColor: "var(--colorStatusDangerBackground1)", + border: "1px solid var(--colorStatusDangerBorder1)" + }, + '&.ms-MessageBar--warning': { + backgroundColor: "var(--colorStatusWarningBackground1)", + border: "1px solid var(--colorStatusWarningBorder1)" + }, + '.ms-MessageBar-icon': { + color: "var(--colorNeutralForeground1)", + }, + '.ms-MessageBar-text': { + color: "var(--colorNeutralForeground1)", + } + } + } + }; + private getThroughputWarningMessageBar = (): JSX.Element => { const isSevereWarning: boolean = this.currentThroughputValue() > this.props.softAllowedMaximumThroughput || this.currentThroughputValue() < this.props.minimum; return ( - + {this.getThroughputWarningMessageText()} ); @@ -565,10 +590,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {/* Column 1: Minimum RU/s */} - + Minimum RU/s - + {AutoPilotUtils.getMinRUsBasedOnUserInput(this.props.maxAutoPilotThroughput)} @@ -596,6 +622,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< fontSize: 12, fontWeight: 400, paddingBottom: 6, + color: "var(--colorNeutralForeground1)", }} > x 10 = @@ -604,10 +631,10 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {/* Column 3: Maximum RU/s */} - + Maximum RU/s - + {`Billing will apply if you provision more than ${SharedConstants.FreeTierLimits.RU} RU/s of manual throughput, or if the resource scales beyond ${SharedConstants.FreeTierLimits.RU} RU/s with autoscale.`} @@ -733,6 +778,7 @@ export class ThroughputInputAutoPilotV3Component extends React.Component< {warningMessage && ( {warningMessage} diff --git a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx index abb986fe3..179b396cc 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarComponentAdapter.tsx @@ -39,6 +39,28 @@ export const useCommandBar: UseStore = create((set) => ({ const useStyles = makeStyles({ commandBarContainer: { borderBottom: "1px solid var(--colorNeutralStroke1)", + // backgroundColor: "var(--colorNeutralBackground1)", + }, + toolbarButton: { + backgroundColor: "transparent", + "&:hover": { + backgroundColor: "var(--colorNeutralBackground2)", + }, + "&:active": { + backgroundColor: "var(--colorNeutralBackground3)", + }, + }, + buttonIcon: { + width: "16px", + height: "16px", + display: "flex", + alignItems: "center", + justifyContent: "center", + "& img": { + width: "100%", + height: "100%", + objectFit: "contain", + }, }, }); @@ -47,7 +69,6 @@ export const CommandBar: React.FC = ({ container }: Props) => { const buttons = useCommandBar((state) => state.contextButtons); const isHidden = useCommandBar((state) => state.isHidden); const { targetDocument } = useFluent(); - // const isDarkMode = targetDocument?.body.classList.contains("isDarkMode"); const setKeyboardHandlers = useKeyboardActionGroup(KeyboardActionGroup.COMMAND_BAR); const styles = useStyles(); @@ -107,20 +128,38 @@ export const CommandBar: React.FC = ({ container }: Props) => { ); } - const rootStyle = isFabric() - ? { - root: { - backgroundColor: "var(--colorNeutralBackground1)", - padding: "2px 8px 0px 8px", + const rootStyle = { + root: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + padding: isFabric() ? "2px 8px 0px 8px" : undefined + }, + button: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + selectors: { + ":hover": { + backgroundColor: "var(--colorNeutralBackground2)", color: "var(--colorNeutralForeground1)", }, + ":active": { + backgroundColor: "var(--colorNeutralBackground3)", + color: "var(--colorNeutralForeground1)", + } } - : { - root: { - backgroundColor: "var(--colorNeutralBackground1)", - color: "var(--colorNeutralForeground1)", - }, - }; + }, + menuIcon: { + color: "var(--colorNeutralForeground1)", + }, + item: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + }, + link: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + } + }; const allButtons = staticButtons.concat(contextButtons).concat(controlButtons); const keyboardHandlers = CommandBarUtil.createKeyboardHandlers(allButtons);