fix(my-joy-beta): bolder metadata name

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 ? (
-                {!expanded ? (
+                <span>{`${initialValues.name}: `}</span>
-                  `${initialValues.name}: `
+              ) : (
-                ) : (
+                <b>{`${initialValues.name}: `}</b>
-                  <b>{`${initialValues.name}: `}</b>
+              )}
-                )}
-              </span>
               <span>{initialValues.value}</span>
             </CollapsedKeyValue>
           )}

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;
 

packages/ui-toolkit/src/base/global.js

@@ -8,10 +8,9 @@ export default ({ theme }) => css`
     display: none;
   }
 
-  * {
+  html, body {
-    font-family: ${
+    font-display: optional;
-      theme.font.family
+    font-family: ${theme.font.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
-    }, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
     font-weight: ${theme.font.weight.normal};
   }
 

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;

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};