improvement(dashboard): fix ui issues

garden-io · May 3, 2019 · 488369e · 488369e
1 parent a925541
commit 488369e
Show file tree

Hide file tree

Showing 10 changed files with 154 additions and 104 deletions.
diff --git a/dashboard/src/app.tsx b/dashboard/src/app.tsx
@@ -36,10 +36,9 @@ import { UiStateProvider, UiStateContext } from "./context/ui"
 
 // Style and align properly
 const Logo = styled.img`
-  width: 10rem;
-  height: auto;
-  max-width: 10rem;
-  margin-top: .7rem;
+  width: 144px;
+  height: 60px;
+  max-width: 9rem;
 `
 
 const SidebarWrapper = styled.div`
@@ -49,15 +48,16 @@ const SidebarWrapper = styled.div`
 `
 const SidebarContainer = styled.div`
   display: ${props => (props.visible ? `block` : "none")};
-  width: ${props => (props.visible ? `12rem` : "0")};
+  width: ${props => (props.visible ? `10.5rem` : "0")};
 `
 
 const SidebarToggleButton = styled.div`
   position: absolute;
   right: -2.2rem;
-  top: 3rem;
+  top: 2rem;
   width: 1.5rem;
   cursor: pointer;
+  font-size: 1.25rem;
 `
 
 const AppContainer = () => {
@@ -92,11 +92,7 @@ const App = () => {
     >
       <SidebarWrapper>
         <SidebarToggleButton onClick={toggleSidebar}>
-          {isSidebarOpen ? (
-            <CloseSidebarIcon />
-          ) : (
-              <OpenSidebarIcon />
-            )}
+          {isSidebarOpen ? <CloseSidebarIcon /> : <OpenSidebarIcon />}
         </SidebarToggleButton>
         <SidebarContainer visible={isSidebarOpen}>
           <div className={"ml-1"}>
@@ -120,10 +116,8 @@ const App = () => {
             css`
               background-color: ${colors.grayLight}
               flex-grow: 1;
+              padding: 1rem 1rem 1rem 3rem;
             `,
-            "pl-3",
-            "pt-2",
-            "pr-1",
           )}
         >
           <Route exact path="/" component={Overview} />

diff --git a/dashboard/src/assets/close-pane.svg b/dashboard/src/assets/close-pane.svg
diff --git a/dashboard/src/assets/open-pane.svg b/dashboard/src/assets/open-pane.svg
diff --git a/dashboard/src/components/checkbox.tsx b/dashboard/src/components/checkbox.tsx
@@ -14,11 +14,13 @@ import { colors } from "../styles/variables"
 const Label = styled.label`
   display: block;
   position: relative;
-  padding-left: 35px;
+  padding-left: 1.5rem;
   cursor: pointer;
-  font-size: 1.1rem;
+  font-size: 1rem;
   user-select: none;
-  margin-bottom: 1rem;
+  margin-bottom: 0.75rem;
+  height: 1rem;
+  line-height: 1rem;
 `
 
 const Input = styled.input`
@@ -36,16 +38,16 @@ const Checkmark = styled.span`
   position: absolute;
   top: 0rem;
   left: 0rem;
-  height: 21px;
-  width: 21px;
+  height: 1rem;
+  width: 1rem;
   border: 1px solid ${colors.gardenGrayLight};
   :after {
     content: "";
     position: absolute;
     display: none;
-    left: 7px;
-    top: 3px;
-    width: 7px;
+    left: 5px;
+    top: 1px;
+    width: 6px;
     height: 12px;
     border: solid white;
     border-width: 0 3px 3px 0;
@@ -67,12 +69,22 @@ interface Props {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void
 }
 
-const CheckBox: React.FC<Props> = ({ name, onChange, checked = false, children }) => {
+const CheckBox: React.FC<Props> = ({
+  name,
+  onChange,
+  checked = false,
+  children,
+}) => {
   const Mark = checked ? CheckmarkChecked : Checkmark
   return (
     <Label>
       {children}
-      <Input type={"checkbox"} name={name} checked={checked} onChange={onChange} />
+      <Input
+        type={"checkbox"}
+        name={name}
+        checked={checked}
+        onChange={onChange}
+      />
       <Mark />
     </Label>
   )

diff --git a/dashboard/src/components/graph/graph.scss b/dashboard/src/components/graph/graph.scss
@@ -27,6 +27,11 @@
     fill: #fff;
     stroke: #02f2b4;
     stroke-width: 2.5px;
+
+  }
+
+  .node:hover rect, .node.selected rect {
+        stroke-width: 4.5px;
   }
 
   .edgePath path {
@@ -45,6 +50,9 @@
     background-position: left;
     background-position-x: -0.5rem;
     background-size: 4rem;
+    border-radius: 5px;
+    border:none;
+
     &--run,
     &--test {
       cursor: pointer;