refactor: added new component Spinner (#1037)

refactor: changed css

refactor: replaced CircularProgress by Spinner

fix: added a specific class to have flex-direction: column

fix: fixed detail margin

src/webui/components/Footer/footer.scss

@@ -2,7 +2,6 @@
 @import '../../styles/mixins';
 
 .wrap {
-  margin-top: auto;
   background: $snow;
   @include border(top, 1px, solid, $greyGainsboro);
 }

src/webui/components/Spinner/index.js

@@ -0,0 +1,18 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from 'react';
+import type { Node } from 'react';
+
+import { IProps } from './interfaces';
+import { Wrapper, Circular } from './styles';
+
+const Spinner = ({ size = 50, centered = true }: IProps): Node => (
+  <Wrapper centered={centered}>
+    <Circular size={size} />
+  </Wrapper>
+);
+
+export default Spinner;

src/webui/components/Spinner/interfaces.js

@@ -0,0 +1,9 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+export interface IProps {
+  size?: number;
+  centered?: boolean;
+}

src/webui/components/Spinner/styles.js

@@ -0,0 +1,18 @@
+import styled from 'react-emotion';
+import CircularProgress from '@material-ui/core/CircularProgress';
+import colors from '../../utils/styles/colors';
+
+export const Wrapper = styled.div`
+  && {
+    ${({ centered }) => centered && `
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    `}
+`;
+
+export const Circular = styled(CircularProgress)`
+  && {
+    color: ${colors.primary}
+`;

src/webui/modules/detail/detail.scss

@@ -3,7 +3,7 @@
 
 .twoColumn {
   @include container-size;
-  margin: auto 10px;
+  margin: 0 10px;
   display: flex;
 
   > div {

src/webui/modules/detail/index.jsx

@@ -1,10 +1,10 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CircularProgress from '@material-ui/core/CircularProgress';
 import isEmpty from 'lodash/isEmpty';
 
 import PackageDetail from '../../components/PackageDetail';
 import NotFound from '../../components/NotFound';
+import Spinner from '../../components/Spinner';
 import API from '../../utils/api';
 
 import classes from './detail.scss';
@@ -69,7 +69,7 @@ export default class Detail extends Component {
     if (notFound) {
       return <NotFound pkg={this.packageName} />;
     } else if (isEmpty(readMe)) {
-      return <CircularProgress size={50} />;
+      return <Spinner centered />;
     }
     return (
       <div className={classes.twoColumn}>

src/webui/modules/home/index.js

@@ -1,6 +1,5 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import CircularProgress from '@material-ui/core/CircularProgress';
 import Button from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogActions from '@material-ui/core/DialogActions';
@@ -15,6 +14,7 @@ import API from '../../utils/api';
 
 import PackageList from '../../components/PackageList';
 import Search from '../../components/Search';
+import Spinner from '../../components/Spinner';
 
 import classes from "./home.scss";
 
@@ -173,7 +173,7 @@ class Home extends Component {
       <Fragment>
         {this.renderSearchBar()}
         {loading ? (
-          <CircularProgress size={50} />
+          <Spinner centered />
         ) : (
             <PackageList help={isEmpty(packages) === true} packages={packages} />
           )}

src/webui/router.js

@@ -15,7 +15,7 @@ class RouterApp extends Component {
     const {isUserLoggedIn} = this.props;
     return (
       <Router>
-        <div className="container">
+        <div className="container content">
           <Switch>
             <Route
               exact

src/webui/styles/global.scss

@@ -4,6 +4,7 @@
 :global {
   .container {
     margin-top: 94px;
+    flex: 1;
 
     @include container-size;
 
@@ -12,6 +13,11 @@ :global {
     }
   }
 
+  .content {
+    display: flex;
+    flex-direction: column;
+  }
+
   .page-full-height {
     display: flex;
     flex-direction: column;