Merge pull request 'dev-khaidir' (#59) from dev-khaidir into staging

Reviewed-on: ibnu/generic-ospro-frontend#59

src/views/Pages/Login/Login.js

@@ -35,7 +35,7 @@ const settings = {
 	arrows: false,
 	autoplay: true,
 	slidesToShow: 1,
-	slidesToScroll: 1
+	slidesToScroll: 1,
 };
 
 class Login extends Component {
@@ -320,22 +320,22 @@ class Login extends Component {
 	}
 
 	getLoginLogo = () => {
-		return <div style={{ textAlign: 'center' }}><img style={{ width: '100%' }} src={logo_ospro} /></div>
+		return <div style={{ textAlign: 'left', paddingBottom:'15px' }}><img style={{ width: '35%' }} src={logo_ospro} /></div>
 	}
 
 	getLoginSlider = () => {
 		return <Slider {...settings} >
 			<div>
-				<img src={require('../../../assets/img/login/slide1.jpg')} className="img-avatar" />
+				<img src={require('../../../assets/img/login/slide1.jpg')} style={{display:'block', maxWidth:'100%', height:'auto'}}/>
 			</div>
 			<div>
-				<img src={require('../../../assets/img/login/slide2.jpg')} className="img-avatar" />
+				<img src={require('../../../assets/img/login/slide2.jpg')} style={{display:'block', maxWidth:'100%', height:'auto'}} />
 			</div>
 			<div>
-				<img src={require('../../../assets/img/login/slide3.jpg')} className="img-avatar" />
+				<img src={require('../../../assets/img/login/slide3.jpg')} style={{display:'block', maxWidth:'100%', height:'auto'}} />
 			</div>
 			<div>
-				<img src={require('../../../assets/img/login/slide4.jpg')} className="img-avatar" />
+				<img src={require('../../../assets/img/login/slide4.jpg')} style={{display:'block', maxWidth:'100%', height:'auto'}} />
 			</div>
 		</Slider>
 	}
@@ -362,16 +362,20 @@ class Login extends Component {
 						<Col md="7">
 							{this.getLoginSlider()}
 						</Col>
-						<Col md="5">
+						<Col md="5" style={{display:'flex', alignItems:'stretch'}}>
 							<div style={{
-								boxShadow: '1px 1px 11px 1px rgba(221,211,211,0.75)'
+								boxShadow: '1px 1px 11px 1px rgba(221,211,211,0.75)',
 							}}>
-								<CardGroup>
-									<Card className="p-4">
+								<CardGroup style={{height:'100%', display:'flex', alignContent:'center'}}>
+									<Card className="p-4" style={{border:'solid #fff'}}>
 										<CardBody>
 											<Form onSubmit={this.submitForm}>
 												{this.getLoginLogo()}
-												<p className="text-muted">Sign In to your account</p>
+												<div>
+												<h1 className="mb-1" style={{coror:'#232323'}}>Welcome to OSPRO!</h1>
+												<p style={{fontSize:'16px', color:'#898989'}}>Please sign-in to your account and start the adventure</p>
+												</div>
+												
 												<InputGroup className="mb-3">
 													<InputGroupAddon addonType="prepend">
 														<InputGroupText>
@@ -389,7 +393,8 @@ class Login extends Component {
 														}}
 													/>
 												</InputGroup>
-												<InputGroup className="mb-4">
+												
+												<InputGroup >
 													<InputGroupAddon addonType="prepend">
 														<InputGroupText>
 															<i className="icon-lock"></i>
@@ -413,11 +418,17 @@ class Login extends Component {
 													</InputGroupAddon>
 													<span className="password__show" ></span>
 												</InputGroup>
-												<Row>
-													<Col xs="8">
+												<Row className="mb-2" style={{display:'flex', alignItems:'center'}}>
+													<Col xs="7">
 														<Checkbox checked={this.state.remember} onChange={this.onChecked}>Remember me (7 days)</Checkbox>
 													</Col>
-													<Col xs="4">
+													<Col className="text-right ">
+														<Button color="link" className="px-0">Forgot password?</Button>
+													</Col>
+												</Row>
+												<Row>
+													
+													<Col className="text-right ">
 														{this.state.loader ? (
 															<Spin indicator={antIcon} />
 														) : (
@@ -425,11 +436,7 @@ class Login extends Component {
 														)}
 													</Col>
 												</Row>
-												<Row>
-													<Col className="text-right mt-5">
-														<Button color="link" className="px-0">Forgot password?</Button>
-													</Col>
-												</Row>
+												
 											</Form>
 										</CardBody>
 									</Card>