create components folder

priv/frontend/src/components/App.js

@@ -3,8 +3,8 @@ import React, { Component } from 'react';
 import './App.css';
 import Service from './Service.js';
 import ServicePlaceholder from './ServicePlaceholder.js';
-import OP from './ws/op.js';
+import OP from '../ws/op.js';
-import { log } from './util.js';
+import { log } from '../util.js';
 
 const DOMAIN = 'https://elstatus.stayathomeserver.club';
 // const ENDPOINT = 'http://localhost:8069/api/status'
@@ -106,7 +106,6 @@ export default class App extends Component {
     }
   }
 
-
   render() {
     const metrics = !this.state.metrics ? null : (
       <div className="services">
@@ -123,21 +122,23 @@ export default class App extends Component {
       </div>
     );
 
-
     return (
       <div className="dashboard">
         <h1>elstatus</h1>
+
+        {this.state.error ? (
+          <div className="error">
+            Error: {this.state.error}
+          </div>
+        ) : null}
+
         {this.state.loading ? (
           <React.Fragment>
             <ServicePlaceholder />
             <ServicePlaceholder />
             <ServicePlaceholder />
           </React.Fragment>
-        ) : null}
+        ) : metrics}
-        {this.state.error ? (
-          <div>Error: {this.state.error}</div>
-        ) : null}
-        {metrics}
       </div>
     );
   }

priv/frontend/src/components/Service.js

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
-import Graph from './Graph.js';
 import './Service.css';
+import Graph from './Graph.js';
 
 const Service = ({ graph, name, status, latency, description }) => (
   <div className="service">

priv/frontend/src/index.css

@@ -2,6 +2,10 @@ html, body {
   box-sizing: border-box;
 }
 
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
 body {
   margin: 0;
   padding: 2rem;
@@ -12,6 +16,8 @@ h1:first-child {
   margin-top: 0;
 }
 
-*, *:before, *:after {
+.error {
-  box-sizing: inherit;
+  background: pink;
+  padding: 1rem;
+  border-radius: 0.15rem;
 }

priv/frontend/src/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import register from './icons.js';
 import './index.css';
-import App from './App';
+import App from './components/App';
+import register from './icons.js';
 
 register();