refactor(dashboard): use the Fabric icons

Signed-off-by: Gianfranco Manganiello <gmanganiello@teclib.com>

src/assets/styles/scss/architecture/5_level_components/_authentication_layout.scss

@@ -1,18 +1,18 @@
 .authentication {
     margin: auto;
-    
+
     section {
         padding-top: 20px;
         padding-bottom: 20px;
         min-height: 75vh;
-        
+
         .loading {
             margin-top: 100px !important;
         }
 
         figure {
             text-align: center;
-            
+
             img {
                 width: 90px;
             }
@@ -28,10 +28,6 @@
                 margin-top: 15px;
                 color: $color-1-primary;
                 cursor: pointer;
-
-                .refreshIcon {
-                    padding-right: 5px;
-                }
             }
         }
 
@@ -58,4 +54,4 @@
     footer {
         text-align: center;
     }
-}
+}

src/assets/styles/scss/main.scss

@@ -30,7 +30,6 @@
     './architecture/5_level_components/header_admin_dashboard',
     './architecture/5_level_components/select_language',
     './architecture/5_level_components/splitview',
-    './architecture/5_level_components/icons',
     './architecture/5_level_components/toast',
     './architecture/5_level_components/files_list',
     './architecture/5_level_components/dashboard',

src/components/EmptyMessage/index.js

@@ -28,6 +28,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Icon } from 'office-ui-fabric-react/lib/Icon'
 import I18n from 'shared/i18n'
 
 /**
@@ -40,7 +41,7 @@ const EmptyMessage = props => (
   <div className="center-block-content">
     {
         props.icon && props.showIcon
-          ? <span className={`icon-empty-message ${props.icon}`} />
+          ? <Icon iconName={props.icon} className="icon-empty-message" />
           : null
       }
     <h1 className="empty-message">

src/components/FilesUpload/FilesUploadItemList.js

@@ -30,6 +30,7 @@ import React, {
   PureComponent,
 } from 'react'
 import PropTypes from 'prop-types'
+import { Icon } from 'office-ui-fabric-react/lib/Icon'
 
 /**
  * Component with the layout of the list of files to upload
@@ -47,7 +48,7 @@ class FilesUploadItemList extends PureComponent {
         <div className="files-list__content">
           <div className="files-list__item">
             <div className="icon files-list__item-icon">
-              <span className="documentIcon" />
+              <Icon iconName="Page" />
             </div>
             <div className="files-list__item-content-primary">
               <div className="files-list__content-text-primary">
@@ -62,12 +63,10 @@ class FilesUploadItemList extends PureComponent {
             </div>
             <div className="files-list__item-content-secondary">
               <div className="icon files-list__item-icon">
-                <span
-                  className="deleteIcon"
+                <Icon
+                  iconName="Delete"
                   style={{ fontSize: '18px' }}
                   onClick={this.props.onRemove}
-                  role="button"
-                  tabIndex="0"
                 />
               </div>
             </div>

src/components/Forms/ConstructInputs/index.js

@@ -28,6 +28,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Icon } from 'office-ui-fabric-react/lib/Icon'
 import createListElement from './createListElement'
 
 /**
@@ -42,7 +43,7 @@ const ConstructInputs = (props) => {
   if (props.icon) {
     icon = (
       <div className="froms__row froms__row--icon">
-        <span className={props.icon} />
+        <Icon iconName={props.icon} />
         {
           props.title
             ? (

src/components/Forms/Input/index.js

@@ -30,6 +30,7 @@ import React, {
   PureComponent,
 } from 'react'
 import PropTypes from 'prop-types'
+import { Icon } from 'office-ui-fabric-react/lib/Icon'
 import I18n from 'shared/i18n'
 import Confirmation from 'components/Confirmation'
 import ErrorValidation from 'components/ErrorValidation'
@@ -120,12 +121,10 @@ class Input extends PureComponent {
   render() {
     const deleteIcon = this.props.delete
       ? (
-        <span
-          className="deleteIcon"
+        <Icon
+          iconName="Delete"
           style={{ margin: 10, fontSize: 18 }}
           onClick={this.deleteEmail}
-          role="button"
-          tabIndex="0"
         />
       )
       : undefined

src/components/HeaderBreadcrumb/index.js

@@ -33,6 +33,7 @@ import PropTypes from 'prop-types'
 import {
   Link,
 } from 'react-router-dom'
+import { Icon } from 'office-ui-fabric-react/lib/Icon'
 import I18n from 'shared/i18n'
 import publicURL from 'shared/publicURL'
 
@@ -81,11 +82,9 @@ class HeaderBreadcrumb extends PureComponent {
       <header className="header-block">
 
         <div className="header-icon">
-          <span
-            className="burgerIcon"
+          <Icon
+            iconName="GlobalNavButton"
             onClick={this.props.handleToggleExpand}
-            role="button"
-            tabIndex="0"
           />
         </div>
 

src/components/InfoBox/__tests__/InfoBox.snapshot.js

@@ -41,7 +41,7 @@ describe('InfoBox', () => {
         <InfoBox
           name="test"
           to="test/"
-          icon="filesIcon"
+          icon="Page"
           count={3}
         />
       </Router>,

src/components/InfoBox/index.js

@@ -28,6 +28,7 @@
 
 import React from 'react'
 import PropTypes from 'prop-types'
+import { Icon } from 'office-ui-fabric-react/lib/Icon'
 import {
   Link,
 } from 'react-router-dom'
@@ -49,7 +50,8 @@ const InfoBox = ({
 }) => (
   <Link to={to}>
     <div className="info-box">
-      <span className={`icon-box ${icon}`} />
+      <Icon iconName={icon} className="icon-box" />
+
       <span className="content-box">
         {count}
       </span>

src/components/SplitView/IconWithPopper/index.js

@@ -33,6 +33,7 @@ import PropTypes from 'prop-types'
 import {
   NavLink,
 } from 'react-router-dom'
+import { Icon } from 'office-ui-fabric-react/lib/Icon'
 
 /**
  * Component with the icons of the side menu
@@ -49,10 +50,9 @@ class IconWithPopper extends PureComponent {
       return (
         <div>
           <NavLink to={this.props.to} activeClassName="selected">
-            <span
-              className={this.props.iconName}
-              title={this.props.title}
-            />
+            <span title={this.props.title}>
+              <Icon iconName={this.props.iconName} />
+            </span>
           </NavLink>
         </div>
       )
@@ -64,10 +64,9 @@ class IconWithPopper extends PureComponent {
         tabIndex="0"
       >
         <a>
-          <span
-            className={this.props.iconName}
-            title={this.props.title}
-          />
+          <span title={this.props.title}>
+            <Icon iconName={this.props.iconName} />
+          </span>
         </a>
       </div>
     )