diff --git a/packages/instance-steps/src/package/components.js b/packages/instance-steps/src/package/components.js
index 6e14cd3c..d0491972 100644
--- a/packages/instance-steps/src/package/components.js
+++ b/packages/instance-steps/src/package/components.js
@@ -192,6 +192,112 @@ export const Filters = ({ onResetFilters }) => (
);
+export const MobilePackage = ({
+ selected = false,
+ id,
+ name,
+ group,
+ memory,
+ price,
+ vcpus,
+ disk,
+ ssd,
+ hasVms,
+ sortBy,
+ onRowClick
+}) => (
+
+ onRowClick(id)}>
+
+
+
+
+ {GroupIcons[group]}
+
+
+
+ {`${name} `}
+ {ssd && SSD}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ RAM
+
+
+
+
+ Disk
+
+
+ {hasVms && (
+
+
+ vCPU
+
+
+ )}
+
+
+ $/hour
+
+
+
+
+
+ onRowClick(id)}>
+
+ {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+
+ {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+ {hasVms && (
+
+ {vcpus}
+
+ )}
+
+ {fourDecimals(price)}
+
+
+
+
+
+
+
+);
export const Package = ({
selected = false,
@@ -205,143 +311,48 @@ export const Package = ({
ssd,
hasVms,
sortBy,
- onRowClick,
- xs
-}) => {
- return xs ? (
-
- onRowClick(id)}>
-
-
-
-
- {GroupIcons[group]}
-
-
-
- {`${name} `}
- {ssd && SSD}
-
-
-
-
-
-
-
-
-
-
-
-
-
- RAM
-
-
-
-
- Disk
-
-
- {hasVms && (
-
-
- vCPU
-
-
- )}
-
-
- $/hour
-
-
-
-
-
- onRowClick(id)}>
-
- {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
-
-
-
- {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
-
-
- {hasVms && (
-
- {vcpus}
-
- )}
-
- {fourDecimals(price)}
-
-
-
-
-
-
-
- ) : (
- onRowClick(id)}>
-
-
-
-
-
- {GroupIcons[group]}
-
-
-
- {name}
-
-
-
-
-
+ onRowClick
+}) => (
+ onRowClick(id)}>
+
+
+
+
+
+ {GroupIcons[group]}
+
+
+
+ {name}
+
+
+
+
+
+
+
+ {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+
+
+ {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
+
+ {ssd && SSD}
+
+ {hasVms && (
+
+ {vcpus}
-
- {bytes(memory, { decimalPlaces: 0, unitSeparator: ' ' })}
-
-
-
- {bytes(disk, { decimalPlaces: 0, unitSeparator: ' ' })}
-
- {ssd && SSD}
-
- {hasVms && (
-
- {vcpus}
-
- )}
-
- {fourDecimals(price)}
-
-
- );
-};
+ )}
+
+ {fourDecimals(price)}
+
+
+);
export const Packages = ({
pristine,
diff --git a/packages/instance-steps/src/package/index.js b/packages/instance-steps/src/package/index.js
index 94c663e1..320c0f86 100644
--- a/packages/instance-steps/src/package/index.js
+++ b/packages/instance-steps/src/package/index.js
@@ -23,7 +23,13 @@ import Step, {
import { Button, PackageIcon, StatusLoader } from 'joyent-ui-toolkit';
-import { Filters, Packages, Package, Overview } from './components';
+import {
+ Filters,
+ Packages,
+ Package,
+ MobilePackage,
+ Overview
+} from './components';
import getPackages from '../graphql/get-packages.gql';
import priceData from './prices.json';
import { Forms, Values } from '../constants';
@@ -89,14 +95,13 @@ const PackageComponent = ({
{packages.map(({ id, ...pkg }) => (
-
))}
diff --git a/packages/instance-steps/src/tags/index.js b/packages/instance-steps/src/tags/index.js
index 6476ab5c..cd9f7a83 100644
--- a/packages/instance-steps/src/tags/index.js
+++ b/packages/instance-steps/src/tags/index.js
@@ -69,7 +69,7 @@ const TagsContainer = ({
...props
}) => (
- }>Tags
+ }>Tags
Tags can be used to identify your instances, group multiple instances
together, define firewall and affinity rules, and more.