SONAR-21235 Add shadow to main app bar and separator to project list sticky header (#10625)

2 files changed, 26 insertions, 8 deletions

diff --git a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
index e57a7822858..de49740d9ad 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/AllProjects.tsx
@@ -264,7 +264,7 @@ export class AllProjects extends React.PureComponent<Props, State> {
   );
 
   renderHeader = () => (
-    <div className="sw-w-full" style={{ height: '120px' }}>
+    <PageHeaderWrapper className="sw-w-full">
       <PageHeader
         currentUser={this.props.currentUser}
         onPerspectiveChange={this.handlePerspectiveChange}
@@ -275,7 +275,7 @@ export class AllProjects extends React.PureComponent<Props, State> {
         total={this.state.total}
         view={this.getView()}
       />
-    </div>
+    </PageHeaderWrapper>
   );
 
   renderMain = () => {
@@ -382,3 +382,8 @@ const SideBarStyle = styled.div`
   border-right: ${themeBorder('default', 'filterbarBorder')};
   background-color: ${themeColor('backgroundSecondary')};
 `;
+
+const PageHeaderWrapper = styled.div`
+  height: 7.5rem;
+  border-bottom: ${themeBorder('default', 'filterbarBorder')};
+`;
diff --git a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
index c2e647a2e33..35ba75d85cf 100644
--- a/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
+++ b/server/sonar-web/src/main/js/apps/projects/components/ProjectsList.tsx
@@ -18,6 +18,7 @@
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
 
+import classNames from 'classnames';
 import { Spinner } from 'design-system';
 import * as React from 'react';
 import { AutoSizer } from 'react-virtualized/dist/commonjs/AutoSizer';
@@ -80,7 +81,12 @@ export default class ProjectsList extends React.PureComponent<Props> {
     const project = projects[index];
 
     return (
-      <div key={key} role="row" style={{ ...style, height: PROJECT_CARD_HEIGHT }}>
+      <div
+        className={classNames({ 'sw-mt-4': index === 0 })}
+        key={key}
+        role="row"
+        style={{ ...style, height: PROJECT_CARD_HEIGHT }}
+      >
         <div className="sw-h-full" role="gridcell">
           <ProjectCard
             currentUser={this.props.currentUser}
@@ -105,11 +111,18 @@ export default class ProjectsList extends React.PureComponent<Props> {
             height={height}
             overscanRowCount={2}
             rowCount={this.props.projects.length + 1}
-            rowHeight={({ index }) =>
-              index === this.props.projects.length
-                ? PROJECT_LIST_FOOTER_HEIGHT
-                : PROJECT_CARD_HEIGHT + PROJECT_CARD_MARGIN
-            }
+            rowHeight={({ index }) => {
+              if (index === 0) {
+                // first card, double top and bottom margin
+                return PROJECT_CARD_HEIGHT + PROJECT_CARD_MARGIN * 2;
+              }
+              if (index === this.props.projects.length) {
+                // Footer card, no margin
+                return PROJECT_LIST_FOOTER_HEIGHT;
+              }
+              // all other cards, only bottom margin
+              return PROJECT_CARD_HEIGHT + PROJECT_CARD_MARGIN;
+            }}
             rowRenderer={this.renderRow}
             style={{ outline: 'none' }}
             tabIndex={-1}