improvement(dashboard): change menu layout and update styling

This was overdue, a bit of a styling update across the board.
garden-io · Mar 9, 2021 · a34fa07 · a34fa07
1 parent 62ef979
commit a34fa07
Show file tree

Hide file tree

Showing 21 changed files with 201 additions and 211 deletions.
diff --git a/core/test/unit/src/plugins/kubernetes/container/build/buildkit.ts b/core/test/unit/src/plugins/kubernetes/container/build/buildkit.ts
@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2018-2020 Garden Technologies, Inc. <[email protected]>
+ * Copyright (C) 2018-2021 Garden Technologies, Inc. <[email protected]>
  *
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this

diff --git a/dashboard/src/app.tsx b/dashboard/src/app.tsx
@@ -24,6 +24,8 @@ import { InfoBox } from "./components/InfoBox"
 
 const AppWrapper = styled.div`
   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
   height: 100vh;
   max-height: 100vh;
   overflow-y: hidden;

diff --git a/dashboard/src/components/button.tsx b/dashboard/src/components/button.tsx
@@ -12,8 +12,8 @@ import { colors } from "../styles/variables"
 export const TertiaryButton = styled.button`
   cursor: pointer;
   padding: 0;
-  font-size: 0.8125rem;
-  line-height: 1.1875rem;
+  font-size: 0.7rem;
+  line-height: 1rem;
   text-align: center;
   letter-spacing: 0.01em;
   color: ${colors.buttons.tertiary.default.color};

diff --git a/dashboard/src/components/entity-cards/common.tsx b/dashboard/src/components/entity-cards/common.tsx
@@ -18,7 +18,7 @@ export const EntityCardWrap = styled.div`
   border-radius: 4px;
   width: 100%;
   margin-top: 1rem;
-  padding: 0.75rem;
+  padding: 0.75rem 0.75rem 0.4rem 0.75rem;
 
   &:first-of-type {
     margin-top: 0;
@@ -39,7 +39,8 @@ export const Content = styled.div`
   width: 100%;
   position: relative;
   max-height: 10rem;
-  padding-top: 0.75rem;
+  padding-top: 0.4rem;
+  overflow-y: hidden;
   &:empty {
     display: none;
   }
@@ -50,7 +51,7 @@ type StateLabelProps = {
 }
 
 export const StateLabel = styled.div<StateLabelProps>`
-  padding: 0 0.5rem;
+  padding: 0 0.4rem;
   margin-left: auto;
   background-color: ${(props) => (props && props.state ? colors.state[props.state] : colors.gardenGrayLight)};
   display: ${(props) => (props && props.state && colors.state[props.state] ? "flex" : "none")};
@@ -69,15 +70,15 @@ export const Label = styled.div`
   display: flex;
   align-items: center;
   font-weight: 500;
-  font-size: 10px;
-  line-height: 10px;
+  font-size: 9px;
+  line-height: 9px;
   text-align: right;
   letter-spacing: 0.01em;
   color: #90a0b7;
 `
 
 const Name = styled.div`
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   font-weight: 500;
   color: rgba(0, 0, 0, 0.87);
   padding-top: 0.125rem;
