fix UX bug in setting page (#5306)

Co-authored-by: Dong Lei <[email protected]>

Author: liweitian

Composer/packages/client/src/pages/botProject/runtime-settings/RuntimeSettings.tsx

@@ -38,6 +38,7 @@ import {
   customerLabel,
   iconStyle,
   textOr,
+  updateText,
 } from './style';
 
 export const RuntimeSettings: React.FC<RouteComponentProps<{ projectId: string }>> = (props) => {
@@ -215,10 +216,9 @@ export const RuntimeSettings: React.FC<RouteComponentProps<{ projectId: string }
           onRenderLabel={onRenderLabel}
         />
       </div>
-      <br />
       {needsUpdate && (
         <div>
-          <p>
+          <p css={updateText}>
             {formatMessage(
               'A newer version of the provisioning scripts has been found, and this project can be updated to the latest.'
             )}

Composer/packages/client/src/pages/botProject/runtime-settings/style.ts

@@ -8,7 +8,6 @@ export const runtimeSettingsStyle = css`
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
-  height: 200px;
 `;
 
 export const runtimeControls = css`
@@ -71,3 +70,8 @@ export const iconStyle = (disabled) => {
 export const textOr = css`
   font-size: ${FontSizes.smallPlus};
 `;
+
+export const updateText = css`
+  font-size: ${FontSizes.smallPlus};
+  color: ${NeutralColors.gray130};
+`;