Layout adjustments

relferreira · Dec 9, 2019 · ebe91e9 · ebe91e9
1 parent 595f009
commit ebe91e9
Show file tree

Hide file tree

Showing 8 changed files with 18 additions and 10 deletions.
diff --git a/ui/components/Button.js b/ui/components/Button.js
@@ -15,11 +15,10 @@ function getBackground(type) {
 
 const Button = styled.button`
   padding: 5px 10px;
-  background: ${props => getBackground(props.type)};
-  color: ${fontColorWhite};
-  border: none;
+  background: transparent;
+  color: ${props => getBackground(props.type)};
+  border: 1px solid ${props => getBackground(props.type)};
   border-radius: 3px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
   cursor: pointer;
 `;
 

diff --git a/ui/components/Input.js b/ui/components/Input.js
@@ -8,6 +8,10 @@ const Input = styled.input`
   color: ${props => props.theme.controllerColor};
   border-radius: 5px;
   font-size: 12px;
+
+  &:disabled {
+    opacity: 0.3;
+  }
 `;
 
 export default Input;
diff --git a/ui/components/Select.js b/ui/components/Select.js
@@ -10,6 +10,10 @@ const Select = styled.select`
   background: ${props => props.theme.controllerBackground};
   color: ${props => props.theme.containerFont};
   font-size: 12px;
+
+  &:disabled {
+    opacity: 0.3;
+  }
 `;
 
 export default Select;
diff --git a/ui/components/Sidebar.js b/ui/components/Sidebar.js
@@ -98,7 +98,6 @@ const Sidebar = ({ namespaces, links, onThemeChange }) => (
             <p>Resources</p>
             <hr />
           </SidebarTitle>
-          {/* <NavLink to="/">Home</NavLink> */}
           <NavLink to={`/${namespace}/nodes`}>Nodes</NavLink>
           <NavLink to={`/${namespace}/services`}>Services</NavLink>
           <NavLink to={`/${namespace}/deployments`}>Deployments</NavLink>
@@ -108,8 +107,7 @@ const Sidebar = ({ namespaces, links, onThemeChange }) => (
           <NavLink to={`/${namespace}/hpa`}>Hpa</NavLink>
           <NavLink to={`/${namespace}/pvc`}>Pvc</NavLink>
           <NavLink to={`/${namespace}/pods`}>Pods</NavLink>
-          <NavLink to="/port-forward">Port Forward</NavLink>
-          {/* <NavLink to="/nodes">Nodes</NavLink> */}
+          <NavLink to={`/${namespace}/port-forward`}>Port Forward</NavLink>
           <ThemeLink onClick={onThemeChange}>Change Theme</ThemeLink>
           <HistoryContainer>
             <SidebarTitle>

diff --git a/ui/containers/App.js b/ui/containers/App.js
@@ -173,7 +173,7 @@ function App() {
                 path="/:namespace/:type/:name/describe"
                 action="describe"
               />
-              <PortForward path="/port-forward" />
+              <PortForward path="/:namespace/port-forward" />
             </CustomRouter>
           </ErrorBoundary>
         </Suspense>

diff --git a/ui/containers/Editor.js b/ui/containers/Editor.js
@@ -10,7 +10,8 @@ const yaml = require('js-yaml');
 
 const EditorContainer = styled.div`
   position: relative;
-  height: 100%;
+  height: calc(100% + 32px);
+  margin: -16px;
 `;
 
 function Editor(props) {

diff --git a/ui/containers/Logs.js b/ui/containers/Logs.js
@@ -10,6 +10,8 @@ import { navigate } from '@reach/router';
 const LogsContainer = styled.div`
   position: relative;
   height: 100%;
+  height: calc(100% + 32px);
+  margin: -16px;
   color: white;
   background: ${props => props.theme.background};
 `;

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"
+      href="https://fonts.googleapis.com/css?family=Roboto+Mono:400"
       rel="stylesheet"
     />
   </head>