Added modules with actions, reducer, selectors and structured style

config/paths.js

@@ -55,9 +55,9 @@ module.exports = {
   appBuild: resolveApp('build'),
   appPublic: resolveApp('public'),
   appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveModule(resolveApp, 'src/index'),
+  appIndexJs: resolveModule(resolveApp, 'src/app/main'),
   appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
+  appSrc: resolveApp('src/app'),
   appTsConfig: resolveApp('tsconfig.json'),
   appJsConfig: resolveApp('jsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),

package.json

@@ -1,10 +1,9 @@
 {
   "name": "adobeassignment",
-  "homepage": "http://mohiit1502.github.io/adobeassignment",
+  "homepage": "http://mohiit1502.github.io/",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@babel/core": "7.9.0",
     "@svgr/webpack": "4.3.3",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
@@ -40,6 +39,7 @@
     "jest-watch-typeahead": "0.4.2",
     "jquery": "^3.4.1",
     "mini-css-extract-plugin": "0.9.0",
+    "node-sass": "^4.13.1",
     "optimize-css-assets-webpack-plugin": "5.0.3",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.1.0",
@@ -51,7 +51,13 @@
     "react-app-polyfill": "^1.0.6",
     "react-dev-utils": "^10.2.1",
     "react-dom": "^16.13.1",
+    "react-loadable": "^5.5.0",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.1.2",
     "react-test-renderer": "^16.13.1",
+    "redux": "^4.0.5",
+    "redux-actions": "^2.6.5",
+    "redux-analytics": "^0.3.1",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
     "reselect-immutable-helpers": "^1.2.2",
@@ -95,6 +101,12 @@
     ]
   },
   "devDependencies": {
+    "@babel/cli": "^7.8.4",
+    "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-react-jsx": "^7.9.4",
+    "@babel/preset-env": "^7.9.0",
+    "@babel/preset-react": "^7.9.4",
+    "body-parser": "^1.19.0",
     "gh-pages": "^2.2.0",
     "plop": "^2.6.0"
   },
@@ -150,7 +162,8 @@
   },
   "babel": {
     "presets": [
-      "react-app"
+      "@babel/env",
+      "@babel/react"
     ]
   }
 }

src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

src/App.js

@@ -1,26 +0,0 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/app/actions.js

@@ -0,0 +1,2 @@
+export const initializeApp = () => {
+}

src/app/components/index.js

@@ -0,0 +1,9 @@
+/* PLOP_INJECT_IMPORT */
+import Header from './Header';
+import PageLoader from './PageLoader';
+
+export {
+  /* PLOP_INJECT_EXPORT */
+  Header,
+  PageLoader
+}

src/app/components/molecules/Header/Header.component.scss

@@ -0,0 +1,3 @@
+.c-Header {
+  
+}

src/app/components/molecules/Header/Header.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const Header = props => {
+  return (
+    <div className='c-Header'>
+    </div>
+  );
+};
+
+Header.defaultProps = {
+
+};
+
+Header.propTypes = {
+
+};
+
+export default Header;

