style: update header size and weight

Composer/packages/client/src/pages/about/index.tsx

@@ -30,7 +30,7 @@ export const About: React.FC<RouteComponentProps> = () => {
                 href={'https://github.com/microsoft/BotFramework-Composer/blob/stable/toc.md'}
                 tabIndex={-1}
                 target={'_blank'}
-                style={{ marginLeft: '5px' }}
+                style={{ marginLeft: '5px', textDecoration: 'underline' }}
               >
                 {formatMessage(`Learn more`)}
               </Link>
@@ -44,7 +44,7 @@ export const About: React.FC<RouteComponentProps> = () => {
                   href={`https://github.com/microsoft/BotFramework-Composer/commit/${process.env.GIT_SHA}`}
                   tabIndex={-1}
                   target={'_blank'}
-                  style={{ marginLeft: '5px' }}
+                  style={{ marginLeft: '5px', textDecoration: 'underline' }}
                 >
                   {process.env.GIT_SHA || 'Unknown'}
                 </Link>
@@ -57,7 +57,7 @@ export const About: React.FC<RouteComponentProps> = () => {
                   href={`https://botbuilder.myget.org/feed/botbuilder-v4-dotnet-daily/package/nuget/Microsoft.Bot.Builder.Dialogs.Adaptive/${process.env.SDK_PACKAGE_VERSION}`}
                   tabIndex={-1}
                   target={'_blank'}
-                  style={{ marginLeft: '5px' }}
+                  style={{ marginLeft: '5px', textDecoration: 'underline' }}
                 >
                   {process.env.SDK_PACKAGE_VERSION || 'Unknown'}
                 </Link>

Composer/packages/client/src/pages/about/styles.js

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { css } from '@emotion/core';
-
+import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
 export const outline = css`
   display: flex;
   flex-direction: column;
@@ -20,7 +20,8 @@ export const title = css`
   display: block;
   height: 36px;
   margin: 33px 0px 0px 42px;
-  font-size: 36px;
+  font-size: ${FontSizes.xLarge};
+  font-weight: ${FontWeights.semibold};
   line-height: 32px;
 `;
 
@@ -31,12 +32,14 @@ export const body = css`
 `;
 
 export const version = css`
-  font-size: 24px;
+  font-size: ${FontSizes.large};
+  font-weight: ${FontWeights.regular};
   line-height: 32px;
 `;
 
 export const description = css`
-  font-size: 20px;
+  font-size: ${FontSizes.mediumPlus};
+  font-weight: ${FontWeights.regular};
   line-height: 32px;
   width: 50%;
   margin-top: 20px;
@@ -61,6 +64,8 @@ export const DiagnosticsInfoText = css`
 
 export const DiagnosticsInfoTextAlignLeft = css`
   text-align: left;
+  font-size: ${FontSizes.mediumPlus};
+  font-weight: ${FontWeights.semibold};
 `;
 
 export const DiagnosticsInfo = css`
@@ -85,20 +90,25 @@ export const linkRow = css`
 `;
 
 export const link = css`
-  font-size: 20px;
+  font-size: ${FontSizes.mediumPlus};
+  font-weight: ${FontWeights.regular};
   color: #0078d4;
   margin-left: 10px;
+  text-decoration: underline;
 `;
 
 export const helpLink = css`
-  font-size: 24px;
+  font-size: ${FontSizes.mediumPlus};
+  font-weight: ${FontWeights.regular};
   color: #0078d4;
   margin-left: 60px;
+  text-decoration: underline;
 `;
 
 export const icon = {
   icon: {
     color: '#0078d4',
     fontSize: '20px',
+    paddingBottom: '6px',
   },
 };

Composer/packages/client/src/pages/design/styles.js

@@ -91,8 +91,12 @@ export const breadcrumbClass = mergeStyleSets({
     padding: '10px',
   },
   itemLink: {
-    fontSize: FontSizes.medium,
-    fontWeight: FontWeights.semilight,
+    selectors: {
+      '.ms-TooltipHost': {
+        fontSize: FontSizes.large,
+        fontWeight: FontWeights.regular,
+      },
+    },
     color: '#333',
     padding: '4px 8px',
   },

Composer/packages/client/src/pages/home/index.tsx

@@ -130,7 +130,7 @@ const Home: React.FC<RouteComponentProps> = () => {
       <ToolBar toolbarItems={toolbarItems} />
       <div css={home.page}>
         <div css={home.leftPage}>
-          <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
+          <div css={home.title}>{formatMessage(`Bot Framework Composer`)}</div>
           <div css={home.introduction}>
             {formatMessage(
               'Bot Framework Composer is an integrated development environment (IDE) for building bots and other types of conversational software with the Microsoft Bot Framework technology stack'

Composer/packages/client/src/pages/home/styles.ts

@@ -5,7 +5,7 @@ import { css } from '@emotion/core';
 import { IIconStyles } from 'office-ui-fabric-react/lib/Icon';
 import { ITheme, getTheme } from 'office-ui-fabric-react/lib/Styling';
 import { Depths, MotionTimings, MotionDurations } from '@uifabric/fluent-theme';
-
+import { FontWeights } from 'office-ui-fabric-react/lib/Styling';
 export const outline = css`
   display: flex;
   flex-direction: column;
@@ -35,7 +35,7 @@ export const title = css`
   display: block;
   font-size: 28px;
   line-height: 36px;
-  font-weight: normal;
+  font-weight: ${FontWeights.semibold};
   margin: 0;
 `;
 

Composer/packages/client/src/pages/language-generation/index.tsx

@@ -16,6 +16,7 @@ import {
   flexContent,
   actionButton,
   contentEditor,
+  HeaderText,
 } from '../language-understanding/styles';
 import { projectContainer } from '../design/styles';
 import { navigateTo } from '../../utils';
@@ -87,7 +88,7 @@ const LGPage: React.FC<LGPageProps> = props => {
     <Fragment>
       <ToolBar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>
-        <div>{formatMessage('Bot Responses')}</div>
+        <div css={HeaderText}>{formatMessage('Bot Responses')}</div>
         <div css={flexContent}>
           <Toggle
             className={'toggleEditMode'}

Composer/packages/client/src/pages/language-understanding/index.tsx

@@ -15,7 +15,15 @@ import { TestController } from '../../TestController';
 import { NavLinks } from '../../components/NavLinks';
 
 import TableView from './table-view';
-import { ContentHeaderStyle, ContentStyle, flexContent, actionButton, contentEditor, dialogItem } from './styles';
+import {
+  ContentHeaderStyle,
+  ContentStyle,
+  flexContent,
+  actionButton,
+  contentEditor,
+  dialogItem,
+  HeaderText,
+} from './styles';
 const CodeEditor = React.lazy(() => import('./code-editor'));
 
 interface DefineConversationProps {
@@ -103,7 +111,7 @@ const LUPage: React.FC<DefineConversationProps> = props => {
     <Fragment>
       <ToolBar toolbarItems={toolbarItems} />
       <div css={ContentHeaderStyle}>
-        <div>{formatMessage('User Input')}</div>
+        <div css={HeaderText}>{formatMessage('User Input')}</div>
         <div css={flexContent}>
           <Toggle
             className={'toggleEditMode'}

Composer/packages/client/src/pages/language-understanding/styles.js

@@ -29,6 +29,11 @@ export const ContentHeaderStyle = css`
   align-items: center;
 `;
 
+export const HeaderText = css`
+  font-size: ${FontSizes.xLarge};
+  font-weight: ${FontWeights.semibold};
+`;
+
 export const ContentStyle = css`
   margin-left: 2px;
   display: flex;

Composer/packages/client/src/pages/notifications/styles.ts

@@ -1,7 +1,7 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-import { mergeStyleSets } from 'office-ui-fabric-react/lib/Styling';
+import { mergeStyleSets, FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
 import { css } from '@emotion/core';
 import { IDropdownStyles } from 'office-ui-fabric-react/lib/Dropdown';
 
@@ -49,9 +49,9 @@ export const notificationHeader = css`
 `;
 
 export const notificationHeaderText = css`
-  font-size: 20px;
+  font-size: ${FontSizes.xLarge};
   color: #323130;
-  font-weight: bold;
+  font-weight: ${FontWeights.semibold};
 `;
 
 export const root = css`

Composer/packages/client/src/pages/setting/deployment/index.js

@@ -42,7 +42,7 @@ export const Deployment = () => {
   return (
     <Fragment>
       <div style={styles.page}>
-        <h1 style={styles.header}>{instructions.title}</h1>
+        <div style={styles.header}>{instructions.title}</div>
         <p>{instructions.description}</p>
         <Stack horizontal gap="2rem">
           <DefaultButton onClick={openWizardCreate} text={instructions.button1} />

Composer/packages/client/src/pages/setting/deployment/styles.js

@@ -14,6 +14,8 @@ export const styles = {
   },
   header: {
     marginTop: '0',
+    fontSize: FontSizes.size20,
+    fontWeight: FontWeights.semibold,
   },
   halfstack: {
     root: [

Composer/packages/client/src/pages/setting/dialog-settings/index.tsx

@@ -14,7 +14,7 @@ import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 import { StoreContext } from '../../../store';
 import { isAbsHosted } from '../../../utils/envUtil';
 
-import { hostedSettings, hostedControls, hostedToggle, slotChoice, settingsEditor } from './style';
+import { hostedSettings, hostedControls, hostedControlsTitle, hostedToggle, slotChoice, settingsEditor } from './style';
 
 const hostControlLabels = {
   showKeys: formatMessage('Show keys'),
@@ -72,7 +72,7 @@ export const DialogSettings = () => {
 
   const hostedControl = () => (
     <div css={hostedControls}>
-      <h1>{hostControlLabels.botSettings}</h1>
+      <div css={hostedControlsTitle}>{hostControlLabels.botSettings}</div>
       <p>
         {hostControlLabels.botSettingDescription}
         &nbsp;

Composer/packages/client/src/pages/setting/dialog-settings/style.ts

@@ -2,7 +2,7 @@
 // Licensed under the MIT License.
 
 import { css } from '@emotion/core';
-
+import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
 export const hostedSettings = css`
   position: absolute;
   top: 0;
@@ -39,3 +39,8 @@ export const settingsEditor = css`
   flex: 1;
   max-height: 70%;
 `;
+
+export const hostedControlsTitle = css`
+  font-size: ${FontSizes.xLarge};
+  font-weight: ${FontWeights.semibold};
+`;

Composer/packages/client/src/pages/setting/onboarding-settings/index.tsx

@@ -9,7 +9,7 @@ import { Toggle } from 'office-ui-fabric-react/lib/Toggle';
 
 import { StoreContext } from '../../../store';
 
-import { onboardingSettings } from './style';
+import { onboardingSettings, onboardingTitle } from './style';
 
 export const OnboardingSettings = () => {
   const {
@@ -25,7 +25,7 @@ export const OnboardingSettings = () => {
 
   return (
     <div css={onboardingSettings}>
-      <h1>{formatMessage('Onboarding')}</h1>
+      <div css={onboardingTitle}>{formatMessage('Onboarding')}</div>
       <p>{formatMessage('Enabling Onboarding will restart the product tour.')}</p>
       <Toggle
         data-testid="onboardingToggle"

Composer/packages/client/src/pages/setting/onboarding-settings/style.ts

@@ -2,11 +2,16 @@
 // Licensed under the MIT License.
 
 import { css } from '@emotion/core';
-
+import { FontWeights, FontSizes } from 'office-ui-fabric-react/lib/Styling';
 export const onboardingSettings = css`
   padding: 16px;
 
   h1 {
     margin-top: 0;
   }
 `;
+
+export const onboardingTitle = css`
+  font-size: ${FontSizes.xLarge};
+  font-weight: ${FontWeights.semibold};
+`;