fix(images): Fix small bugs from QA

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/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/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`