diff --git a/datahub-web-react/src/app/search/SearchBar.tsx b/datahub-web-react/src/app/search/SearchBar.tsx
index 76c514da9499fb..7c80062c74d11a 100644
--- 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 (
({ 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
index db9839790c2b27..79aa4c4e7b48ff 100644
--- a/datahub-web-react/src/app/search/SearchHeader.tsx
+++ b/datahub-web-react/src/app/search/SearchHeader.tsx
@@ -1,6 +1,6 @@
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';
@@ -8,6 +8,24 @@ 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 (
-
-
-
-
- DataHub
-
+
+
+
+ {' '}
+
+
+ DataHub
+
+
{
initialQuery?: string;
onSearch?: (query: string) => void;
@@ -51,7 +56,7 @@ export const SearchablePage = ({ initialQuery, onSearch, onAutoComplete, childre
};
return (
-
+
- {children}
+ {children}
);
};