src/app/components/molecules/Header/Header.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Header from './Header';
+
+describe('Header', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/molecules/Header/index.js

@@ -0,0 +1,3 @@
+import Header from './Header';
+
+export default Header;

src/app/components/molecules/PageLoader/PageLoader.component.scss

@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
+
+.c-PageLoader {
+	margin-top: 50%;	
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	.is-animate {
+			background: #ffb200;
+			box-sizing: border-box;
+			font-size: 66px;
+			display: -webkit-inline-box;
+			padding: 14px;
+			border-radius: 7px;
+	}
+	.is-animate > div {
+			animation-name: style;
+			display: -webkit-inline-box;
+			color: #fff;
+			padding: 9px;
+			background: #ffb200;
+			font-family: 'Indie Flower', cursive;
+			box-shadow: 2px 2px 9px 2px;
+	}
+	.l{
+		animation: letterspacing 1s infinite alternate cubic-bezier(.2, 0, 0, 1);
+	}
+	
+	.is-animate > div {
+		animation-duration: 1s;
+		animation-fill-mode: both;
+		animation-iteration-count: infinite;
+	}
+	
+	.is-animate > div:nth-child(1) { animation-delay: 0.0s }
+	.is-animate > div:nth-child(2) { animation-delay: 0.1s }
+	.is-animate > div:nth-child(3) { animation-delay: 0.2s }
+	.is-animate > div:nth-child(4) { animation-delay: 0.3s }
+	.is-animate > div:nth-child(5) { animation-delay: 0.4s }
+	.is-animate > div:nth-child(6) { animation-delay: 0.5s }
+	.is-animate > div:nth-child(7) { animation-delay: 0.6s }
+	
+	
+	@keyframes style {
+		from {
+			transform: scale3d(1, 1, 1);
+		}
+		30% {
+			box-shadow: 0px 0px 0px 0px;
+			transform: scale3d(1.25, 0.75, 1);
+		}
+		40% {
+			transform: scale3d(0.75, 1.25, 1);
+		}
+		50% {
+			transform: scale3d(1.15, 0.85, 1);
+		}
+		65% {
+			transform: scale3d(.95, 1.05, 1);
+		}
+		75% {
+			transform: scale3d(1.05, .95, 1);
+		}
+		to {
+			transform: scale3d(1, 1, 1);
+		}
+	}
+	
+	
+	@keyframes letterspacing {
+		0% {
+			filter: blur(0.1rem);
+		}      
+		100% {
+			filter: blur(0.5rem);
+		}
+		to {
+			letter-spacing: none;
+			filter: blur(0rem);
+		}
+	}
+}

src/app/components/molecules/PageLoader/PageLoader.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+const PageLoader = props => {
+  return (
+      <div className='c-PageLoader'>
+        <div className='is-animate'>
+          <div className='l'>l</div>
+          <div className='l'>o</div>
+          <div className='l'>a</div>
+          <div className='l'>d</div>
+          <div className='l'>i</div>
+          <div className='l'>n</div>
+          <div className='l'>g</div>
+        </div>
+      </div>
+  )
+};
+
+PageLoader.defaultProps = {
+
+};
+
+PageLoader.propTypes = {
+
+};
+
+export default PageLoader;

src/app/components/molecules/PageLoader/PageLoader.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import PageLoader from './PageLoader';
+
+describe('PageLoader', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/components/molecules/PageLoader/index.js

@@ -0,0 +1,3 @@
+import PageLoader from './PageLoader.jsx';
+
+export default PageLoader;

src/app/index.scss

@@ -0,0 +1,20 @@
+@charset 'UTF-8';
+
+@import 'styles/variables';
+@import 'styles/base';
+@import 'styles/components';
+@import 'styles/pages';
+
+.abcRioButtonBlue {
+  background-color: white!important;
+  color: #585f6b!important;
+  border-radius: 3px;
+}
+
+.g-signin2, .fb-login-button {
+  display: flex!important;
+  justify-content: center;
+  margin-bottom: 10px;
+  border-radius: 5px;
+}
+

src/app/main.js

@@ -0,0 +1,24 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import thunk from 'redux-thunk'
+import Immutable from 'immutable'
+import {createStore, applyMiddleware, compose} from 'redux'
+// import * as serviceWorker from '../serviceWorker';
+import Router from './router';
+import reducer from './reducer'
+import 'bootstrap/dist/css/bootstrap.min.css'
+import './index.scss'
+
+const composeEnhancers =
+  typeof window === 'object' &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+        serialize: { // prettier-ignore
+            immutable: Immutable
+        }
+    }) : compose;
+const store = createStore(reducer, composeEnhancers(applyMiddleware(thunk)))
+
+ReactDOM.render(<Router store={store} />, document.getElementById('root'));
+
+// serviceWorker.unregister();

src/app/pages/Cart/Cart.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Cart.module.scss';
+
+const Cart = props => {
+  return (
+    <div className={styles.root}>
+    </div>
+  );
+};
+
+Cart.defaultProps = {
+
+};
+
+Cart.propTypes = {
+
+};
+
+export default Cart;

src/app/pages/Cart/Cart.module.scss

@@ -0,0 +1,3 @@
+.c-Cart {
+  
+}

src/app/pages/Cart/Cart.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Cart from './Cart';
+
+describe('Cart', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/pages/Cart/actions.js

@@ -0,0 +1,25 @@
+export const UPDATE_FORM_VALUES = 'UPDATE_BILLING_FORM_VALUES'
+export const UPDATE_FORM_ERRORS = 'UPDATE_BILLING_FORM_ERRORS'
+
+export const initializeLogin = () => (dispatch) => {
+    // return Promise.all([
+    //     dispatch(initializeApp())
+    // ])
+    // .then(() => ({statusCode: 200}))
+    // .catch((err) => ({statusCode: err.statusCode || 500}))
+}
+
+export const updateFormValues = (formValues) => {
+    return {
+        type: UPDATE_FORM_VALUES,
+        payload: formValues
+    }
+}
+
+export const updateFormErrors = (formErrors) => {
+    return {
+        type: UPDATE_FORM_ERRORS,
+        payload: formErrors
+    }
+}
+    

src/app/pages/Cart/index.js

@@ -0,0 +1,3 @@
+import Cart from './Cart';
+
+export default Cart;

src/app/pages/Cart/reducer.js

@@ -0,0 +1,17 @@
+import Immutable from 'immutable'
+
+import {UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from './actions'
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case UPDATE_FORM_ERRORS:
+        case UPDATE_FORM_VALUES:
+            return state.mergeDeep(action.payload)
+        default:
+            return state
+    }
+}
+
+export default reducer

src/app/pages/Cart/selectors.js

@@ -0,0 +1,14 @@
+import {createSelector} from 'reselect'
+import {createGetSelector} from 'reselect-immutable-helpers'
+
+const getData = ({data}) => data
+
+export const getLogin = createSelector(
+    getData,
+    (dataState) => {
+        return dataState.pages.cart
+    }
+)
+
+export const getFormValues = createGetSelector(getLogin, 'formValues')
+export const getFormErrors = createGetSelector(getLogin, 'formErrors')

src/app/pages/Login/Login.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Login.module.scss';
+
+const Login = props => {
+  return (
+    <div className={styles.root}>
+      <p>This is the login module</p>
+    </div>
+  );
+};
+
+Login.defaultProps = {
+
+};
+
+Login.propTypes = {
+
+};
+
+export default Login;

