fix(images): fix small bugs from QA

fixes #1202

packages/images/src/components/image.js

@@ -30,64 +30,99 @@ const A = styled(Anchor)`
   font-weight: ${props => props.theme.font.weight.semibold};
 `;
 
+const CardAnchor = styled(Anchor)`
+  color: ${props => props.theme.text};
+  text-decoration: none;
+`;
+
+const Type = styled(Margin)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
+const Content = styled(Padding)`
+  max-width: calc(100% - 48px);
+  overflow: hidden;
+`;
+
+const Max = styled(Flex)`
+  max-width: 100%;
+  height: 100%;
+`;
+
+const DividerContainer = styled(Margin)`
+  height: 100%;
+`;
+
+const Actions = styled(Flex)`
+  width: 48px;
+  height: 48px;
+  min-width: 48px;
+`;
+
 export const Image = ({ name, os, version, type }) => (
   <Margin bottom={3}>
-    <Card>
-      <CardHeader white>
-        <Padding left={2} right={2}>
-          <Flex full alignCenter>
-            <Margin right={2}>
-              {React.createElement(OS[os], {
-                width: '24',
-                height: '24'
-              })}
-            </Margin>
-            <A to={`/${name}`} component={Link}>
-              {name}
-            </A>
-          </Flex>
-        </Padding>
-      </CardHeader>
-      <Flex justifyBetween>
-        <Padding left={2} top={2} bottom={2}>
-          <Flex justifyBetween>
-            <Flex>
-              <Flex>{version}</Flex>
-              <Margin left={1}>
-                <Divider width={remcalc(1)} height="100%" />
+    <CardAnchor to={`/${name}`} component={Link}>
+      <Card radius>
+        <CardHeader white radius>
+          <Padding left={2} right={2}>
+            <Flex full alignCenter>
+              <Margin right={2}>
+                {React.createElement(OS[os], {
+                  width: '24',
+                  height: '24'
+                })}
               </Margin>
-              <Padding left={2}>{ImageType[type]}</Padding>
+              <A to={`/${name}`} component={Link}>
+                {name}
+              </A>
             </Flex>
-          </Flex>
-        </Padding>
-        <PopoverContainer clickable>
-          <FlexItem basis={remcalc(48)}>
-            <PopoverTarget box style={{ borderLeft: '1px solid #D8D8D8' }}>
-              <ActionsIcon />
-            </PopoverTarget>
-            <Popover placement="bottom">
-              <PopoverItem disabled={false} onClick={() => {}}>
-                Create Instance
-              </PopoverItem>
-              <PopoverDivider />
-              <PopoverItem disabled={false} onClick={() => {}}>
-                Remove
-              </PopoverItem>
-            </Popover>
-          </FlexItem>
-        </PopoverContainer>
-      </Flex>
-    </Card>
+          </Padding>
+        </CardHeader>
+        <Flex justifyBetween>
+          <Content left={2} top={2} bottom={2}>
+            <Max justifyBetween>
+              <Max alignCenter>
+                <Flex>{version}</Flex>
+                <DividerContainer left={2}>
+                  <Divider width={remcalc(1)} height="100%" />
+                </DividerContainer>
+                <Type left={2}>{ImageType[type]}</Type>
+              </Max>
+            </Max>
+          </Content>
+          <PopoverContainer clickable>
+            <Actions>
+              <PopoverTarget box style={{ borderLeft: '1px solid #D8D8D8' }}>
+                <ActionsIcon />
+              </PopoverTarget>
+              <Popover placement="bottom">
+                <PopoverItem disabled={false} onClick={() => {}}>
+                  Create Instance
+                </PopoverItem>
+                <PopoverDivider />
+                <PopoverItem disabled={false} onClick={() => {}}>
+                  Remove
+                </PopoverItem>
+              </Popover>
+            </Actions>
+          </PopoverContainer>
+        </Flex>
+      </Card>
+    </CardAnchor>
   </Margin>
 );
 
