Merge branch 'master' of https://github.com/yldio/joyent-portal

README.md

@@ -1,12 +1,30 @@
 [![CircleCI](https://circleci.com/gh/yldio/joyent-portal.svg?style=shield&circle-token=0bbeaaafc4868c707ca0ed0568f5193a04daddb4)](https://circleci.com/gh/yldio/joyent-portal)
 [![License: MPL 2.0](https://img.shields.io/badge/License-MPL%202.0-brightgreen.svg)](https://opensource.org/licenses/MPL-2.0)
 
-# Joyent Portal
+# Protype Triton Portal
 
-Before you begin, you will need to install ensure that `docker` and `docker-compose` are installed correctly,
+This is a prototype project intended to explore some ideas that might contribute to new capabilities and a new user experience for managing applications on [Joyent's Triton](https://www.joyent.com/triton).
-this can be done by running `make`, make continues without any errors, then you are good to go.
+
+**This is not intended for general use and is completely unsupported.**
+
+## Development
+
+If you would like to contribute to the project, the recommended way to setup is to
+insure that you have docker installed, and optionally have a triton account and profile
+setup using the triton tool.
+
+Currently requires [yarn](https://yarnpkg.com/en/docs/install) for installing dependencies,
+as well as `docker` and `docker-compose` are installed correctly, this can be done by
+running `make`, make continues without any errors, then you are good to go.
+
+```
+make && make install
+```
+
+Then to run each individual component locally (subject to change).
 
 ## Setup
+
 ```sh
 make
 ```
@@ -22,20 +40,6 @@ docker-compose -f local-compose.yml up -d
 This will run the front-end at [http://127.0.0.1:8000](http://127.0.0.1:8000),
 the UI framework at [http://127.0.0.1:8001](http://127.0.0.1:8001),
 
-## Development
-
-If you would like to contribute to the project, the recommended way to setup is to
-insure that you have docker installed, and optionally have a triton account and profile
-setup using the triton tool.
-
-Currently requires [yarn](https://yarnpkg.com/en/docs/install) for installing dependencies.
-
-```
-make && make install
-```
-
-Then to run each individual component locally (subject to change).
-
 ## Project Management
 
 This project is using [Github Projects](https://www.youtube.com/watch?v=C6MGKHkNtxU) for organisation and development of the Joyent Dashboard.

docker-compose.yml

@@ -1,24 +1,28 @@
 #############################################################################
 #  CONSUL
+#
+#  Consul is the service catalog that helps discovery between the components
+#  Change "-bootstrap" to "-bootstrap-expect 3", then scale to 3 or more to
+#  turn this into an HA Consul raft.
 #############################################################################
 consul:
-  image: progrium/consul:latest
+  image: autopilotpattern/consul:latest
+  command: >
+    /usr/local/bin/containerpilot
+    /bin/consul agent -server
+    -bootstrap-expect 3
+    -config-dir=/etc/consul
+    -ui-dir /ui
+  restart: always
+  mem_limit: 128m
+  env_file: .env
+  ports:
+    - 8500
+  dns:
+    - 127.0.0.1
   labels:
     - triton.cns.services=consul
     - com.docker.swarm.affinities=["container!=~*"]
-  restart: always
-  mem_limit: 128m
-  expose:
-    - 53
-    - 8300
-    - 8301
-    - 8302
-    - 8400
-    - 8500
-  env_file: .env
-  ports:
-    - 8500:8500
-  command: -server -bootstrap -ui-dir /ui
 #############################################################################
 #  CloudAPI GraphQL
 #############################################################################
@@ -39,7 +43,7 @@ cloudapi:
 #############################################################################
 frontend:
   image: quay.io/yldio/joyent-dashboard-frontend:latest
-  mem_limit: 256m
+  mem_limit: 512m
   labels:
     - triton.cns.services=frontend
     - com.docker.swarm.affinities=["container!=~*frontend*"]
@@ -54,7 +58,7 @@ frontend:
 #############################################################################
 ui:
   image: quay.io/yldio/joyent-dashboard-ui:latest
-  mem_limit: 128m
+  mem_limit: 512m
   labels:
     - triton.cns.services=ui
     - com.docker.swarm.affinities=["container!=~*ui*"]
@@ -68,7 +72,7 @@ ui:
 nginx:
   image: quay.io/yldio/joyent-portal-nginx
   restart: always
-  mem_limit: 128m
+  mem_limit: 256m
   ports:
     - 80:80
     - 443:443

frontend/src/components/people-list/index.js

@@ -1,11 +1,11 @@
 const React = require('react');
 
-const PropTypes = require('@root/prop-types');
 const Row = require('@ui/components/row');
 const Column = require('@ui/components/column');
 const Button = require('@ui/components/button');
 
 const PeopleTable = require('./table');
+const Invite = require('./invite');
 
 const buttonStyle = {
   float: 'right'
@@ -14,9 +14,8 @@ const buttonStyle = {
 const People = (props) => {
 
   const {
-    people = [],
     orgUI = {},
-    handleToggle
+    handleToggle,
   } = props;
 
   return (
@@ -33,11 +32,11 @@ const People = (props) => {
         </Column>
       </Row>
 
+      {orgUI.invite_toggled ? <Invite {...props} /> : null}
+
       <Row>
         <Column xs={12}>
-          <PeopleTable
+          <PeopleTable {...props} />
-            people={people}
-          />
         </Column>
       </Row>
     </div>
@@ -46,8 +45,7 @@ const People = (props) => {
 
 People.propTypes = {
   handleToggle: React.PropTypes.func,
-  orgUI: React.PropTypes.obj,
+  orgUI: React.PropTypes.object,
-  people: React.PropTypes.arrayOf(PropTypes.person),
 };
 
 module.exports = People;

frontend/src/components/people-list/invite.js

@@ -0,0 +1,107 @@
+const React = require('react');
+
+// const PropTypes = require('@root/prop-types');
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
+const Button = require('@ui/components/button');
+// const SelectCustom = require('@ui/components/select-custom');
+
+const Invite = (props) => {
+
+  const {
+    // people = [],
+    handleToggle,
+    // platformMembers
+  } = props;
+
+  // const InputStyle = {
+  //   float: 'left',
+  //   width: '75%'
+  // };
+
+  const AddButtonStyle = {
+    float: 'right',
+    width: '20%'
+  };
+
+  const styleInline = {
+    display: 'inline-block'
+  };
+
+  // const selectData = [
+  //   {
+  //     value: 'one',
+  //     label: 'One'
+  //   },
+  //   {
+  //     value: 'two',
+  //     label: 'Two'
+  //   },
+  //   {
+  //     value: 'three',
+  //     label: 'Three'
+  //   },
+  //   {
+  //     value: 'four',
+  //     label: 'Four'
+  //   },
+  //   {
+  //     value: 'five',
+  //     label: 'Five'
+  //   },
+  //   {
+  //     value: 'six',
+  //     label: 'Six'
+  //   }
+  // ];
+
+  return (
+    <Row>
+      <Column xs={6}>
+        <p>Search for a person by name or email or enter an email address
+          to invite someone new.</p>
+
+        <Row>
+          <Column xs={12}>
+            {/*TODO: Fix why there are issues with webpack and nodemodules*/}
+            {/*<SelectCustom*/}
+            {/*multi*/}
+            {/*onChange={function noop() {}}*/}
+            {/*options={selectData}*/}
+            {/*placeholder="Enter an email address or password"*/}
+            {/*style={InputStyle}*/}
+            {/*/>*/}
+            <Button
+              secondary
+              style={AddButtonStyle}
+            >
+              Add
+            </Button>
+          </Column>
+        </Row>
+
+        <Button
+          onClick={handleToggle}
+          secondary
+          style={styleInline}
+        >
+          Cancel
+        </Button>
+
+        <Button
+          style={styleInline}
+        >
+          Send Invitation(s)
+        </Button>
+      </Column>
+    </Row>
+  );
+};
+
+Invite.propTypes = {
+  handleToggle: React.PropTypes.func,
+  // orgUI: React.PropTypes.obj,
+  // people: React.PropTypes.arrayOf(PropTypes.person)
+};
+
+module.exports = Invite;

frontend/src/components/people-list/table.js

@@ -1,47 +0,0 @@
-const React = require('react');
-
-const PropTypes = require('@root/prop-types');
-const Table = require('@ui/components/table-data-table');
-const Checkbox  = require('@ui/components/checkbox');
-
-const PeopleTable = ({
-  people = []
-}) => {
-  const columns = [{
-    title: <Checkbox />,
-    width: '5%'
-  }, {
-    title: 'Member',
-    width: '35%'
-  }, {
-    title: 'Status',
-    width: '25%'
-  }, {
-    title: 'Role',
-    width: '25%'
-  }, {
-    title: '',
-    width: '10%' // Empty title for delete
-  }];
-
-  const data = people.map( (person) => ({
-    checkbox: <Checkbox />,
-    name: person.name,
-    status: person.status,
-    role: person.role,
-    bin: ''
-  }));
-
-  return (
-    <Table
-      columns={columns}
-      data={data}
-    />
-  );
-};
-
-PeopleTable.propTypes = {
-  people: React.PropTypes.arrayOf(PropTypes.person)
-};
-
-module.exports = PeopleTable;

frontend/src/components/people-list/table/index.js

@@ -0,0 +1,83 @@
+const React = require('react');
+
+const Table = require('@ui/components/table-data-table');
+const Checkbox  = require('@ui/components/checkbox');
+
+const PersonStatus = require('./person-status');
+const PersonRole = require('./person-role');
+
+const PeopleTable = (props) => {
+
+  const {
+    handleRoleTooltip,
+    handleRoleUpdate,
+    handleStatusTooltip,
+    people = [],
+    orgUI = {}
+  } = props;
+
+  const columns = [{
+    title: <Checkbox />,
+    width: '5%'
+  }, {
+    title: 'Member',
+    width: '35%'
+  }, {
+    title: 'Status',
+    width: '25%'
+  }, {
+    title: 'Role',
+    width: '25%'
+  }, {
+    title: '',
+    width: '10%' // Empty title for delete
+  }];
+
+  const data = people.map( (person, index) => {
+    const status = (person) => (
+      <PersonStatus
+        handleStatusTooltip={handleStatusTooltip}
+        membersStatusOptions={orgUI.members_status}
+        person={person}
+        personIndex={index}
+        toggledID={orgUI.member_status_tooltip}
+      />
+    );
+
+    const role = (person) => (
+      <PersonRole
+        handleRoleTooltip={handleRoleTooltip}
+        handleRoleUpdate={handleRoleUpdate}
+        membersRolesOptions={orgUI.members_roles}
+        person={person}
+        personIndex={index}
+        toggledID={orgUI.member_role_tooltip}
+      />
+    );
+
+    return {
+      checkbox: <Checkbox />,
+      name: person.name,
+      status: status(person),
+      role: role(person),
+      bin: ''
+    };
+  });
+
+  return (
+    <Table
+      columns={columns}
+      data={data}
+    />
+  );
+};
+
+PeopleTable.propTypes = {
+  handleRoleTooltip: React.PropTypes.func,
+  handleRoleUpdate: React.PropTypes.func,
+  handleStatusTooltip: React.PropTypes.func,
+  orgUI: React.PropTypes.object,
+  people: React.PropTypes.array,
+};
+
+module.exports = PeopleTable;

frontend/src/components/people-list/table/person-role.js

@@ -0,0 +1,97 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('@ui/shared/functions');
+const composers = require('@ui/shared/composers');
+
+const Tooltip = require('./tooltip');
+
+const {
+  pseudoEl
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+const borderSide = props => props.toggled
+  ? 'bottom'
+  : 'top';
+
+const StyledWrapper = styled.div`
+  position: relative;
+  
+  &:after {
+    border-left: ${remcalc(5)} solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
+    border-${borderSide}: ${remcalc(5)} solid black;
+    
+    ${pseudoEl({
+      top: '50%',
+      right: remcalc(10)
+    })}
+  }
+`;
+
+const PlainButton = styled.button`
+  background: transparent;
+  font-size: inherit;
+  border: none;
+  zIndex: 0;
+  font-family: inherit;
+  color: inherit;
+`;
+
+const PersonRole = (props) => {
+
+  const {
+    toggledID,
+    membersRolesOptions,
+    person,
+    personIndex,
+    handleRoleTooltip,
+    handleRoleUpdate
+  } = props;
+
+  const toggled = toggledID;
+  const handleClick = () => handleRoleTooltip(person.uuid);
+  const handleOptionSelect = (updatedMember) => handleRoleUpdate(updatedMember);
+  const _person = {
+    ...person,
+    personIndex
+  };
+
+  return (
+    <StyledWrapper toggled={toggled}>
+      <PlainButton onClick={handleClick} >
+        {person.role}
+      </PlainButton>
+
+      { toggledID === person.uuid
+        ? <Tooltip
+          handleSelect={handleOptionSelect}
+          options={membersRolesOptions}
+          person={_person}
+          />
+        : null }
+    </StyledWrapper>
+  );
+};
+
+PersonRole.propTypes = {
+  handleRoleTooltip: React.PropTypes.func,
+  handleRoleUpdate: React.PropTypes.func,
+  membersRolesOptions: React.PropTypes.array,
+  person: React.PropTypes.object,
+  personIndex: React.PropTypes.number,
+  toggledID: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.bool,
+  ])
+};
+
+module.exports = PersonRole;

frontend/src/components/people-list/table/person-status.js

@@ -0,0 +1,84 @@
+const React = require('react');
+const Styled = require('styled-components');
+
+const fns = require('@ui/shared/functions');
+const composers = require('@ui/shared/composers');
+
+const Tooltip = require('./tooltip');
+
+const {
+  pseudoEl
+} = composers;
+
+const {
+  default: styled
+} = Styled;
+
+const {
+  remcalc
+} = fns;
+
+const borderSide = props => props.toggled
+  ? 'bottom'
+  : 'top';
+
+const StyledWrapper = styled.div`
+  position: relative;
+  
+  &:after {
+    border-left: ${remcalc(5)} solid transparent;
+    border-right: ${remcalc(5)} solid transparent;
+    border-${borderSide}: ${remcalc(5)} solid black;
+    
+    ${pseudoEl({
+      top: '50%',
+      right: remcalc(10)
+    })}
+  }
+`;
+
+const PlainButton = styled.button`
+  background: transparent;
+  font-size: inherit;
+  border: none;
+  zIndex: 0;
+  font-family: inherit;
+  color: inherit;
+`;
+
+const PersonStatus = (props) => {
+
+  const {
+    handleStatusTooltip,
+    toggledID,
+    membersStatusOptions,
+    person,
+  } = props;
+
+  const toggled = toggledID;
+  const handleClick = () => handleStatusTooltip(person.uuid);
+
+  return (
+    <StyledWrapper toggled={toggled}>
+      <PlainButton onClick={handleClick} >
+        {person.status}
+      </PlainButton>
+
+      { toggledID === person.uuid
+        ? <Tooltip options={membersStatusOptions} person={person} />
+        : null }
+    </StyledWrapper>
+  );
+};
+
+PersonStatus.propTypes = {
+  handleStatusTooltip: React.PropTypes.func,
+  membersStatusOptions: React.PropTypes.array,
+  person: React.PropTypes.object,
+  toggledID: React.PropTypes.oneOfType([
+    React.PropTypes.string,
+    React.PropTypes.bool,
+  ])
+};
+
+module.exports = PersonStatus;

frontend/src/components/people-list/table/tooltip.js

@@ -0,0 +1,56 @@
+const React = require('react');
+
+const Tooltip = require('@ui/components/tooltip');
+
+const tooltipStyle = {
+  position: 'absolute',
+  top: '30px',
+  zIndex: 1
+};
+
+const arrowPosition = {
+  bottom: '100%',
+  right: '10%'
+};
+
+module.exports = ({
+  handleSelect,
+  person = {},
+  options = [],
+}) => {
+
+  const _options = options.map( (option, i) => {
+
+    const _onClick = () => handleSelect({
+      ...person,
+      role: option
+    });
+
+    return (
+      <li
+        key={i}
+        onClick={_onClick}
+        role="listbox"
+        tabIndex="0"
+      >
+        {option}
+      </li>
+    );
+  });
+
+  return (
+    <Tooltip
+      arrowPosition={arrowPosition}
+      key={person.uuid}
+      style={tooltipStyle}
+    >
+      {_options}
+    </Tooltip>
+  );
+};
+
+module.exports.propTypes = {
+  handleSelect: React.PropTypes.func,
+  options: React.PropTypes.array,
+  person: React.PropTypes.object,
+};

frontend/src/containers/org/people.js

@@ -11,11 +11,15 @@ const {
 
 const {
   peopleByOrgIdSelector,
-  orgUISelector
+  orgUISelector,
+  membersSelector
 } = selectors;
 
 const {
-  handleInviteToggle
+  handleInviteToggle,
+  handlePeopleRoleTooltip,
+  handlePeopleStatusTooltip,
+  handleRoleUpdate
 } = actions;
 
 const People = (props) => {
@@ -31,11 +35,16 @@ const mapStateToProps = (state, {
   params = {}
 }) => ({
   people: peopleByOrgIdSelector(params.org)(state),
-  orgUI: orgUISelector(state)
+  orgUI: orgUISelector(state),
+  platformMembers: membersSelector(state)
 });
 
 const mapDispatchToProps = (dispatch) => ({
-  handleToggle: () => dispatch(handleInviteToggle())
+  handleToggle: () => dispatch(handleInviteToggle()),
+  handleStatusTooltip: (id) => dispatch(handlePeopleStatusTooltip(id)),
+  handleRoleTooltip: (id) => dispatch(handlePeopleRoleTooltip(id)),
+  handleRoleUpdate: (updatedMember) =>
+      dispatch(handleRoleUpdate(updatedMember)),
 });
 
 module.exports = connect(

frontend/src/mock-state.json

@@ -479,11 +479,23 @@
   },
   "orgs": {
     "ui": {
-      "invite_toggled": false,
+      "invite_toggled": true,
+      "member_status_tooltip": false,
+      "member_role_tooltip": false,
       "sections": [
         "projects",
         "people",
         "settings"
+      ],
+      "members_status": [
+        "Active",
+        "Inactive",
+        "Invitation Sent"
+      ],
+      "members_roles": [
+        "Owner",
+        "Unnassigned",
+        "Read Only"
       ]
     },
     "data": [{

frontend/src/state/actions.js

@@ -17,5 +17,10 @@ module.exports = {
   toggleInstanceCollapsed: createAction(`${APP}/TOGGLE_INSTANCE_COLLAPSED`),
   toggleMonitorView: createAction(`${APP}/TOGGLE_MONITOR_VIEW`),
   switchMonitorViewPage: createAction(`${APP}/SWITCH_MONITOR_VIEW_PAGE`),
-  handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`)
+  handleInviteToggle: createAction(`${APP}/HANDLE_INVITE_MEMBER_TOGGLE`),
+  handlePeopleStatusTooltip:
+      createAction(`${APP}/HANDLE_PERSON_STATUS_TOOLTIP`),
+  handlePeopleRoleTooltip:
+    createAction(`${APP}/HANDLE_PERSON_ROLE_TOOLTIP`),
+  handleRoleUpdate: createAction(`${APP}/HANDLE_PERSON_ROLE_UPDATE`),
 };

frontend/src/state/reducers/orgs.js

@@ -1,9 +1,76 @@
 const ReduxActions = require('redux-actions');
 
+const actions = require('@state/actions');
+
 const {
   handleActions
 } = ReduxActions;
 
+const {
+  handleInviteToggle,
+  handlePeopleRoleTooltip,
+  handlePeopleStatusTooltip,
+  handleRoleUpdate
+} = actions;
+
 module.exports = handleActions({
-  'x': (state) => state // somehow handleActions needs at least one reducer
+  [handleInviteToggle.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        invite_toggled: !state.ui.invite_toggled
+      }
+    };
+  },
+  [handlePeopleStatusTooltip.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        member_status_tooltip:
+          action.payload === state.ui.member_status_tooltip
+          ? ''
+          : action.payload
+      }
+    };
+  },
+  [handlePeopleRoleTooltip.toString()]: (state, action) => {
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        member_role_tooltip:
+          action.payload === state.ui.member_role_tooltip
+          ? ''
+          : action.payload
+      }
+    };
+  },
+  [handleRoleUpdate.toString()]: (state, action) => {
+    // TODO:
+    // Change "1" to org index. At the moment only updates
+    // "biz-tech"
+    return {
+      ...state,
+      ui: {
+        ...state.ui,
+        member_role_tooltip: false
+      },
+      data: [
+        ...state.data.slice(0, 1),
+        {
+          ...state.data[1],
+          members: [
+            ...state.data[1].members.slice(0, action.payload.personIndex),
+            {
+              ...action.payload
+            },
+            ...state.data[1].members.slice(action.payload.personIndex + 1)
+          ]
+        },
+        ...state.data.slice(1+1),
+      ]
+    };
+  }
 }, {});

frontend/src/state/selectors.js

@@ -153,5 +153,6 @@ module.exports = {
   metricTypesSelector: metricTypes,
   instancesByProjectIdSelector: instancesByProjectId,
   metricTypeByUuidSelector: metricTypeByUuid,
-  peopleByOrgIdSelector: peopleByOrgId
+  peopleByOrgIdSelector: peopleByOrgId,
+  membersSelector: members,
 };

frontend/static/.gitignore

@@ -1,3 +1,4 @@
 *
 !.gitignore
 !locales
+!images

frontend/static/images/make-us-proud.svg

@@ -0,0 +1,194 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+   viewBox="-4.2 173.2 485.7 485.6" style="enable-background:new -4.2 173.2 485.7 485.6; background: #FFFFFF;" xml:space="preserve">
+<style type="text/css">
+  .st0{fill:#F34335;}
+</style>
+<g>
+  <path class="st0" d="M481.5,416.1C481.2,550.4,372.8,659,238.3,658.8C104.2,658.6-4.3,550.1-4.2,415.8
+    C-4.1,281.5,104.5,173,238.9,173.2C373.1,173.3,481.3,281.8,481.5,416.1z M362.3,463.3c-0.6,0.4-1.3,0.7-1.8,1.1
+    c-0.7,0.6-1.3,1.4-2,2c0.5-1.2,1-2.3,1.7-3.2c1.3-1.8,2.9-3.5,4.1-5.5c0.8-1.3,2-2.4,1.9-4.1c0-0.2,0.3-0.6,0.5-0.7
+    c0.6-0.3,0.9-0.7,0.8-1.4c0-0.2,0.2-0.5,0.3-0.8c0.3-0.6,0.6-1.2,0.8-1.8c0.1-0.5,0-1,0-1.6c1.9,0.4,2.6-0.1,2.6-1.6
+    c0-0.7-0.2-1.1-1-0.7c-0.6,0.3-1.2,0.4-1.8,0.6c-0.7-1.4-0.8-2.4,0.3-3.4c0.4-0.3,0.4-1.1,0.6-1.6c0.1-0.2,0.3-0.4,0.5-0.8
+    c0.2,0.5,0.2,0.8,0.4,1.1c0.1,0.2,0.4,0.4,0.6,0.4s0.5-0.2,0.5-0.4c0.2-0.9,0.5-1.8,0.3-2.7c-0.2-1.5-0.1-2,0.9-2.4
+    c0.5-1.1,0.9-1.8,1.2-2.6c0.5-1.7,1.3-3.2,2.4-4.6c0.2-0.2-0.2-0.8-0.3-1.3c-0.5,0.2-1.3,0.4-1.3,0.5c0,1.7-1.5,2.5-2.1,3.8
+    c-1.6,3.1-3.5,6-5.2,9c-0.3,0.5-0.6,1-1,1.3c-0.2,0.2-0.7,0.1-1,0c-0.1,0-0.2-0.6-0.1-0.7c0.6-1.1,1.3-2,1.9-3.1
+    c0.8-1.6,2.7-2.7,2.4-4.9c0-0.1,0.1-0.2,0.1-0.2c0-0.5,0.1-1.1-0.1-1.4c-0.5-0.7-0.4-1.3,0-2c0.6-1.1,1.3-2.2,1.5-3.4
+    c0.3-1.2,0.2-2.4,1-3.4c0.1-0.1,0-0.5-0.1-0.6s-0.4-0.1-0.6,0c-0.7,0.6-1.5,1.2-2.3,1.8c0.5,2.3,0.4,2.6-1.1,2.9
+    c0.1-0.2,0.2-0.5,0.1-0.6c-0.1-0.4-0.3-0.8-0.5-1.2c-0.3,0.3-0.6,0.5-0.8,0.9c-1,1.4-1.9,2.9-2.8,4.3c-0.1-0.1-0.3-0.1-0.4-0.2
+    c0.1-0.5,0.2-1,0.4-1.5c0.7-1.7,1.4-3.5,2.2-5.1c0.6-1.2,1.5-2.2,2-3.4c0.3-0.8,0.6-2.1,0.2-2.7c-0.6-0.9-0.5-1.4,0-2.1
+    c0.4-0.6,0.9-1.1,1.5-1.8c0.2-0.8,0.4-1.9,0.9-3c0.9-2,2.1-3.9,3.1-5.9c0.3-0.7,0.2-1.6,0.2-2.3c-0.1-0.6-0.5-0.8-0.9-0.3
+    c-1.1,1.3-2.2,2.6-3.3,3.9c-0.2,0.2-0.4,0.4-0.8,0.7c0-1,0-1.7,0-2.6c-0.6,0.7-1.1,1.3-1.6,1.8c-0.1-0.1-0.3-0.2-0.4-0.2
+    c0.3-0.8,0.7-1.6,0.9-2.4c0.1-0.3,0.3-0.8,0.2-1.1c-0.4-1.7,0.1-3.2,0.7-4.8c0.3-0.7,0.5-1.7,0.1-2.2c-0.7-1-0.7-1.7,0-2.6
+    c0.3-0.4,0.5-0.9,0.5-1.3c0-0.5-0.3-1-0.5-1.5c-0.5,0.2-1,0.3-1.4,0.6c-0.4,0.4-0.6,1-1.1,1.4c-1,0.8-1.8,2.2-3.5,1.7
+    c-0.2-0.1-0.6,0.3-0.9,0.6c-1.1,0.8-2.1,1.7-3.4,2.7c0.1,1.2-1.1,2.3-1.9,3.5c-0.9,1.4-2.1,2.7-3,4.1c-0.9,1.5-1.5,3.1-2.3,4.6
+    c-1.5,2.5-3.1,4.9-4.7,7.3c-1.7,2.7-3.4,5.3-5.1,8c-2,3.1-4,6.3-6,9.3c-1.5,2.2-3.1,4.3-4.6,6.5c-1.1,1.5-2.1,3.1-3.2,4.5
+    c-0.7,0.9-1.6,1.6-2.4,2.4c-0.2,0.2-0.5,0.4-0.4,0.6c0.1,1.7-1.2,2.5-2.1,3.6c-0.6,0.8-1.6,1.5-1.4,2.7c0.4,2.8-1.2,4.7-2.8,6.6
+    c-1.1,1.3-2.6,1.1-3.3-0.1c0.5-1.6,0.9-3,1.4-4.3c0.6-1.5,1.2-2.9,0.8-4.5c-0.1-0.5,0.2-1.1,0.3-1.6c0.1-0.6,0.4-1.2,0.5-1.8
+    c0.4-2,0.8-3.9,1.3-5.9c0.2-0.7,1-1.3,1.1-2.1c0.4-2,0.5-4,0.7-5.9c0-0.3,0.2-0.7,0.4-1c0.2-0.4,0.6-0.8,0.7-1.3
+    c0.3-1.2,0.4-2.5,0.8-3.6c0.7-2.2,1.7-4.3,2.3-6.4c0.6-2,1-4.1,1.5-6.2c1.4,0.3,1.9-0.4,2.3-1.3c-0.6-0.1-1.5-0.2-1.5-0.3
+    c-0.1-0.8,0-1.6,0.1-2.4c0.5,0.1,1.1,0.2,1.7,0.4c0.2-1,0.4-2.1,0.6-3.2c-0.5,0.1-0.7,0.3-0.9,0.5c-0.2,0.2-0.3,0.4-0.5,0.7
+    c-0.7-1.1-0.6-2.5,0.1-3.6c0.3-0.5,0.6-1.3,0.5-1.8c-0.2-1-0.2-1.7,0.5-2.5c0.2-0.2,0.2-0.5,0.3-0.8c0.3-1.7,0.5-3.5,0.8-5.2
+    c0.1-0.8,0.6-1.3,1.5-0.9c0.2,0.1,0.5,0.1,0.8,0.2c0.2-1.3,0.4-2.6,0.6-3.9c0.1-0.7,0-1.3,0.2-2c0.5-1.7,1.1-3.3,1.6-5
+    c0.1-0.2,0-0.6-0.2-0.8c-0.1-0.1-0.5-0.1-0.8,0c-0.2,0.1-0.4,0.2-0.6,0.4c-0.6-1,0-1.4,0.7-1.6c0.9-0.3,0.9-0.8,0.5-1.6
+    c-0.2-0.3-0.3-0.7-0.5-1.1c0.4-0.1,0.8-0.2,1.5-0.3c0.3-2.2,0.7-4.6,1.1-7.1c-0.5,0.2-0.8,0.3-1.4,0.6c0.2-0.8,0.4-1.3,0.5-1.9
+    c0.4,0.3,0.7,0.5,1.3,1c0.1-0.7,0.4-1.3,0.2-1.7c-0.4-0.9,0-1.6,0.2-2.4c0.4-1.2,1-2.7,0.6-3.7c-0.6-1.7-0.1-2.8,0.8-3.9
+    c0.8-1,1-2,0.9-3.3c0-1.6,0.2-3.2,0.4-4.8c0-0.5,0.1-1,0.1-1.5c0-0.3,0-0.7,0.2-1c0.1-0.1,0.6-0.2,0.7-0.1c0.2,0.2,0.3,0.6,0.3,0.9
+    c0,0.8-0.2,1.7-0.3,2.5c-0.2,1.4-0.2,2.8-0.5,4.1c-0.4,2.1-1.1,4.1-1.4,6.2c-0.2,1.7-0.1,3.4-0.1,5.2c-0.1,2.1,0,4.1-0.2,6.2
+    c-0.4,2.8-1,5.5-1.5,8.3c-0.1,0.7-0.4,1.5-0.3,2.2c0.1,2.3-0.3,4.4-1.1,6.6c-0.4,1.1-0.3,2.4-0.5,3.5c1.8,0.6,2.4,0.3,3.1-1.2
+    c0.4-0.9,0.8-1.8,1.3-2.6c1.7-2.7,2-5.7,2.3-8.7c0.2-2.2,0-4.5,0-6.8c1.7,0.1,1.8-1,2-2c0.4-2,0.9-3.9,1.4-5.9
+    c0.5-2.2,1.2-4.5,1.7-6.7c0.3-1.3,0.1-2.9,0.6-4.1c0.8-1.7,1.1-3.4,1.3-5.2c0.3-2-0.1-3.9,0.5-6c0.9-3.3,1.3-6.8,1.6-10.2
+    c0.3-3.6,0.7-7.3-0.2-10.9c-0.2-0.8-0.5-1.6-0.7-2.4c-0.3-1.1-0.4-2.4-1-3.3c-0.6-0.8-1.6-1.7-2.6-1.8c-1.4-0.2-2.8,0.5-4.2,0.6
+    c-0.7,0-1.8-0.1-2.2-0.6c-0.6-0.8-0.9-1.9-1.1-3s-1.2-2.4-2.2-2.4s-2.2,0.6-2.9-0.7c0-0.1-0.8,0.1-1.1,0.3
+    c-0.2,0.1-0.4,0.5-0.8,1.2c-0.3-0.7-0.5-1.1-0.5-1.5c0.1-2.1-0.1-2.3-2.1-2.2c-0.1-0.3-0.1-0.6-0.2-0.9c-0.6-1.9-2.4-2.8-4.2-2.1
+    c-0.3,0.1-0.8,0.2-1,0c-0.7-0.6-1.5-1-1.4-2.3c0.1-1.6-0.5-2-2-1.8c-1.9,0.3-2.1,0.1-1.9-1.9c0.1-1.5-0.6-2.9-1.9-3.3
+    c0.2,1,0.5,1.9,0.4,2.7c-0.1,0.8-0.6,1.6-1.1,2.7c-0.3-0.4-0.7-0.8-0.7-1.1c0-1,0.2-2.1,0.4-3.1c0.2-1.3-0.1-1.6-1.3-1.6
+    c-0.5,0-1.2-0.3-1.3-0.6c-0.5-1.5-2.1-1.6-3-2.5s-2,0.1-2.9,0c-2.1-0.2-4,0.3-5.8,1.4c-1.6,1-3.5,1.7-4.4,3.7
+    c-0.8-0.5-1.1-0.2-1.2,0.6c0,0.3-0.2,0.8-0.5,1c-1.8,1.4-3.8,2.7-5.4,4.2c-3.2,3.1-6.3,6.3-9.5,9.5c-1.4,1.4-2.7,3-4.1,4.5
+    c-0.9,0.9-1.9,1.8-2.7,2.7c-1.4,1.5-2.8,3.1-4.3,4.7c-0.5,0.6-1,0.7-1.6,0c-0.9-1.1-1.9-2.2-3-3.3c-1.3-1.3-2.7-1.3-4.4-0.8
+    c-1.2,0.3-2.5,0.4-3.7,0.3c-0.3,0-0.6-1.1-0.9-1.6c-0.1-0.2-0.4-0.2-0.5-0.4c-0.2-0.3-0.3-0.6-0.4-0.8c-0.2-0.4-0.4-1-0.7-1.2
+    c-0.9-0.4-2-0.6-2.9-1c-0.4-0.1-0.8-0.3-1-0.5c-0.4-0.5-0.7-1.3-1.2-1.4s-1.2,0.3-1.9,0.6c-0.7-0.8-1.6-1.7-2.3-2.7
+    c-1-1.5-2.6-1.7-4.1-1.8c-1-0.1-1.6-0.4-2-1.1c-0.9-1.6-2.2-2.3-3.9-2.8c-0.5-0.2-1.2-0.5-1.4-1c-1-1.9-2.9-2.7-4.3-4.2
+    c-0.9-0.9-1.8-1.7-2.8-2.5c-0.9-0.8-1.9-1.5-2.8-2.2c-0.2-0.1-0.5,0.1-0.8,0.1c0.1,0.2,0.1,0.5,0.2,0.7c0.1,0.2,0.2,0.3,0.4,0.4
+    c-0.2,0.1-0.3,0.2-0.4,0.2c-0.2,0-0.5,0-0.8,0c-2.7-0.3-5.2-0.1-7.4,1.7c-0.2,0.2-0.5,0.2-0.8,0.4c-1.8,0.9-3.3,2.2-4.3,4
+    c-0.6-0.7-1.1-0.4-1.5,0.4c-0.1,0.3-0.6,0.4-0.8,0.7c-0.7,0.6-1.8,1-2.1,1.7c-0.5,1-1.1,1.7-2,2.3c-1.6,1.2-2.9,3-5,3.6
+    c-0.8,0.2-1.7,0.8-2.1,1.5c-0.8,1.6-2.2,2.6-3.5,3.8c-1.4,1.3-2.8,2.5-4,3.9c-1,1-1.1,1.1-1.8-0.2c-0.7-1.3-1.4-2.6-2.2-3.8
+    c-0.5-0.9-1.3-1.1-2.2-0.5s-1.8,1.2-2.6,1.8c-1.7-0.4-3.2-2.3-4.9-0.2c-1-1.3-1-1.3-2.3-0.1c-1.8-3.2-4.7-4-8.1-3.7
+    c-0.7,0.1-1.4,0.2-2,0.1c-0.6-0.1-1.2-0.3-1.8-0.6c-2.1-1.1-4.1-2.5-6.5-1.1c-0.1,0.1-0.2,0-0.4,0c-0.1-0.1-0.2-0.3-0.2-0.4
+    c-0.2-1-0.9-1.6-1.9-1.5s-1.1,1-1.1,1.9v0.1c-0.3,0.3-0.5,0.6-0.8,0.8c-0.2-0.3-0.6-0.6-0.7-0.9c-0.1-0.5,0-1,0-1.5
+    c0.2-1.1,0-1.9-1.6-1.5c0.3-2-0.9-3.3-1.9-4.7c-0.6-0.8-1-0.8-1.7,0c-0.1,0.2-0.3,0.4-0.5,0.6c-0.8-0.7-1.7-1-1.1-2.4
+    c0.3-0.6,0-1.7-0.4-2.2s-1.4-0.5-2.2-0.5c-0.2,0-0.4,0.9-0.5,1.5c-0.2,1-0.3,2-0.5,3.1c-0.1,0.4-0.3,0.8-0.4,1.2
+    c-0.4,2.6-0.9,5.3-1.3,8c-0.5,3.2-0.8,6.4-1.3,9.6c-0.3,1.9,0.2,3.9-0.9,5.7c-0.1,0.2,0.1,0.7,0.1,1c0,0.5,0.2,1,0,1.4
+    c-0.4,1.6-0.8,3.2-0.9,5c-0.1,3.1-0.7,6.2-1.1,9.3c-0.2,1.2-0.2,2.5-0.3,3.7c0,0.3-0.1,0.6-0.1,0.9c-0.7,2.5-1.4,4.9-1.3,7.5
+    c0,0.3-0.1,0.6-0.1,0.9c-0.3,1.9-0.6,3.8-0.9,5.7c-0.5,3.6-1,7.1-1.6,10.7c-0.4,2.3-0.8,4.5-1.2,6.8c-0.4,3-0.8,5.9-1.1,8.9
+    c-0.2,1.9-0.5,3.7-0.8,5.6c-0.4,2.8-1,5.5-1.4,8.3c-0.5,3.6-1,7.2-1.5,10.9c-0.3,2.2-0.5,4.4-0.8,6.6c-0.4,2.5-1.1,5-1.5,7.5
+    c-0.5,2.7-0.7,5.5-1.1,8.3c-0.2,1.7-0.6,3.3-0.9,4.9c-0.4,1.9-0.8,3.9-1.1,5.8c-0.2,1.5-0.2,3-0.4,4.5c-0.3,2.8-0.7,5.6-1.1,8.4
+    c-0.1,1-0.5,1.9-0.7,2.9c-0.3,1.9-0.3,3.8-0.6,5.6c-0.4,2.8-1,5.6-1.5,8.4c-0.6,2.9-1.2,5.8-1.8,8.8c-0.6,3.4-1.1,6.9-1.6,10.4
+    c-0.2,1.4-0.4,2.9-0.6,4.3c-0.3,1.9-0.6,3.7-1.1,5.5c-1.1,3.6-1,7.4-2.1,11.1c-0.4,1.2-0.1,2.8,0.3,4.1c0.7,2.2,1.7,4.3,4.3,5
+    c1.1,0.3,2,1.3,3.3,0.8c0.1,0,0.3,0.2,0.4,0.3c0.5,0.1,0.9,0.2,1.4,0.3c0.3,0.1,0.7,0,1,0.1c1.9,1.1,4,1,6,1.1
+    c0.4,0,0.9,0.2,1.3,0.5c0.9,0.6,1.7,1.4,2.9,1.2c0.2,0,0.6,0.1,0.8,0.3c1,1,2.1,1.2,3.4,0.6c0.3-0.1,0.7-0.4,0.9-0.3
+    c2.2,0.9,4.8,0.8,6.4,2.8c0.2,0.2,0.7,0.2,1,0.1c0.3-0.1,0.6-0.4,0.9-0.5c1.1-0.3,1.3-0.8,0.7-1.8c-0.7-1.2-0.5-1.7,0.6-2.4
+    c0.2,1.1,0.9,1.3,1.8,1c0.3,0.4,0.4,0.9,0.7,1.1c1,0.6,0.9,1.3,0.6,2.2c-0.4,1.2,0.2,1.7,1.2,1.9c0.8,0.2,1.6,0.3,2.4,0.4
+    c0.5,0,1-0.3,1.5-0.4c-0.2-0.4-0.4-0.9-0.6-1.3c0.4-1,0.8-2.1,0.7-3.1c-0.2-1.4,0.1-3,1.1-3.8c0.8-0.6,1.6-1.1,2.4-1.7
+    c-0.1,1.3-0.2,2.6-0.2,4c0,0.6,0.1,1.4,0.4,1.6c0.5,0.4,1.4,0.6,2,0.4c0.5-0.2,0.9-1.1,1-1.7c0.4-1.8,0.4-3.8,0.9-5.5
+    c1.1-3.7,1.7-7.5,2.3-11.3c0.4-2.6,0.8-5.2,1.3-7.8c0.2-1.2,0.5-2.4,0.7-3.6c0.1-1-0.1-2.1,0.8-3c0.2-0.1,0.1-0.5,0.1-0.8
+    c0-0.5,0-1,0-1.5c0.4-2.4,0.9-4.7,1.3-7.1c0.2-1,0.2-2,0.4-3c0.4-1.6,0.9-3.2,1.3-4.8c0.5-2,0.9-4,1.1-6.1c0.3-2.7,0.8-5.5,1.2-8.2
+    c0.3-1.9,0.5-3.9,0.9-5.8c0.4-2.1,1-4.1,1.6-6.1c0.1-0.3,0.3-0.5,0.5-0.7c0.5-0.9,1.2-1.7,1.3-2.6c0.3-4.1,2.9-7.4,3.6-11.3
+    c0-0.1,0.1-0.2,0.2-0.3c0.5-1.1,0.9-2.2,1.3-3.2c0.3-0.7,0.6-1.5,1-2.2c0.3-0.6,0.8-1.2,0.9-1.8c0.4-2,1-4,2.1-5.7
+    c0.2-0.3,0.2-0.6,0.3-1c0.2-1.9,1-3.6,2.2-5c0.2-0.3,0.5-0.5,0.6-0.8c0.4-1,0.8-2,1.1-3c0.7-1.7,1.3-3.4,2.4-5
+    c1.1-1.6,1.5-3.6,2.4-5.4c0.7-1.6,1.5-3.2,2.4-4.8c1-1.9,2.2-3.8,3.3-5.8c0.5-0.8,0.9-1.7,1.4-2.5c0.6-1,1.2-2,1.8-3
+    c1.7-2.5,2.1-5.9,5.5-7c0.4-0.1,0.7-0.7,1-1.1c0.2-0.2,0.3-0.4,0.5-0.6c0.3,0.5,0.5,0.9,1,1.7c1.4-2.2,2.6-4.1,3.8-6
+    c0.8-1.4,1.6-2.8,2.5-4.1c0.5-0.7,1.2-1.3,2.1-2.3c0.2,1.2,0.7,2.3,0.4,2.8c-1.4,2.3,0.3,5.1-1.4,7.3v0.1c-0.2,2-0.3,4.1-0.6,6.1
+    c-0.1,0.8-0.5,1.6-0.6,2.4c-0.5,2.8-0.8,5.6-1.3,8.3c-0.5,2.5-1,5-1.5,7.5c-0.2,0.9-0.6,1.9-0.6,2.8c-0.1,1.9-0.5,3.7-1.2,5.5
+    c-0.2,0.4-0.1,1-0.2,1.5c-0.4,2.6-0.9,5.2-1.4,7.8c-0.3,1.4-0.7,2.7-1,4c-0.4,1.9-0.8,3.8-1.2,5.7c-0.5,2.8-1.9,5.4-1.8,8.3
+    c0,0.4-0.1,0.8-0.2,1.1c-0.4,1.2-1,2.4-1.2,3.7c-0.3,2.3-1.7,4.4-1.6,6.8c0,0.3-0.2,0.6-0.3,0.9c-0.2,0.7-0.4,1.4-0.6,2
+    c-0.5,1.3-0.7,2.6-1,3.9c-0.5,2.7-1.4,5.3-2.1,7.9c-0.3,1.2-0.5,2.5-0.8,3.7c-0.2,0.9-0.6,1.8-0.8,2.7c-0.4,1.7-0.8,3.4-1.2,5.1
+    c-0.6,2.3-1.2,4.7-1.7,7c-0.2,0.7,0.1,1.5,0,2.2c-0.6,2.4,0.9,4.1,1.7,6c0.1,0.2,0.3,0.3,0.5,0.4c1.5,0.6,3.1,1.3,4.6,1.9
+    c0.2,0.1,0.4-0.2,0.7-0.2c1.2,0,2.5-0.1,3.6,0.1c1,0.2,1.9,0.7,2.9,1.1c0.1,0.2,0.1,0.7,0.4,1c0.1,0.1,0.8-0.1,1.1-0.3
+    c1.1-0.9,2.6-0.6,3.2,0.7c0.8,1.7,0.8,1.7,2.3,0.7c0.1-0.1,0.2-0.1,0.5-0.1c0.9,1,1.8,2,2.7,3.1c0.1-0.3,0.1-0.6,0.2-1
+    c1.8-0.2,2.7-1.2,2.8-3c0-0.8,1.1-1.4,1.3-1c0.4,1.2,2.5,1.7,1.4,3.5c-0.1,0.2,0.4,0.9,0.6,1.3c0.4-0.2,0.8-0.4,1.2-0.7
+    c0.2-0.2,0.5-0.7,0.4-0.9c-1.1-1.9,0.5-2.3,1.6-3.2c0.9-0.8,1.5-2,2.3-3c0.2-0.2,0.4-0.4,0.8-0.7c0,0.5,0.1,0.6,0.1,0.8
+    c-0.2,1.1,0.6,1.5,1.4,1.8c1,0.4,1.1-0.4,1.4-1c0.3-0.5,0.5-1,0.9-1.4c0.6-0.6,0.7-1.2,0.6-2.1c-0.1-0.6,0.2-1.3,0.5-1.8
+    c0.5-0.9,0.9-1.7,0.5-2.8c-0.1-0.5,0-1,0.2-1.5c0.2-0.6,0.6-1.1,0.7-1.7c0.5-2.1,0.9-4.3,1.4-6.4c0-0.2,0.1-0.3,0.2-0.5
+    c0.4-1.1,0.9-2.3,1.2-3.4c0.6-2,1-4.1,1.6-6.1c0.7-2.3,1.6-4.6,2.3-6.9c0.6-1.9,1.1-3.8,1.7-5.7c0.8-2.7,1.8-5.3,2.7-8
+    c0.2-0.5,0.3-1,0.5-1.4c0.6-1.5,1.3-3,1.8-4.6c0.6-1.9,1-3.9,1.6-5.9c0.1-0.4,0.5-0.9,0.9-1c1.1-0.4,1.3-1.2,1.5-2.1
+    c0.5-1.5,1.1-3,1.5-4.5c0.3-1.2,0.4-2.4,0.6-3.6c0-0.1,0-0.2,0.1-0.4c0.3,0.1,0.6,0.1,0.8,0.2c0.5-1.3,0.9-2.5,1.4-3.7
+    c0.2-0.6,0.3-1.3,0.7-1.7c1.5-1.2,1.6-2.9,2-4.5c0.5-1.8,1.1-3.5,1.7-5.2c0-0.1,0.2-0.2,0.2-0.3c0.2-0.6,0.5-1.1,0.7-1.7
+    c0.2-0.4,0.3-0.8,0.5-1.3c0.4-1.1,0.9-2.3,1.3-3.4c0.2-0.6,0.4-1.2,0.7-1.7c0.9-1.5,1.8-3,2.7-4.5c0.4-0.6,0.9-1.2,1.2-1.9
+    c0.5-0.9,0.8-1.8,1.3-2.7c0.2-0.5,0.4-1,0.7-1.4c0.4-0.6,1-1.1,1.4-1.8c0.6-1.2,1.6-2,1.8-3.5c0.2-1.1,1.2-2.2,1.8-3.2
+    c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0.4,0.1,0.8,0.2,1.3c0.6-0.2,1-0.3,1.5-0.5c0.1,0.1,0.2,0.2,0.3,0.3c-1.5,2.4-2.9,4.9-3.7,7.7
+    c1.6-0.2,0.7-2.4,2.4-2.8c-0.1,0.6-0.1,0.8-0.1,1.1c0,0.2,0.2,0.6,0.3,0.6c0.3,0,0.6-0.1,0.8-0.2c0.8-1.2,1.5-2.4,2.2-3.7
+    c0.7-1.2,1.2-2.5,1.9-3.7c1.1-1.9,2.5-3.6,3.6-5.6c0.8-1.5,2.1-2.6,2.8-4.3c0.8-2.1,2.5-3.9,3.9-5.9c0.7-1,1.3-2,2-3.1
+    c0.6,1,0.3,2-0.2,2.8c-1.8,3.4-3.6,6.9-5.5,10.2c-1,1.8-2.4,3.4-3.4,5.3c-1.4,2.7-2.7,5.5-3.9,8.3c-0.4,0.9-0.8,2-0.8,3
+    c0,0.7,0.2,1.1-0.7,1.2c-0.2,0-0.5,0.4-0.5,0.6s0.4,0.6,0.5,0.5c0.6-0.2,1.5-0.3,1.8-0.7c0.6-0.8,0.6-2,1.2-2.6
+    c1.1-1.1,1.4-2.6,2.1-3.8c1.5-2.4,2.9-4.9,4.5-7.3c0.4-0.7,1.1-1.3,1.7-2.1c0.7,2.1-0.5,3.8-0.8,5.5c-0.2,1.4-0.9,2.6-1.2,4
+    c-0.8,3.9-1.6,7.8-2.4,11.7c-0.6,2.5-1.3,5-1.9,7.6c-0.4,1.8-0.6,3.6-1.2,5.3c-0.5,1.4-1,2.7-1.3,4.2c-0.6,3.4-1.6,6.7-2.4,10
+    c-0.2,0.9-0.7,1.8-0.8,2.8c-0.1,1.2-0.3,2.2-1.2,3.1c-0.2,0.2-0.2,0.7-0.2,1c0.1,1.5,0,2.9-0.9,4.2c-0.3,0.4-0.3,0.9-0.4,1.4
+    s-0.1,1-0.2,1.5c-0.6,2.3-1.2,4.6-1.7,7c-0.5,2.2-1,4.3-1.5,6.5c-0.4,1.7-0.9,3.5-1.2,5.2c-0.3,1.5-0.5,3.1-0.9,4.6
+    c-0.7,3-1.5,5.9-2.2,8.9c-0.2,1,0,2.2-0.3,3.1c-1.3,3.6-1.4,7.3-1.9,11c-0.2,1.9-0.4,3.8-0.7,5.6c-0.1,0.4-0.2,0.9-0.2,1.3
+    c0,1.5,0,3.1,0.1,4.6c0.1,1.9,0.1,3.8,0.5,5.7c0.3,1.6,1,3.1,1.7,4.6c0.5,1,1.3,2.2,2.2,2.7c1.1,0.6,2.5,0.8,3.8,1s2.6,0.1,3.8,0.3
+    c0.5,0.1,1,0.4,1.5,0.6c0.2,0.1,0.4,0.5,0.6,0.6c1.7,0.9,3.5,1.2,5.4,1.5c1.8,0.4,3.5,1,5.3,1.4c1.3,0.3,2.8,0.7,4,0.4
+    c1.9-0.4,3.4-2.1,5.6-1.3c0.1,0,0.3,0,0.5-0.1c1.5-0.7,3.2-1.1,4.2-2.6c0.2-0.3,0.7-0.4,1.1-0.5c1.6-0.1,3.2-0.1,4.8-0.9
+    c1.7-0.8,3.3-1.3,4.2-3.1c0.2-0.4,0.9-0.5,1.4-0.6c0.2,0,0.7,0.4,0.7,0.7c0.4,3.2,2.9,5.7,3.4,8.9c0,0,0.1,0.1,0.2,0.1
+    c0.5-0.7,1-1.3,1.5-2c1.4-2.4,2.9-4.7,4.3-7.1c0.2-0.3,0.2-0.8,0.2-1.2c-0.4,0.2-0.8,0.3-1.1,0.5c-0.7,0.7-1.3,1.5-1.9,2.2
+    c-0.3-0.9-0.5-1.6-0.7-2.4c0.6-0.4,1.2-0.9,1.9-1.4c0-0.1,0-0.2,0-0.3c-0.2-1.2-0.7-2.4,0.9-3.1c0.6-0.3,0.4-1-0.1-1.4
+    c-0.2-0.2-0.4-0.6-0.4-0.8c0.2-1.1,0.8-2,1.8-2.3c0.2,0.5,0.4,1,0.6,1.5c0.1,0.4,0.1,0.8,0.1,1.2c0,0.4,0,0.8-0.1,1.2
+    c0.4-0.3,1.2-0.5,1.2-0.8c0.2-1,0.2-1.9,1.2-2.5c0.2-0.1,0.2-0.9,0-1.2c-0.6-0.9-0.1-1.3,0.7-1.5c2.2-0.8,3.4-2.2,4-4.5
+    s1.6-4.6,2.5-6.9c0.1,0.1,0.2,0.2,0.3,0.3c0.5,0,1,0,1.5,0c-0.2-0.5-0.4-1-0.6-1.5c-0.1-0.1-0.3-0.1-0.4-0.2c0.6-0.5,1.1-1,1.7-1.4
+    c0.7-0.5,1.6-0.9,2.3-1.6c1.8-1.7,3.6-3.4,5.4-5.2c0.8-0.8,1.7-1.6,2.4-2.5c0.8-1,1.5-2,2.2-3c0.2-0.3,0.7-0.5,1-0.8
+    c0.1,0.1,0.2,0.2,0.3,0.2c-0.2,0.4-0.2,0.9-0.5,1.3c-1.5,1.7-3,3.4-4.5,5.2c-0.7,0.8-1.2,1.8-1.8,2.7c0.1,0.1,0.3,0.2,0.4,0.3
+    c0.6-0.7,1.3-1.3,1.7-2.1c0.5-1,1.2-1.5,2.2-2c0.6-0.3,1-0.9,1.4-1.4c0.5-0.5,0.7-1.3,1.2-1.7c1.1-1,1.9-2.1,2.4-3.5
+    c0.3-0.7,1-1.3,1.5-2c0.6-0.8,1.3-0.9,2.2-0.4c-0.9-1.1-0.9-1.6,0-2.6C361.4,465.8,362.4,464.8,362.3,463.3c0.4-0.4,1-0.6,1.3-1.1
+    c0.8-1.2,1.5-2.4,2.2-3.7c0.1-0.3,0-0.7,0-1.1c-0.3,0.2-0.7,0.3-0.8,0.5c-0.9,1.2-1.7,2.5-2.4,3.8
+    C362.3,462.1,362.4,462.7,362.3,463.3z M271.7,402c0.1,0.1,0.3,0.2,0.4,0.2c-0.9,1.9-1.9,3.9-2.7,5.7c-0.5-0.2-0.9-0.5-1.4-0.6
+    c-0.1,0-0.5,0.5-0.5,0.6c0.2,0.4,0.6,0.8,1,1.2c-0.3,0.7-0.7,1.4-1.2,2.3c-0.8-0.9-1.1-0.5-1.4,0.3c-0.4,1-0.9,1.9-1.2,2.9
+    c-0.2,0.6-0.3,1.3-0.5,2c0.1,0,0.3-0.1,0.4-0.1c0.2,0.3,0.5,0.6,0.7,0.8c0.2,0.2,0.4,0.4,0.6,0.3c0.2-0.1,0.4-0.3,0.4-0.6
+    c0.1-0.4-0.1-1,0-1.1c1-0.7,0.3-1.2-0.2-1.7c0.8-0.6,1.6-1.1,2.1-1.8c1.6-2.3,1.9-5.3,4-7.4v-0.1c1.1-3.7,3-6.9,5.1-10.1
+    c0.2-0.3,0.1-0.7,0.1-1.1c-0.4,0.1-1,0.1-1.2,0.4c-0.4,0.5-0.7,1.2-1,1.8c-0.3,0.5-0.4,1.2-1.3,0.6c-0.2-0.1-0.7,0.3-1.1,0.5
+    c0,0.1,0.1,0.2,0.1,0.3c0.3,0.1,0.7,0.1,1.1,0.2c-0.1,0.4-0.2,0.7-0.4,1.1c-1.1-1.1-1.4-0.6-1.8,0.5c-0.6,1.4-1.4,2.8-2.1,4.1
+    c-0.2,0.4-0.3,0.9-0.4,1.3c0.1,0,0.2,0.1,0.4,0.1C270.4,404,271.1,403,271.7,402z M346.5,482.7c-0.4,0.2-0.7,0.3-1,0.5
+    c-1.2,0.8-2.4,1.7-3.6,2.6c-0.5,0.4-0.9,1-1.3,1.5c-0.1,0.1-0.1,0.5,0,0.7c0.1,0.1,0.5,0.2,0.7,0.2c0.3-0.1,0.6-0.3,0.9-0.5
+    c1.3-1,2.6-2.1,4-3.1C346.7,484.1,346.8,483.6,346.5,482.7z M366.7,455.3c0.1,0.1,0.3,0.2,0.4,0.3c0.5-0.4,1.1-0.6,1.4-1.1
+    c0.7-1.1,1.4-2.3,2-3.4c0.1-0.2-0.1-0.8-0.2-0.8c-0.3-0.1-0.8,0-1,0.2c-0.5,0.7-1,1.4-1.4,2.1C367.5,453.5,367.1,454.4,366.7,455.3
+    z M363.1,392.3c1.3,0.2,3.2-1.2,3.4-2.7c0.1-0.5-0.2-1.1-0.3-1.6c-0.5,0.3-1.2,0.5-1.4,1C364.1,390,363.6,391.1,363.1,392.3z
+     M374.8,417.8c-0.3-0.4-0.4-0.8-0.7-1c-0.2-0.1-0.7,0.2-0.8,0.5c-0.5,1.1-1,2.2-1.4,3.3c-0.1,0.2,0.1,0.6,0.3,0.8
+    c0.1,0.1,0.6,0,0.7-0.2C373.5,420.2,374.1,419,374.8,417.8z M327.5,417.1c-0.2,1.4-0.5,2.6-0.6,3.9c0,0.3,0.3,0.6,0.4,0.9
+    c0.3-0.2,0.8-0.3,0.9-0.6c0.2-0.7,0.3-1.5,0.5-2.2C328.7,418.4,328.8,417.5,327.5,417.1z M371.1,444.5c0.4-0.3,0.5-0.3,0.6-0.5
+    c0.8-1,1.5-2,2.3-3c0.1-0.1,0-0.5,0-0.7c-0.3,0-0.6,0-0.8,0.1c-0.8,0.9-1.6,1.9-2.3,2.9C370.7,443.6,370.9,444,371.1,444.5z
+     M260.7,423.6c0.2,0.5,0.3,0.9,0.4,1.1c0,0.1,0.5,0,0.5-0.1c0.5-1.1,1.1-2.2,1.5-3.3c0.1-0.2-0.2-0.5-0.4-0.7
+    c-0.1-0.1-0.5,0.1-0.6,0.2C261.7,421.7,261.2,422.7,260.7,423.6z M274.1,392.2c-0.1,0-0.2-0.1-0.3-0.1c-0.3,0.5-0.6,0.9-0.8,1.5
+    c-0.1,0.3,0.1,0.7,0.1,1.1c0.4-0.2,0.9-0.4,1-0.7C274.2,393.4,274.1,392.8,274.1,392.2z M330,407.2c1-1,1-2.4,0-3.4
+    C330,405,330,406,330,407.2z M143.1,537.4c-0.1,0-0.3-0.1-0.4-0.1c-0.3,0.5-0.6,1-0.8,1.6c-0.1,0.3,0.4,0.6,0.6,0.9
+    c0.2-0.2,0.6-0.4,0.7-0.7C143.3,538.6,143.2,538,143.1,537.4z M278.7,400.4c-0.1,0-0.2,0-0.2-0.1c-0.4,0.4-0.8,0.8-1.1,1.3
+    c-0.1,0.2,0.1,0.5,0.2,0.8c0.2-0.1,0.6-0.2,0.7-0.3C278.5,401.5,278.6,401,278.7,400.4z M371.4,430.1c-0.5-0.3-0.8-0.7-0.9-0.6
+    c-0.3,0.1-0.6,0.4-0.8,0.6c0.2,0.2,0.4,0.6,0.6,0.6C370.6,430.7,370.9,430.4,371.4,430.1z M324.6,431c0.1,0.1,0.2,0.2,0.4,0.3
+    c0.3-0.3,0.7-0.6,0.8-0.9c0.1-0.2-0.3-0.6-0.4-0.9c-0.1,0-0.2,0-0.4,0.1C324.9,430.1,324.7,430.5,324.6,431z"/>
+  <path class="st0" d="M350.7,472.7c0.1-0.3,0.1-0.6,0.2-0.8c0.5-0.7,1.1-1.2,1.5-2c0.4-0.7,0.4-1.5,0.8-2.1c0.3-0.7,0.7-1.4,1.3-1.8
+    c1.2-0.9,1.7-2,2-3.4c0.1-0.4,0.3-0.8,0.5-1.5c0.2,0.8,0.4,1.2,0.5,1.8c0.4-0.2,0.8-0.4,1.1-0.5c0.1,0.1,0.1,0.1,0.2,0.2
+    c-2.5,3.5-5.1,7-7.6,10.4C351.1,472.9,350.9,472.8,350.7,472.7z"/>
+  <path class="st0" d="M365.6,447.1c0.6,0.2,1.1,0.3,1.9,0.5c-0.6,1.1-1.3,2.2-1.8,3.2c-0.5,1.1-0.9,2.2-1.4,3.4
+    c-0.7-0.2-1.3-0.4-2-0.6C363.4,451.5,364.4,449.3,365.6,447.1z"/>
+  <path class="st0" d="M251.6,430.2c0,0.6,0.1,1.1,0,1.7c0,0.5-0.2,0.9-0.3,1.3c-0.2,1.6-0.4,3.1-0.7,4.7c-0.1,0.3-0.5,0.6-0.8,0.7
+    c-0.2,0-0.6-0.4-0.7-0.7c-0.1-0.4-0.2-1.1,0.1-1.3c0.9-0.8,0.2-2.1,1.3-3c0.5-0.4,0.3-1.7,0.4-2.6c0-0.3,0.1-0.5,0.2-0.8
+    C251.3,430.2,251.4,430.2,251.6,430.2z"/>
+  <path class="st0" d="M242.9,456.7c-0.6-1.4-0.1-2.6,0.2-3.8c0.3-1.2,0.8-2.5,1.3-3.6c0.1-0.3,0.5-0.5,0.8-0.8
+    c0.2,0.3,0.4,0.6,0.4,0.9c0,0.7-0.1,1.5-0.4,2.1C244.6,453.2,243.8,454.9,242.9,456.7z"/>
+  <path class="st0" d="M341.6,348.2c0.6-1.3-1-2.3-0.1-3.6c0.1-0.2,0-0.7-0.1-1c-0.6-1.6-0.1-2.6,1.5-3.4c0,0.1,0.1,0.2,0.1,0.2
+    c-0.8,0.8-0.9,1.5-0.4,2.6c0.3,0.7,0,1.7-0.1,2.6s-0.4,1.7-0.6,2.5C341.9,348.2,341.7,348.2,341.6,348.2z"/>
+  <path class="st0" d="M287.3,375c1-3.3,3.6-5.6,5.5-8.5C293,367.4,289.3,373.3,287.3,375z"/>
+  <path class="st0" d="M277.5,390.5c1.4-2.4,2.7-4.9,4.1-7.3c0.1-0.2,0.5-0.1,1.2-0.3c-1.7,2.8-3.2,5.4-4.7,7.9
+    C277.9,390.7,277.7,390.6,277.5,390.5z"/>
+  <path class="st0" d="M361.6,448.3c0.3-2.3,1.5-4.1,2.9-6.1c0.7,1.3,0.6,2.1-0.2,2.9c-0.8,0.8-1.8,1.5-1.9,2.8
+    c0,0.2-0.3,0.4-0.5,0.5C361.8,448.4,361.7,448.4,361.6,448.3z"/>
+  <path class="st0" d="M241,463.2c-0.7-1.9,0.1-3.4,0.4-4.8c0-0.2,0.5-0.4,0.8-0.4c0.1,0,0.4,0.4,0.4,0.7c0,0.3,0,0.7-0.1,1
+    C242,460.8,241.5,461.8,241,463.2z"/>
+  <path class="st0" d="M247.2,442.2c-0.1,1.4-0.1,2.8-0.3,4.3c-0.1,1-0.8,1-1.6,0.6c0.5-1.7,1.1-3.3,1.6-4.9
+    C247,442.1,247.1,442.2,247.2,442.2z"/>
+  <path class="st0" d="M282.7,382.2c0.9-1.4-0.8-3,0.6-4.3c0.4,0.8,1,1.5,1,2.2c0,0.8-0.6,1.5-0.9,2.3
+    C283.2,382.3,283,382.2,282.7,382.2z"/>
+  <path class="st0" d="M320.3,422.5c-0.1,0.8-0.1,1.6-0.2,2.4c0,0.2-0.4,0.6-0.6,0.6s-0.6-0.3-0.7-0.6c-0.4-1.2,0.5-1.8,1.2-2.6
+    C320,422.4,320.1,422.5,320.3,422.5z"/>
+  <path class="st0" d="M179.2,423.7c-0.6-1.3,0.3-2.3,0.7-3.4C180.4,421.8,180.2,422.8,179.2,423.7z"/>
+  <path class="st0" d="M317.9,441.8c0.1-0.9,0.2-1.7,0.3-2.6C319.6,440.3,319.5,441.1,317.9,441.8z"/>
+  <path class="st0" d="M256.4,416.6c-0.4,1.2-0.9,2.5-1.3,3.7c-0.1,0-0.2-0.1-0.3-0.1c0.3-1.3,0.7-2.6,1-3.8
+    C256,416.5,256.2,416.5,256.4,416.6z"/>
+  <path class="st0" d="M282.1,380.6c-0.7,0.9-1.3,1.8-2,2.7c-0.1-0.1-0.2-0.2-0.3-0.2c0.6-0.9,1.2-1.9,1.8-2.8
+    C281.8,380.4,282,380.5,282.1,380.6z"/>
+  <path class="st0" d="M286.8,376.7c-0.6,0.8-1.3,1.5-1.9,2.3c-0.1-0.1-0.3-0.2-0.4-0.3c0.6-0.8,1.2-1.5,1.9-2.3
+    C286.6,376.5,286.7,376.6,286.8,376.7z"/>
+  <path class="st0" d="M177.7,430.6c-0.3,0.7-0.5,1.3-0.8,2c-0.2-0.1-0.4-0.1-0.6-0.2c0.3-0.7,0.5-1.3,0.8-2
+    C177.4,430.5,177.5,430.5,177.7,430.6z"/>
+  <path class="st0" d="M295.5,363.8c-0.5,0.7-0.8,1.2-1.2,1.9C293.8,364.2,294,363.9,295.5,363.8z"/>
+  <path class="st0" d="M358.2,459.5c0.6-0.4,1.1-0.8,1.9-1.3C359.2,460.2,359.2,460.2,358.2,459.5z"/>
+  <path class="st0" d="M254.4,422.9c-0.1,0.5-0.2,1-0.3,1.5l-0.5-0.1c0.1-0.5,0.1-1,0.2-1.6C254,422.8,254.2,422.8,254.4,422.9z"/>
+  <path class="st0" d="M333.4,387.3c0.1-0.7,0.1-1.3,0.3-1.8c0.1-0.2,0.4-0.3,0.6-0.5c0.1,0.3,0.3,0.6,0.2,0.8
+    C334.2,386.3,333.9,386.7,333.4,387.3z"/>
+  <path class="st0" d="M349.9,474.4c-0.4,0.8-0.8,1.6-1.3,2.4c-0.1-0.1-0.3-0.1-0.4-0.2c0.4-0.8,0.9-1.6,1.3-2.3
+    C349.7,474.2,349.8,474.3,349.9,474.4z"/>
+  <path class="st0" d="M249.4,315.8c0.3,0.4,0.5,0.6,0.7,0.8c-0.2,0.2-0.5,0.6-0.7,0.5c-0.2,0-0.5-0.4-0.6-0.6
+    C248.9,316.3,249.2,316.1,249.4,315.8z"/>
+  <path class="st0" d="M365.2,436.7c0.5-0.6,0.9-1.3,1.4-1.9c0.1,0.1,0.2,0.1,0.3,0.2c-0.4,0.7-0.8,1.4-1.1,2
+    C365.5,436.9,365.3,436.8,365.2,436.7z"/>
+</g>
+</svg>

frontend/webpack/base.js

@@ -86,12 +86,15 @@ module.exports = {
     },
     {
       test: /\.css$/,
-      exclude: /node_modules/,
+      loader: 'style-loader!css-loader'
-      loaders: [ 'style-loader', 'css-loader' ],
+      // XXX: Commenting out breaks node_modules that use css
-      include: [
+      //        i.e react-select.
-        FRONTEND,
+
-        UI
+      // exclude: /node_modules/,
-      ]
+      // include: [
+      //   FRONTEND,
+      //   UI
+      // ]
     }]
   }
 };

ui/src/components/select-custom/index.js

@@ -38,11 +38,12 @@ const SelectCustom = ({
 	onChange,
 	options,
   required = false,
+  style,
   value = ''
 }) => {
 
   return (
-    <div>
+    <div style={style}>
       <StyledLabel>
         {label}
       </StyledLabel>
@@ -76,6 +77,7 @@ SelectCustom.propTypes = {
   onChange: React.PropTypes.func,
   options: React.PropTypes.array,
   required: React.PropTypes.bool,
+  style: React.PropTypes.object,
   value: React.PropTypes.string
 };
 

ui/src/components/tooltip/index.js

@@ -3,6 +3,7 @@
 const React = require('react');
 const composers = require('../../shared/composers');
 const fns = require('../../shared/functions');
+const constants = require('../../shared/constants');
 const Styled = require('styled-components');
 
 const {
@@ -18,6 +19,10 @@ const {
   default: styled
 } = Styled;
 
+const {
+  colors
+} = constants;
+
 const ItemPadder = 9;
 const WrapperPadder = 24;
 const ulPadder = `${WrapperPadder - ItemPadder} 0`;
@@ -33,6 +38,8 @@ const StyledList = styled.ul`
   margin: 0;
   padding: ${remcalc(ulPadder)};
   min-width: ${remcalc(200)};
+  
+  ${props => props.style}
 
   ${baseBox()}
 
@@ -41,7 +48,7 @@ const StyledList = styled.ul`
     padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};
 
     &:hover {
-      background: red;
+      background: ${colors.borderSecondaryDarkest};
     }
   }
 
@@ -79,6 +86,7 @@ module.exports = ({
     <StyledList
       arrowPosition={arrowPosition}
       className={className}
+      style={style}
     >
       {children}
     </StyledList>