Merge branch 'themes'

src/app.scss

@@ -12,7 +12,6 @@ body {
 
 body,
 #root {
-  background: #038521;
   -webkit-font-smoothing: antialiased;
 }
 

src/cosmos.decorator.tsx

@@ -1,6 +1,7 @@
 import "typeface-inter";
 
 import CssBaseline from "@material-ui/core/CssBaseline";
+import { createMuiTheme } from "@material-ui/core/styles";
 import ThemeProvider from "@material-ui/styles/ThemeProvider";
 import React from "react";
 import { useValue } from "react-cosmos/fixture";
@@ -19,7 +20,7 @@ const Decorator: React.FC<{ children: any; theme?: string }> = ({
   const [theme, setTheme] = useValue("theme", { defaultValue });
 
   return (
-    <ThemeProvider theme={defaultTheme}>
+    <ThemeProvider theme={createMuiTheme(defaultTheme)}>
       <CssBaseline />
       <header style={{ display: "none" }}>
         <select

src/index.tsx

@@ -5,6 +5,7 @@ import "./app.scss";
 import { ApolloProvider, useQuery } from "@apollo/react-hooks";
 import { ThemeProvider } from "@material-ui/core";
 import CssBaseline from "@material-ui/core/CssBaseline";
+import { createMuiTheme } from "@material-ui/core/styles";
 import ApolloClient, { gql } from "apollo-boost";
 import { Graph } from "graphlib";
 import { createBrowserNavigation } from "navi";
@@ -17,6 +18,7 @@ import { api, useStore } from "./lib/store";
 import routes from "./routes";
 import * as serviceWorker from "./serviceWorker";
 import defaultTheme from "./themes/default";
+import getTeam from "./themes/teams";
 
 const gqlClient = new ApolloClient({
   uri: process.env.REACT_APP_GRAPHQL_URL,
@@ -77,14 +79,35 @@ const InnerApp = () => {
 
 const App = () => {
   const currentUser = useStore(state => state.data.currentUser);
+  const team = getTeam("southwark");
 
   return (
     <ApolloProvider client={gqlClient}>
-      <ThemeProvider theme={defaultTheme}>
+      <ThemeProvider
+        theme={createMuiTheme({
+          ...defaultTheme,
+          palette: {
+            ...defaultTheme.palette,
+            primary: {
+              main: team.theme.primary
+            }
+          },
+          overrides: {
+            ...defaultTheme.overrides,
+            MuiCssBaseline: {
+              "@global": {
+                body: {
+                  backgroundColor: team.theme.primary
+                }
+              }
+            }
+          }
+        })}
+      >
         <CssBaseline />
         <Router
           navigation={navigation}
-          context={{ navigation, gqlClient, currentUser }}
+          context={{ navigation, gqlClient, currentUser, team }}
         >
           <InnerApp />
         </Router>

src/layouts/Application.tsx

@@ -10,7 +10,6 @@ import MenuItem from "@material-ui/core/MenuItem";
 import { makeStyles } from "@material-ui/core/styles";
 import Toolbar from "@material-ui/core/Toolbar";
 import ArrowForward from "@material-ui/icons/ArrowForward";
-import CouncilLogo from "@material-ui/icons/EcoOutlined";
 import MenuIcon from "@material-ui/icons/Menu";
 import classNames from "classnames";
 import * as React from "react";
@@ -127,8 +126,17 @@ export const Header = ({
             display="flex"
             alignItems="center"
             px={{ md: 1 }}
+            py={1}
           >
-            <CouncilLogo /> {team}
+            {team.logo ? (
+              <img
+                src={team.logo}
+                alt={`${team.name} logo`}
+                style={{ height: 48 }}
+              />
+            ) : (
+              team.name
+            )}
           </Box>
           {currentUser && (
             <>
@@ -210,13 +218,14 @@ export const Header = ({
 const Application = ({
   children,
   currentUser = false,
-  address = undefined
+  address = undefined,
+  team = { name: "Plan✕", logo: null }
 }) => {
   const classes = useStyles();
   return (
     <div className={classes.container}>
       <Header
-        team="Hampton"
+        team={team}
         currentUser={currentUser}
         address={address}
         breadcrumbs={

src/layouts/Header.fixture.tsx

@@ -4,7 +4,10 @@ import { Header } from "./Application";
 
 export default (
   <Header
-    team="Council"
+    team={{
+      name: "Plan✕",
+      logo: null
+    }}
     address="30 Lake Road"
     currentUser
     breadcrumbs={[

src/routes/index.tsx

@@ -10,18 +10,20 @@ export type IContext = {
   gqlClient;
   navigation;
   currentUser;
+  team;
 };
 
 const renderNotFound: React.FC<any> = () => <h1>404 - Not Found</h1>;
 
-const Layout = ({ currentUser }) => {
+const Layout = ({ currentUser, team }) => {
   const address = useStore(state => state.data.address);
   const activeStep = useStore(state => state.data.activeStep);
 
   return (
     <Application
       currentUser={currentUser}
       address={activeStep > 0 && address.name}
+      team={team}
     >
       <NotFoundBoundary render={renderNotFound}>
         <View />
@@ -32,7 +34,7 @@ const Layout = ({ currentUser }) => {
 
 export default compose(
   withView((req, context: IContext) => (
-    <Layout currentUser={context.currentUser} />
+    <Layout currentUser={context.currentUser} team={context.team} />
   )),
 
   mount({

src/themes/default.ts

@@ -1,17 +1,13 @@
 import { createMuiTheme } from "@material-ui/core/styles";
 import defaultsDeep from "lodash/defaultsDeep";
 
-// see default values here https://material-ui.com/customization/default-theme
-
 const themePalette = {
   primary: {
-    main: "#038521", // basically black
-    bodyText: "#141414",
-    contrastText: "#fff"
+    main: "#141414",
+    bodyText: "#141414"
   },
   secondary: {
-    main: "#141414",
-    contrastText: "#fff"
+    main: "#141414"
   },
   grey: {
     main: "#999999"
@@ -97,6 +93,13 @@ const _default = {
   },
   overrides: {
     // styling overrides for specific material UI components
+    MuiCssBaseline: {
+      "@global": {
+        body: {
+          backgroundColor: "#141414"
+        }
+      }
+    },
     MuiTypography: {
       root: {
         fontSize: "inherit",
@@ -508,4 +511,4 @@ const _default = {
   }
 };
 
-export default createMuiTheme(defaultsDeep(_default));
+export default defaultsDeep(_default);