From 55f7d9618bccaa7c5d3d5e428828a885474cad93 Mon Sep 17 00:00:00 2001
From: benstov <benstov@gmail.com>
Date: Mon, 6 May 2019 18:58:21 +0200
Subject: [PATCH] improvement: font sizes and header

---
 .../{RefreshButton.tsx => ActionIcon.tsx}     |  12 +-
 dashboard/src/components/info-pane.tsx        | 116 +++++++++++-------
 dashboard/src/components/logs.tsx             |   8 +-
 dashboard/src/containers/graph.tsx            |   4 +-
 dashboard/src/styles/variables.ts             |   1 +
 5 files changed, 84 insertions(+), 57 deletions(-)
 rename dashboard/src/components/{RefreshButton.tsx => ActionIcon.tsx} (76%)

diff --git a/dashboard/src/components/RefreshButton.tsx b/dashboard/src/components/ActionIcon.tsx
similarity index 76%
rename from dashboard/src/components/RefreshButton.tsx
rename to dashboard/src/components/ActionIcon.tsx
index a57d8ee94d..384e57bc0a 100644
--- a/dashboard/src/components/RefreshButton.tsx
+++ b/dashboard/src/components/ActionIcon.tsx
@@ -13,12 +13,13 @@ import { colors } from "../styles/variables"
 
 interface Props {
   onClick: () => void
-  loading: boolean
+  inProgress?: boolean
+  iconClassName: "redo-alt" | "window-close"
 }
 
 const Button = styled.div`
-  padding: 0.3em;
   border-radius: 10%;
+  margin: .5rem;
   cursor: pointer;
   :active {
     opacity: 0.5;
@@ -27,7 +28,6 @@ const Button = styled.div`
 
 const Icon = styled.i`
   color: ${colors.gardenGray};
-  font-size: 1.25rem;
   :hover {
     color: ${colors.gardenPink}
   }
@@ -48,12 +48,12 @@ const IconLoading = styled(Icon)`
   }
 `
 
-export const RefreshButton: React.FC<Props> = ({ loading, onClick }) => {
-  const IconComp = loading ? IconLoading : Icon
+export const ActionIcon: React.FC<Props> = ({ inProgress, onClick, iconClassName }) => {
+  const IconComp = inProgress ? IconLoading : Icon
 
   return (
     <Button onClick={onClick}>
-      <IconComp className={"fas fa-redo-alt"} />
+      <IconComp className={`fas fa-${iconClassName}`} />
     </Button>
   )
 }
diff --git a/dashboard/src/components/info-pane.tsx b/dashboard/src/components/info-pane.tsx
index f7588748ce..dfae59a9a2 100644
--- a/dashboard/src/components/info-pane.tsx
+++ b/dashboard/src/components/info-pane.tsx
@@ -14,13 +14,13 @@ import styled from "@emotion/styled"
 import Card from "../components/card"
 import { colors } from "../styles/variables"
 import { RenderedNode } from "garden-cli/src/config-graph"
-import { RefreshButton } from "./RefreshButton"
 import { ErrorNotification } from "./notifications"
+import { ActionIcon } from "./ActionIcon"
 
 const Term = styled.div`
   background-color: ${colors.gardenBlack};
   color: white;
-  border-radius: 2px;
+  border-radius: 0.125rem;
   max-height: 45rem;
   overflow-y: auto;
   padding: 1rem;
@@ -34,12 +34,6 @@ const ClosePaneContainer = styled.div`
   display: flex;
   margin-left: auto;
 `
-const ClosePane = styled.div`
-  cursor: pointer;
-  background-size: contain;
-  width: 2rem;
-  height: 2rem;
-`
 
 const IconContainer = styled.span`
   display: inline-block;
@@ -50,6 +44,50 @@ const IconContainer = styled.span`
   background-repeat: no-repeat;
   vertical-align: top;
 `
+
+const Key = ({ text }) => (
+  <div
+    className={cls(css`
+      font-weight: 500;
+      font-size: 0.6875rem;
+      line-height: 1rem;
+      letter-spacing: 0.01em;
+      color: #818E9B;
+    `,
+      "col-xs-12 pr-1")}
+  >
+    {text}
+  </div>
+)
+
+const Value = ({ children }) => (
+  <div
+    className={cls(css`
+      font-weight: normal;
+      font-size: 0.8125rem;
+      line-height: 1.1875rem;
+      letter-spacing: 0.01em;
+      color: #323C47;
+    `,
+      "col-xs-12")}
+  >
+    {children}
+  </div>
+)
+const Field = ({ children }) => (
+  <div className="row pt-1 ">
+    {children}
+  </div>
+)
+
+const Header = styled.div`
+  font-weight: 500;
+  font-size: 1.125rem;
+  line-height: 1.6875rem;
+
+  color: ${colors.black};
+`
+
 interface Props {
   node: RenderedNode
   clearGraphNodeSelection: () => void
@@ -61,17 +99,6 @@ interface Props {
   duration?: string | null
 }
 
-const Key = ({ text }) => (
-  <div
-    className={cls(css`
-      font-weight: bold;
-    `,
-      "col-xs-5 col-lg-3 pr-1")}
-  >
-    {text}
-  </div>
-)
-
 // TODO: Split up into something InfoPane and InfoPaneWithResults. Props are kind of messy.
 export const InfoPane: React.FC<Props> = ({
   clearGraphNodeSelection,
@@ -109,67 +136,62 @@ export const InfoPane: React.FC<Props> = ({
               padding-left: .5rem;
             `}
           >