src/app/pages/Login/Login.module.scss

@@ -0,0 +1,3 @@
+.c-Login {
+  
+}

src/app/pages/Login/Login.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Login from './Login';
+
+describe('Login', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/pages/Login/actions.js

@@ -0,0 +1,28 @@
+export const LOGIN_DATA_STATE_RECEIVED = 'LOGIN_DATA_STATE_RECEIVED'
+export const UPDATE_FORM_VALUES = 'UPDATE_BILLING_FORM_VALUES'
+export const UPDATE_FORM_ERRORS = 'UPDATE_BILLING_FORM_ERRORS'
+
+export const updateLoginDataState = (payload) => ({type: LOGIN_DATA_STATE_RECEIVED, payload})
+
+export const initializeLogin = () => (dispatch) => {
+    // return Promise.all([
+    //     dispatch(initializeApp())
+    // ])
+    // .then(() => ({statusCode: 200}))
+    // .catch((err) => ({statusCode: err.statusCode || 500}))
+}
+
+export const updateFormValues = (formValues) => {
+    return {
+        type: UPDATE_FORM_VALUES,
+        payload: formValues
+    }
+}
+
+export const updateFormErrors = (formErrors) => {
+    return {
+        type: UPDATE_FORM_ERRORS,
+        payload: formErrors
+    }
+}
+    

src/app/pages/Login/index.js

@@ -0,0 +1,3 @@
+import Login from './Login';
+
+export default Login;

src/app/pages/Login/reducer.js

@@ -0,0 +1,18 @@
+import Immutable from 'immutable'
+
+import {LOGIN_DATA_STATE_RECEIVED, UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from './actions'
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case LOGIN_DATA_STATE_RECEIVED:
+        case UPDATE_FORM_ERRORS:
+        case UPDATE_FORM_VALUES:
+            return state.mergeDeep(action.payload)
+        default:
+            return state
+    }
+}
+
+export default reducer

src/app/pages/Login/selectors.js

@@ -0,0 +1,14 @@
+import {createSelector} from 'reselect'
+import {createGetSelector} from 'reselect-immutable-helpers'
+
+const getData = ({data}) => data
+
+export const getLogin = createSelector(
+    getData,
+    (dataState) => {
+        return dataState.pages.login
+    }
+)
+
+export const getFormValues = createGetSelector(getLogin, 'formValues')
+export const getFormErrors = createGetSelector(getLogin, 'formErrors')

src/app/pages/PLP/Plp.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './Plp.module.scss';
+
+const Plp = props => {
+  return (
+    <div className={styles.root}>
+    </div>
+  );
+};
+
+Plp.defaultProps = {
+
+};
+
+Plp.propTypes = {
+
+};
+
+export default Plp;

src/app/pages/PLP/Plp.module.scss

@@ -0,0 +1,3 @@
+.c-Plp {
+  
+}

src/app/pages/PLP/Plp.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import Plp from './Plp';
+
+describe('Plp', () => {
+   it('renders without error', () => {
+
+   });
+});

src/app/pages/PLP/actions.js

@@ -0,0 +1,25 @@
+export const UPDATE_FORM_VALUES = 'UPDATE_BILLING_FORM_VALUES'
+export const UPDATE_FORM_ERRORS = 'UPDATE_BILLING_FORM_ERRORS'
+
+export const initializeLogin = () => (dispatch) => {
+    // return Promise.all([
+    //     dispatch(initializeApp())
+    // ])
+    // .then(() => ({statusCode: 200}))
+    // .catch((err) => ({statusCode: err.statusCode || 500}))
+}
+
+export const updateFormValues = (formValues) => {
+    return {
+        type: UPDATE_FORM_VALUES,
+        payload: formValues
+    }
+}
+
+export const updateFormErrors = (formErrors) => {
+    return {
+        type: UPDATE_FORM_ERRORS,
+        payload: formErrors
+    }
+}
+    

src/app/pages/PLP/index.js

@@ -0,0 +1,3 @@
+import Plp from './Plp';
+
+export default Plp;

src/app/pages/PLP/reducer.js

@@ -0,0 +1,17 @@
+import Immutable from 'immutable'
+
+import {UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from './actions'
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case UPDATE_FORM_ERRORS:
+        case UPDATE_FORM_VALUES:
+            return state.mergeDeep(action.payload)
+        default:
+            return state
+    }
+}
+
+export default reducer

src/app/pages/PLP/selectors.js

@@ -0,0 +1,14 @@
+import {createSelector} from 'reselect'
+import {createGetSelector} from 'reselect-immutable-helpers'
+
+const getData = ({data}) => data
+
+export const getLogin = createSelector(
+    getData,
+    (dataState) => {
+        return dataState.pages.plp
+    }
+)
+
+export const getFormValues = createGetSelector(getLogin, 'formValues')
+export const getFormErrors = createGetSelector(getLogin, 'formErrors')

src/app/pages/index.js

@@ -0,0 +1,11 @@
+/* PLOP_INJECT_IMPORT */
+import Cart from './Cart';
+import Login from './Login';
+import Plp from './PLP';
+
+export {
+  /* PLOP_INJECT_EXPORT */
+	Cart,
+	Login,
+	Plp,
+}

src/app/reducer.js

@@ -0,0 +1,15 @@
+import {combineReducers} from 'redux'
+
+import loginReducer from './pages/Login/reducer'
+import plpReducer from './pages/PLP/reducer'
+import cartReducer from './pages/Cart/reducer'
+
+export default combineReducers({
+    data: combineReducers({
+        pages: combineReducers({
+            login: loginReducer,
+            plp: plpReducer,
+            cart: cartReducer
+        })
+    })
+})

src/app/router.jsx

@@ -0,0 +1,44 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import {Provider} from 'react-redux'
+import {BrowserRouter, Route} from 'react-router-dom';
+import PageLoader from './components/molecules/PageLoader'
+import Loadable from 'react-loadable'
+
+export const LoadableLogin = Loadable({
+    loader: () => import('./pages/Login'),
+    loading: PageLoader
+})
+
+export const LoadablePLP = Loadable({
+    loader: () => import('./pages/PLP'),
+    loading: PageLoader
+})
+
+export const LoadableCart = Loadable({
+    loader: () => import('./pages/Cart'),
+    loading: PageLoader
+})
+
+class Router extends React.Component {
+
+    render() {
+        const {store} = this.props
+        return (
+            <Provider store={store}>
+                <BrowserRouter>
+                    <Route exact path="/" component={LoadableLogin} />
+                    <Route path="/login" component={LoadableLogin} />
+                    <Route path="/view/plp" component={LoadablePLP} />
+                    <Route path="/view/cart" component={LoadableCart} />
+                </BrowserRouter>
+            </Provider>
+        )
+    }
+}
+
+Router.propTypes = {
+    store: PropTypes.object
+}
+
+export default Router

src/app/styles/_base.scss

@@ -0,0 +1,5 @@
+@import 'base/forms';
+@import 'base/general';
+@import 'base/lists';
+@import 'base/material';
+@import 'base/typography';

src/app/styles/_components.scss

@@ -0,0 +1,5 @@
+// Components
+// ===
+// @import '../components/atoms/InputField/InputField.component';
+@import '../components/molecules/PageLoader/PageLoader.component';
+// @import '../preloader/preload';

src/app/styles/_pages.scss

@@ -0,0 +1,6 @@
+// Pages
+// ===
+
+@import '../pages/PLP/Plp.module';
+@import '../pages/Login/Login.module';
+@import '../pages/Cart/Cart.module';

src/app/styles/_variables.scss

