Add plugin icon to permissions list

packages/strapi-plugin-users-permissions/admin/src/components/Plugin/index.js

@@ -30,14 +30,20 @@ class Plugin extends React.Component { // eslint-disable-line react/prefer-state
 
   render() {
     const divStyle = this.state.collapse ? { marginBottom: '.4rem' } : {};
+    const icon = get(this.context.plugins.toJS(), [this.props.name, 'icon']);
 
     return (
       <div className={styles.plugin} style={divStyle}>
         <div className={styles.banner} onClick={this.handleClick}>
           <div>
-            <span>{this.props.name}</span>
+            { icon ? (
+              <div className={styles.iconContainer}>
+                <i className={`fa fa-${icon}`} />
+              </div>
+            ) : ''}
+            <span className={styles.name}>{this.props.name}</span>
             &nbsp;—&nbsp;
-            <span>
+            <span className={styles.description}>
               {this.props.name === 'application' ? (
                 <FormattedMessage
                   id="users-permissions.Plugin.permissions.application.description"
@@ -71,6 +77,10 @@ class Plugin extends React.Component { // eslint-disable-line react/prefer-state
   }
 }
 
+Plugin.contextTypes = {
+  plugins: PropTypes.object.isRequired,
+};
+
 Plugin.defaultProps = {
   name: '',
   plugin: {

packages/strapi-plugin-users-permissions/admin/src/components/Plugin/styles.scss

@@ -11,20 +11,9 @@
   padding: 0 28px;
   color: #787E8F;
 
-  line-height: 5.3rem;
-
   > div:first-child {
-    > span:first-child {
-      font-size: 11px;
-      font-weight: 600;
-      text-transform: uppercase;
-    }
-
-    > span:last-child {
-      color: #8B91A0;
-      font-size: 12px;
-      font-weight: 400;
-    }
+    display: flex;
+    line-height: 5.3rem;
   }
 }
 
@@ -54,3 +43,26 @@
     padding-top: 2.3rem;
   }
 }
+
+.description {
+  color: #8B91A0;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.iconContainer {
+  height: 36px;
+  width: 70px;
+  margin: auto;
+  margin-right: 14px;
+  border: 1px solid rgba(28,93,231,0.1);
+  border-radius: 3px;
+  line-height: 36px;
+  text-align: center;
+}
+
+.name {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+}

packages/strapi-plugin-users-permissions/admin/src/components/Plugins/styles.scss

@@ -4,9 +4,14 @@
 
 .pluginsContainer {
   padding-top: 1.9rem;
-
+  > div {
+    border-bottom: 1px solid white;
+  }
   > div:not(:first-child) {
     background: linear-gradient(315deg, rgba(255,255,255,0) 0%, rgba(227, 233, 243, 0.54) 100%);
+    > div {
+      line-height: 5.2rem;
+    }
       > div:nth-child(2) {
         >div:first-child {
           min-height: 1.8rem;
@@ -18,6 +23,7 @@
 
 .headerContainer {
   padding: 0 28px;
+
   > div:first-child {
     margin-bottom: 2px;
     color: #333740;