@@ -93,6 +94,9 @@ type FieldWrapProps = {
 
 export const FieldWrap = styled.div<FieldWrapProps>`
   display: ${(props) => (props.visible ? `block` : "none")};
+  font-size: 0.7rem;
+  line-height: 1rem;
+  letter-spacing: 0.01em;
   animation: fadein 0.5s;
   @keyframes fadein {
     from {
@@ -121,23 +125,17 @@ type FieldGroupProps = {
 export const FieldGroup = styled.div<FieldGroupProps>`
   display: ${(props) => (props.visible ? "flex" : "none")};
   flex-direction: row;
-  padding-top: 0.25rem;
+  padding-top: 0.15rem;
 `
 
 export const Key = styled.div`
   padding-right: 0.25rem;
-  font-size: 0.8125rem;
-  line-height: 1.1875rem;
-  letter-spacing: 0.01em;
   color: #4c5862;
   opacity: 0.5;
 `
 
 export const Value = styled.div`
   padding-right: 0.5rem;
-  font-size: 0.8125rem;
-  line-height: 1.1875rem;
-  letter-spacing: 0.01em;
 `
 
 interface NameFieldProps {

diff --git a/dashboard/src/components/entity-cards/module.tsx b/dashboard/src/components/entity-cards/module.tsx
@@ -19,14 +19,14 @@ import { Field, Value, FieldWrap, NameField } from "./common"
 import { useUiState } from "../../hooks"
 
 const Wrap = styled.div`
-  padding: 1.2rem;
+  padding: 1rem;
   background: white;
   box-shadow: 0rem 0.375rem 1.125rem rgba(0, 0, 0, 0.06);
   border-radius: 0.25rem;
   margin: 0 1.3rem 1.3rem 0;
-  min-width: 17.5rem;
+  min-width: 17rem;
   flex: 1 1;
-  max-width: 20rem;
+  max-width: 18rem;
 `
 
 type CardWrapProps = {

diff --git a/dashboard/src/components/entity-cards/task.tsx b/dashboard/src/components/entity-cards/task.tsx
@@ -59,7 +59,7 @@ export const TaskCard = ({
           <TertiaryButton
             onClick={handleEntitySelected}
             className={css`
-              margin-top: 0.5rem;
+              margin-top: 0.4rem;
             `}
           >
             Show result

diff --git a/dashboard/src/components/graph/index.tsx b/dashboard/src/components/graph/index.tsx
@@ -12,9 +12,8 @@ import { Canvas, Node, Edge, MarkerArrow, NodeChildProps } from "reaflow"
 import React, { useState } from "react"
 import styled from "@emotion/styled"
 import { capitalize } from "lodash"
-import Card from "../card"
 import "./graph.scss"
-import { colors, fontMedium } from "../../styles/variables"
+import { colors } from "../../styles/variables"
 import Spinner, { SpinnerProps } from "../spinner"
 import { SelectGraphNode, StackGraphSupportedFilterKeys } from "../../contexts/ui"
 import { FiltersButton, Filters } from "../group-filter"
@@ -47,11 +46,6 @@ const Span = styled.span`
   margin-left: 1rem;
 `
 
-const Status = styled.p`
-  ${fontMedium}
-  color: grey;
-`
-
 const ProcessSpinner = styled<any, SpinnerProps>(Spinner)`
   margin: 16px 0 0 20px;
 `
@@ -98,9 +92,8 @@ export const StackGraph: React.FC<Props> = ({
   onFilter,
 }) => {
   let spinner: React.ReactNode = null
-  let graphStatus = ""
+
   if (isProcessing) {
-    graphStatus = "Processing..."
     spinner = <ProcessSpinner background={colors.gardenWhite} size="2rem" />
   }
 
@@ -188,83 +181,83 @@ export const StackGraph: React.FC<Props> = ({
   }
 
   return (
-    <Card>
+    <div
+      className={cls(
+        css`
+          position: relative;
+        `
+      )}
+    >
       <div
         className={cls(
           css`
-            position: relative;
+            position: absolute;
+            bottom: 2.3rem;
+            left: 0.5rem;
           `
         )}
       >
-        <div
-          className={cls(
-            css`
-              position: absolute;
-              top: 1rem;
-              display: flex;
-            `
-          )}
-        >
-          <div className="ml-1">
-            <FiltersButton filters={filters} onFilter={onFilter} />
-            <div
-              className={css`
-                display: flex;
-              `}
-            >
-              <Status>{graphStatus}</Status>
-              {spinner}
-            </div>
-          </div>
-        </div>
+        {spinner}
+      </div>
+      <div
+        className={cls(
+          css`
+            position: absolute;
+            top: 1rem;
+            right: 1.5rem;
+            display: flex;
+          `
+        )}
+      >
+        <FiltersButton filters={filters} onFilter={onFilter} />
+      </div>
 
-        <div id="chart">
-          <Canvas
-            readonly
-            fit
-            direction="RIGHT"
-            maxHeight={5000}
-            maxWidth={5000}
-            layoutOptions={{ "algorithm": "layered", "org.eclipse.elk.partitioning.activate": true }}
-            nodes={nodes}
-            edges={edges}
-            selections={selections}
-            node={<Node style={{ fill: "white", strokeWidth: 0 }}>{renderNode}</Node>}
-            edge={<Edge disabled style={{ stroke: "rgba(0, 0, 0, 0.2)", strokeWidth: "1.5px" }} />}
-            arrow={<MarkerArrow style={{ fill: "rgba(140, 140, 140)", strokeWidth: "5px" }} />}
-          />
-        </div>
+      <div id="chart">
+        <Canvas
+          readonly
+          fit
+          direction="RIGHT"
+          maxHeight={5000}
+          maxWidth={5000}
+          layoutOptions={{ "algorithm": "layered", "org.eclipse.elk.partitioning.activate": true }}
+          nodes={nodes}
+          edges={edges}
+          selections={selections}
+          node={<Node style={{ fill: "white", strokeWidth: 0 }}>{renderNode}</Node>}
+          edge={<Edge disabled style={{ stroke: "rgba(0, 0, 0, 0.2)", strokeWidth: "1.5px" }} />}
+          arrow={<MarkerArrow style={{ fill: "rgba(140, 140, 140)", strokeWidth: "5px" }} />}
+        />
+      </div>
 
-        <div
-          className={cls(
-            css`
-              position: absolute;
-              right: 1rem;
-              bottom: 1rem;
-              display: flex;
-              justify-content: flex-end;
-              font-size: 0.8em;
-            `,
-            "mr-1"
-          )}
-        >
-          {Object.entries(taskStates).map(([state, props]) => {
-            return (
-              <Span key={state}>
-                <span
-                  className={css`
-                    color: ${colors.taskState[state]};
-                    font-weight: bold;
-                  `}
-                >
-                  {props.indicator || defaultTaskIndicator}{" "}
-                </span>
-                {capitalize(state)}
-              </Span>
-            )
-          })}
-        </div>
+      <div
+        className={cls(
+          css`
+            position: absolute;
+            right: 1rem;
+            bottom: 2.2rem;
+            display: flex;
+            justify-content: flex-end;
+            font-size: 0.8em;
+          `,
+          "mr-1"
+        )}
+      >
+        {Object.entries(taskStates).map(([state, props]) => {
+          return (
+            <Span key={state}>
+              <span
+                className={css`
+                  color: ${colors.taskState[state]};
+                  font-weight: bold;
+                `}
+              >
+                {props.indicator || defaultTaskIndicator}{" "}
+              </span>
+              {capitalize(state)}
+            </Span>
+          )
+        })}
       </div>
-    </Card>
+    </div>
   )
 }
diff --git a/dashboard/src/components/group-filter.tsx b/dashboard/src/components/group-filter.tsx
@@ -15,11 +15,11 @@ interface FilterProps {
 }
 
 const Filter = styled.li<FilterProps>`
-  padding: 0.5rem;
+  padding: 0.4rem;
   border: 1px solid transparent;
   box-sizing: border-box;
-  font-size: 13px;
-  line-height: 19px;
+  font-size: 12px;
+  line-height: 13px;
   display: flex;
   align-items: center;
   text-align: center;
@@ -28,13 +28,13 @@ const Filter = styled.li<FilterProps>`
   background-color: ${(props) => (props.selected ? colors.gardenGreenDark : "white")};
   box-shadow: 0px 6px 18px rgba(0, 0, 0, 0.06);
   margin-right: 0.25rem;
-  border-radius: 4px;
-  height: 2rem;
+  border-radius: 3px;
+  height: 24px;
   transition: background-color 0.2s ease-in-out;
 
   &:hover {
     cursor: pointer;
-    background-color: ${(props) => (!props.selected ? "white" : colors.gardenPink)};
+    background-color: ${(props) => (!props.selected ? "white" : colors.gardenGreenDarker)};
   }
 `
 

diff --git a/dashboard/src/components/links.tsx b/dashboard/src/components/links.tsx
@@ -6,9 +6,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-import React from "react"
 import styled from "@emotion/styled"
-import { NavLink as ReactRouterNavLink } from "react-router-dom"
 
 import { colors } from "../styles/variables"
 
@@ -21,7 +19,3 @@ export const ExternalLink = styled.a`
     color: ${colors.gardenPink};
   }
 `
-
-export const NavLink = (props) => (
-  <ReactRouterNavLink {...props} activeStyle={{ color: colors.gardenPink, fontWeight: 500 }} />
-)