From 753a3478489be989cd90e8b8e949360a9f9950b9 Mon Sep 17 00:00:00 2001
From: Jayasanka <jayasanka.sack@gmail.com>
Date: Wed, 22 May 2019 14:04:13 +0530
Subject: [PATCH] Display screenshots and icon

---
 .../react-app/src/App.css                     | 45 +++++-------
 .../components/apps/release/ReleaseView.js    | 19 +++--
 .../src/pages/dashboard/Dashboard.js          | 71 ++++++++++---------
 3 files changed, 69 insertions(+), 66 deletions(-)

diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
index 4fea44459f..8b397c1780 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/App.css
@@ -1,37 +1,28 @@
-.App {
-  text-align: center;
+.ant-upload.ant-upload-drag {
+  height: 170px;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.release .release-icon{
+  margin-right: 15px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+.release .release-icon img{
+  width: 100%;
+  border-radius: 100%;
 }
-
-.App-link {
-  color: #61dafb;
+.release .release-screenshot img{
+  width: 100%;
+  border-radius: 15px;
+  padding: 5px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.logo {
+  width: 120px;
+  height: 31px;
+  margin: 16px 0 16px 20px;
+  float: left;
 }
 
-.ant-upload.ant-upload-drag {
-  height: 170px;
+.logo img{
+  height: 35px;
 }
\ No newline at end of file
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
index 8e0953c9c3..f54a00ce08 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/components/apps/release/ReleaseView.js
@@ -1,17 +1,18 @@
 import React from "react";
 import {Avatar, Row, Col, Typography} from "antd";
+import "../../../App.css";
 
 const {Title, Text} = Typography;
 
 class ReleaseView extends React.Component {
     render() {
         const release = this.props.release;
+        console.log(release);
         return (
-            <div>
+            <div className="release">
                 <Row>
-                    <Col span={4}>
-                        <Avatar size={128} shape="square"
-                                src={release.iconPath}/>
+                    <Col span={4} className="release-icon">
+                        <img src={release.iconPath}/>
                     </Col>
                     <Col span={18}>
                         <Title level={2}>App Name</Title>
@@ -21,8 +22,14 @@ class ReleaseView extends React.Component {
                 </Row>
                 <br/>
                 <Row>
-                    <Col span={6}>
-                        <img style={{width:"100%"}} src={release.screenshotPath1}/>
+                    <Col span={6} className="release-screenshot">
+                        <img src={release.screenshotPath1}/>
+                    </Col>
+                    <Col span={6} className="release-screenshot">
+                        <img src={release.screenshotPath2}/>
+                    </Col>
+                    <Col span={6} className="release-screenshot">
+                        <img src={release.screenshotPath3}/>
                     </Col>
                 </Row>
             </div>
diff --git a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
index ea9d762d9b..1528c2d873 100644
--- a/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
+++ b/components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/react-app/src/pages/dashboard/Dashboard.js
@@ -3,12 +3,11 @@ import {Layout, Menu, Icon} from 'antd';
 
 const {Header, Content, Footer} = Layout;
 
-import styles from './Dashboard.less';
 import Logo from "../../../public/images/logo.svg";
 import {Link, NavLink} from "react-router-dom";
 import RouteWithSubRoutes from "../../components/RouteWithSubRoutes"
-import { Switch, Redirect } from 'react-router'
-
+import {Switch, Redirect} from 'react-router'
+import "../../App.css";
 
 class Dashboard extends React.Component {
     constructor(props) {
@@ -20,36 +19,42 @@ class Dashboard extends React.Component {
 
     render() {
         return (
-            <Layout className="layout">
-                <Header>
-                    <div className={styles.logo}>
-                        <img src={Logo}/>
-                    </div>
-                    <Menu
-                        theme="light"
-                        mode="horizontal"
-                        defaultSelectedKeys={['2']}
-                        style={{lineHeight: '64px'}}
-                    >
-                        <Menu.Item key="1"><Link to="/publisher/apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
-                        <Menu.Item key="2"><Link to="/publisher/apps"><Icon type="line-chart"/>Apps</Link></Menu.Item>
-                        <Menu.Item key="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New App</Link></Menu.Item>
-                    </Menu>
-                </Header>
-                <Content style={{padding: '0 0'}}>
-                    <Switch>
-                        <Redirect exact from="/publisher" to="/publisher/apps"/>
-                        {this.state.routes.map((route) => (
-                            <RouteWithSubRoutes key={route.path} {...route} />
-                        ))}
-
-                    </Switch>
-
-                </Content>
-                <Footer style={{textAlign: 'center'}}>
-                    ©2019 entgra.io
-                </Footer>
-            </Layout>
+            <div>
+                <Layout className="layout">
+                    <Header>
+                        <div className="logo">
+                            <img src={Logo}/>
+                        </div>
+                        <Menu
+                            theme="light"
+                            mode="horizontal"
+                            defaultSelectedKeys={['2']}
+                            style={{lineHeight: '64px'}}
+                        >
+                            <Menu.Item key="1"><Link to="/publisher/apps"><Icon type="appstore"/>Apps</Link></Menu.Item>
+                            <Menu.Item key="2"><Link to="/publisher/apps"><Icon
+                                type="line-chart"/>Apps</Link></Menu.Item>
+                            <Menu.Item key="3"><Link to="/publisher/apps/new-app"><Icon type="upload"/>Add New
+                                App</Link></Menu.Item>
+                        </Menu>
+                    </Header>
+                </Layout>
+                <Layout>
+                    <Content style={{padding: '0 0'}}>
+                        <Switch>
+                            <Redirect exact from="/publisher" to="/publisher/apps"/>
+                            {this.state.routes.map((route) => (
+                                <RouteWithSubRoutes key={route.path} {...route} />
+                            ))}
+
+                        </Switch>
+
+                    </Content>
+                    <Footer style={{textAlign: 'center'}}>
+                        ©2019 entgra.io
+                    </Footer>
+                </Layout>
+            </div>
         );
     }
 }