Fixing lint errors, removed inline styles

parent 3f0c2e8d
import React, { Component } from 'react'; import React, { Component } from 'react';
import styles from './App.module.scss'; import style from './App.module.scss';
import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'; import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom';
import PLPPage from 'pages/PLP'; import PLPPage from 'pages/PLP';
import PDPPage from 'pages/PDP'; import PDPPage from 'pages/PDP';
...@@ -21,7 +21,7 @@ class App extends Component { ...@@ -21,7 +21,7 @@ class App extends Component {
if (loading) { if (loading) {
return ( return (
<LoadingAnimation style={{ height: '100vh' }}></LoadingAnimation> <LoadingAnimation className={style.loadingAnimation}></LoadingAnimation>
); );
} }
else { else {
......
...@@ -4,4 +4,8 @@ body { ...@@ -4,4 +4,8 @@ body {
box-sizing: border-box; box-sizing: border-box;
} }
main {} main {}
\ No newline at end of file
.loadingAnimation {
height: 100vh;
}
\ No newline at end of file
...@@ -50,7 +50,7 @@ class ImageCarousel extends Component { ...@@ -50,7 +50,7 @@ class ImageCarousel extends Component {
<div>{`Total images: ${images.length}`}</div> <div>{`Total images: ${images.length}`}</div>
<div className={style.content}> <div className={style.content}>
<Arrow onArrowClick={this.previousSlide} glyph="&#9664;" /> <Arrow onArrowClick={this.previousSlide} glyph="&#9664;" />
<img src={curImage.url} /> <img src={curImage.url} alt={curImage.alt} />
<Arrow onArrowClick={this.nextSlide} glyph="&#9654;" /> <Arrow onArrowClick={this.nextSlide} glyph="&#9654;" />
</div> </div>
<button className={style.closeButton} onClick={onClose}>Close</button> <button className={style.closeButton} onClick={onClose}>Close</button>
......
...@@ -4,9 +4,9 @@ import React from "react"; ...@@ -4,9 +4,9 @@ import React from "react";
import styles from './LoadingAnimation.module.scss'; import styles from './LoadingAnimation.module.scss';
function LoadingAnimation(props) { function LoadingAnimation(props) {
const { className = '' } = props;
return ( return (
<div className={styles.loadingAnimation} style={props.style} > <div className={`${styles.loadingAnimation} ${className}`} >
<div className={styles.loader}></div> <div className={styles.loader}></div>
</div> </div>
); );
......
...@@ -4,7 +4,6 @@ ...@@ -4,7 +4,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 100%;
.loader { .loader {
border: 16px solid $gray1; border: 16px solid $gray1;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment