chore(client): Move client app to /client

client/src/components/helpers/ButtonSpacer.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function ButtonSpacer() {
+  return (
+    <div className='button-spacer' />
+  );
+}
+
+ButtonSpacer.displayName = 'ButtonSpacer';
+
+export default ButtonSpacer;

client/src/components/helpers/FullWidthRow.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'react-bootstrap';
+
+function FullWidthRow({ children }) {
+  return (
+    <Row>
+      <Col sm={ 8 } smOffset={ 2 } xs={ 12 }>
+        { children }
+      </Col>
+    </Row>
+  );
+}
+
+FullWidthRow.displayName = 'FullWidthRow';
+FullWidthRow.propTypes = {
+  children: PropTypes.any
+};
+
+export default FullWidthRow;

client/src/components/helpers/Loader.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+
+function Loader() {
+  return (
+    <div className='full-size'>
+      <Helmet>
+        <link href='/css/loader.css' rel='stylesheet' />
+      </Helmet>
+      <div className='loader full-size'>
+        <div className='ball-scale-ripple-multiple'>
+          <div/>
+          <div/>
+          <div/>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Loader.displayName = 'Loader';
+
+export default Loader;

client/src/components/helpers/SkeletonSprite.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import styles from './skeletonStyles';
+
+function SkeletonSprite() {
+  return (
+    <div className='sprite-container'>
+      <style dangerouslySetInnerHTML={ { __html: styles } } />
+      <svg className='sprite-svg'>
+        <rect
+          className='sprite'
+          fill='#ccc'
+          height='100%'
+          stroke='#ccc'
+          width='2px'
+          x='0'
+          y='0'
+        />
+      </svg>
+    </div>
+  );
+}
+
+SkeletonSprite.displayName = 'SkeletonSprite';
+
+export default SkeletonSprite;

client/src/components/helpers/SlimWidthRow.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Row, Col } from 'react-bootstrap';
+
+function SlimWidthRow({ children, ...restProps }) {
+  return (
+    <Row {...restProps}>
+      <Col md={ 6 } mdOffset={ 3 } sm={ 12 }>
+        { children }
+      </Col>
+    </Row>
+  );
+}
+
+SlimWidthRow.displayName = 'SlimWidthRow';
+SlimWidthRow.propTypes = {
+  children: PropTypes.any
+};
+
+export default SlimWidthRow;

client/src/components/helpers/Spacer.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Spacer = () => (
+  <div className='spacer' style={{ marginTop: '50px', marginBottom: '50px' }} />
+);
+
+export default Spacer;

client/src/components/helpers/index.js

@@ -0,0 +1,6 @@
+export { default as ButtonSpacer } from './ButtonSpacer';
+export { default as FullWidthRow } from './FullWidthRow';
+export { default as SlimWidthRow } from './SlimWidthRow';
+export { default as Loader } from './Loader';
+export { default as SkeletonSprite } from './SkeletonSprite';
+export { default as Spacer } from './Spacer';

client/src/components/helpers/skeletonStyles.js

@@ -0,0 +1,60 @@
+export default `
+
+.sprite-container {
+  height: 100%;
+  width: 100%;
+}
+
+.sprite-svg {
+  height: 100%;
+  width: 100%;
+  background: #aaa;
+
+}
+
+@-webkit-keyframes shimmer{
+  0% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+    stroke-width: 2px;
+  }
+  35% {
+    stroke-width: 30px;
+  }
+  100% {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+    stroke-width: 2px;
+  }
+}
+
+@keyframes shimmer{
+  0% {
+    -webkit-transform: translateX(0%);
+    transform: translateX(0%);
+    stroke-width: 2px;
+  }
+  35% {
+    stroke-width: 30px;
+  }
+  100% {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+    stroke-width: 2px;
+  }
+}
+
+.sprite {
+  -webkit-animation-name: shimmer;
+  animation-name: shimmer;
+  width: 2px;
+  -webkit-animation-duration: 2s;
+  animation-duration: 2s;
+  -webkit-animation-timing-function: ease-in-out;
+  animation-timing-function: ease-in-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+  -webkit-animation-direction: normal;
+  animation-direction: normal;
+}
+`;