Added logo and background image to the intro screen

src/index.css

@@ -48,10 +48,22 @@ div.ui.errorPopup.message {
 }
 
 div.ui.card.intro {
-  width: 600px;
+  width: 770px;
   margin: auto;
 }
 
 .version {
   color: #888;
 }
+
+.backgroundImage {
+  width: 100%;
+  height: 100%;
+  background-image: url(topola.jpg);
+  background-size: cover;
+  background-position: 0% 20%;
+  position: fixed;
+  z-index: -100;
+  filter: blur(8px) opacity(30%);
+  -webkit-filter: blur(8px) opacity(30%);
+}

src/intro.tsx

@@ -1,6 +1,7 @@
 import * as queryString from 'query-string';
 import * as React from 'react';
-import {Card} from 'semantic-ui-react';
+import logo from './topola.jpg';
+import {Card, Grid, Image} from 'semantic-ui-react';
 import {FormattedMessage} from 'react-intl';
 import {Link} from 'react-router-dom';
 
@@ -22,6 +23,8 @@ function formatBuildDate(dateString: string) {
 /** The intro page. */
 export function Intro() {
   return (
+    <div id="content">
+      <div className="backgroundImage" />
       <Card className="intro">
         <Card.Content>
           <Card.Header>
@@ -32,6 +35,12 @@ export function Intro() {
           </Card.Header>
         </Card.Content>
         <Card.Content>
+          <Grid>
+            <Grid.Row>
+              <Grid.Column width={5}>
+                <Image src={logo} alt="Topola logo" />
+              </Grid.Column>
+              <Grid.Column width={11}>
                 <p>
                   <FormattedMessage
                     id="intro.description"
@@ -96,9 +105,12 @@ export function Intro() {
                 </ul>
                 <p>
                   <b>
-            <FormattedMessage id="intro.privacy" defaultMessage="Privacy" />
+                    <FormattedMessage
+                      id="intro.privacy"
+                      defaultMessage="Privacy"
+                    />
                   </b>
-          :
+                  {': '}
                   <FormattedMessage
                     id="intro.privacy_note"
                     defaultMessage={
@@ -110,7 +122,9 @@ export function Intro() {
                     }
                     values={{
                       link: (
-                <a href="https://cors-anywhere.herokuapp.com/">cors-anywhere</a>
+                        <a href="https://cors-anywhere.herokuapp.com/">
+                          cors-anywhere
+                        </a>
                       ),
                     }}
                   />
@@ -126,7 +140,11 @@ export function Intro() {
                   </a>
                   )
                 </p>
+              </Grid.Column>{' '}
+            </Grid.Row>{' '}
+          </Grid>
         </Card.Content>
       </Card>
+    </div>
   );
 }