diff --git a/ui/components/Header.js b/ui/components/Header.js index 52f8b6f..34b6903 100644 --- a/ui/components/Header.js +++ b/ui/components/Header.js @@ -11,6 +11,14 @@ const Header = styled.div` padding: 16px; background: ${props => props.theme.header}; color: white; + box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.1rem 0.8rem rgba(0, 0, 0, 0.2); + overflow: auto; +`; + +const LogoContainer = styled.div` + display: flex; + align-items: center; + width: 204px; `; const Image = styled.img` @@ -22,9 +30,30 @@ const Title = styled.h1` font-size: 24px; `; +const InputContainer = styled.div` + display: flex; + justify-content: flex-start; + flex: 1; + + input { + width: 500px; + height: 40px; + padding: 16px; + border: none; + border-radius: 3px; + background: ${props => props.theme.background}; + color: #fff; + } +`; + export default props => (
- - KubeDev + + + KubeDev + + {/* + + */}
); diff --git a/ui/containers/App.js b/ui/containers/App.js index a6ae41b..23cd043 100644 --- a/ui/containers/App.js +++ b/ui/containers/App.js @@ -45,8 +45,8 @@ const lightTheme = { const darkTheme = { name: 'dark', - background: darkLight, - header: darkDark, + background: darkDark, + header: darkLight, sidebarBackground: darkDark, sidebarFontColor: fontColorWhite, containerFont: fontColorWhite, diff --git a/ui/util/colors.js b/ui/util/colors.js index cae81da..0824003 100644 --- a/ui/util/colors.js +++ b/ui/util/colors.js @@ -8,10 +8,10 @@ export const successColor = '#4caf50'; export const errorColor = '#f44336'; export const warningColor = '#ffc107'; export const neutralColor = '#595959'; -export const darkLight = '#424242'; +export const darkLight = '#2b2c2f'; export const darkDark = '#212121'; export const backgroundLight = '#ffffff'; export const cardBackgroundLight = '#fafafa'; -export const cardBackgroundDark = darkDark; +export const cardBackgroundDark = darkLight; export const tableBorderLight = 'rgba(0, 0, 0, 0.12)'; export const tableBorderDark = 'rgba(206, 205, 205, 0.12)';