App icon styling

src/components/structures/ModularWidgets.js

@@ -2,11 +2,15 @@ class ModularWidgets {
     static widgetTypes = [
         {
             type: 'etherpad',
-            icon: '',
+            icon: 'http://localhost:8000/static/etherpad.svg',
+            name: 'Etherpad',
+            description: 'Collaborative text editor',
         },
         {
             type: 'grafana',
-            icon: '',
+            icon: 'http://localhost:8000/static/grafana.svg',
+            name: 'Grafana',
+            description: 'Graph and monitor all the things!',
         },
     ];
 }

src/components/views/dialogs/AddAppDialog.js

@@ -16,6 +16,8 @@ limitations under the License.
 
 import React from 'react';
 import sdk from '../../../index';
+import AppIconTile from '../elements/AppIconTile';
+import ModularWidgets from '../../structures/ModularWidgets';
 
 /**
  * Prompt the user for address of iframe widget
@@ -50,13 +52,22 @@ export default React.createClass({
 
     render: function() {
         const BaseDialog = sdk.getComponent('views.dialogs.BaseDialog');
+        const appCards = ModularWidgets.widgetTypes.map((widgetType, index) =>
+            <AppIconTile
+                key={index}
+                type={widgetType.type}
+                icon={widgetType.icon}
+                name={widgetType.name}
+                description={widgetType.description}/>,
+            );
+
         return (
             <BaseDialog className="mx_AddAppDialog"
                 onFinished={this.props.onFinished}
                 title="Add an app Widget"
             >
                 <div className="mx_Dialog_content">
-                    
+                    {appCards}
                     {/* <hr/>
                     <form onSubmit={this.onFormSubmit}>
                         <div>Or enter the URL of the widget to add.</div>

src/components/views/elements/AppIconTile.js

@@ -21,7 +21,9 @@ class AppIconTile extends React.Component {
     render() {
         return (
             <div className="mx_AppIconTile">
-                <img src={this.props.icon} alt={this.props.name} className="mx_AppIconTile_image"/>
+                <div className="mx_AppIconTile_imageContainer">
+                    <img src={this.props.icon} alt={this.props.name} className="mx_AppIconTile_image"/>
+                </div>
                 <div className="mx_AppIconTile_content">
                   <h4><b>{this.props.name}</b></h4>
                   <p>{this.props.description}</p>