Merge pull request #783 from garden-io/dashboard-overview-restyle-v3

feat(dashboard): overall improvements
garden-io · May 20, 2019 · ae43627 · ae43627
2 parents 217242d + 253316f
commit ae43627
Show file tree

Hide file tree

Showing 32 changed files with 1,006 additions and 357 deletions.
diff --git a/dashboard/package-lock.json b/dashboard/package-lock.json
diff --git a/dashboard/package.json b/dashboard/package.json
@@ -31,6 +31,7 @@
     "flexboxgrid-helpers": "^1.1.3",
     "http-proxy-middleware": "^0.19.1",
     "lodash": "^4.17.11",
+    "moment": "^2.24.0",
     "node-sass": "^4.10.0",
     "normalize-url": "^4.3.0",
     "react": "^16.8.6",

diff --git a/dashboard/src/api/api.ts b/dashboard/src/api/api.ts
@@ -35,7 +35,7 @@ export async function fetchGraph() {
 }
 
 export async function fetchStatus() {
-  return apiPost<EnvironmentStatus>("get.status")
+  return apiPost<EnvironmentStatus>("get.status", { output: "json" })
 }
 
 export async function fetchLogs(services: FetchLogsParam) {

diff --git a/dashboard/src/app.tsx b/dashboard/src/app.tsx
@@ -41,10 +41,10 @@ const Logo = styled.img`
 `
 
 const SidebarWrapper = styled.div`
-  border-right: 1px solid ${colors.border};
   height: 100vh;
   position: relative;
   background: ${colors.gardenWhite};
+  box-shadow: 6px 0px 18px rgba(0, 0, 0, 0.06);
 `
 
 type SidebarContainerProps = {
@@ -61,7 +61,7 @@ const SidebarToggleButton = styled.div`
   top: 2rem;
   width: 1.5rem;
   cursor: pointer;
-  font-size: 1.25rem;
+  font-size: 1.125rem;
 `
 
 const AppContainer = () => {
@@ -112,14 +112,14 @@ const App = () => {
           display: flex;
           flex-direction: column;
           flex-grow: 1;
-          overflow-y: auto;
+          overflow-y: hidden;
         `}
       >
         <div
           className={css`
             background-color: ${colors.gardenGrayLighter};
             flex-grow: 1;
-            padding: 1rem 1rem 1rem 3rem;
+            padding: 1rem 1rem 1rem 2rem;
           `}
         >
           <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/components/ActionIcon.tsx b/dashboard/src/components/ActionIcon.tsx
@@ -18,9 +18,11 @@ interface Props {
 }
 
 const Button = styled.div`
-  border-radius: 10%;
+  border-radius: 4px;
   margin: .5rem;
   cursor: pointer;
+  display: flex;
+  align-items: center;
   :active {
     opacity: 0.5;
   }

diff --git a/dashboard/src/components/card.tsx b/dashboard/src/components/card.tsx
@@ -23,8 +23,8 @@ type WrapperProps = {
 
 const Wrapper = styled.div<WrapperProps>`
   background-color: ${props => props.backgroundColor || colors.gardenWhite};
-  border-radius: 2px;
-  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
+  box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.06);
+  border-radius: 4px;
   width: 100%;
   overflow: hidden;
 `

diff --git a/dashboard/src/components/graph/graph.scss b/dashboard/src/components/graph/graph.scss
@@ -50,7 +50,7 @@
     background-position: left;
     background-position-x: -0.5rem;
     background-size: 4rem;
-    border-radius: 5px;
+    border-radius: 4px;
     border:none;
     cursor: pointer;