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

merge-requests/7/head
Menaka Jayawardena 7 years ago
parent da51c4b270
commit 3c83cd9b80

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

@ -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 {
border-radius: 0;
background-color: navy;
color: white;
cursor: pointer;
.login-btn {
float: right;
}
#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: rgb(255, 103, 5);
background-color: #E64A19;
}
#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 {

@ -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>

@ -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;

@ -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,38 +137,51 @@ class Login extends Component {
return (
<div id="login-container">
{/*TODO: Style the components.*/}
<Card id="login-card">
<CardBlock>
<CardTitle>
WSO2 IoT APP Publisher
</CardTitle>
<hr/>
<Form onSubmit={this.handleLogin.bind(this)}>
<FormGroup>
<Label for="userName">User Name:</Label>
<Input
type="text"
name="userName"
id="userName"
placeholder="User Name"
onChange={this.onUserNameChange.bind(this)}/>
</FormGroup>
<FormGroup>
<Label for="password">Password:</Label>
<Input
valid={false}
type="password"
name="text"
id="password"
placeholder="Password"
onChange={this.onPasswordChange.bind(this)}/>
</FormGroup>
<FormGroup>
<Button type="submit" id="login-btn">Login</Button>
</FormGroup>
</Form>
</CardBlock>
</Card>
<div id="login-card">
<div id="login-card-content">
<Row className="login-header">
<Col>
<Logo className="login-header-logo" image_name="logo.png"/>
</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>
<Input
type="text"
name="userName"
id="userName"
placeholder="User Name"
onChange={this.onUserNameChange.bind(this)}/>
</FormGroup>
<FormGroup>
<Label for="password">Password:</Label>
<Input
valid={false}
type="password"
name="text"
id="password"
placeholder="Password"
onChange={this.onPasswordChange.bind(this)}/>
</FormGroup>
<FormGroup>
<Button
type="submit"
className="custom-raised login-btn primary"
>
Login
</Button>
</FormGroup>
</Form>
</Col>
</Row>
</div>
</div>
</div>);
} else {
return (

Loading…
Cancel
Save