From 2c24ce536dbd46c9fa3bc9fd38370b28299dacbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Se=CC=81rgio=20Ramos?= <mail@sergioramos.me>
Date: Thu, 4 Jan 2018 15:52:56 +0000
Subject: [PATCH] fix(my-joy-beta): bolder metadata name

---
 .../src/components/instances/key-value.js          | 14 ++++++--------
 .../my-joy-beta/src/containers/instances/tags.js   |  2 +-
 packages/ui-toolkit/src/base/global.js             |  7 +++----
 packages/ui-toolkit/src/breadcrumb/item.js         |  1 +
 packages/ui-toolkit/src/button/index.js            |  1 -
 5 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/my-joy-beta/src/components/instances/key-value.js b/packages/my-joy-beta/src/components/instances/key-value.js
index bb0166de..96d078d3 100644
--- a/packages/my-joy-beta/src/components/instances/key-value.js
+++ b/packages/my-joy-beta/src/components/instances/key-value.js
@@ -29,7 +29,7 @@ import {
   DeleteIcon
 } from 'joyent-ui-toolkit';
 
-const CollapsedKeyValue = styled.span`
+const CollapsedKeyValue = styled.div`
   word-break: break-all;
   line-height: 1.5;
   white-space: nowrap;
@@ -143,13 +143,11 @@ export const KeyValue = ({
             <H4>{`${titleCase(method)} ${type}`}</H4>
           ) : (
             <CollapsedKeyValue>
-              <span>
-                {!expanded ? (
-                  `${initialValues.name}: `
-                ) : (
-                  <b>{`${initialValues.name}: `}</b>
-                )}
-              </span>
+              {expanded ? (
+                <span>{`${initialValues.name}: `}</span>
+              ) : (
+                <b>{`${initialValues.name}: `}</b>
+              )}
               <span>{initialValues.value}</span>
             </CollapsedKeyValue>
           )}
diff --git a/packages/my-joy-beta/src/containers/instances/tags.js b/packages/my-joy-beta/src/containers/instances/tags.js
index 585ee048..5a4340a0 100644
--- a/packages/my-joy-beta/src/containers/instances/tags.js
+++ b/packages/my-joy-beta/src/containers/instances/tags.js
@@ -70,7 +70,7 @@ export const Tags = ({
 
   const _count = !_loading ? (
     <Margin bottom={4} top={addOpen && 4}>
-      <H3>{tags.length} tags</H3>
+      <H3>{tags.length} tag{tags.length === 1 ? '' : 's'}</H3>
     </Margin>
   ) : null;
 
diff --git a/packages/ui-toolkit/src/base/global.js b/packages/ui-toolkit/src/base/global.js
index f6274c34..8ba3466a 100644
--- a/packages/ui-toolkit/src/base/global.js
+++ b/packages/ui-toolkit/src/base/global.js
@@ -8,10 +8,9 @@ export default ({ theme }) => css`
     display: none;
   }
 
-  * {
-    font-family: ${
-      theme.font.family
-    }, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
+  html, body {
+    font-display: optional;
+    font-family: ${theme.font.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
     font-weight: ${theme.font.weight.normal};
   }
 
diff --git a/packages/ui-toolkit/src/breadcrumb/item.js b/packages/ui-toolkit/src/breadcrumb/item.js
index f4cee916..5d9968ae 100644
--- a/packages/ui-toolkit/src/breadcrumb/item.js
+++ b/packages/ui-toolkit/src/breadcrumb/item.js
@@ -24,6 +24,7 @@ const BaseLink = styled(({ component, children, ...rest }) =>
 )`
   text-decoration: none;
   cursor: pointer;
+  font-weight: ${props => props.theme.font.weight.normal};
 
   &:visited {
     color: inherit;
diff --git a/packages/ui-toolkit/src/button/index.js b/packages/ui-toolkit/src/button/index.js
index 2f7864bc..ef068db1 100644
--- a/packages/ui-toolkit/src/button/index.js
+++ b/packages/ui-toolkit/src/button/index.js
@@ -164,7 +164,6 @@ const Button = styled(BaseButton)`
     -webkit-text-fill-color: currentcolor;
     background-color: ${props => props.theme.white};
     border-color: ${props => props.theme.red};
-    font-weight: 600;
 
     &:focus {
       background-color: ${props => props.theme.white};