From 3884e207c19252ea1d4f8ae267bc70bffca193fa Mon Sep 17 00:00:00 2001
From: xuke444 <40614413+xuke444@users.noreply.github.com>
Date: Thu, 6 May 2021 19:08:43 -0700
Subject: [PATCH] fix mad add button style (#485)

Signed-off-by: Ke Xu <xuke@microsoft.com>
---
 .../AddTabButton.styles.ts                    | 34 +++++++++++++++++++
 .../ModelAssessmentDashboard/AddTabButton.tsx | 25 ++++++++++----
 .../ModelAssessmentDashboard.tsx              | 11 +++---
 3 files changed, 59 insertions(+), 11 deletions(-)
 create mode 100644 libs/model-assessment/src/lib/ModelAssessmentDashboard/AddTabButton.styles.ts

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