-            <h2
+            <Header
               className={css`
                 margin-block-end: 0;
               `}
             >
               {name}
-            </h2>
+            </Header>
           </div>
 
           <ClosePaneContainer>
             {onRefresh && (
-              <div className={css`margin-right: 1rem;`}>
-                <RefreshButton onClick={onRefresh} loading={loading || false} />
-              </div>
+              <ActionIcon onClick={onRefresh} inProgress={loading || false} iconClassName="redo-alt" />
             )}
-            <ClosePane
-              onClick={clearGraphNodeSelection}
-              className="garden-icon garden-icon--close"
-            />
+            <ActionIcon onClick={clearGraphNodeSelection} iconClassName="window-close" />
           </ClosePaneContainer>
         </div>
 
-        <div className="row pt-2">
+        <Field>
           <Key text="Type" />
-          <div className="col-xs col-lg">
+          <Value>
             {capitalize(type)}
-          </div>
-        </div>
+          </Value>
+        </Field>
 
-        <div className="row pt-1">
+        <Field>
           <Key text="Module" />
-          <div className="col-xs col-lg">{moduleName}</div>
-        </div>
+          <Value>{moduleName}</Value>
+        </Field>
 
         {duration && (
-          <div className="row pt-1">
+          <Field>
             <Key text="Duration" />
-            <div className="col-xs col-lg">{duration}</div>
-          </div>
+            <Value>{duration}</Value>
+          </Field>
         )}
 
         {startedAt && (
-          <div className="row pt-1">
+          <Field>
             <Key text="Started At" />
-            <div className="col-xs col-lg">{startedAt}</div>
-          </div>
+            <Value>{startedAt}</Value>
+          </Field>
         )}
 
         {completedAt && (
-          <div className="row pt-1">
+          <Field>
             <Key text="Completed At" />
-            <div className="col-xs col-lg">{completedAt}</div>
-          </div>
+            <Value>{completedAt}</Value>
+          </Field>
         )}
 
-        {(type === "test" || type === "run") && (
-          <div className="row pt-1">
+        {(type === "test" || type === "run") && outputEl !== null && (
+          <Field>
             <div className="col-xs-12">
               {outputEl}
             </div>
-          </div>
+          </Field>
         )}
       </div>
     </Card>
diff --git a/dashboard/src/components/logs.tsx b/dashboard/src/components/logs.tsx
index cbd4095c80..a59e4babf8 100644
--- a/dashboard/src/components/logs.tsx
+++ b/dashboard/src/components/logs.tsx
@@ -21,7 +21,7 @@ import { getServiceNames } from "../util/helpers"
 
 import { ServiceLogEntry } from "garden-cli/src/types/plugin/outputs"
 import { ConfigDump } from "garden-cli/src/garden"
-import { RefreshButton } from "./RefreshButton"
+import { ActionIcon } from "./ActionIcon"
 
 interface Props {
   config: ConfigDump
@@ -119,7 +119,11 @@ class Logs extends Component<Props, State> {
           <div>
             <Header className="p-1">
               <CardTitle>{title}</CardTitle>
-              <RefreshButton onClick={this.refresh} loading={loading} />
+              <ActionIcon
+                onClick={this.refresh}
+                inProgress={loading}
+                iconClassName="redo-alt"
+              />
             </Header>
             <Terminal
               entries={filteredLogs}
diff --git a/dashboard/src/containers/graph.tsx b/dashboard/src/containers/graph.tsx
index c187c0315f..64cfc27b55 100644
--- a/dashboard/src/containers/graph.tsx
+++ b/dashboard/src/containers/graph.tsx
@@ -44,7 +44,7 @@ export default () => {
     const node = graph.data.nodes.find(n => n.key === selectedGraphNode)
     if (node) {
       moreInfoPane = (
-        <div className="col-xs-5">
+        <div className="col-xs-3">
           <NodeInfo node={node} />
         </div>
       )
@@ -53,7 +53,7 @@ export default () => {
 
   return (
     <div className="row">
-      <div className={moreInfoPane ? "col-xs-7" : "col-xs"}>
+      <div className={moreInfoPane ? "col-xs-9" : "col-xs"}>
         <Graph
           message={message}
           onGraphNodeSelected={selectGraphNode}
diff --git a/dashboard/src/styles/variables.ts b/dashboard/src/styles/variables.ts
index 5fc269cf71..ad93329173 100644
--- a/dashboard/src/styles/variables.ts
+++ b/dashboard/src/styles/variables.ts
@@ -25,6 +25,7 @@ function gardenPinkLighten(pct: number) {
 export const colors = {
   border: "rgba(0,0,0,0.12)",
   gray: "#f0f0f0",
+  black: "#192A3E",
   grayLight: "#fafafa",
   gardenGray: "#555656",
   gardenGrayLight: "#cdcfd1",