@@ -0,0 +1,230 @@
+// Project-Wide Variables
+// ===
+//
+// Edit these as needed. Some guidelines:
+//
+// - Names should be lowercase and dash-separated;
+// - Qualifiers should be added to the beginning of related variables: use
+//   `$small-font-size`, not `$font-size-small`;
+// - Numeric scales should use increments of 10; these numbers are arbitrary and
+//   should not map to actual values. If really necessary, additional values can
+//   be added in between, e.g. $neutral-15 between 10 and 20.
+//
+//
+// Table of Contents
+// ---
+//
+//     [AAA] Basic Layout
+//     [BBB] Responsive Layout
+//     [CCC] Typography
+//     [DDD] Color Palette
+//     [EEE] Appearance
+//     [FFF] Z-Index
+//     [GGG] Shorthands
+
+
+// [AAA] Basic Layout
+// ---
+
+// Basic unit for spacing and alignment; 6 to 12px recommended. Apply in whole
+// or half multiples.
+$sub-unit: 4px;
+$unit: 8px;
+
+// Standard tap-target size
+$tap-size: 44px;
+
+// Container max-width.
+$max-width: 1280px;
+
+// Content Height Calculations
+$header-height: 64px;
+$footer-height: 173px;
+$content-height: calc(100vh - #{$header-height} - #{$footer-height});
+
+// [BBB] Responsive Layout
+// ---
+//
+// Media query breakpoints and grid setup. Please see Mobify's Responsive Best
+// Practices doc here: https://bit.ly/2tmRnEi, and our Responsive Grid
+// documentation here: http://docs.mobify.com/latest/guides/responsive-grid/
+//
+// Note: $small-breakpoint isn't needed, since it is 0px
+
+$medium-breakpoint: 600px;
+$large-breakpoint: 960px;
+$xlarge-breakpoint: $max-width;
+
+$susy: (
+    // Add color to show the columns and gutters
+    'svg-grid-colors': hsl(0, 0%, 95%),
+    'columns': susy-repeat(4),
+    'gutters': 12px
+);
+
+$medium-layout: (
+    'svg-grid-colors': hsl(0, 0%, 95%),
+    'columns': susy-repeat(12),
+    'gutters': 12px
+);
+
+$large-layout: (
+    'svg-grid-colors': hsl(0, 0%, 95%),
+    'columns': susy-repeat(12),
+    'gutters': 24px
+);
+
+
+// [CCC] Typography
+// ---
+// $font-family: 'San Francisco', 'Roboto', 'Fira Sans', 'Segoe UI', sans-serif;
+$font-family: Verdana, Geneva, sans-serif; 
+$header-font-family: 'Avenir Next Condensed', 'Roboto Condensed', 'Helvetica Neue', 'Roboto', sans-serif;
+$loaded-header-font-family: 'Roboto', $header-font-family;
+
+// Line height
+$huge-line-height: 32px;
+$bigger-line-height: 28px;
+$big-line-height: 24px;
+$line-height: 20px;
+$small-line-height: 16px;
+$smaller-line-height: 12px;
+$tiny-line-height: 8px;
+
+// Font sizes
+$huge-font-size: 28px;
+$bigger-font-size: 24px;
+$big-font-size: 20px;
+$font-size: 16px;
+$small-font-size: 14px;
+$smaller-font-size: 12px;
+$tiny-font-size: 8px;
+
+// Font weight
+$thin-font-weight: 100;
+$extra-light-font-weight: 200;
+$light-font-weight: 300;
+$regular-font-weight: 400;
+$medium-font-weight: 500;
+$semi-bold-font-weight: 600;
+$bold-font-weight: 700;
+
+// [DDD] Color Palette
+// ---
+
+// Neutrals
+$neutral-00: #fff;
+$neutral-10: #f7f7f7;
+$neutral-15: #eee;
+$neutral-20: #d5d5d5;
+$neutral-30: #bfbfbf;
+$neutral-40: #999;
+$neutral-50: #696969;
+$neutral-60: #333;
+$neutral-70: #000;
+
+// Brand colors
+$brand-color: #017e9b; // blue
+$secondary-brand-color: #005569;
+$tertiary-brand-color: #83bdcb;
+$quaternary-brand-color: #bfdfe6;
+
+// UI Kit colors
+$ui-brand-color: #005c83; // dark blue
+
+// Accent colors
+$accent-color: #ff852c; // orange
+$light-accent-color: lighten($accent-color, 15%);
+$dark-accent-color: darken($accent-color, 15%);
+
+// Primary Action
+$primary-action-color: #dc0a3c;
+$light-primary-action-color: lighten($primary-action-color, 15%);
+$dark-primary-action-color: darken($primary-action-color, 15%);
+
+// Secondary Action
+$secondary-action-color: #ff852c;
+$light-secondary-action-color: lighten($secondary-action-color, 15%);
+$dark-secondary-action-color: darken($secondary-action-color, 15%);
+
+// Success colors
+$success-color: #037b30;
+$light-success-color: lighten($success-color, 15%);
+$dark-success-color: darken($success-color, 15%);
+
+// Error colors
+$error-color: #c70936;
+$light-error-color: lighten($error-color, 15%);
+$feedback-error-color: #f8e7eb;
+$dark-error-color: darken($error-color, 15%);
+
+// Sale color
+$sale-color: $error-color;
+
+// Social colors
+$facebook-color: #3a5a93;
+$twitter-color: #55aace;
+$instagram-color: #405de6;
+$pinterest-color: #bd081c;
+$youtube-color: #e52d27;
+$google-plus-color: #dd4b39;
+$yelp-color: #af0606;
+
+
+// [EEE] Appearance
+// ---
+
+$font-color: $neutral-60;
+
+$link-color: $ui-brand-color;
+$active-link-color: $dark-accent-color;
+
+$focus-color: $brand-color;
+
+$border-color: $neutral-20;
+$border-radius: 4px;
+
+$input-background-color: $neutral-00;
+$input-border-color: $border-color;
+$focused-input-border-color: $secondary-brand-color;
+$disabled-input-color: $neutral-40;
+$disabled-input-background-color: $neutral-15;
+$disabled-button-background-color: $neutral-15;
+$horizontal-input-padding: $unit;
+$vertical-input-padding: $unit;
+
+$background-color: $neutral-10;
+$overlay-color: rgba($neutral-00, 0.85);
+
+
+// [FFF] Z-Index
+// ---
+
+// Organizes z-index usage by name. Values can be incremented/decremented
+// slightly as necessary. eg. $z1-layer + 1;
+
+$z1-depth: 1;    // background
+$z2-depth: 10;   // icon or other ui element
+$z3-depth: 100;  // modal shade or similar
+$z4-depth: 1000; // modal dialog or similar
+
+
+// [GGG] Shorthands
+// ---
+
+$border: 1px solid $border-color;
+$light-border: 1px solid $neutral-15;
+$input-padding: $vertical-input-padding $horizontal-input-padding;
+
+$box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
+$large-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
+$inset-box-shadow: inset 0 2px 2px -2px rgba(0, 0, 0, 0.3), inset 0 -2px 2px -2px rgba(0, 0, 0, 0.3);
+$input-box-shadow: inset 0 0 5px 0 rgba(0, 0, 0, 0.3);
+$themeColor-Light: #f3e2c7;
+$themeColor-Dark:#252525;
+$theme-font: verdana, sans-serif;
+$theme-supplementer: #f39c12;
+$font-size-desktop-h5: 1.25em;
+$font-size-mobile-h5: 0.8em;
+$font-size-desktop-p: 1.1em;
+$font-size-mobile-p: 0.7em;

src/app/styles/base/_forms.scss

@@ -0,0 +1,333 @@
+// Forms
+// ===
+
+$base__radio-checkmark: 'data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="#ffffff"><path d="M18.8 6l-9.1 9.2-4.3-4.3L4 12.3 9.7 18 20.2 7.4z"/></svg>';
+
+
+// General Form Elements
+// ---
+//
+// 1. Address Firefox 4+ setting `line-height` on `input` using `!important` in
+// the UA stylesheet.
+// 2. Remove padding so people aren’t caught out if they zero out fieldsets.
+// 3. Remove inner padding and border in Firefox 4+.
+// 4. Correct color not being inherited. Known issue: affects color of disabled
+//    elements.
+// 5. Correct font properties not being inherited.
+// 6. Address margins set differently in Firefox 4+, Safari, and Chrome.
+// 7. Set font-size to 16px to avoid zooming in on iOS (https://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form)
+
+fieldset {
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+}
+
+input {
+    margin: 0; // 6
+
+    color: inherit; // 4
+    font: inherit; // 5
+    font-family: $font-family;
+    font-size: $font-size + 2; // 7
+    line-height: normal; // 1
+
+    &::-moz-focus-inner {
+        padding: 0; // 3
+        border: 0; // 3
+    }
+}
+
+textarea {
+    margin: 0; // 6
+
+    color: inherit; // 4
+    font: inherit; // 5
+}
+
+label,
+textarea {
+    font-family: $font-family;
+    font-size: $font-size;
+}
+
+label {
+    display: inline-block;
+    margin-bottom: $unit / 2;
+
+    font-weight: $semi-bold-font-weight;
+
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &:active {
+        color: $active-link-color;
+    }
+}
+
+select,
+textarea,
+[type="text"],
+[type="search"],
+[type="password"],
+[type="tel"],
+[type="url"],
+[type="number"],
+[type="email"] {
+    width: 100%;
+    min-height: $tap-size;
+    padding: $input-padding;
+    border: $border;
+
+    border-radius: 0;
+    background-color: $input-background-color;
+
+    line-height: $line-height;
+
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &::-webkit-input-placeholder {
+        color: $neutral-50;
+    }
+
+    &:active,
+    &:focus {
+        border-color: $focus-color;
+
+        box-shadow: $input-box-shadow;
+    }
+}
+
+legend {
+    padding: 0; // 2
+}
+
+
+// Search input
+// ---
+//
+// These properties must be set with a slightly higher specificity for search
+// inputs because Normalize's defaults are a bit too specific
+//
+// 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+// 2. Remove inner padding and search cancel button in Safari and Chrome on OS X.
+//    Safari (but not Chrome) clips the cancel button when the search input has
+//    padding (and `textfield` appearance).
+
+input[type="search"] {
+    box-sizing: border-box;
+
+    -webkit-appearance: none; // 1
+
+    &::-webkit-search-cancel-button,
+    &::-webkit-search-decoration {
+        -webkit-appearance: none; // 2
+    }
+}
+
+// Select
+// ---
+//
+// 1. Restore browser default styling. If you’re taking full control of select
+//    styling, remove both these lines.
+// 2. Simulate the position of the down-arrow as if it were a Icon component in
+//    a button.
+// 3. Address inconsistent `text-transform` inheritance for `button` and `select`.
+//    All other form control elements do not inherit `text-transform` values.
+//    Correct `button` style inheritance in Firefox and Opera. Correct `select`
+//    style inheritance in Firefox.
+// 4. Correct color not being inherited. Known issue: affects color of disabled
+//    elements.
+// 5. Set font-size to 16px to avoid zooming in on iOS (https://stackoverflow.com/questions/11064237/prevent-iphone-from-zooming-form)
+// 6. Address margins set differently in Firefox 4+, Safari, and Chrome.
+
+select {
+    height: $tap-size; // 1
+    margin: 0; // 6
+
+    border-radius: 0;
+
+    color: $brand-color;
+    font-family: $font-family;
+    font-size: $font-size + 2; // 5
+    text-transform: none; // 3
+
+    &,
+    &[disabled] {
+        background-repeat: no-repeat;
+        background-position: calc(100% - 14px) center; // 2
+        background-size: 12px 6px;
+    }
+}
+
+optgroup {
+    margin: 0; // 6
+
+    color: inherit; // 4
+    font: inherit; // 5
+}
+
+
+// Checkbox and Radios
+// ---
+
+[type="checkbox"],
+[type="radio"] {
+    position: relative;
+
+    display: inline-block;
+    width: $unit*3;
+    height: $unit*3;
+    margin-right: $unit;
+    border: $border;
+
+    background: $neutral-00;
+
+    vertical-align: middle;
+
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &:active {
+        background: $neutral-30;
+    }
+
+    &:checked {
+        border: 0;
+
+        background: $brand-color;
+
+        &::after {
+            content: '';
+
+            position: absolute;
+
+            display: block;
+        }
+    }
+
+    &:disabled {
+        border: 0;
+
+        background: rgba($neutral-20, 0.5);
+    }
+}
+
+[type="radio"] {
+    border-radius: 50%;
+
+    &:after {
+        top: $unit;
+        right: $unit;
+        bottom: $unit;
+        left: $unit;
+
+        border-radius: 50%;
+        background: $neutral-00;
+    }
+}
+
+[type="checkbox"] {
+    &:checked {
+        &:after {
+            content: '';
+
+            top: 0;
+
+            display: block;
+            width: $unit*3;
+            height: $unit*3;
+
+            background: url($base__radio-checkmark);
+
+            color: $neutral-00;
+            line-height: 0;
+
+            pointer-events: none;
+        }
+    }
+}
+
+
+// Buttons
+// ---
+//
+// 1. Address margins set differently in Firefox 4+, Safari, and Chrome.
+// 2. Correct color not being inherited. Known issue: affects color of disabled
+//    elements.
+// 3. Correct font properties not being inherited.
+// 4. Address inconsistent `text-transform` inheritance for `button` and `select`.
+//    All other form control elements do not inherit `text-transform` values.
+//    Correct `button` style inheritance in Firefox and Opera. Correct `select`
+//    style inheritance in Firefox.
+// 5. Remove inner padding and border in Firefox 4+.
+// 6. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+//    and `video` controls.
+// 7. Correct inability to style clickable `input` types in iOS.
+
+button,
+[type="submit"] {
+    display: block;
+    margin: 0; // 1
+    padding: 0;
+    border: 0;
+
+    background: $neutral-15;
+
+    color: inherit; // 2
+    font: inherit; // 3
+    line-height: $line-height;
+    text-transform: none; // 4
+
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+    &::-moz-focus-inner {
+        padding: 0; // 5
+        border: 0; // 5
+    }
+
+    &:active {
+        background: $neutral-30;
+    }
+}
+
+html input[type="button"],
+// 6
+input[type="reset"] {
+    -webkit-appearance: button; // 7
+}
+
+
+// Disabled
+// ---
+//
+// 1. web-kit default disabled style
+// 2. Disabled style for button, checkbox, radio, input and select
+// 3. Checkbox and Radio style
+
+[disabled] {
+    opacity: 1;
+    background: $disabled-input-background-color;
+
+    color: $disabled-input-color;
+
+    -webkit-text-fill-color: $disabled-input-color; // 1
+
+    // 2
+    &:active,
+    &:checked {
+        border-color: $disabled-input-color;
+
+        background: $disabled-input-background-color;
+
+        &::after {
+            color: $disabled-input-color; // 3
+        }
+    }
+
+    &[type="radio"]:after {
+        background-color: $disabled-input-color;
+    }
+}

src/app/styles/base/_general.scss

@@ -0,0 +1,128 @@
+// General
+// ===
+
+// Document
+// ---
+//
+// 1. Applying styles to *::before or *::after is a performance issue on some
+//    legacy Android devices (4.1.x). As such, these are disabled by default.
+// 2. Prevent iOS text size adjust after orientation change, without disabling
+//    user zoom.
+// 3. Remove default margin in all browsers.
+
+
+// *::before, // 1
+// *::after, // 1
+* {
+    box-sizing: border-box;
+
+    -moz-box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+}
+
+html {
+    color: $font-color;
+    font-family: $font-family;
+    font-size: $font-size;
+    line-height: $line-height;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    -ms-text-size-adjust: 100%; // 2
+    -webkit-text-size-adjust: 100%; // 2
+}
+
+body {
+    margin: 0;
+}
+
+// Grouping content
+// ---
+//
+// 1. Address margin not present in Safari.
+// 2. Contain overflow in all browsers.
+// 3. Address odd `em`-unit font size rendering in all browsers.The duplication
+//    of `monospace` is intentional
+//    ([Source](http://en.wikipedia.org/wiki/User:Davidgothberg/Test59)).
+
+figure {
+    margin: 1em 40px; // 1
+}
+
+pre {
+    overflow: auto; // 2
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace; // 3
+    font-size: 1em; // 3
+}
+
+
+// New HTML5 elements
+// ---
+
+// Correct `block` display not defined for `main` in mobile Safari 6 and
+// Android 4.3.
+//
+// Correct `block` display not defined for `menu`.
+
+main,
+menu {
+    display: block;
+}
+
+// Normalize vertical alignment of `progress` in Chrome and Firefox.
+
+audio,
+canvas,
+progress,
+video {
+    vertical-align: baseline;
+}
+
+// Prevent modern browsers from displaying `audio` without controls.
+// Remove excess height in iOS 5 devices.
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+// Hide the `template` element in mobile Safari.
+
+template {
+    display: none;
+}
+
+// Prevent `sub` and `sup` affecting `line-height` in all browsers.
+
+sub,
+sup {
+    position: relative;
+
+    font-size: 75%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+
+// Hidden
+// ---
+//
+// Hide visually and from screen readers. `u-visually-hidden` class is preferred
+// to ensure that it's working in all conditions.
+
+[hidden] {
+    display: none;
+}

src/app/styles/base/_lists.scss

@@ -0,0 +1,40 @@
+// Lists
+// ===
+
+
+// Ordered and Unordered Lists
+// ---
+//
+// We default to unstyled lists because they seem to be a more common usecase.
+// Use the extensions to re-add the defaults back in.
+//
+// It is our recommendation that instead of styling the ul and ol directly that
+// you create a list component that can be added to lists when needed.
+
+ul,
+ol {
+    margin: 0;
+    padding: 0;
+
+    list-style-type: none;
+}
+
+
+// Definition Lists
+// ---
+
+dl {
+    margin-bottom: $unit;
+
+    line-height: $line-height;
+}
+
+dt {
+    margin-top: $unit;
+
+    font-weight: $semi-bold-font-weight;
+}
+
+dd {
+    margin: 0;
+}

src/app/styles/base/_material.scss

@@ -0,0 +1,12 @@
+
+.material-icons {
+    &.md-18 { font-size: 18px; }
+    &.md-24 { font-size: 24px; }
+    &.md-36 { font-size: 36px; }
+    &.md-48 { font-size: 48px; }
+    &.md-dark { color: rgba(0, 0, 0, 0.54); }
+    &.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
+    &.md-light { color: rgba(255, 255, 255, 1); }
+    &.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
+    &.orange600 { color: #FB8C00; }
+}

src/app/styles/base/_mixins.scss

@@ -0,0 +1,81 @@
+// Mixins
+// ===
+//
+// Background Shimmer
+// ---
+
+@mixin background-shimmer() {
+    overflow: hidden;
+    background: $neutral-10;
+    background-image: linear-gradient(to right,
+        $neutral-10 0%, scale-color($neutral-15, $lightness: -5%) 50%, $neutral-10 100%);
+    background-repeat: no-repeat;
+    background-size: 100vw 100vh;
+    animation: 1.5s linear infinite background-shimmer;
+}
+
+
+// Visually Hidden
+// ---
+
+@mixin visually-hidden() {
+    position: absolute;
+
+    overflow: hidden;
+    clip: rect(1px, 1px, 1px, 1px);
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    border: 0;
+}
+
+
+// Wrap At Root
+// ---
+//
+// Wraps the nested blocks in the `$selector` of your choice, and at the root
+// level. Specificity of the selector can be increased by increasing the
+// `$degree` to a higher number than the default `1`.
+
+// Examples:
+// ---
+//
+// Default:
+//
+// @include wrap-at-root("#app") {
+//     .u-border-red { border: 1px solid red; }
+// }
+//
+// Output: #app .u-border-red { border: 1px solid red; }
+//
+//
+// Custom:
+//
+// @include wrap-at-root("#app", 3) {
+//     .u-border-red { border: 1px solid red; }
+// }
+//
+// Output: #app#app#app .u-border-red { border: 1px solid red; }
+
+
+// Parameters
+// ---
+//
+// @param $selector [String]: ID selector.
+// @param $degree [Number]: Effectively the number of id-level selectors you
+// need to override.
+
+@mixin wrap-at-root($selector, $degree: 1) {
+    $selector-chain: '';
+
+    // Build an id selector by chaining the same id onto itself once more than
+    // the specified degree. So if degree: 3, we get #id#id#id.
+
+    @for $i from 1 through $degree {
+        $selector-chain: $selector-chain + $selector;
+    }
+
+    @at-root #{$selector-chain} {
+        @content;
+    }
+}

src/app/styles/base/_typography.scss

@@ -0,0 +1,117 @@
+// Typography
+// ===
+
+// Headers
+// ---
+@import url('https://use.fontawesome.com/releases/v5.1.0/css/all.css');
+@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700');
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+@import url('https://fonts.googleapis.com/css?family=McLaren&display=swap" rel="stylesheet');
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+
+    font-family: $header-font-family;
+    font-weight: $regular-font-weight;
+    line-height: 1.25;
+
+    // Added with webfontloader. See loadFonts() in app/container.js
+    .wf-active & {
+        font-family: $loaded-header-font-family;
+    }
+}
+
+h1,
+%h1 {
+    font-weight: $light-font-weight;
+    font-size: $huge-font-size;
+    line-height: $huge-line-height;
+}
+
+h2,
+%h2 {
+    font-size: $bigger-font-size;
+    line-height: $bigger-line-height;
+}
+
+h3,
+%h3,
+h4,
+%h4 {
+    font-size: $big-font-size;
+    line-height: $big-line-height;
+}
+
+h5,
+%h5 {
+    font-size: $font-size + 2;
+    line-height: $line-height;
+}
+
+h6,
+%h6 {
+    font-size: $font-size;
+    line-height: $line-height;
+}
+
+
+// Text Elements
+// ---
+
+p {
+    margin: 0;
+}
+
+a {
+    color: $link-color;
+    text-decoration: none;
+
+    &:active,
+    &:focus {
+        color: $active-link-color;
+    }
+}
+
+b,
+strong {
+    font-weight: $semi-bold-font-weight;
+}
+
+small {
+    font-size: 80%;
+}
+
+
+// Miscellaneous Elements
+// ---
+//
+// 1. Address differences between Firefox and other browsers.
+
+hr {
+    box-sizing: content-box; // 1
+    height: 0; // 1
+    margin: ($unit * 2) 0;
+    border: $border;
+    border-width: 0 0 1px;
+
+    -moz-box-sizing: content-box; // 1
+}
+
+img {
+    max-width: 100%;
+    margin: 0;
+}
+
+blockquote {
+    margin: ($unit * 2) 0;
+    padding-left: $unit;
+    border-left: 2px solid $border-color;
+
+    color: lighten($font-color, 15);
+}

src/index.css

@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
-
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-);
-
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();

src/logo.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>