fix mad add button style (#485)

Signed-off-by: Ke Xu <xuke@microsoft.com>

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<IAddTabButtonStyles>({
+    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
+    }
+  });
+};

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 (
       <>
+        <div className={style.splitter} />
         <IconButton
           id={this.buttonId}
           iconProps={{ iconName: "CircleAdditionSolid" }}
           onClick={this.toggleIsCalloutVisible}
+          className={style.button}
         />
         {this.state.isCalloutVisible && (
           <Callout
@@ -74,13 +79,19 @@ export class AddTabButton extends React.Component<
             onDismiss={this.toggleIsCalloutVisible}
             role="status"
             aria-live="assertive"
+            className={style.callout}
           >
-            {localization.ModelAssessment.AddingTab.CalloutContent}
-            <Dropdown options={this.dropdownOptions} onChange={this.onChange} />
-            <PrimaryButton
-              onClick={this.addTab}
-              text={localization.ModelAssessment.AddingTab.AddButtonText}
-            />
+            <Stack tokens={{ childrenGap: "l1" }}>
+              {localization.ModelAssessment.AddingTab.CalloutContent}
+              <Dropdown
+                options={this.dropdownOptions}
+                onChange={this.onChange}
+              />
+              <PrimaryButton
+                onClick={this.addTab}
+                text={localization.ModelAssessment.AddingTab.AddButtonText}
+              />
+            </Stack>
           </Callout>
         )}
       </>

libs/model-assessment/src/lib/ModelAssessmentDashboard/ModelAssessmentDashboard.tsx

@@ -91,12 +91,15 @@ export class ModelAssessmentDashboard extends CohortBasedComponent<
           <Stack>
             {this.state.activeGlobalTabs[0]?.key !==
               GlobalTabKeys.ErrorAnalysisTab && (
-              <div className={modelAssessmentDashboardStyles.section}>
+              <Stack.Item className={modelAssessmentDashboardStyles.section}>
                 <AddTabButton tabIndex={0} onAdd={this.addTab} />
-              </div>
+              </Stack.Item>
             )}
             {this.state.activeGlobalTabs.map((t, i) => (
-              <div key={i} className={modelAssessmentDashboardStyles.section}>
+              <Stack.Item
+                key={i}
+                className={modelAssessmentDashboardStyles.section}
+              >
                 {t.key === GlobalTabKeys.ErrorAnalysisTab && (
                   <ErrorAnalysisViewTab
                     messages={
@@ -194,7 +197,7 @@ export class ModelAssessmentDashboard extends CohortBasedComponent<
                   <CounterfactualsTab />
                 )} */}
                 <AddTabButton tabIndex={i + 1} onAdd={this.addTab} />
-              </div>
+              </Stack.Item>
             ))}
           </Stack>
         </div>