Added logo component, material design button styles. Replaced logo in main page.

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/locales/en.json

@@ -1,6 +1,7 @@
 {
   "Title" : "Title",
   "Description" : "Description",
+  "ShortDescription" : "Short Description",
   "Category" : "Category",
   "Visibility" : "Visibility",
   "Devices" : "Devices",

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/public/themes/default/default-theme.css

@@ -32,11 +32,90 @@
     src: local("Roboto-Regular"), url("../../fonts/Roboto-Regular.woff2") format("woff2");
 }
 
+/*Colors*/
+.primary {
+    color: white;
+    background-color: #2196f3 !important;
+}
+
+.primary-flat {
+    color: #2196F3 !important;
+}
+
+.danger {
+    color: white;
+    background-color: #e91e63 !important;
+}
+
+.danger-flat {
+    color: #e91e63 !important;
+}
+
+.grey {
+    color: #b3b3b3 !important;
+}
+
+/* ==================================================================== */
+/* Custom button styles based on material design specs. */
+
+.custom-raised {
+    font-family: Roboto-Medium;
+    text-transform: uppercase !important;
+    font-size: 14px !important;
+    padding-left: 16px !important;
+    border-radius: 2px !important;
+    padding-right: 16px !important;
+    height: 36px !important;
+    border: none !important;
+}
+
+.custom-raised:hover {
+    cursor: pointer;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
+    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
+    background-color: #1976D2 !important;
+}
+
+.custom-raised:focus {
+    box-shadow: none !important;
+    -webkit-box-shadow: none !important;
+    background-color: #1976D2 !important;
+}
+
+.custom-flat {
+    font-family: Roboto-Medium;
+    height: 36px !important;
+    border-radius: 2px !important;
+    margin-left: 8px !important;
+    margin-right: 8px !important;
+    padding-left: 8px !important;
+    padding-right: 8px !important;
+    background-color: transparent !important;
+    text-transform: uppercase;
+    outline: none !important;
+    border: none !important;
+}
+
+.custom-flat:hover {
+    cursor: pointer;
+    background-color: rgba(0, 0, 0, 0.12) !important;
+}
+
+.custom-flat:focus {
+    outline: none !important;
+    border: none !important;
+    -webkit-box-shadow: none !important;
+    box-shadow: none !important;
+    background-color: rgba(0, 0, 0, 0.40) !important;
+}
+
+/* ==================================================================== */
+
 /* Body Styling */
 body {
     width: 100%;
     font-family: "Roboto-Regular" !important;
-    background-color: #dfdfdf !important;
+    background-color: #e8e8e8 !important;
 }
 
 .app-manager-title {
@@ -67,26 +146,47 @@ body {
     border-radius: 0;
 }
 
-#login-btn {
+.login-btn {
-    border-radius: 0;
+    float: right;
-    background-color: navy;
-    color: white;
-    cursor: pointer;
 }
 
-#login-container {
+.login-header {
+    background-color: #3f50b5;
+    color: white;
+    height: 128px;
+    width: 100%;
+    margin: 0 !important;
+    padding: 20px;
+    box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 #login-card {
-    width: 20%;
+    width: 25%;
     height: 50%;
     margin: 10% auto;
-    padding: 10px;
+    font-family: Roboto-Regular;
+    font-size: 14px;
     border-radius: 0;
     background-color: #ffffff;
     box-shadow: -2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
+.login-header-title {
+    font-family: Roboto-Medium;
+    font-size: 20px;
+    font-weight: 500;
+}
+
+.login-header-logo {
+    height: 70px;
+    width: 150px;
+}
+
+.login-form {
+    margin: 0 !important;
+    padding: 40px;
+}
+
 /* Base layout container */
 #container {
     background-color: #ededed;
@@ -207,8 +307,7 @@ body {
 }
 
 .add-btn:hover {
-    cursor: pointer;
+    background-color: #E64A19;
-    background-color: rgb(255, 103, 5);
 }
 
 #app-main-content {
@@ -383,18 +482,6 @@ body {
     overflow-y: auto;
 }
 
-#secondary-button {
-    color: #979797;
-    background-color: transparent;
-    border: none;
-}
-
-#secondary-button:hover {
-    background-color: #d8d8d8;
-    outline: none;
-    cursor: pointer;
-}
-
 .step-index {
     height: 20px;
     width: 20px;
@@ -678,7 +765,7 @@ div.tab button.active {
 }
 
 .platform-content {
-    width: 350px;
+    width: 500px;
     margin: 10px;
     padding: 24px;
     box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
@@ -698,11 +785,12 @@ div.tab button.active {
     width: 100px;
     border-radius: 50%;
     background-color: #3f50b5;
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
+    -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08) !important;
 }
 
 .platform-content:hover {
     background-color: #f2f2f2;
-    cursor: pointer;
 }
 
 .data-table-row-cell {

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/AppPublisherBase/BaseLayout.jsx

@@ -25,6 +25,7 @@ import {Button, Col, Container, Input, Row,} from 'reactstrap';
 import ApplicationCreate from '../Application/Create/ApplicationCreate';
 import FloatingButton from "../UIComponents/FloatingButton/FloatingButton";
 import {FormattedMessage} from 'react-intl';
+import Logo from "../UIComponents/Logo/Logo";
 
 /**
  * Base Layout:
@@ -49,14 +50,7 @@ class BaseLayout extends Component {
     }
 
     componentWillMount() {
-        Axios.get("/images/logo.png", {responseType: 'arraybuffer'}).then(
+
-            response => {
-                let image = "data:image/jpeg;base64," + new Buffer(response.data, 'binary').toString('base64');
-                this.setState({logo: image});
-            }
-        ).catch(err => {
-            console.log(err);
-        });
     }
 
     handleApplicationClick() {
@@ -98,7 +92,7 @@ class BaseLayout extends Component {
 
                     <div id="header">
                         <span id="header-text">
-                            <img className="header-image" src={this.state.logo}/>
+                            <Logo className="header-image" image_name="logo.png"/>
                             IoT <FormattedMessage id="App.Publisher" defaultMessage="Application Publisher"/>
                         </span>
                         <div id="header-btn-container">
@@ -136,7 +130,7 @@ class BaseLayout extends Component {
                             </Col>
                             <Col>
                                 <div className="platform-link-placeholder">
-                                    <Button id="secondary-button" onClick={this.onClickPlatforms}>
+                                    <Button className="custom-flat grey" onClick={this.onClickPlatforms}>
                                         <i className="fw fw-settings"></i> Platforms</Button>
                                 </div>
                             </Col>

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/UIComponents/Logo/Logo.jsx

@@ -0,0 +1,59 @@
+/*
+ * Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ * WSO2 Inc. licenses this file to you under the Apache License,
+ * Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import PropTypes from 'prop-types';
+import React, {Component} from 'react';
+import Axios from 'axios';
+
+const imageLocation = "/images/";
+
+class Logo extends Component {
+
+    constructor() {
+        super();
+        this.state = {
+            image: ""
+        }
+    }
+
+    componentWillMount() {
+        let url = imageLocation + this.props.image_name;
+        Axios.get(url, {responseType: 'arraybuffer'}).then(
+            response => {
+                let image = "data:image/jpeg;base64," + new Buffer(response.data, 'binary').toString('base64');
+                this.setState({image: image});
+            }
+        ).catch(err => {
+            console.log(err);
+        });
+    }
+
+    render() {
+        return (
+            <img className={this.props.className} src={this.state.image} />
+        )
+    }
+
+}
+
+Logo.prototypes = {
+    className: PropTypes.string,
+    image_name: PropTypes.string
+};
+
+export default Logo;

components/application-mgt/org.wso2.carbon.device.application.mgt.publisher.ui/src/main/resources/publisher/src/components/User/Login/Login.jsx

@@ -20,7 +20,8 @@ import qs from 'qs';
 import React, {Component} from 'react';
 import {Redirect, Switch} from 'react-router-dom';
 import AuthHandler from '../../../api/authHandler';
-import {Button, Card, CardBlock, CardTitle, Form, FormGroup, Input, Label} from 'reactstrap';
+import {Button, Col, Form, FormGroup, Input, Label, Row} from 'reactstrap';
+import Logo from "../../UIComponents/Logo/Logo";
 
 /**
  * The Login Component.
@@ -39,7 +40,8 @@ class Login extends Component {
             userName: "",
             password: "",
             rememberMe: true,
-            errors: {}
+            errors: {},
+            loginError: ""
         }
     }
 
@@ -120,7 +122,12 @@ class Login extends Component {
             loginPromis.then(response => {
                 console.log(AuthHandler.getUser());
                 this.setState({isLoggedIn: AuthHandler.getUser()});
-            })
+            }).catch(
+                err => {
+                    console.log(err);
+                    this.setState({loginError: err});
+                }
+            );
         }
     }
 
@@ -130,12 +137,18 @@ class Login extends Component {
             return (
                 <div id="login-container">
                     {/*TODO: Style the components.*/}
-                    <Card id="login-card">
+                    <div id="login-card">
-                        <CardBlock>
+                        <div id="login-card-content">
-                            <CardTitle>
+                            <Row className="login-header">
-                                WSO2 IoT APP Publisher
+                                <Col>
-                            </CardTitle>
+                                    <Logo className="login-header-logo" image_name="logo.png"/>
-                            <hr/>
+                                </Col>
+                                <Col>
+                                    <p className="login-header-title">IoT APP Publisher</p>
+                                </Col>
+                            </Row>
+                            <Row className="login-form">
+                                <Col>
                                     <Form onSubmit={this.handleLogin.bind(this)}>
                                         <FormGroup>
                                             <Label for="userName">User Name:</Label>
@@ -157,11 +170,18 @@ class Login extends Component {
                                                 onChange={this.onPasswordChange.bind(this)}/>
                                         </FormGroup>
                                         <FormGroup>
-                                    <Button type="submit" id="login-btn">Login</Button>
+                                            <Button
+                                                type="submit"
+                                                className="custom-raised login-btn primary"
+                                            >
+                                                Login
+                                            </Button>
                                         </FormGroup>
                                     </Form>
-                        </CardBlock>
+                                </Col>
-                    </Card>
+                            </Row>
+                        </div>
+                    </div>
                 </div>);
         } else {
             return (