diff --git a/packages/instance-steps/src/firewall/index.js b/packages/instance-steps/src/firewall/index.js
index 1630c87e..302593cb 100644
--- a/packages/instance-steps/src/firewall/index.js
+++ b/packages/instance-steps/src/firewall/index.js
@@ -15,7 +15,7 @@ import Step, {
Outlet as StepOutlet
} from 'joyent-ui-resource-step';
-import { Button, P, FirewallIcon } from 'joyent-ui-toolkit';
+import { H3, Button, P, FirewallIcon } from 'joyent-ui-toolkit';
import {
TagRules,
@@ -67,11 +67,7 @@ const Firewall = ({
>
{props => (
-
+
)}
@@ -94,7 +90,15 @@ const Firewall = ({
{enabled && !loading && !defaultRules.length && !tagRules.length ? (
- Sorry, but we weren’t able to find any firewall rules.
+
+ No Firewall rules found
+
+
+ Try viewing inactive rules instead to see firewalls that
+ can potentially affect your instance
+
+
+
) : null}
diff --git a/packages/instance-steps/src/metadata/components.js b/packages/instance-steps/src/metadata/components.js
index c2c695c2..76486c5c 100644
--- a/packages/instance-steps/src/metadata/components.js
+++ b/packages/instance-steps/src/metadata/components.js
@@ -2,13 +2,19 @@ import React, { Fragment } from 'react';
import { Margin } from 'styled-components-spacing';
import ReduxForm from 'declarative-redux-form';
-import { KeyValue } from 'joyent-ui-toolkit';
+import { H3, KeyValue } from 'joyent-ui-toolkit';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
import { Forms } from '../constants';
const { IC_MD_F_EDIT } = Forms;
+export const Overview = ({ total = 0 }) => (
+
+ {total} key-value pair{total === 1 ? '' : 's'}
+
+);
+
export default ({
metadata = [],
handleUpdateMetadata,
@@ -19,42 +25,48 @@ export default ({
handleCancelEdit,
addOpen,
disabled
-}) =>
- metadata.map(({ name, value, open }, index) => (
- handleUpdateMetadata(index, newValue)}
- shouldAsyncValidate={shouldAsyncValidate}
- asyncValidate={handleAsyncValidate}
- >
- {props => (
-
- handleToggleExpanded(index))
- }
- onCancel={handleCancelEdit && (() => handleCancelEdit(index))}
- onRemove={
- handleRemoveMetadata && (() => handleRemoveMetadata(index))
- }
- editor={Editor}
- disabled={disabled}
- shadow={false}
- />
- {addOpen || index !== metadata.length - 1 ? (
-
- ) : null}
-
- )}
-
- ));
+}) => (
+
+
+
+
+ {metadata.map(({ name, value, open }, index) => (
+ handleUpdateMetadata(index, newValue)}
+ shouldAsyncValidate={shouldAsyncValidate}
+ asyncValidate={handleAsyncValidate}
+ >
+ {props => (
+
+ handleToggleExpanded(index))
+ }
+ onCancel={handleCancelEdit && (() => handleCancelEdit(index))}
+ onRemove={
+ handleRemoveMetadata && (() => handleRemoveMetadata(index))
+ }
+ editor={Editor}
+ disabled={disabled}
+ shadow={false}
+ />
+ {addOpen || index !== metadata.length - 1 ? (
+
+ ) : null}
+
+ )}
+
+ ))}
+
+);
diff --git a/packages/instance-steps/src/metadata/index.js b/packages/instance-steps/src/metadata/index.js
index 22786a39..a870944b 100644
--- a/packages/instance-steps/src/metadata/index.js
+++ b/packages/instance-steps/src/metadata/index.js
@@ -19,7 +19,7 @@ import Step, {
import { Button, KeyValue, MetadataIcon } from 'joyent-ui-toolkit';
import { Forms, Values } from '../constants';
-import Preview from './components';
+import { default as Preview, Overview } from './components';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
import { addMetadata as validateMetadata } from '../validators';
@@ -58,18 +58,20 @@ const Metadata = ({
{({ next }) => (
{metadata.length ? (
-
+
+
+
) : null}
(
+
+
+ {total} Tag{total === 1 ? '' : 's'}
+
+
+);
+
const Tag = ({ name, value, onRemoveClick }) => (
@@ -67,13 +76,10 @@ const TagsContainer = ({
+
{preview.map(({ name, value }, index) => (
- handleRemoveTag(index)}
- />
+
))}
@@ -83,6 +89,7 @@ const TagsContainer = ({
{tags.length ? (
+
{tags.map(({ name, value }, index) => (
;
+ return (
+
+
+
+ );
}
}
diff --git a/packages/resource-widgets/src/firewall/index.js b/packages/resource-widgets/src/firewall/index.js
index 5228b78c..fc573d8f 100644
--- a/packages/resource-widgets/src/firewall/index.js
+++ b/packages/resource-widgets/src/firewall/index.js
@@ -4,6 +4,7 @@ import { Field } from 'redux-form';
import { Margin, Padding } from 'styled-components-spacing';
import Flex, { FlexItem } from 'styled-flex-component';
import { Row, Col } from 'joyent-react-styled-flexboxgrid';
+import styled from 'styled-components';
import {
H3,
@@ -13,10 +14,15 @@ import {
TagList,
TagItem,
P,
+ Checkbox,
Strong,
Card
} from 'joyent-ui-toolkit';
+const Form = styled.form`
+ margin-bottom: 0 !important;
+`;
+
const capitalizeFirstLetter = string =>
string.charAt(0).toUpperCase() + string.slice(1);
@@ -170,47 +176,30 @@ export const ToggleFirewallForm = ({
: undefined;
return (
-
);
};
export const ToggleInactiveForm = () => (
-
+
+
-
+
);
diff --git a/packages/ui-toolkit/src/form/checkbox.js b/packages/ui-toolkit/src/form/checkbox.js
index 44197f5e..22cc5391 100644
--- a/packages/ui-toolkit/src/form/checkbox.js
+++ b/packages/ui-toolkit/src/form/checkbox.js
@@ -9,10 +9,28 @@ const Li = styled.li`
list-style-type: none;
display: flex;
align-items: center;
+ display: flex;
+ align-items: center;
+ align-content: center;
+ height: 24px;
label {
font-weight: 400;
}
+
+ label::after {
+ width: 0.475rem;
+ height: 0.205rem;
+ top: 0.4125rem;
+ left: 0.35rem;
+ }
+
+ div[type='checkbox'],
+ div[type='checkbox'] input,
+ div[type='checkbox'] label {
+ height: 24px;
+ width: 24px;
+ }
`;
const Ul = styled.ul`