diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.styles.ts b/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.styles.ts new file mode 100644 index 000000000..3639715a0 --- /dev/null +++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.styles.ts @@ -0,0 +1,34 @@ +// Copyright (c) Microsoft Corporation. +// Licensed under the MIT License. + +import { mergeStyleSets, IStyle, getTheme } from "office-ui-fabric-react"; + +export interface IAddTabButtonStyles { + callout: IStyle; + button: IStyle; + splitter: IStyle; +} + +export const addTabButtonStyles = () => { + const theme = getTheme(); + return mergeStyleSets({ + button: { + backgroundColor: theme.semanticColors.bodyBackground, + span: { + i: { + fontSize: "32px" + } + } + }, + callout: { + padding: "1em", + width: "15em" + }, + splitter: { + backgroundColor: theme.semanticColors.variantBorder, + height: 1, + position: "relative", + top: 16 + } + }); +}; diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.tsx index 89ea8042e..afe2738e3 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.tsx +++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.tsx @@ -8,10 +8,12 @@ import { Dropdown, IconButton, IDropdownOption, - PrimaryButton + PrimaryButton, + Stack } from "office-ui-fabric-react"; import React from "react"; +import { addTabButtonStyles } from "./AddTabButton.styles"; import { GlobalTabKeys } from "./ModelAssessmentEnums"; export interface IAddTabButtonProps { tabIndex: number; @@ -61,12 +63,15 @@ export class AddTabButton extends React.Component< }; } public render(): React.ReactNode { + const style = addTabButtonStyles(); return ( <> +
{this.state.isCalloutVisible && ( - {localization.ModelAssessment.AddingTab.CalloutContent} - - + + {localization.ModelAssessment.AddingTab.CalloutContent} + + + )} diff --git a/libs/model-assessment/src/lib/ModelAssessmentDashboard/ModelAssessmentDashboard.tsx b/libs/model-assessment/src/lib/ModelAssessmentDashboard/ModelAssessmentDashboard.tsx index e8e62497a..39dadc7bb 100644 --- a/libs/model-assessment/src/lib/ModelAssessmentDashboard/ModelAssessmentDashboard.tsx +++ b/libs/model-assessment/src/lib/ModelAssessmentDashboard/ModelAssessmentDashboard.tsx @@ -91,12 +91,15 @@ export class ModelAssessmentDashboard extends CohortBasedComponent< {this.state.activeGlobalTabs[0]?.key !== GlobalTabKeys.ErrorAnalysisTab && ( -
+ -
+ )} {this.state.activeGlobalTabs.map((t, i) => ( -
+ {t.key === GlobalTabKeys.ErrorAnalysisTab && ( )} */} -
+ ))}