From 896a50288c6384451f53d0030a78991a7cc32aef Mon Sep 17 00:00:00 2001 From: Archie Agarwal Date: Fri, 18 Jul 2025 10:57:48 +0530 Subject: [PATCH] Darktheme to stored procedures --- less/forms.less | 200 ++++++++++-------- .../Controls/Settings/SettingsRenderUtils.tsx | 34 +-- .../Tabs/QueryTab/QueryResultSection.tsx | 4 +- src/Explorer/Tabs/TriggerTabContent.tsx | 113 +++++++++- .../Tabs/UserDefinedFunctionTabContent.tsx | 56 +++-- src/hooks/useTheme.tsx | 6 +- 6 files changed, 286 insertions(+), 127 deletions(-) diff --git a/less/forms.less b/less/forms.less index 572134c26..a2f5fa257 100644 --- a/less/forms.less +++ b/less/forms.less @@ -1,211 +1,227 @@ @import "./Common/Constants"; .dirty { - border: 1px solid #9b4f96; + border: 1px solid #9b4f96; } .dirty:focus { - outline: 1px solid #9b4f96; + outline: 1px solid #9b4f96; } .tabForm { - padding: 12px 20px 20px 20px; - margin-left: 3px; + padding: 12px 20px 20px 20px; + margin-left: 3px; } .storedTabForm { - padding-top: @LargeSpace; + padding-top: @LargeSpace; } .scaleSettingScrollable { - overflow-y: auto; - overflow-x: hidden; - height:100%; + overflow-y: auto; + overflow-x: hidden; + height: 100%; } .disableFocusDefaults[tabindex] { - &:focus { - outline: none; - } + &:focus { + outline: none; + } - &:active { - outline: none; - } + &:active { + outline: none; + } } .indexingPolicyEditor { - width: 100%; - height: calc(~"100vh - 400px"); + width: 100%; + height: calc(~"100vh - 400px"); } .scaleDivison { - padding: @MediumSpace 0px @DefaultSpace 0px; + padding: @MediumSpace 0px @DefaultSpace 0px; } .scaleSettingTitle { - font-size: 14px; - cursor: pointer; + font-size: 14px; + cursor: pointer; } .autoScaleThroughputTitle { - margin-bottom: @SmallSpace; + margin-bottom: @SmallSpace; } .autoScaleDescription { - margin-top: 6px; - margin-bottom: @SmallSpace; + margin-top: 6px; + margin-bottom: @SmallSpace; } .ssExpandCollapseIcon { - width: 10px; - height: 10px; + width: 10px; + height: 10px; } .ssCollapseIcon { - margin-bottom: 5px; + margin-bottom: 5px; } .ssTextAllignment { - padding-left: 19px; + padding-left: 19px; } .throughputStorageBlock { - border-top: 1px solid #bbb; - border-bottom: 1px solid #bbb; - background-color: #ccc; - padding-left: 10px; - width: 315px; + border-top: 1px solid #bbb; + border-bottom: 1px solid #bbb; + background-color: #ccc; + padding-left: 10px; + width: 315px; } .storageCapacityTitle { - padding: @LargeSpace 0px; - + padding: @LargeSpace 0px; } .throughputStorageValue { - font-size: 12px; + font-size: 12px; } -.estimatedCost, .largePartitionKeyEnabled { - padding: @SmallSpace 0px @LargeSpace; +.estimatedCost, +.largePartitionKeyEnabled { + padding: @SmallSpace 0px @LargeSpace; } .storagePadding { - padding-top: 6px; - padding-bottom: 14px; + padding-top: 6px; + padding-bottom: 14px; } .dirtyTextbox { - width: 176px; - margin-top: 7px; - padding-left: 5px; + width: 176px; + margin-top: 7px; + padding-left: 5px; } .formTitleFirst { - padding: @DefaultSpace (2 * @MediumSpace); + padding: @DefaultSpace (2 * @MediumSpace); } .formTitleTextbox { - padding: 0px 0px @DefaultSpace (2 * @MediumSpace); + padding: 0px 0px @DefaultSpace (2 * @MediumSpace); } .formTree { - border: 1px solid #969696; - color: #393939; - padding: 0px 12px 1px 8px; + border: 1px solid var(--colorNeutralStroke1); + color: var(--colorNeutralForeground1); + background-color: var(--colorNeutralBackground1); + padding: 0px 12px 1px 8px; } .formTree:hover { - border: 1px solid #969696; - background-color: #e6f8fe; + border: 1px solid var(--colorNeutralStroke1Hover); + background-color: var(--colorNeutralBackground1Hover); +} + +.formTree::placeholder { + color: var(--colorNeutralForeground2); + opacity: 1; } .formTree:active { - border: 1px solid #1ebbee; + border: 1px solid var(--colorNeutralStroke1Pressed); + background-color: var(--colorNeutralBackground1Pressed); } .scaleForm { - padding-left: 8px; - color: @BaseDark; - border: 1px solid #969696; - min-width: @ScaleFormWidth; + padding-left: 8px; + color: @BaseDark; + border: 1px solid #969696; + min-width: @ScaleFormWidth; - &:hover { - background-color: #e6f8fe; - } + &:hover { + background-color: #e6f8fe; + } } .formTitle { - margin-top: 16px; - margin-bottom: 4px; + margin-top: 16px; + margin-bottom: 4px; } - .spUdfTriggerHeader { - padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); + padding: @DefaultSpace 0px @SmallSpace (2 * @MediumSpace); } .storedUdfTriggerEditor { - width: 100%; - height: 100%; + width: 100%; + height: 100%; } .unselectedRadio { - background-color: white; - border-color: #EEE!important; - color: black!important; + background-color: white; + border-color: #eee !important; + color: black !important; } .disabledRadio { - background-color: #A19F9D; - border-color: #EEE!important; - color: white!important; + background-color: #a19f9d; + border-color: #eee !important; + color: white !important; } .selectedRadio { - background-color: @AccentMediumHigh; - border-color: #EEE!important; - color: white!important; - cursor: pointer; + background-color: @AccentMediumHigh; + border-color: #eee !important; + color: white !important; + cursor: pointer; } .selectedRadio:hover { - background-color: @AccentMediumHigh; - border-color: #EEE!important; - color: white!important; - cursor: pointer; + background-color: @AccentMediumHigh; + border-color: #eee !important; + color: white !important; + cursor: pointer; } .selectedRadio:active { - background-color: #0072c6; - border-color: #EEE!important; - color: white!important; - cursor: pointer; - border: 1px solid #0072c6; + background-color: #0072c6; + border-color: #eee !important; + color: white !important; + cursor: pointer; + border: 1px solid #0072c6; } .selectedRadio.dirty { - background-color: #9b4f96; + background-color: #9b4f96; } .tabs { - margin: 0; + margin: 0; } .formReadOnly { - background-color: #ddd; - border: 1px solid #969696; - min-width: 184px; - padding-left: 8px; + background-color: #ddd; + border: 1px solid #969696; + min-width: 184px; + padding-left: 8px; } .migration:disabled { - background-color: #ccc; + background-color: #ccc; } .trigger-field { - width: 40%; - margin-top: 10px + width: 40%; + margin-top: 10px; + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); } + +.trigger-field input::placeholder { + color: var(--colorNeutralForeground3); + opacity: 1; +} + .trigger-form { - padding: 10px 30px 10px 30px; -} \ No newline at end of file + background-color: var(--colorNeutralBackground1); + color: var(--colorNeutralForeground1); + padding: 10px 30px; +} diff --git a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx index 7e524c520..e54c74a5e 100644 --- a/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx +++ b/src/Explorer/Controls/Settings/SettingsRenderUtils.tsx @@ -63,7 +63,7 @@ export interface PriceBreakdown { export type editorType = "indexPolicy" | "computedProperties"; -export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: 'var(--colorNeutralForeground1)' } }; +export const infoAndToolTipTextStyle: ITextStyles = { root: { fontSize: 14, color: "var(--colorNeutralForeground1)" } }; export const noLeftPaddingCheckBoxStyle: ICheckboxStyles = { label: { @@ -166,7 +166,7 @@ export const separatorStyles: Partial = { }; export const messageBarStyles: Partial = { - root: { marginTop: "5px", backgroundColor: 'var(--colorNeutralBackground1)' }, + root: { marginTop: "5px", backgroundColor: "var(--colorNeutralBackground1)" }, text: { fontSize: 14 }, }; @@ -214,9 +214,11 @@ export const getEstimatedSpendingElement = ( const ruRange: string = isAutoscale ? throughput / 10 + " RU/s - " : ""; return ( - Cost estimate* + Cost estimate* {costElement} - How we calculate this + + How we calculate this + {numberOfRegions} region{numberOfRegions > 1 && s} @@ -230,7 +232,7 @@ export const getEstimatedSpendingElement = ( {priceBreakdown.pricePerRu}/RU - + *{estimatedCostDisclaimer} @@ -272,7 +274,7 @@ export const updateThroughputDelayedApplyWarningMessage: JSX.Element = ( export const getUpdateThroughputBeyondInstantLimitMessage = (instantMaximumThroughput: number): JSX.Element => { return ( - + 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 +292,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: -
    +
    1. You can instantly scale up to {instantMaximumThroughput} RU/s.
      2. {instantMaximumThroughput < maximumThroughput && (
    2. You can asynchronously scale up to any value under {maximumThroughput} RU/s in 4-6 hours.
      3. @@ -326,7 +328,7 @@ export const getUpdateThroughputBelowMinimumMessage = (minimum: number): JSX.Ele }; export const saveThroughputWarningMessage: JSX.Element = ( - + Your bill will be affected as you update your throughput settings. Please review the updated cost estimate below before saving your changes @@ -507,17 +509,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)', + backgroundColor: "var(--colorNeutralBackground1)", borderColor: StyleConstants.BaseMediumHigh, }, + "input:disabled": { + backgroundColor: "var(--colorNeutralBackground3)", + }, + }, + field: { + color: "var(--colorNeutralForeground1)", }, }, subComponentStyles: { label: { root: { - color: 'var(--colorNeutralForeground1)' + color: "var(--colorNeutralForeground1)", }, }, }, @@ -529,7 +538,8 @@ export const getChoiceGroupStyles = ( isHorizontal?: boolean, ): Partial => ({ label: { - color: 'var(--colorNeutralForeground1)', }, + color: "var(--colorNeutralForeground1)", + }, flexContainer: [ { selectors: { @@ -544,7 +554,7 @@ export const getChoiceGroupStyles = ( fontSize: 14, fontFamily: StyleConstants.DataExplorerFont, padding: "2px 5px", - color: 'var(--colorNeutralForeground1)' + color: "var(--colorNeutralForeground1)", }, }, display: isHorizontal ? "inline-flex" : "default", diff --git a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx index 0711f9295..955e4feb0 100644 --- a/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx +++ b/src/Explorer/Tabs/QueryTab/QueryResultSection.tsx @@ -1,4 +1,4 @@ -import { Link } from "@fluentui/react-components"; +import { Link, tokens } from "@fluentui/react-components"; import QueryError from "Common/QueryError"; import { IndeterminateProgressBar } from "Explorer/Controls/IndeterminateProgressBar"; import { MessageBanner } from "Explorer/Controls/MessageBanner"; @@ -29,7 +29,7 @@ const ExecuteQueryCallToAction: React.FC = () => {

      -

      Execute a query to see the results

      +

      Execute a query to see the results

      ); diff --git a/src/Explorer/Tabs/TriggerTabContent.tsx b/src/Explorer/Tabs/TriggerTabContent.tsx index c4186f653..20d5f39f1 100644 --- a/src/Explorer/Tabs/TriggerTabContent.tsx +++ b/src/Explorer/Tabs/TriggerTabContent.tsx @@ -1,5 +1,6 @@ import { TriggerDefinition } from "@azure/cosmos"; -import { Dropdown, IDropdownOption, Label, TextField } from "@fluentui/react"; +import { getTheme, IDropdownOption, IDropdownStyles, Label, TextField } from "@fluentui/react"; +import { Dropdown } from "@fluentui/react/lib/Dropdown"; import { KeyboardAction } from "KeyboardShortcuts"; import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils"; import React, { Component } from "react"; @@ -17,11 +18,46 @@ import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandBu import { EditorReact } from "../Controls/Editor/EditorReact"; import { useCommandBar } from "../Menus/CommandBar/CommandBarComponentAdapter"; import TriggerTab from "./TriggerTab"; - const triggerTypeOptions: IDropdownOption[] = [ { key: "Pre", text: "Pre" }, { key: "Post", text: "Post" }, ]; +const theme = getTheme(); +const dropdownStyles: Partial = { + label: { + color: "var(--colorNeutralForeground1)", + }, + dropdown: { + width: "100%", + }, + title: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + }, + dropdownItem: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + }, + dropdownItems: { + backgroundColor: "var(--colorNeutralBackground1)", + color: "var(--colorNeutralForeground1)", + }, + dropdownItemSelected: { + backgroundColor: "var(--colorBrandBackgroundSelected)", + color: "var(--colorNeutralForegroundOnBrand)", + selectors: { + "&:before": { + content: '""', + position: "absolute", + left: 0, + top: 0, + bottom: 0, + width: "4px", + background: "var(--colorBrandBackground)", + }, + }, + }, +}; const triggerOperationOptions: IDropdownOption[] = [ { key: "All", text: "All" }, @@ -304,6 +340,23 @@ export class TriggerTabContent extends Component this.handleTriggerTypeOprationChange(event, selectedKey, "triggerType")} + styles={{ + root: { width: "40%", marginTop: "10px" }, + // dropdown: { + // backgroundColor: "var(--colorNeutralBackground1)", + // color: "var(--colorNeutralForeground1)", + // border: "1px solid var(--colorNeutralStroke1)", + // }, + + // dropdown: { + // backgroundColor: theme.palette.neutralLighterAlt, // dynamic background + // borderColor: theme.palette.neutralSecondary, + // }, + // title: { + // backgroundColor: theme.palette.neutralLighterAlt, + // color: theme.semanticColors.bodyText, // selected value color + // }, + + dropdown: { + backgroundColor: theme.semanticColors.bodyBackground, + borderColor: theme.semanticColors.bodyDivider, + }, + title: { + backgroundColor: theme.semanticColors.bodyBackground, + color: theme.semanticColors.bodyText, + }, + callout: { + backgroundColor: theme.semanticColors.bodyBackground, + }, + subComponentStyles: { + label: { + root: { + color: "var(--colorNeutralForeground1)", + }, + }, + }, + }} /> this.handleTriggerTypeOprationChange(event, selectedKey, "triggerOperation") } + styles={dropdownStyles} + + // styles={{ + // root: { width: "40%", marginTop: "10px" }, + // dropdown: { + // backgroundColor: theme.palette.neutralLighterAlt, // dynamic background + // borderColor: theme.palette.neutralSecondary, + // }, + // title: { + // backgroundColor: theme.palette.neutralLighterAlt, + // color: theme.semanticColors.bodyText, // selected value color + // }, + // subComponentStyles: { + // label: { + // root: { + // color: "var(--colorNeutralForeground1)", + // }, + // }, + // }, + // }} /> - + + {" "} + = ({ children, theme }) const isDarkMode = theme === "Dark"; return {children}; }; -export const isDarkMode = true; +export const isDarkMode = true; export const monacoTheme = isDarkMode ? "vs-dark" : "vs"; export const useTheme = () => { const { targetDocument } = useFluent(); const context = React.useContext(ThemeContext); - + const [isDarkMode, setIsDarkMode] = useState(() => { // First check if we're in a theme context if (context) { @@ -60,6 +60,6 @@ export const useTheme = () => { }, [targetDocument, context]); return { - isDarkMode + isDarkMode, }; };