Clean up styling

datahub-project · Feb 24, 2021 · 806814f · 806814f
1 parent 677bbc5
commit 806814f
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 30 deletions.
diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
@@ -3,6 +3,10 @@ import { Input, AutoComplete } from 'antd';
 
 const { Search } = Input;
 
+const styles = {
+    autoComplete: { width: 650 },
+};
+
 interface Props {
     initialQuery: string;
     placeholderText: string;
@@ -23,7 +27,7 @@ export const SearchBar = ({ initialQuery, placeholderText, suggestions, onSearch
     return (
         <div style={style}>
             <AutoComplete
-                style={{ width: 650 }}
+                style={styles.autoComplete}
                 options={suggestions.map((result: string) => ({ value: result }))}
                 onSelect={(value: string) => onSearch(value)}
                 onSearch={(value: string) => onQueryChange(value)}

diff --git a/datahub-web-react/src/app/search/SearchHeader.tsx b/datahub-web-react/src/app/search/SearchHeader.tsx
@@ -1,13 +1,31 @@
 import * as React from 'react';
 import 'antd/dist/antd.css';
-import { Image, Layout, Typography } from 'antd';
+import { Image, Layout, Space, Typography } from 'antd';
 import { Link } from 'react-router-dom';
 import { SearchBar } from './SearchBar';
 import { ManageAccount } from '../shared/ManageAccount';
 import { GlobalCfg } from '../../conf';
 
 const { Header } = Layout;
 
+const styles = {
+    header: {
+        position: 'fixed',
+        zIndex: 1,
+        width: '100%',
+        backgroundColor: 'rgb(51 62 76)',
+        height: '80px',
+        lineHeight: '20px',
+        color: '#fff',
+        padding: '0px 40px',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    logoImage: { width: '36px', height: '32px' },
+    title: { color: 'white', paddingLeft: '12px', margin: '0' },
+};
+
 type Props = {
     initialQuery: string;
     placeholderText: string;
@@ -35,32 +53,15 @@ export const SearchHeader = ({
     authenticatedUserPictureLink,
 }: Props) => {
     return (
-        <Header
-            style={{
-                position: 'fixed',
-                zIndex: 1,
-                width: '100%',
-                backgroundColor: 'rgb(51 62 76)',
-                height: '80px',
-                lineHeight: '20px',
-                color: '#fff',
-                padding: '0px 40px',
-                display: 'flex',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}
-        >
-            <Link
-                style={{
-                    display: 'flex',
-                    alignItems: 'center',
-                }}
-                to="/"
-            >
-                <Image style={{ width: '34px', height: '30px' }} src={GlobalCfg.LOGO_IMAGE} preview={false} />
-                <Typography.Title level={4} style={{ color: 'white', paddingLeft: '12px', margin: '0' }}>
-                    DataHub
-                </Typography.Title>
+        <Header style={styles.header as any}>
+            <Link to="/">
+                <Space size={4}>
+                    {' '}
+                    <Image style={styles.logoImage} src={GlobalCfg.LOGO_IMAGE} preview={false} />
+                    <Typography.Title level={4} style={styles.title}>
+                        DataHub
+                    </Typography.Title>
+                </Space>
             </Link>
             <SearchBar
                 initialQuery={initialQuery}

diff --git a/datahub-web-react/src/app/search/SearchablePage.tsx b/datahub-web-react/src/app/search/SearchablePage.tsx
@@ -9,6 +9,11 @@ import { useGetAutoCompleteResultsLazyQuery } from '../../graphql/search.generat
 import { navigateToSearchUrl } from './utils/navigateToSearchUrl';
 import { useGetAuthenticatedUser } from '../useGetAuthenticatedUser';
 
+const styles = {
+    pageContainer: { backgroundColor: '#FFFFFF' },
+    children: { marginTop: 80 },
+};
+
 interface Props extends React.PropsWithChildren<any> {
     initialQuery?: string;
     onSearch?: (query: string) => void;
@@ -51,7 +56,7 @@ export const SearchablePage = ({ initialQuery, onSearch, onAutoComplete, childre
     };
 
     return (
-        <Layout style={{ backgroundColor: '#FFFFFF' }}>
+        <Layout style={styles.pageContainer}>
             <SearchHeader
                 initialQuery={initialQuery as string}
                 placeholderText={SearchCfg.SEARCH_BAR_PLACEHOLDER_TEXT}
@@ -63,7 +68,7 @@ export const SearchablePage = ({ initialQuery, onSearch, onAutoComplete, childre
                 authenticatedUserUrn={userData?.corpUser?.urn || ''}
                 authenticatedUserPictureLink={userData?.corpUser?.editableInfo?.pictureLink}
             />
-            <div style={{ marginTop: 80 }}>{children}</div>
+            <div style={styles.children}>{children}</div>
         </Layout>
     );
 };