splash page: add user groups section

If a user is signed in, they can see a "groups" section on the splash
page that lists all of their groups.

Currently the group tiles use an "empty" image with a background color.
The background colors rotate through the titleColors listed in theme.js.

static-site/src/components/Cards/index.jsx

@@ -37,7 +37,7 @@ class Cards extends React.Component {
                           <Styles.CardTitle>
                             {d.title}
                           </Styles.CardTitle>
-                          <Styles.CardImg src={require(`../../../static/splash_images/${d.img}`)} alt={""} />
+                          <Styles.CardImg src={require(`../../../static/splash_images/${d.img}`)} alt={""} color={d.color}/>
                         </a>
                       </Styles.CardInner>
                     </Styles.CardOuter>

static-site/src/components/Cards/styles.jsx

@@ -6,6 +6,7 @@ export const CardImg = styled.img`
   box-shadow: 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
   max-height: 100%;
   max-width: 100%;
+  background-color: ${(props) => props.color};
 `;
 
 export const CardInner = styled.div`

static-site/src/components/splash/index.jsx

@@ -10,6 +10,7 @@ import Title from "./title";
 import * as Styles from "./styles";
 import { SmallSpacer, BigSpacer, HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
 import Footer from "../Footer";
+import UserGroups from "./userGroups";
 
 class Splash extends React.Component {
   constructor() {
@@ -51,6 +52,8 @@ class Splash extends React.Component {
 
         <HugeSpacer/>
 
+        {this.props.user && <UserGroups user={this.props.user}/>}
+
         <ScrollableAnchor id={'pathogens'}>
           <Styles.H1>Explore pathogens</Styles.H1>
         </ScrollableAnchor>

static-site/src/components/splash/userGroups.jsx

@@ -0,0 +1,45 @@
+import React, { Fragment } from "react";
+import ScrollableAnchor from "react-scrollable-anchor";
+import * as Styles from "./styles";
+import Cards from "../Cards";
+import { HugeSpacer, FlexCenter } from "../../layouts/generalComponents";
+import { theme } from "../../layouts/theme";
+
+const UserGroups = (props) => {
+
+  const colors = [...theme.titleColors];
+
+  const groupCards = props.user.groups.map((group) => {
+    const groupColor = colors[0];
+    colors.push(colors.shift());
+
+    return (
+      {
+        img: "empty.png",
+        url: `/groups/${group}`,
+        title: group,
+        color: groupColor
+      }
+    );
+  });
+
+  return (
+    <Fragment>
+      <ScrollableAnchor id={'groups'}>
+        <Styles.H1> {props.user.username}&apos;s Groups</Styles.H1>
+      </ScrollableAnchor>
+
+      <FlexCenter>
+        <Styles.CenteredFocusParagraph>
+          You have access to the following groups:
+        </Styles.CenteredFocusParagraph>
+      </FlexCenter>
+
+      <Cards cards={groupCards}/>
+
+      <HugeSpacer/>
+    </Fragment>
+  );
+};
+
+export default UserGroups;