style: Adjusted padding in the Form Editor and RootField fonts (#1973)

* Updated form editior padding * Add emotion jsx import * Fixed regex editor styling
microsoft · Feb 11, 2020 · 64e7d9e · 64e7d9e
1 parent 2268545
commit 64e7d9e
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 {