Layout changes

relferreira · Feb 18, 2019 · bab5455 · bab5455
1 parent 44719aa
commit bab5455
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 6 deletions.
diff --git 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 => (
   <Header>
-    <Image src={logo} />
-    <Title>KubeDev</Title>
+    <LogoContainer>
+      <Image src={logo} />
+      <Title>KubeDev</Title>
+    </LogoContainer>
+    {/* <InputContainer>
+      <input type="text" placeholder="Search" />
+    </InputContainer> */}
   </Header>
 );
diff --git 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
@@ -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)';