From c552f7f336f9490fd17dd1b3d4afb8c40e9d2f53 Mon Sep 17 00:00:00 2001
From: Richard Lewis <rick@matrix.org>
Date: Wed, 7 Jun 2017 10:55:49 +0100
Subject: [PATCH] App icon styling

---
 src/components/structures/ModularWidgets.js  |  8 ++++++--
 src/components/views/dialogs/AddAppDialog.js | 13 ++++++++++++-
 src/components/views/elements/AppIconTile.js |  4 +++-
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/src/components/structures/ModularWidgets.js b/src/components/structures/ModularWidgets.js
index 16b00dfbf3..306a645a6f 100644
--- a/src/components/structures/ModularWidgets.js
+++ b/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!',
         },
     ];
 }
diff --git a/src/components/views/dialogs/AddAppDialog.js b/src/components/views/dialogs/AddAppDialog.js
index 90bb53f3c3..0d24c641a6 100644
--- a/src/components/views/dialogs/AddAppDialog.js
+++ b/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>
diff --git a/src/components/views/elements/AppIconTile.js b/src/components/views/elements/AppIconTile.js
index 2c67efcede..9e9dbe6d41 100644
--- a/src/components/views/elements/AppIconTile.js
+++ b/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>