feat(react): Adding shadow and deeper linear gradient (#2255)

Co-authored-by: John Joyce <john@acryl.io>

datahub-web-react/src/app/browse/BrowseResultCard.tsx

@@ -2,6 +2,22 @@ import React from 'react';
 import { Card, Row, Space, Typography } from 'antd';
 import { Link } from 'react-router-dom';
 import { ArrowRightOutlined, FolderOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
+
+const styles = {
+    row: { padding: 8 },
+    title: { margin: 0 },
+};
+
+const ResultCard = styled(Card)`
+    && {
+        border-color: ${(props) => props.theme.styles['border-color-base']};
+        box-shadow: ${(props) => props.theme.styles['box-shadow']};
+    }
+    &&:hover {
+        box-shadow: ${(props) => props.theme.styles['box-shadow-hover']};
+    }
+`;
 
 export interface BrowseResultProps {
     url: string;
@@ -13,11 +29,11 @@ export interface BrowseResultProps {
 export default function BrowseResultCard({ url, count, name, type }: BrowseResultProps) {
     return (
         <Link to={url}>
-            <Card hoverable>
+            <ResultCard hoverable>
-                <Row style={{ padding: 8 }} justify="space-between">
+                <Row style={styles.row} justify="space-between">
                     <Space size="middle" align="center">
                         <FolderOutlined width={28} />
-                        <Typography.Title style={{ margin: 0 }} level={5}>
+                        <Typography.Title style={styles.title} level={5}>
                             {name}
                         </Typography.Title>
                     </Space>
@@ -30,7 +46,7 @@ export default function BrowseResultCard({ url, count, name, type }: BrowseResul
                         <ArrowRightOutlined />
                     </Space>
                 </Row>
-            </Card>
+            </ResultCard>
         </Link>
     );
 }

datahub-web-react/src/app/browse/BrowseResults.tsx

@@ -1,13 +1,20 @@
 import React from 'react';
-import { Col, Divider, Pagination, Row } from 'antd';
+import styled from 'styled-components';
+import { Col, Divider, List, Pagination, Row } from 'antd';
 import { Content } from 'antd/lib/layout/layout';
 import { BrowseResultGroup, EntityType, Entity } from '../../types.generated';
 import BrowseResultCard from './BrowseResultCard';
 import { useEntityRegistry } from '../useEntityRegistry';
 
-const styles = {
+const EntityList = styled(List)`
-    browseCard: { marginTop: 20 },
+    && {
-};
+        width: 100%;
+        margin-top: 12px;
+        padding: 16px 32px;
+        border-color: ${(props) => props.theme.styles['border-color-base']};
+        box-shadow: ${(props) => props.theme.styles['box-shadow']};
+    }
+`;
 
 interface Props {
     type: EntityType;
@@ -51,12 +58,19 @@ export const BrowseResults = ({
                             />
                         </Col>
                     ))}
-                    {entities.map((entity) => (
+                    {entities.length > 0 && (
-                        <Col style={styles.browseCard} span={24}>
+                        <EntityList
-                            {entityRegistry.renderBrowse(type, entity)}
+                            dataSource={entities}
-                            <Divider />
+                            split={false}
-                        </Col>
+                            renderItem={(item, index) => (
-                    ))}
+                                <>
+                                    <List.Item>{entityRegistry.renderBrowse(type, item)}</List.Item>
+                                    {index < entities.length - 1 && <Divider />}
+                                </>
+                            )}
+                            bordered
+                        />
+                    )}
                     <Col span={24}>
                         <Pagination
                             style={{ width: '100%', display: 'flex', justifyContent: 'center', paddingTop: 16 }}

datahub-web-react/src/app/home/HomePageHeader.tsx

@@ -13,6 +13,7 @@ const Background = styled(Space)`
     width: 100%;
     background-image: linear-gradient(
         ${(props) => props.theme.styles['homepage-background-upper-fade']},
+        75%,
         ${(props) => props.theme.styles['homepage-background-lower-fade']}
     );
 `;

datahub-web-react/src/app/search/AllEntitiesSearchResults.tsx

@@ -28,7 +28,13 @@ export const AllEntitiesSearchResults = ({ query }: Props) => {
         );
     });
 
-    const noResultsView = <List style={{ margin: '28px 160px' }} bordered dataSource={[]} />;
+    const noResultsView = (
+        <List
+            style={{ margin: '28px 160px', boxShadow: '0px 0px 30px 0px rgb(234 234 234)' }}
+            bordered
+            dataSource={[]}
+        />
+    );
 
     return (
         <>

datahub-web-react/src/app/search/BrowseEntityCard.tsx

@@ -1,32 +1,53 @@
 import React from 'react';
 import { Card, Typography, Row } from 'antd';
 import { Link } from 'react-router-dom';
+import styled from 'styled-components';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { PageRoutes } from '../../conf/Global';
 import { IconStyleType } from '../entity/Entity';
 import { EntityType } from '../../types.generated';
 
 const styles = {
-    card: { width: 360 },
+    row: { width: 360 },
     title: { margin: 0 },
     iconFlag: { right: '32px', top: '-28px' },
     icon: { padding: '16px 24px' },
 };
 
+const EntityCard = styled(Card)`
+    && {
+        margin-top: 16px;
+        border-color: ${(props) => props.theme.styles['border-color-base']};
+        box-shadow: ${(props) => props.theme.styles['box-shadow']};
+    }
+    &&:hover {
+        box-shadow: ${(props) => props.theme.styles['box-shadow-hover']};
+    }
+`;
+
+const FlagCard = styled(Card)`
+    &&& {
+        right: 32px;
+        top: -28px;
+        position: absolute;
+        border-color: ${(props) => props.theme.styles['border-color-base']};
+    }
+`;
+
 export const BrowseEntityCard = ({ entityType }: { entityType: EntityType }) => {
     const entityRegistry = useEntityRegistry();
     return (
         <Link to={`${PageRoutes.BROWSE}/${entityRegistry.getPathName(entityType)}`}>
-            <Card hoverable>
+            <EntityCard hoverable>
-                <Row justify="space-between" align="middle" style={styles.card}>
+                <Row justify="space-between" align="middle" style={styles.row}>
                     <Typography.Title style={styles.title} level={4}>
                         {entityRegistry.getCollectionName(entityType)}
                     </Typography.Title>
-                    <Card bodyStyle={styles.icon} style={{ ...styles.iconFlag, position: 'absolute' }}>
+                    <FlagCard bodyStyle={styles.icon}>
                         {entityRegistry.getIcon(entityType, 24, IconStyleType.HIGHLIGHT)}
-                    </Card>
+                    </FlagCard>
                 </Row>
-            </Card>
+            </EntityCard>
         </Link>
     );
 };

datahub-web-react/src/app/search/EntityGroupSearchResults.tsx

@@ -2,6 +2,7 @@ import { ArrowRightOutlined } from '@ant-design/icons';
 import { Button, Card, Divider, List, Space, Typography } from 'antd';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
 import { EntityType } from '../../types.generated';
 import { IconStyleType } from '../entity/Entity';
 import { useEntityRegistry } from '../useEntityRegistry';
@@ -11,11 +12,20 @@ const styles = {
     header: { marginBottom: 20 },
     resultHeaderCardBody: { padding: '16px 24px' },
     resultHeaderCard: { right: '52px', top: '-40px', position: 'absolute' },
-    resultList: { width: '100%', borderColor: '#f0f0f0', marginTop: '8px', padding: '16px 48px' },
     seeAllButton: { fontSize: 18 },
     resultsContainer: { width: '100%', padding: '40px 132px' },
 };
 
+const ResultList = styled(List)`
+    &&& {
+        width: 100%;
+        border-color: ${(props) => props.theme.styles['border-color-base']};
+        margin-top: 8px;
+        padding: 16px 48px;
+        box-shadow: ${(props) => props.theme.styles['box-shadow']};
+    }
+`;
+
 interface Props {
     type: EntityType;
     query: string;
@@ -28,7 +38,7 @@ export const EntityGroupSearchResults = ({ type, query, entities }: Props) => {
 
     return (
         <Space direction="vertical" style={styles.resultsContainer}>
-            <List
+            <ResultList
                 header={
                     <span style={styles.header}>
                         <Typography.Title level={2}>{entityRegistry.getCollectionName(type)}</Typography.Title>
@@ -59,7 +69,6 @@ export const EntityGroupSearchResults = ({ type, query, entities }: Props) => {
                         </Button>
                     )
                 }
-                style={styles.resultList}
                 dataSource={entities}
                 split={false}
                 renderItem={(item, index) => (

datahub-web-react/src/app/search/EntitySearchResults.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { FilterOutlined } from '@ant-design/icons';
+import styled from 'styled-components';
 import { Alert, Button, Card, Divider, List, Modal, Pagination, Row, Typography } from 'antd';
 import { SearchCfg } from '../../conf';
 import { useGetSearchResultsQuery } from '../../graphql/search.generated';
@@ -15,11 +16,20 @@ const styles = {
     resultSummary: { color: 'gray', marginTop: '36px' },
     resultHeaderCardBody: { padding: '16px 24px' },
     resultHeaderCard: { right: '52px', top: '-40px', position: 'absolute' },
-    resultList: { width: '100%', borderColor: '#f0f0f0', marginTop: '12px', padding: '16px 32px' },
     paginationRow: { padding: 40 },
     resultsContainer: { width: '100%', padding: '20px 132px' },
 };
 
+const ResultList = styled(List)`
+    &&& {
+        width: 100%;
+        border-color: ${(props) => props.theme.styles['border-color-base']};
+        margin-top: 12px;
+        padding: 16px 32px;
+        box-shadow: ${(props) => props.theme.styles['box-shadow']};
+    }
+`;
+
 interface Props {
     type: EntityType;
     query: string;
@@ -114,13 +124,12 @@ export const EntitySearchResults = ({ type, query, page, filters, onChangeFilter
                 </b>{' '}
                 of <b>{totalResults}</b> results
             </Typography.Paragraph>
-            <List
+            <ResultList
                 header={
                     <Card bodyStyle={styles.resultHeaderCardBody} style={styles.resultHeaderCard as any}>
                         {entityRegistry.getIcon(type, 36, IconStyleType.ACCENT)}
                     </Card>
                 }
-                style={styles.resultList}
                 dataSource={results}
                 split={false}
                 renderItem={(item, index) => (

datahub-web-react/src/conf/theme/theme_light.config.json

@@ -6,7 +6,7 @@
         "layout-body-background": "white",
         "component-background": "white",
         "body-background": "white",
-        "border-color-base": "#dbdbdb",
+        "border-color-base": "#ececec",
         "text-color": "fade(black, 85%)",
         "text-color-secondary": "fade(black, 45%)",
         "heading-color": "fade(black, 85%)",
@@ -15,7 +15,9 @@
         "disabled-color": "fade(black, 25%)",
         "steps-nav-arrow-color": "fade(black, 25%)",
         "homepage-background-upper-fade": "#132935",
-        "homepage-background-lower-fade": "#FFFFFF"
+        "homepage-background-lower-fade": "#FFFFFF",
+        "box-shadow": "0px 0px 30px 0px rgb(239 239 239)",
+        "box-shadow-hover": "0px 1px 0px 0.5px rgb(239 239 239)"
     },
     "assets": {
         "logoUrl": "/assets/logo.png"

datahub-web-react/src/conf/theme/types.ts

@@ -16,6 +16,8 @@ export type Theme = {
         'steps-nav-arrow-color': string;
         'homepage-background-upper-fade': string;
         'homepage-background-lower-fade': string;
+        'box-shadow': string;
+        'box-shadow-hover': string;
     };
     assets: {
         logoUrl: string;

docker/quickstart-ember.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-# Quickstarts a Ember-serving variant of DataHub by pulling all images from dockerhub and then running the containers locally.
+# Quickstarts an Ember-serving variant of DataHub by pulling all images from dockerhub and then running the containers locally.
 DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" >/dev/null 2>&1 && pwd )"
 cd $DIR && docker-compose -f docker-compose.yml -f docker-compose.override.yml -f docker-compose.ember.yml pull && docker-compose -p datahub \
     -f docker-compose.yml \