diff --git a/frontend/package.json b/frontend/package.json
index 159bb8a0..5aa3849c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -21,6 +21,7 @@
"dependencies": {
"@tomgco/joyent-portal-ui": "alpha",
"constant-case": "^2.0.0",
+ "css-loader": "^0.26.1",
"force-array": "^3.1.0",
"hapi": "^16.1.0",
"inert": "^4.1.0",
diff --git a/frontend/src/root.js b/frontend/src/root.js
index 44df3670..7d2dd488 100644
--- a/frontend/src/root.js
+++ b/frontend/src/root.js
@@ -7,6 +7,8 @@ const ReactRouter = require('react-router');
const App = require('@containers/app');
const Store = require('@state/store');
+require('@ui/vendor/normalize.css');
+
const {
IntlProvider
} = ReactIntlRedux;
diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js
index 3c8ab616..d6f1af81 100644
--- a/frontend/webpack/base.js
+++ b/frontend/webpack/base.js
@@ -50,7 +50,7 @@ module.exports = {
],
loaders: [
'babel-loader'
- ],
+ ]
}, {
test: /\.json?$/,
exclude: /node_modules/,
@@ -60,7 +60,7 @@ module.exports = {
],
loaders: [
'json-loader'
- ],
+ ]
}, {
test: /\.png/,
exclude: /node_modules/,
@@ -68,19 +68,27 @@ module.exports = {
FRONTEND,
UI
],
- loaders: [
+ loader: [
'url-loader'
- ],
+ ]
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
+ exclude: /node_modules/,
+ loader: 'file-loader',
include: [
FRONTEND,
UI
- ],
- loaders: [
- 'file-loader'
- ],
+ ]
+ },
+ {
+ test: /\.css$/,
+ exclude: /node_modules/,
+ loaders: [ 'style-loader', 'css-loader' ],
+ include: [
+ FRONTEND,
+ UI
+ ]
}]
}
};
diff --git a/ui/.storybook/head.html b/ui/.storybook/head.html
index fe250b6b..20c9ece5 100644
--- a/ui/.storybook/head.html
+++ b/ui/.storybook/head.html
@@ -1 +1 @@
-
+
\ No newline at end of file
diff --git a/ui/package.json b/ui/package.json
index ac423003..f6d0e838 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -11,7 +11,7 @@
"lint": "make lint",
"test": "make test",
"build": "make compile",
- "storybook": "start-storybook -s ./src/shared/assets -p 6006",
+ "storybook": "start-storybook -s ./src/assets,./src/vendor -p 6006",
"build-storybook": "build-storybook"
},
"dependencies": {
diff --git a/ui/src/shared/assets/close.svg b/ui/src/assets/close.svg
similarity index 100%
rename from ui/src/shared/assets/close.svg
rename to ui/src/assets/close.svg
diff --git a/ui/src/shared/assets/input-confirm.svg b/ui/src/assets/input-confirm.svg
similarity index 100%
rename from ui/src/shared/assets/input-confirm.svg
rename to ui/src/assets/input-confirm.svg
diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js
index fd2069f0..ad05457a 100644
--- a/ui/src/components/base/index.js
+++ b/ui/src/components/base/index.js
@@ -24,459 +24,6 @@ module.exports = styled.div`
line-height: 1.5;
color: ${colors.fonts.regular};
background-color: #FFFFFF;
-
- /**************************************************************************
- * NORMALIZE.CSS *
- **************************************************************************/
-
- & article,
- & aside,
- & details,
- & figcaption,
- & figure,
- & footer,
- & header,
- & main,
- & menu,
- & nav,
- & section,
- & summary {
- display: block;
- }
-
- & audio,
- & canvas,
- & progress,
- & video {
- display: inline-block;
- }
-
- & audio:not([controls]) {
- display: none;
- height: 0;
- }
-
- & progress {
- vertical-align: baseline;
- }
-
- & template,
- & [hidden] {
- display: none;
- }
-
- & a {
- background-color: transparent;
- -webkit-text-decoration-skip: objects;
- }
-
- & a:active,
- & a:hover {
- outline-width: 0;
- }
-
- & abbr[title] {
- border-bottom: none;
- text-decoration: underline;
- text-decoration: underline dotted;
- }
-
- & b,
- & strong {
- font-weight: inherit;
- }
-
- & b,
- & strong {
- font-weight: bolder;
- }
-
- & dfn {
- font-style: italic;
- }
-
- & h1 {
- margin: 0.67em 0;
- }
-
- & mark {
- background-color: #ff0;
- color: #000;
- }
-
- & small {
- font-size: 80%;
- }
-
- & sub,
- & sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
- }
-
- & sub {
- bottom: -0.25em;
- }
-
- & sup {
- top: -0.5em;
- }
-
- & img {
- border-style: none;
- }
-
- & svg:not(:root) {
- overflow: hidden;
- }
-
- & code,
- & kbd,
- & pre,
- & samp {
- font-family: monospace, monospace;
- font-size: 1em;
- }
-
- & figure {
- margin: 1em ${remcalc(40)};
- }
-
- & hr {
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
- height: 0;
- overflow: visible;
- }
-
- & button,
- & input,
- & optgroup,
- & select,
- & textarea {
- font: inherit;
- margin: 0;
- }
-
- & optgroup {
- font-weight: bold;
- }
-
- & button,
- & input {
- overflow: visible;
- }
-
- & button,
- & select {
- text-transform: none;
- }
-
- & button,
- & [type="button"],
- & [type="reset"],
- & [type="submit"] {
- -webkit-appearance: button;
- }
-
- & button::-moz-focus-inner,
- & [type="button"]::-moz-focus-inner,
- & [type="reset"]::-moz-focus-inner,
- & [type="submit"]::-moz-focus-inner {
- border-style: none;
- padding: 0;
- }
-
- & button:-moz-focusring,
- & [type="button"]:-moz-focusring,
- & [type="reset"]:-moz-focusring,
- & [type="submit"]:-moz-focusring {
- outline: ${remcalc(1)} dotted ButtonText;
- }
-
- & fieldset {
- border: ${remcalc(1)} solid #c0c0c0;
- margin: 0 ${remcalc(2)};
- padding: 0.35em 0.625em 0.75em;
- }
-
- & legend {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- color: inherit;
- display: table;
- max-width: 100%;
- padding: 0;
- white-space: normal;
- }
-
- & textarea {
- overflow: auto;
- }
-
- & [type="checkbox"],
- & [type="radio"] {
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- padding: 0;
- }
-
- & [type="number"]::-webkit-inner-spin-button,
- & [type="number"]::-webkit-outer-spin-button {
- height: auto;
- }
-
- & [type="search"] {
- -webkit-appearance: textfield;
- outline-offset: ${remcalc(-2)};
- }
-
- & [type="search"]::-webkit-search-cancel-button,
- & [type="search"]::-webkit-search-decoration {
- -webkit-appearance: none;
- }
-
- & ::-webkit-input-placeholder {
- color: inherit;
- opacity: 0.54;
- }
-
- & ::-webkit-file-upload-button {
- -webkit-appearance: button;
- font: inherit;
- }
-
- /**************************************************************************
- * BOOTSTRAP REBOOT *
- **************************************************************************/
-
- & *,
- & *::before,
- & *::after {
- box-sizing: inherit;
- }
-
- & @-ms-viewport {
- width: device-width;
- }
- & [tabindex="-1"]:focus {
- outline: none !important;
- }
-
- /**
- * Typography
- */
-
- & h1,
- & h2,
- & h3,
- & h4,
- & h5,
- & h6 {
- margin-top: 0;
- margin-bottom: .5rem;
- }
-
- & p {
- margin-top: 0;
- margin-bottom: 1rem;
- }
-
- & abbr[title],
- & abbr[data-original-title] {
- cursor: help;
- border-bottom: ${remcalc(1)} dotted ${typography.abbrBorderColor};
- }
-
- & address {
- margin-bottom: 1rem;
- font-style: normal;
- line-height: inherit;
- }
-
- & ol,
- & ul,
- & dl {
- margin-top: 0;
- margin-bottom: 1rem;
- }
-
- & ol ol,
- & ul ul,
- & ol ul,
- & ul ol {
- margin-bottom: 0;
- }
-
- & dt {
- font-weight: ${typography.dtFontWeight};
- }
-
- & dd {
- margin-bottom: .5rem;
- margin-left: 0; /* Undo browser default */
- }
-
- & blockquote {
- margin: 0 0 1rem;
- }
-
- /**
- * Links
- */
-
- & a {
- color: ${colors.brandPrimaryLink};
- text-decoration: underline;
-
- &:focus,
- &:hover {
- text-decoration: none;
- }
-
- &:focus {
- outline: ${remcalc(5)} auto -webkit-focus-ring-color;
- outline-offset: ${remcalc(-2)};
- }
- }
-
- & a:not([href]):not([tabindex]) {
- color: inherit;
- text-decoration: none;
-
- &:focus,
- &:hover {
- text-decoration: none;
- }
-
- &:focus {
- outline: none;
- }
- }
-
- /**
- * Code
- */
-
- & pre {
- margin-top: 0;
- margin-bottom: 1rem;
- overflow: auto;
- }
-
- /**
- * Figures
- */
-
- & figure {
- margin: 0 0 1rem;
- }
-
- /**
- * Images
- */
-
- & img {
- vertical-align: middle;
- }
-
- & [role="button"] {
- cursor: pointer;
- }
-
- & a,
- & area,
- & button,
- & [role="button"],
- & input,
- & label,
- & select,
- & summary,
- & textarea {
- touch-action: manipulation;
- }
-
- /**
- * Tables
- */
-
- & table {
- border-collapse: collapse;
- background-color: ${tables.bg};
- }
-
- & caption {
- padding-top: ${tables.cellPadding};
- padding-bottom: ${tables.cellPadding};
- color: ${typography.textMuted};
- text-align: left;
- caption-side: bottom;
- }
-
- & th {
- text-align: left;
- }
-
- /**
- * Forms
- */
-
- & label {
- display: inline-block;
- margin-bottom: .5rem;
- }
-
- & button:focus {
- outline: ${remcalc(1)} dotted;
- outline: ${remcalc(5)} auto -webkit-focus-ring-color;
- }
-
- & input,
- & button,
- & select,
- & textarea {
- line-height: inherit;
- }
-
- & input[type="radio"],
- & input[type="checkbox"] {
- &:disabled {
- cursor: ${forms.cursorDisabled};
- }
- }
-
- & input[type="date"],
- & input[type="time"],
- & input[type="datetime-local"],
- & input[type="month"] {
- -webkit-appearance: listbox;
- }
-
- & textarea {
- resize: vertical;
- }
-
- & fieldset {
- min-width: 0;
- padding: 0;
- margin: 0;
- border: 0;
- }
-
- & legend {
- display: block;
- width: 100%;
- padding: 0;
- margin-bottom: .5rem;
- font-size: 1.5rem;
- line-height: inherit;
- }
-
- & input[type="search"] {
- -webkit-appearance: none;
- }
`;
module.exports.global = require('./global');
diff --git a/ui/src/shared/assets/close.png b/ui/src/shared/assets/close.png
deleted file mode 100644
index 94fca5fa..00000000
Binary files a/ui/src/shared/assets/close.png and /dev/null differ
diff --git a/ui/src/vendor/normalize.css b/ui/src/vendor/normalize.css
new file mode 100644
index 00000000..63f057f6
--- /dev/null
+++ b/ui/src/vendor/normalize.css
@@ -0,0 +1,460 @@
+
+/**
+ * 1. Change the default font family in all browsers (opinionated).
+ * 2. Correct the line height in all browsers.
+ * 3. Prevent adjustments of font size after orientation changes in
+ * IE on Windows Phone and in iOS.
+ */
+
+/* Document
+ ========================================================================== */
+
+html {
+ font-family: sans-serif; /* 1 */
+ line-height: 1.15; /* 2 */
+ -ms-text-size-adjust: 100%; /* 3 */
+ -webkit-text-size-adjust: 100%; /* 3 */
+}
+
+/* Sections
+ ========================================================================== */
+
+/**
+ * Remove the margin in all browsers (opinionated).
+ */
+
+body {
+ margin: 0;
+}
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+article,
+aside,
+footer,
+header,
+nav,
+section {
+ display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+ font-size: 2em;
+ margin: 0.67em 0;
+}
+
+/* Grouping content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in IE.
+ */
+
+figcaption,
+figure,
+main { /* 1 */
+ display: block;
+}
+
+/**
+ * Add the correct margin in IE 8.
+ */
+
+figure {
+ margin: 1em 40px;
+}
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+ box-sizing: content-box; /* 1 */
+ height: 0; /* 1 */
+ overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+ ========================================================================== */
+
+/**
+ * 1. Remove the gray background on active links in IE 10.
+ * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
+ */
+
+a {
+ background-color: transparent; /* 1 */
+ -webkit-text-decoration-skip: objects; /* 2 */
+}
+
+/**
+ * Remove the outline on focused links when they are also active or hovered
+ * in all browsers (opinionated).
+ */
+
+a:active,
+a:hover {
+ outline-width: 0;
+}
+
+/**
+ * 1. Remove the bottom border in Firefox 39-.
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+ border-bottom: none; /* 1 */
+ text-decoration: underline; /* 2 */
+ text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
+ */
+
+b,
+strong {
+ font-weight: inherit;
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+ font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+ font-family: monospace, monospace; /* 1 */
+ font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font style in Android 4.3-.
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/**
+ * Add the correct background and color in IE 9-.
+ */
+
+mark {
+ background-color: #ff0;
+ color: #000;
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+ font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+sup {
+ top: -0.5em;
+}
+
+/* Embedded content
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+audio,
+video {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in iOS 4-7.
+ */
+
+audio:not([controls]) {
+ display: none;
+ height: 0;
+}
+
+/**
+ * Remove the border on images inside links in IE 10-.
+ */
+
+img {
+ border-style: none;
+}
+
+/**
+ * Hide the overflow in IE.
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+/* Forms
+ ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers (opinionated).
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+ font-family: sans-serif; /* 1 */
+ font-size: 100%; /* 1 */
+ line-height: 1.15; /* 1 */
+ margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input { /* 1 */
+ overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select { /* 1 */
+ text-transform: none;
+}
+
+/**
+ * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
+ * controls in Android 4.
+ * 2. Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+html [type="button"], /* 1 */
+[type="reset"],
+[type="submit"] {
+ -webkit-appearance: button; /* 2 */
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+ border-style: none;
+ padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+ outline: 1px dotted ButtonText;
+}
+
+/**
+ * Change the border, margin, and padding in all browsers (opinionated).
+ */
+
+fieldset {
+ border: 1px solid #c0c0c0;
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ * `fieldset` elements in all browsers.
+ */
+
+legend {
+ box-sizing: border-box; /* 1 */
+ color: inherit; /* 2 */
+ display: table; /* 1 */
+ max-width: 100%; /* 1 */
+ padding: 0; /* 3 */
+ white-space: normal; /* 1 */
+}
+
+/**
+ * 1. Add the correct display in IE 9-.
+ * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+ display: inline-block; /* 1 */
+ vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Remove the default vertical scrollbar in IE.
+ */
+
+textarea {
+ overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10-.
+ * 2. Remove the padding in IE 10-.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+ -webkit-appearance: button; /* 1 */
+ font: inherit; /* 2 */
+}
+
+/* Interactive
+ ========================================================================== */
+
+/*
+ * Add the correct display in IE 9-.
+ * 1. Add the correct display in Edge, IE, and Firefox.
+ */
+
+details, /* 1 */
+menu {
+ display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+ display: list-item;
+}
+
+/* Scripting
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 9-.
+ */
+
+canvas {
+ display: inline-block;
+}
+
+/**
+ * Add the correct display in IE.
+ */
+
+template {
+ display: none;
+}
+
+/* Hidden
+ ========================================================================== */
+
+/**
+ * Add the correct display in IE 10-.
+ */
+
+[hidden] {
+ display: none;
+}
\ No newline at end of file