-export const Filters = () => (
+export const Filters = ({ selected }) => (
   <Fragment>
     <FormGroup name="image-type" value="all" field={Field} type="radio">
       <Radio noMargin>
         <Flex alignCenter>
           <Margin right={2}>
-            <FormLabel>All</FormLabel>
+            <FormLabel big normal={selected !== 'all'}>
+              All
+            </FormLabel>
           </Margin>
         </Flex>
       </Radio>
@@ -101,7 +136,9 @@ export const Filters = () => (
       <Radio noMargin>
         <Flex alignCenter>
           <Margin right={2}>
-            <FormLabel>Virtual machines</FormLabel>
+            <FormLabel big normal={selected !== 'hardware-virtual-machine'}>
+              Virtual machines
+            </FormLabel>
           </Margin>
         </Flex>
       </Radio>
@@ -115,7 +152,9 @@ export const Filters = () => (
       <Radio noMargin>
         <Flex alignCenter>
           <Margin right={2}>
-            <FormLabel>Infrastructure container</FormLabel>
+            <FormLabel big normal={selected !== 'infrastructure-container'}>
+              Infrastructure container
+            </FormLabel>
           </Margin>
         </Flex>
       </Radio>

packages/images/src/components/summary.js

@@ -19,7 +19,9 @@ import {
   CopiableField,
   DuplicateIcon,
   DeleteIcon,
-  DotIcon
+  DotIcon,
+  FormLabel,
+  Input
 } from 'joyent-ui-toolkit';
 
 import { ImageType, OS } from '@root/constants';
@@ -139,10 +141,17 @@ export default withTheme(({ theme = {}, ...image }) => (
             </Margin>
             <CopiableField text={(image.id || '').split('-')[0]} label="ID" />
             <CopiableField text={image.id} label="UUID" />
-            <CopiableField
-              text={titleCase(image.os)}
-              label="Operating system"
-            />
+            <Row>
+              <Col xs={12} md={7}>
+                <FormLabel>Operating system</FormLabel>
+                <Input
+                  monospace
+                  onBlur={null}
+                  fluid
+                  value={titleCase(image.os)}
+                />
+              </Col>
+            </Row>
           </Padding>
         </CardOutlet>
       </Card>

packages/images/src/containers/list.js

@@ -32,7 +32,8 @@ export const List = ({
   allImages = [],
   loading = false,
   error = null,
-  history
+  history,
+  typeValue
 }) => (
   <ViewContainer main>
     <Divider height={remcalc(30)} transparent />
@@ -63,7 +64,11 @@ export const List = ({
           form={TOGGLE_FORM_DETAILS}
           initialValues={{ 'image-type': 'all' }}
         >
-          {props => (allImages.length ? <Filters {...props} /> : null)}
+          {props =>
+            allImages.length ? (
+              <Filters selected={typeValue} {...props} />
+            ) : null
+          }
         </ReduxForm>
       </Margin>
       <Row>
@@ -124,7 +129,8 @@ export default compose(
             return true;
         }
       }),
-      allImages: images
+      allImages: images,
+      typeValue
     };
   })
 )(List);

packages/my-joy-beta/src/components/__tests__/__snapshots__/cns.spec.js.snap

@@ -798,6 +798,7 @@ exports[`renders <Hostname values /> without throwing 1`] = `
   cursor: not-allowed;
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;

packages/my-joy-beta/src/components/__tests__/__snapshots__/key-value.spec.js.snap

@@ -3042,6 +3042,7 @@ exports[`renders <KeyValue input="textarea" /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/components/create-instance/__tests__/__snapshots__/package.spec.js.snap

@@ -1094,10 +1094,6 @@ exports[`renders <Package /> without throwing 1`] = `
   align-items: center;
 }
 
-.c3 label {
-  font-weight: 400;
-}
-
 .c1 {
   border-width: 0.0625rem;
   border-style: solid;

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -769,6 +769,7 @@ exports[`renders <AddForm /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -1833,6 +1834,7 @@ exports[`renders <EditForm /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/components/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -860,6 +860,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -938,6 +939,7 @@ exports[`renders <Summary /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -2822,6 +2824,7 @@ exports[`renders <Summary instance /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -4883,6 +4886,7 @@ exports[`renders <Summary instance /> without throwing 2`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -6832,6 +6836,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -6910,6 +6915,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -8846,6 +8852,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -8924,6 +8931,7 @@ exports[`renders <Summary state /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -10808,6 +10816,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -10886,6 +10895,7 @@ exports[`renders <Summary state /> without throwing 2`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -12606,6 +12616,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   font-size: 0.9375rem;
   line-height: normal !important;
@@ -12684,6 +12695,7 @@ exports[`renders <Summary state /> without throwing 3`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/metadata.spec.js.snap

@@ -1186,6 +1186,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -3124,6 +3125,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -4241,6 +4243,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -5629,6 +5632,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -6765,6 +6769,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/containers/create-instance/__tests__/__snapshots__/user-script.spec.js.snap

@@ -849,6 +849,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -2039,6 +2040,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -3873,6 +3875,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -5172,6 +5175,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -6509,6 +6513,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -7780,6 +7785,7 @@ Array [
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap

@@ -1622,6 +1622,7 @@ exports[`renders <Cns hostnames /> without throwing 1`] = `
   cursor: not-allowed;
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -4069,6 +4070,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
   cursor: not-allowed;
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/metadata.spec.js.snap

@@ -1427,6 +1427,7 @@ exports[`renders <Metadata addOpen /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;
@@ -4065,6 +4066,7 @@ exports[`renders <Metadata metadata /> without throwing 1`] = `
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   text-overflow: ellipsis;
   resize: vertical;
   font-size: 0.9375rem;

packages/my-joy-beta/src/containers/instances/__tests__/__snapshots__/summary.spec.js.snap

@@ -1928,6 +1928,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;
@@ -4027,6 +4028,7 @@ exports[`renders <Summary starting stopping rebooting removing /> without throwi
   color: rgba(73,73,73,1);
   font-family: "Roboto Mono",monospace;
   width: 100%;
+  min-width: 100%;
   font-size: 0.9375rem;
   line-height: normal !important;
   font-style: normal;

packages/ui-toolkit/src/card/card.js

@@ -44,6 +44,10 @@ export const BaseCard = styled.div`
   background-color: ${props => props.theme.white};
   border-color: ${props => props.theme.grey};
 
+  ${is('radius')`
+    border-radius: ${remcalc(4)};
+  `}
+
   ${is('shadow')`
     /* primary */
     box-shadow: ${props => props.theme.shadows.bottomShadow};

packages/ui-toolkit/src/card/header.js

@@ -17,6 +17,12 @@ const BaseHeader = BaseCard.extend`
 
   margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
 
+  ${is('radius')`
+    border-radius: ${remcalc(4)};
+    border-bottom-right-radius: ${remcalc(0)};
+    border-bottom-left-radius: ${remcalc(0)};
+  `}
+
   ${is('parentCollapsed')`
     margin: ${remcalc(-1)};
     box-shadow: none;

packages/ui-toolkit/src/form/__tests__/__snapshots__/form.spec.js.snap

@@ -525,10 +525,6 @@ exports[`Form Radio 1`] = `
   align-items: center;
 }
 
-.c0 label {
-  font-weight: 400;
-}
-
 <li
   className="c0"
   disabled={false}

packages/ui-toolkit/src/form/base/input.js

@@ -114,6 +114,7 @@ const style = css`
 
   ${is('fluid')`
     width: 100%;
+    min-width: 100%;
   `};
 
   ${is('xSmall')`

packages/ui-toolkit/src/form/label.js

@@ -11,9 +11,17 @@ const StyledLabel = Label.extend`
   white-space: pre;
   font-size: ${remcalc(13)};
 
-  ${is('disabled')`
+  ${is('disabled') `
     color:  ${props => props.theme.grey};
   `};
+
+  ${is('big') `
+    font-size: ${remcalc(15)};
+  `};
+
+  ${is('normal') `
+      font-weight: ${props => props.theme.font.weight.normal};
+  `};
 `;
 
 export default props => {

packages/ui-toolkit/src/form/radio.js

@@ -10,10 +10,6 @@ const Li = styled.li`
   list-style-type: none;
   display: flex;
   align-items: center;
-
-  label {
-    font-weight: 400;
-  }
 `;
 
 const Ul = styled.ul`