Merge pull request #35 from relferreira/dev

Fixing Port Forward page
relferreira · Dec 9, 2019 · 343874e · 343874e
2 parents bfaeeb6 + 780ef96
commit 343874e
Show file tree

Hide file tree

Showing 8 changed files with 40 additions and 10 deletions.
diff --git a/ui/components/Button.js b/ui/components/Button.js
@@ -14,11 +14,14 @@ function getBackground(type) {
 }
 
 const Button = styled.button`
-  padding: 5px 10px;
+  min-width: 64px;
+  height: 36px;
+  padding: 0px 10px;
   background: transparent;
   color: ${props => getBackground(props.type)};
   border: 1px solid ${props => getBackground(props.type)};
-  border-radius: 3px;
+  border-radius: 6px;
+  font-size: 12px;
   cursor: pointer;
 `;
 

diff --git a/ui/components/Input.js b/ui/components/Input.js
@@ -1,17 +1,23 @@
 import React from 'react';
 import styled from '@emotion/styled';
+import { controllerBorderHighlight } from '../util/colors';
 
 const Input = styled.input`
-  padding: 5px 10px;
-  border: 1px solid ${props => props.theme.controllerBorder};
+  padding: 8px 12px;
+  border: 2px solid ${props => props.theme.controllerBorder};
   background: ${props => props.theme.controllerBackground};
   color: ${props => props.theme.controllerColor};
   border-radius: 5px;
   font-size: 12px;
+  outline: none;
 
   &:disabled {
     opacity: 0.3;
   }
+
+  &:focus {
+    border-color: ${controllerBorderHighlight};
+  }
 `;
 
 export default Input;
diff --git a/ui/components/PageHeader.js b/ui/components/PageHeader.js
@@ -9,9 +9,11 @@ import Input from './Input';
 const PageHeaderContainer = styled.div`
   display: flex;
   align-items: center;
+  margin-bottom: 16px;
 
   h1 {
     flex: 1;
+    margin-bottom: 0px;
   }
 
   button {

diff --git a/ui/containers/App.js b/ui/containers/App.js
@@ -22,7 +22,9 @@ import {
   cardBackgroundDark,
   backgroundLight,
   tableBorderLight,
-  tableBorderDark
+  tableBorderDark,
+  controllerBorderLight,
+  controllerBorderDark
 } from '../util/colors';
 import ErrorBoundary from '../components/ErrorBoundary';
 import RouterLoading from '../components/RouterLoading';
@@ -64,7 +66,7 @@ const themes = {
     tableBorder: tableBorderLight,
     controllerBackground: backgroundLight,
     controllerColor: fontColor,
-    controllerBorder: fontColor
+    controllerBorder: controllerBorderLight
   },
 
   dark: {
@@ -78,7 +80,7 @@ const themes = {
     tableBorder: tableBorderDark,
     controllerBackground: darkLight,
     controllerColor: fontColorWhite,
-    controllerBorder: tableBorderLight
+    controllerBorder: controllerBorderDark
   }
 };
 
@@ -118,7 +120,7 @@ function App() {
             padding: 0 0;
             margin: 0 0;
             box-sizing: border-box;
-            font-family: 'Roboto Mono', monospace;
+            font-family: 'Roboto', sans-serif;
           }
 
           a {

diff --git a/ui/containers/Header.js b/ui/containers/Header.js
@@ -126,6 +126,7 @@ const Backdrop = styled.div`
 `;
 
 const HeaderIcon = styled(Icon)`
+  margin-left: 16px;
   fill: ${props => props.theme.headerIcon};
 `;
 
@@ -202,6 +203,8 @@ export default function Header({ location }) {
     }
   };
 
+  const handleCommandIconClick = () => handleShortcut('command+shift+k');
+
   const items = useMemo(() => formatSearchResponse(result, namespace, type), [
     result && result.id,
     namespace,
@@ -304,6 +307,17 @@ export default function Header({ location }) {
             )}
           </Downshift>
         </AutoCompleteContainer>
+        <HeaderIcon onClick={handleCommandIconClick}>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+          >
+            <path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z" />
+            <path fill="none" d="M0 0h24v24H0V0z" />
+          </svg>
+        </HeaderIcon>
         <Link to={`${getSelectedNamespace(location)}/new`}>
           <HeaderIcon>
             <svg

diff --git a/ui/containers/PortForward.js b/ui/containers/PortForward.js
@@ -10,7 +10,7 @@ export default function PortForward() {
 
   useEffect(() => {
     let storedPids = getStoredPids();
-    setPids(Object.values(storedPids));
+    if (storedPids) setPids(Object.values(storedPids));
   }, []);
 
   return (

diff --git a/ui/index.html b/ui/index.html
@@ -23,7 +23,7 @@
       href="./assets/favicon-16x16.png"
     />
     <link
-      href="https://fonts.googleapis.com/css?family=Roboto+Mono:400"
+      href="https://fonts.googleapis.com/css?family=Roboto:400&display=swap"
       rel="stylesheet"
     />
   </head>

diff --git a/ui/util/colors.js b/ui/util/colors.js
@@ -15,3 +15,6 @@ export const cardBackgroundLight = '#fafafa';
 export const cardBackgroundDark = darkLight;
 export const tableBorderLight = 'rgba(0, 0, 0, 0.12)';
 export const tableBorderDark = 'rgba(206, 205, 205, 0.12)';
+export const controllerBorderLight = 'rgba(0, 0, 0, 0.12)';
+export const controllerBorderDark = 'rgba(206, 205, 205, 0.12)';
+export const controllerBorderHighlight = primaryDark;