icons fonts include font awesome and google icons

lib/shared/elements/icon/index.jsx

@@ -28,21 +28,22 @@ export default class Icon extends Component {
   static style = style;
 
   render () {
-    const classMap = this.props.styleClassMap || {};
+    const {relax, styleClassMap, align, icon} = this.props;
+    const classMap = styleClassMap || {};
     const props = {
       htmlTag: 'div',
-      ...this.props.relax,
+      ...relax,
       settings,
       style: {
-        textAlign: this.props.align
+        textAlign: align
       }
     };
 
     return (
       <Element {...props}>
         <div className={cx(classes.holder, classMap.holder)}>
-          <i className={cx(this.props.icon && this.props.icon.className, classMap.icon)}>
-            {this.props.icon && this.props.icon.content}
+          <i className={cx(icon && icon.className, classMap.icon)}>
+            {icon && icon.content}
           </i>
         </div>
       </Element>

lib/shared/screens/admin/index.js

@@ -1,5 +1,7 @@
+import 'styles/icons/font-awesome/index.less';
+import 'styles/icons/google-icons/index.less';
+import 'styles/icons/nucleo/index.less';
 import 'styles/normalize.less';
-import 'styles/nucleo/index.less';
 
 import Component from 'components/component';
 import React, {PropTypes} from 'react';

lib/shared/screens/admin/shared/components/input-options/icon/icon-picker.jsx

@@ -1,6 +1,8 @@
 import Component from 'components/component';
 import React, {PropTypes} from 'react';
 
+import styles from './icon-picker.less';
+
 export default class IconPicker extends Component {
   static propTypes = {
     value: PropTypes.number.isRequired,
@@ -10,25 +12,29 @@ export default class IconPicker extends Component {
   };
 
   render () {
+    const {openSelector} = this.props;
+
     return (
-      <div className='icon-picker' onClick={this.props.openSelector}>
+      <div className={styles.root} onClick={openSelector}>
         {this.renderSelected()}
       </div>
     );
   }
 
   renderSelected () {
+    const {value} = this.props;
+
     let result;
-    if (this.props.value && this.props.value.family) {
+    if (value && value.family) {
       result = (
-        <div className='selected'>
-          <i className={this.props.value.className}>
-            {this.props.value.content}
+        <div className={styles.selected}>
+          <i className={value.className}>
+            {value.content}
           </i>
         </div>
       );
     } else {
-      result = <p>No icon selected</p>;
+      result = <div className={styles.none}>No icon selected</div>;
     }
     return result;
   }

lib/shared/screens/admin/shared/components/input-options/icon/icon-picker.less

@@ -0,0 +1,28 @@
+@import '~styles/colors.less';
+
+.root {
+  background-color: @chromeBackgroundDarkerColor;
+  border: 1px solid @chromeBordersColor;
+  text-align: center;
+  width: 100%;
+  max-width: 290px;
+  height: 100px;
+  border-radius: 3px;
+
+  &:hover {
+    border-color: @primary;
+  }
+}
+
+.selected {
+  :global i {
+    font-size: 40px;
+    line-height: 100px;
+    color: @adminText;
+  }
+}
+
+.none {
+  font-size: 12px;
+  color: @adminText;
+}

lib/shared/screens/admin/shared/components/input-options/icon/index.js

@@ -1,3 +1,4 @@
+import bind from 'decorators/bind';
 import Component from 'components/component';
 import React, {PropTypes} from 'react';
 
@@ -15,12 +16,14 @@ export default class IconPickerContainer extends Component {
     };
   }
 
+  @bind
   openSelector () {
     this.setState({
       selector: true
     });
   }
 
+  @bind
   closeSelector () {
     this.setState({
       selector: false
@@ -32,8 +35,8 @@ export default class IconPickerContainer extends Component {
       <IconPicker
         {...this.props}
         {...this.state}
-        openSelector={::this.openSelector}
-        closeSelector={::this.closeSelector}
+        openSelector={this.openSelector}
+        closeSelector={this.closeSelector}
       />
     );
   }

lib/shared/screens/auth/index.jsx

@@ -1,5 +1,5 @@
+import 'styles/icons/nucleo/index.less';
 import 'styles/normalize.less';
-import 'styles/nucleo/index.less';
 
 import Component from 'components/component';
 import React, {PropTypes} from 'react';

lib/shared/styles/icons/google-icons/index.less

@@ -0,0 +1,40 @@
+:global {
+
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(/fonts/material-icons/MaterialIcons-Regular.eot); /* For IE6-8 */
+    src: local('Material Icons'),
+         local('MaterialIcons-Regular'),
+         url(/fonts/material-icons/MaterialIcons-Regular.woff2) format('woff2'),
+         url(/fonts/material-icons/MaterialIcons-Regular.woff) format('woff'),
+         url(/fonts/material-icons/MaterialIcons-Regular.ttf) format('truetype');
+  }
+
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;  /* Preferred icon size */
+    display: inline-block;
+    line-height: 1;
+    text-transform: none;
+    letter-spacing: normal;
+    word-wrap: normal;
+    white-space: nowrap;
+    direction: ltr;
+
+    /* Support for all WebKit browsers. */
+    -webkit-font-smoothing: antialiased;
+    /* Support for Safari and Chrome. */
+    text-rendering: optimizeLegibility;
+
+    /* Support for Firefox. */
+    -moz-osx-font-smoothing: grayscale;
+
+    /* Support for IE. */
+    font-feature-settings: 'liga';
+  }
+
+}

lib/shared/styles/icons/nucleo/index.less

@@ -0,0 +1,2 @@
+@import './outline/nucleo-outline.less';
+@import './mini/nucleo-mini.less';

lib/shared/styles/nucleo/mini/less/nucleo-mini.less → lib/shared/styles/icons/nucleo/mini/nucleo-mini.less

@@ -7,19 +7,19 @@ Created using IcoMoon - icomoon.io
 -------------------------------- */
 @import "./variables.less";
 
-@font-face {
-  font-family: 'Nucleo Mini';
-  src: url('/fonts/nucleo-mini.eot');
-  src: url('/fonts/nucleo-mini.eot') format('embedded-opentype'),
-    url('/fonts/nucleo-mini.woff2') format('woff2'),
-    url('/fonts/nucleo-mini.woff') format('woff'),
-    url('/fonts/nucleo-mini.ttf') format('truetype'),
-    url('/fonts/nucleo-mini.svg') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-
 :global {
+  @font-face {
+    font-family: 'Nucleo Mini';
+    src: url('/fonts/nucleo/nucleo-mini.eot');
+    src: url('/fonts/nucleo/nucleo-mini.eot') format('embedded-opentype'),
+      url('/fonts/nucleo/nucleo-mini.woff2') format('woff2'),
+      url('/fonts/nucleo/nucleo-mini.woff') format('woff'),
+      url('/fonts/nucleo/nucleo-mini.ttf') format('truetype'),
+      url('/fonts/nucleo/nucleo-mini.svg') format('svg');
+    font-weight: normal;
+    font-style: normal;
+  }
+
   /*------------------------
   	base class definition
   -------------------------*/

lib/shared/styles/nucleo/outline/less/nucleo-outline.less → lib/shared/styles/icons/nucleo/outline/nucleo-outline.less

@@ -9,12 +9,12 @@ Created using IcoMoon - icomoon.io
 
 @font-face {
   font-family: 'Nucleo Outline';
-  src: url('/fonts/nucleo-outline.eot');
-  src:  url('/fonts/nucleo-outline.eot') format('embedded-opentype'),
-        url('/fonts/nucleo-outline.woff2') format('woff2'),
-        url('/fonts/nucleo-outline.woff') format('woff'),
-        url('/fonts/nucleo-outline.ttf') format('truetype'),
-        url('/fonts/nucleo-outline.svg') format('svg');
+  src: url('/fonts/nucleo/nucleo-outline.eot');
+  src:  url('/fonts/nucleo/nucleo-outline.eot') format('embedded-opentype'),
+        url('/fonts/nucleo/nucleo-outline.woff2') format('woff2'),
+        url('/fonts/nucleo/nucleo-outline.woff') format('woff'),
+        url('/fonts/nucleo/nucleo-outline.ttf') format('truetype'),
+        url('/fonts/nucleo/nucleo-outline.svg') format('svg');
   font-weight: normal;
   font-style: normal;
 }