diff --git a/bundle/package.json b/bundle/package.json index ac325efd..22f4d251 100644 --- a/bundle/package.json +++ b/bundle/package.json @@ -17,7 +17,7 @@ }, "dependencies": { "brule": "^3.1.0", - "cloudapi-gql": "^7.1.1", + "cloudapi-gql": "^7.1.3", "hapi": "^17.2.0", "hapi-triton-auth": "^2.0.0", "inert": "^5.1.0", diff --git a/packages/my-joy-images/src/components/image.js b/packages/my-joy-images/src/components/image.js index 71ae676e..2baa3c94 100644 --- a/packages/my-joy-images/src/components/image.js +++ b/packages/my-joy-images/src/components/image.js @@ -1,10 +1,10 @@ import React, { Fragment } from 'react'; import { Link } from 'react-router-dom'; import styled from 'styled-components'; -import remcalc from 'remcalc'; import { Field } from 'redux-form'; import Flex from 'styled-flex-component'; import { Padding, Margin } from 'styled-components-spacing'; +import remcalc from 'remcalc'; import { Card, @@ -50,7 +50,7 @@ const Type = styled(Margin)` `; const Content = styled(Padding)` - max-width: calc(100% - 48px); + max-width: calc(100% - ${remcalc(48)}); overflow: hidden; `; @@ -64,13 +64,19 @@ const DividerContainer = styled(Margin)` `; const Actions = styled(Flex)` - width: 48px; - height: 48px; - min-width: 48px; + width: ${remcalc(48)}; + height: ${remcalc(48)}; + min-width: ${remcalc(48)}; +`; + +const ActionsWrapper = styled(Flex)` + height: 100%; + border-left: ${remcalc(1)} solid ${props => props.theme.grey}; `; export const Image = ({ name, + id, os, version, type, @@ -79,7 +85,7 @@ export const Image = ({ onCreateInstance }) => ( - + {removing ? ( @@ -96,7 +102,7 @@ export const Image = ({ height: '24' })} - + {name} @@ -116,11 +122,10 @@ export const Image = ({ - - + + + + diff --git a/packages/my-joy-images/src/components/summary.js b/packages/my-joy-images/src/components/summary.js index fdfaee89..77532463 100644 --- a/packages/my-joy-images/src/components/summary.js +++ b/packages/my-joy-images/src/components/summary.js @@ -117,7 +117,7 @@ export default withTheme(({ theme = {}, onRemove, removing, ...image }) => (