fix: homepage header layout

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

@@ -3,7 +3,7 @@
 
 /** @jsx jsx */
 import { jsx, SerializedStyles } from '@emotion/core';
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import { Image, ImageFit, ImageLoadState } from 'office-ui-fabric-react/lib/Image';
 import { Link } from 'office-ui-fabric-react/lib/Link';
 
@@ -54,7 +54,7 @@ export const CardWidget: React.FC<CardWidgetProps> = ({
 }) => {
   const defaultImageCover = cardType === 'video' ? defaultVideoCardCover : defaultArticleCardCover;
   const [appliedImageCover, setAppliedImageCover] = useState<string>(imageCover ?? defaultImageCover);
-  const [useImageBackground, setUseImageBackground] = useState(false);
+  const imageContainerEl = useRef<HTMLDivElement>(null);
   const styles =
     rest.styles || cardType === 'resource'
       ? home.cardItem
@@ -68,16 +68,6 @@ export const CardWidget: React.FC<CardWidgetProps> = ({
     }
   };
 
-  // detect image cover dimention to decide apply background or not.
-  // By design standard image width is 244 height is 95, if feed image aspectRatio too far away will be treated as a small image.
-  const onImageLoaded = (e) => {
-    const rect = e.currentTarget.getBoundingClientRect();
-    const aspectRatio = rect.width / rect.height;
-    if (aspectRatio < 1.5) {
-      setUseImageBackground(true);
-    }
-  };
-
   return (
     <a
       css={[itemContainerWrapper(disabled), styles.container]}
@@ -92,13 +82,11 @@ export const CardWidget: React.FC<CardWidgetProps> = ({
       {...rest}
     >
       <div ref={forwardedRef} aria-label={ariaLabel}>
-        <div css={styles.imageCover}>
-          {useImageBackground && <div className={'image-cover-background'} />}
+        <div ref={imageContainerEl} css={styles.imageCover}>
           <Image
             className={'image-cover-img'}
-            imageFit={ImageFit.centerContain}
+            imageFit={ImageFit.contain}
             src={appliedImageCover}
-            onLoad={onImageLoaded}
             onLoadingStateChange={onImageLoading}
           />
         </div>

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

@@ -145,8 +145,8 @@ const Home: React.FC<RouteComponentProps> = () => {
       <div css={home.page}>
         <h1 css={home.title}>{formatMessage(`Bot Framework Composer`)}</h1>
         <div css={home.leftPage} role="main">
-          <div css={home.leftContainer}>
-            <h2 css={home.recentBotsTitle}>{formatMessage(`Recent Bots`)}</h2>
+          <div css={home.recentBotsContainer}>
+            <h2 css={home.subtitle}>{formatMessage(`Recent Bots`)}</h2>
             <Toolbar css={home.toolbar} toolbarItems={toolbarItems} />
             {recentProjects.length > 0 ? (
               <RecentBotList
@@ -182,7 +182,7 @@ const Home: React.FC<RouteComponentProps> = () => {
               </div>
             )}
           </div>
-          <div css={[home.leftContainer, home.gap40]}>
+          <div css={home.resourcesContainer}>
             <h2 css={home.subtitle}>{formatMessage('Resources')}&nbsp;</h2>
             <div css={home.rowContainer}>
               {resources.map((item, index) => (
@@ -200,7 +200,7 @@ const Home: React.FC<RouteComponentProps> = () => {
               ))}
             </div>
           </div>
-          <div css={[home.leftContainer, home.gap40]}>
+          <div css={home.videosContainer}>
             <div css={home.rowContainer}>
               <Pivot aria-label="Videos and articles" linkSize={PivotLinkSize.large}>
                 {feed.tabs.map((tab, index) => (

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

@@ -43,6 +43,7 @@ export const title = css`
   line-height: 36px;
   font-weight: ${FontWeights.semibold};
   margin: 0;
+  width: 100%;
 `;
 
 export const introduction = css`
@@ -58,14 +59,18 @@ export const introduction = css`
 
 export const rowContainer = css`
   display: flex;
-  margin: 12px 0;
+  margin-top: 12px;
 `;
 
-export const leftContainer = css`
-  margin-bottom: 10px;
+export const recentBotsContainer = css`
+  margin-top: 12px;
+`;
+
+export const resourcesContainer = css`
+  margin-top: 40px;
 `;
 
-export const gap40 = css`
+export const videosContainer = css`
   margin-top: 40px;
 `;
 
@@ -121,11 +126,6 @@ export const bluetitle = css`
   margin: 16px 0 0 0;
 `;
 
-export const recentBotsTitle = css`
-  ${subtitle};
-  padding: 18px 0;
-`;
-
 export const toolbar = css`
   border-bottom: none;
   button: {
@@ -171,10 +171,10 @@ export const newsDescription = css`
 
 export const cardItem = {
   container: css`
-    margin: 12px 0 12px 12px;
+    font-size: ${fonts.medium.fontSize};
+    margin: 12px 0 0 12px;
     padding: 12px;
     min-width: 244px;
-    max-width: 450px;
     width: 17vw;
     @media (max-width: 1416px) {
       width: 20vw;
@@ -194,29 +194,26 @@ export const cardItem = {
   `,
   title: css`
     font-weight: ${FontWeights.semibold};
-    color: ${NeutralColors.gray160};
-    margin-bottom: 8px;
+    color: #464844;
+    margin-bottom: 4px;
     display: -webkit-box;
     -webkit-line-clamp: 1;
     -webkit-box-orient: vertical;
     overflow: hidden;
   `,
   imageCover: css`
-    width: 53px;
-    height: 48px;
+    width: 40px;
+    height: 36px;
     max-height: 175px;
     margin-bottom: 12px;
     position: relative;
     .image-cover-img {
-      display: flex;
-      position: absolute;
       width: 100%;
       height: 100%;
     }
   `,
   content: css`
     color: ${NeutralColors.gray140};
-    font-size: ${fonts.small.fontSize};
     display: -webkit-box;
     -webkit-line-clamp: 2;
     overflow: hidden;
@@ -234,19 +231,26 @@ export const mediaCardItem = {
   imageCover: css`
     ${cardItem.imageCover}
     width: 100%;
+    margin-bottom: 12px;
+    overflow: hidden;
+    display: flex;
     min-height: 95px;
     height: calc(17vw * 95 / 244);
     @media (max-width: 1416px) {
       height: calc(20vw * 95 / 244);
     }
-    margin-bottom: 12px;
-    overflow: hidden;
-    display: flex;
-    .image-cover-background {
-      background: #323130;
-      position: absolute;
+    @media (min-width: 2800px) {
+      background: ${NeutralColors.gray160};
+    }
+    .image-cover-img {
+      display: flex;
       width: 100%;
-      height: 100%;
+      height: auto;
+      img {
+        width: 100%;
+        max-width: 450px;
+        height: auto;
+      }
     }
   `,
 };
@@ -255,17 +259,17 @@ export const meidiaCardNoCoverItem = {
   ...mediaCardItem,
   imageCover: css`
     ${mediaCardItem.imageCover};
-
     position: relative;
     align-items: center;
     justify-content: center;
     background: ${NeutralColors.gray160};
-    .image-cover-background {
-      display: none;
-    }
     .image-cover-img {
       width: 53px;
       height: 48px;
+      img {
+        width: auto;
+        height: auto;
+      }
     }
   `,
 };
@@ -300,7 +304,7 @@ export const whatsNewsContainer = css`
   flex: 1;
   padding: 20px 25px 25px 25px;
   border-radius: 5px;
-  margin: 20px 0 55px 0;
+  margin: 20px 0 25px 0;
   background: #f6f6f6;
   @media (max-width: 1416px) {
     background: none;