diff --git a/less/Common/Constants.less b/less/Common/Constants.less index ea7cf9f9f..946426d37 100644 --- a/less/Common/Constants.less +++ b/less/Common/Constants.less @@ -163,6 +163,7 @@ /**********************************************************************************/ @FabricFont: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif; +@FabricToolbarIconColor: "brightness(0) saturate(100%) invert(50%) sepia(17%) saturate(1459%) hue-rotate(81deg) brightness(99%) contrast(94%)"; @FabricBoxBorderRadius: 8px; @FabricBoxBorderShadow: rgba(0, 0, 0, 0.133) 0px 1.6px 3.6px 0px, rgba(0, 0, 0, 0.11) 0px 0.3px 0.9px 0px; diff --git a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx index 0b866cbbf..384bd06cd 100644 --- a/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx +++ b/src/Explorer/Menus/CommandBar/CommandBarUtil.tsx @@ -37,7 +37,7 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol if (isDisabled) { return StyleConstants.GrayScale; } - return configContext.platform == Platform.Fabric ? StyleConstants.NoColor : undefined; + return configContext.platform == Platform.Fabric ? StyleConstants.FabricToolbarIconColor : undefined; }; return btns @@ -96,7 +96,12 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol }, width: 16, }, - label: { fontSize: StyleConstants.mediumFontSize }, + label: { + fontSize: + configContext.platform == Platform.Fabric + ? StyleConstants.DefaultFontSize + : StyleConstants.mediumFontSize, + }, rootHovered: { backgroundColor: hoverColor }, rootPressed: { backgroundColor: hoverColor }, splitButtonMenuButtonExpanded: { @@ -133,7 +138,12 @@ export const convertButton = (btns: CommandButtonComponentProps[], backgroundCol // TODO Figure out how to do it the proper way with subComponentStyles. // TODO Remove all this crazy styling once we adopt Ui-Fabric Azure themes selectors: { - ".ms-ContextualMenu-itemText": { fontSize: StyleConstants.mediumFontSize }, + ".ms-ContextualMenu-itemText": { + fontSize: + configContext.platform == Platform.Fabric + ? StyleConstants.DefaultFontSize + : StyleConstants.mediumFontSize, + }, ".ms-ContextualMenu-link:hover": { backgroundColor: hoverColor }, ".ms-ContextualMenu-icon": { width: 16, height: 16 }, }, diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx index ff12d63f8..fc152aa92 100644 --- a/src/Explorer/Tabs/Tabs.tsx +++ b/src/Explorer/Tabs/Tabs.tsx @@ -1,7 +1,7 @@ import { Link, MessageBar, MessageBarButton, MessageBarType } from "@fluentui/react"; import { CassandraProxyEndpoints, MongoProxyEndpoints } from "Common/Constants"; import { sendMessage } from "Common/MessageHandler"; -import { configContext, updateConfigContext } from "ConfigContext"; +import { Platform, configContext, updateConfigContext } from "ConfigContext"; import { IpRule } from "Contracts/DataModels"; import { MessageTypes } from "Contracts/ExplorerContracts"; import { CollectionTabKind } from "Contracts/ViewModels"; @@ -35,7 +35,7 @@ interface TabsProps { export const Tabs = ({ explorer }: TabsProps): JSX.Element => { const { openedTabs, openedReactTabs, activeTab, activeReactTab, networkSettingsWarning } = useTabs(); const [showRUThresholdMessageBar, setShowRUThresholdMessageBar] = useState( - userContext.apiType === "SQL" && !hasRUThresholdBeenConfigured(), + userContext.apiType === "SQL" && configContext.platform !== Platform.Fabric && !hasRUThresholdBeenConfigured(), ); const [ showMongoAndCassandraProxiesNetworkSettingsWarningState,