Update main application, slight refactor

app/javascript/src/components/Alert/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 
 class Alert extends Component {
 
-  static alertClass (type) {
+  static alertClass(type) {
     const classes = {
       error: "alert-danger",
       alert: "alert-warning",
@@ -13,7 +13,7 @@ class Alert extends Component {
     return classes[type] || classes.success;
   }
 
-  static glyphiconClass (type) {
+  static glyphiconClass(type) {
     const classes = {
       error: "glyphicon-exclamation-sign",
       alert: "glyphicon-exclamation-sign",
@@ -38,13 +38,13 @@ class Alert extends Component {
     const message = this.props.message;
     const alertClassName =
       `alert
-       ${this.alertClass(message.type)}
+       ${Alert.alertClass(message.type)}
        alert-dismissable
        alert-floating
        fade in`;
     const glyphiconClassName =
       `glyphicon
-       ${this.glyphiconClass(message.type)}`;
+       ${Alert.glyphiconClass(message.type)}`;
 
     return(
       <div className={alertClassName}>
@@ -58,7 +58,7 @@ class Alert extends Component {
             <span aria-hidden="true">×</span>
           </button>
           <span className={glyphiconClassName} />
-          <span>{message.text}</span>
+          <span>&nbsp;{message.text}</span>
         </div>
       </div>
     );
@@ -69,7 +69,6 @@ Alert.propTypes = {
   onClose: PropTypes.func,
   timeout: PropTypes.number,
   message: PropTypes.shape({
-    id: PropTypes.number,
     type: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired
   }).isRequired

app/javascript/src/components/Navigation/index.jsx

@@ -20,6 +20,7 @@ import UserAccountDropdown from "./components/UserAccountDropdown";
 const StyledNavbar = styled(Navbar)`
   background-color: ${WHITE_COLOR};
   border-color: ${BORDER_GRAY_COLOR};
+  margin-bottom: 0;
 `;
 
 const StyledBrand = styled.a`

app/javascript/src/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { Component } from "react";
 import { BrowserRouter } from "react-router-dom";
 import { Provider } from "react-redux";
 import { IntlProvider, addLocaleData } from "react-intl";
@@ -8,6 +8,7 @@ import messages from "./config/locales/messages";
 import store from "./config/store";
 
 import Spinner from "./components/Spinner";
+import Alert from "./components/Alert";
 import ModalsContainer from "./components/ModalsContainer";
 import SettingsPage from "./scenes/SettingsPage";
 import Navigation from "./components/Navigation";
@@ -15,19 +16,36 @@ import Navigation from "./components/Navigation";
 addLocaleData([...enLocaleData]);
 const locale = "en-US";
 
-export default () =>
-  <Provider store={store}>
-    <IntlProvider locale={locale} messages={flattenMessages(messages[locale])}>
-      <div>
-        <BrowserRouter>
-          <div>
-            <Navigation />
-            <SettingsPage />
-          </div>
-        </BrowserRouter>
+class ScinoteApp extends Component {
+  constructor(props) {
+    super(props);
+    const a = 5;
+  }
 
-        <ModalsContainer />
-        <Spinner />
-      </div>
-    </IntlProvider>
-  </Provider>;
+  render() {
+    return (
+      <Provider store={store}>
+        <IntlProvider locale={locale}
+                      messages={flattenMessages(messages[locale])}
+        >
+          <div>
+            <BrowserRouter>
+              <div>
+                <Navigation />
+                <div>
+                  <Alert message={{type: "alert", text: "Yadayadayada!!!"}} />
+                </div>
+                <SettingsPage />
+              </div>
+            </BrowserRouter>
+
+            <ModalsContainer />
+            <Spinner />
+          </div>
+        </IntlProvider>
+      </Provider>
+    );
+  }
+}
+
+export default ScinoteApp;