From 64e7d9eb5544acd13fdbcb1a917e0b0c25f82d88 Mon Sep 17 00:00:00 2001
From: TJ Durnford <tjdford@gmail.com>
Date: Mon, 10 Feb 2020 16:30:01 -0800
Subject: [PATCH] style: Adjusted padding in the Form Editor and RootField
 fonts (#1973)

* Updated form editior padding

* Add emotion jsx import

* Fixed regex editor styling
---
 .../obiformeditor/src/Form/ObjectFieldTemplate/styles.css  | 4 ++--
 .../obiformeditor/src/Form/fields/PromptField/BotAsks.tsx  | 7 +++++--
 .../obiformeditor/src/Form/fields/PromptField/styles.ts    | 2 +-
 .../src/Form/fields/RecognizerField/styles.ts              | 2 +-
 .../extensions/obiformeditor/src/Form/fields/RootField.tsx | 2 +-
 .../extensions/obiformeditor/src/Form/fields/styles.css    | 7 +++----
 6 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css
index f6af0d71ac..6c8ac3c361 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css
+++ b/Composer/packages/extensions/obiformeditor/src/Form/ObjectFieldTemplate/styles.css
@@ -10,12 +10,12 @@
 .ObjectItem .ObjectItemField {
   flex: 1;
   overflow: hidden;
-  padding: 0px 18px;
+  padding: 0px 12px;
   margin: 10px 0;
 }
 
 .ObjectItem .ObjectItemField {
-  padding: 0px 18px;
+  padding: 0px 12px;
   margin: 10px 0;
 }
 
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx
index 291770794b..3f95feadb8 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx
+++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/BotAsks.tsx
@@ -1,6 +1,8 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 import React from 'react';
 import formatMessage from 'format-message';
 import { MicrosoftInputDialog } from '@bfc/shared';
@@ -9,6 +11,7 @@ import { LgEditorWidget } from '../../widgets/LgEditorWidget';
 import { WidgetLabel } from '../../widgets/WidgetLabel';
 import { BFDFieldProps } from '../../types';
 
+import { field } from './styles';
 import { GetSchema, PromptFieldChangeHandler } from './types';
 
 interface BotAsksProps extends BFDFieldProps<MicrosoftInputDialog> {
@@ -20,7 +23,7 @@ export const BotAsks: React.FC<BotAsksProps> = props => {
   const { onChange, getSchema, formData, formContext } = props;
 
   return (
-    <>
+    <div css={field}>
       <WidgetLabel label={formatMessage('Prompt')} description={getSchema('prompt').description} />
       <LgEditorWidget
         name="prompt"
@@ -29,6 +32,6 @@ export const BotAsks: React.FC<BotAsksProps> = props => {
         formContext={formContext}
         height={125}
       />
-    </>
+    </div>
   );
 };
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts
index 904763e143..aecd3cf0cf 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts
+++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/PromptField/styles.ts
@@ -17,7 +17,7 @@ export const tabs: Partial<IPivotStyles> = {
     flex: 1,
   },
   itemContainer: {
-    padding: '24px 18px',
+    padding: '12px 12px',
   },
 };
 
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts
index 6aa4748419..2274dd5af9 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts
+++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/RecognizerField/styles.ts
@@ -5,5 +5,5 @@ import { css } from '@emotion/core';
 
 // offset ObjectField's margin
 export const regexEditorContainer = css`
-  margin: 0 -18px -26px -18px;
+  margin: 0 -12px -26px -12px;
 `;
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
index 83ede66ccf..00cc9aaeb4 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
+++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/RootField.tsx
@@ -69,7 +69,7 @@ export const RootField: React.FC<RootFieldProps> = props => {
           styles={{ field: { fontWeight: FontWeights.semibold }, root: { margin: '5px 0 7px -9px' } }}
           fontSize={FontSizes.size20}
         />
-        <p className="RootFieldSubtitle">{getSubTitle()}</p>
+        <p className={classnames('RootFieldSubtitle', FontClassNames.smallPlus)}>{getSubTitle()}</p>
         {sdkOverrides.description !== false && (description || schema.description) && (
           <p className={classnames('RootFieldDescription', FontClassNames.smallPlus)}>
             {getDescription()}
diff --git a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css b/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css
index bcaedcbaa5..6821b83483 100644
--- a/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css
+++ b/Composer/packages/extensions/obiformeditor/src/Form/fields/styles.css
@@ -15,20 +15,19 @@
 }
 .RootFieldTitle {
   border-bottom: 1px solid #c8c6c4;
-  padding: 0 18px;
+  padding: 0 12px;
   margin-bottom: 0px;
 }
 .RootFieldSubtitle {
   height: 15px;
   line-height: 15px;
   font-size: 12px;
-  font-weight: 600;
   color: #4F4F4F;
-  margin: -7px 0 7px;
+  margin: 12px 0;
 }
 .RootFieldDescription {
   margin-top: 0;
-  margin-bottom: 10px;
+  margin-bottom: 12px;
   white-space: pre-line;
 }
 .RootFieldMetaData {