Merge branch 'master' into update-new-versions

src/components/App.js

@@ -1,19 +1,17 @@
-import React from "react";
+import React, { Fragment } from "react";
+
+import Loading from "./common/Loading";
+import ErrorView from "./common/ErrorView";
+import InfoView from "./common/InfoView";
 import Welcome from "./Welcome";
 import Gallery from "./Gallery";
 
-const Loading = () => (
-  <div className="bp3-progress-bar bp3-intent-primary">
-    <div className="bp3-progress-meter" />
-  </div>
-);
-const ErrorView = error => <div>{error}</div>;
-
 const App = ({
   fonts,
   flags,
   installedFonts,
   error,
+  announcement,
   isUserRegistered,
   registerUser,
   installFont,
@@ -22,22 +20,30 @@ const App = ({
   registering,
   loading
 }) => {
-  if (error) return <ErrorView error={error} />;
   if (loading) return <Loading />;
 
   if (isUserRegistered)
     return (
-      <Gallery
-        loading={loading}
-        fonts={fonts}
-        flags={flags}
-        installedFonts={installedFonts}
-        installFont={installFont}
-        updateFont={updateFont}
-        uninstallFont={uninstallFont}
-      />
+      <Fragment>
+        <ErrorView error={error} />
+        <InfoView announcement={announcement} />
+        <Gallery
+          fonts={fonts}
+          flags={flags}
+          installedFonts={installedFonts}
+          installFont={installFont}
+          updateFont={updateFont}
+          uninstallFont={uninstallFont}
+        />
+      </Fragment>
     );
-  return <Welcome registering={registering} registerUser={registerUser} />;
+  return (
+    <Fragment>
+      <ErrorView error={error} />
+      <InfoView announcement={announcement} />
+      <Welcome registering={registering} registerUser={registerUser} />
+    </Fragment>
+  );
 };
 
 export default App;

src/components/Gallery.js

@@ -3,6 +3,8 @@ import styled from "styled-components";
 import { Button, Switch, Card, Elevation } from "@blueprintjs/core";
 import find from "lodash/find";
 
+import Loading from "./common/Loading";
+
 // Styles
 const Wrapper = styled.div`
   height: 100vh;
@@ -134,11 +136,7 @@ class Gallery extends Component {
     return (
       <CardContent className="card-style" key={id}>
         <Content elevation={Elevation.TWO}>
-          {flags[id] && (
-            <div className="bp3-progress-bar bp3-intent-primary">
-              <div className="bp3-progress-meter" />
-            </div>
-          )}
+          {flags[id] && <Loading />}
 
           <FontImage src={coverImageUrl} />
           <SettingsContent>

src/components/common/ErrorView.js

@@ -0,0 +1,18 @@
+import React from "react";
+import styled from "styled-components";
+
+// Styles
+const Error = styled.div`
+  color: white;
+  text-align: center;
+  background-color: red;
+  padding: 5px 0;
+  font-size: 11px;
+`;
+
+const ErrorView = ({ error }) => {
+  if (!error) return null;
+  return <Error>{error}</Error>;
+};
+
+export default ErrorView;

src/components/common/InfoView.js

@@ -0,0 +1,30 @@
+import React from "react";
+import styled from "styled-components";
+
+const electron = window.require("electron");
+
+// Styles
+const Announcement = styled.div`
+  color: white;
+  text-align: center;
+  background-color: green;
+  padding: 5px 0;
+  font-size: 11px;
+  cursor: pointer;
+`;
+
+const openExternalLink = url => {
+  if (!url) return;
+  electron.shell.openExternal(url);
+};
+
+const InfoView = ({ announcement }) => {
+  if (!announcement) return null;
+  const { text, href } = announcement || {};
+  if (!text) return null;
+  return (
+    <Announcement onClick={() => openExternalLink(href)}>{text}</Announcement>
+  );
+};
+
+export default InfoView;

src/components/common/Loading.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+const Loading = () => (
+  <div className="bp3-progress-bar bp3-intent-primary">
+    <div className="bp3-progress-meter" />
+  </div>
+);
+
+export default Loading;

src/containers/App.js

@@ -34,7 +34,7 @@ class AppContainer extends React.Component {
       (
         error,
         {
-          announcement,
+          announcements,
           fonts,
           installedFonts,
           flags,
@@ -44,7 +44,7 @@ class AppContainer extends React.Component {
         }
       ) => {
         this.setState(() => ({
-          announcement,
+          announcement: announcements && announcements[0],
           fonts,
           installedFonts,
           flags,