updated site as part of v2 refresh

catalog/GENERAL.md

@@ -1,5 +1,20 @@
 # General
 
+## Tagline
+
+The tagline represents what MonPlan is and shows the exciting factor of the tool being be built by the students.
+
+Some pre-approved taglines include:
+
+- _The Monash Course Planner for students, by students_
+
+The 'for students, by students' is a key here as it helps drive the Student Innovation Program being developed. 
+
+While 'The Monash Course Planner' helps promote us as **the** course planning tool for Monash Students. 
+
+- _The Monash Course Planning Tool for students, by students_
+
+
 ## Tone of Voice
 
 Please remember when developing frontend interfaces for MonPlan that you are also by extension representing Monash University.

catalog/WELCOME.js

@@ -0,0 +1,56 @@
+import React from "react";
+import { Page, ReactSpecimen, ImageSpecimen } from "catalog";
+import { Card } from "material-ui";
+import Button from "@material-ui/core/Button";
+import Icon from "@material-ui/core/Icon";
+import { withStyles, MuiThemeProvider } from "@material-ui/core/styles";
+import MuiTheme from "./config/theme";
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit
+  },
+
+  leftIcon: {
+    marginRight: theme.spacing.unit
+  }
+});
+
+const WelcomeV2Page = ({ classes }) => (
+  <MuiThemeProvider theme={MuiTheme}>
+    <Page>
+      <ImageSpecimen src="/logos/logo_full_black.png" plain={true} span={2} />
+      MonPlan is the Monash Course Planner built for students, by students. You
+      can find the following:
+      <Button
+        variant="outlined"
+        color="primary"
+        className={classes.button}
+        href="/#/general"
+      >
+        <Icon className={classes.leftIcon}>language</Icon>
+        Language
+      </Button>
+      <Button
+        variant="outlined"
+        color="primary"
+        className={classes.button}
+        href="/#/logos"
+      >
+        <Icon className={classes.leftIcon}>style</Icon>
+        Styles
+      </Button>
+      <Button
+        variant="outlined"
+        color="primary"
+        className={classes.button}
+        href="/#/components/UnitCard"
+      >
+        <Icon className={classes.leftIcon}>extension</Icon>
+        Components
+      </Button>
+    </Page>
+  </MuiThemeProvider>
+);
+
+export default withStyles(styles)(WelcomeV2Page);

catalog/config/theme.js

@@ -0,0 +1,24 @@
+import { createMuiTheme } from "@material-ui/core/styles";
+
+import COLORS from "../constants/COLORS";
+
+const theme = createMuiTheme({
+  palette: {
+    primary: COLORS.PRIMARY,
+    secondary: COLORS.SECONDARY,
+    error: COLORS.ERROR,
+    success: COLORS.SUCCESS
+  },
+  // define custom theme props here
+  custom: {
+    palette: {
+      facultyColors: COLORS.FACULTY,
+      misc: COLORS.MISC
+    }
+  },
+  // try to avoid using this unless absolutely necessary!
+  // it will apply changes to ALL components
+  overrides: {}
+});
+
+export default theme;

catalog/constants/colors.js

@@ -0,0 +1,48 @@
+import { Faculty } from "./faculty";
+
+const COLORS = {
+  PRIMARY: {
+    light: "#2682b8",
+    main: "#006cab",
+    dark: "#00599a",
+    contrastText: "#fff"
+  },
+  SECONDARY: {
+    light: "#898989",
+    main: "#565656",
+    dark: "#454545",
+    contrastText: "#fff"
+  },
+  ERROR: {
+    light: "#e57373",
+    main: "#f44336",
+    dark: "#d32f2f",
+    contrastText: "#fff"
+  },
+  SUCCESS: {
+    main: "#4caf50"
+  },
+  FACULTY: {
+    [Faculty.ADA]: "#455a64",
+    [Faculty.ART]: "#b71c1c",
+    [Faculty.BUS]: "#00bcd4",
+    [Faculty.EDU]: "#b81b60",
+    [Faculty.ENG]: "#ff9800",
+    [Faculty.FIT]: "#7b1fa2",
+    [Faculty.LAW]: "#776c55",
+    [Faculty.MHS]: "#2196f3",
+    [Faculty.PHA]: "#7c8500",
+    [Faculty.SCI]: "#009688",
+    default: "#006dae"
+  },
+  MISC: {
+    footer: "#2e2e2e",
+    warning: "#c3185a",
+    beta: "#ffb300",
+    success: "#4caf50",
+    softBackground: "#dddddd",
+    monashBlue: "#006dae"
+  }
+};
+
+export default COLORS;

catalog/index.html

@@ -7,6 +7,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.png">
   <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
+  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
   <title>MonPlan Brand</title>
 </head>
 

catalog/index.js

@@ -2,12 +2,13 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { Catalog, pageLoader } from "catalog";
 import Theme from "./theme";
-
+import { MuiThemeProvider } from "material-ui";
+import MuiTheme from "./config/theme";
 const pages = [
   {
     path: "/",
     title: "Welcome",
-    content: pageLoader(() => import("./WELCOME.md"))
+    content: pageLoader(() => import("./WELCOME.js"))
   },
   {
     title: "Language",
@@ -57,11 +58,13 @@ const pages = [
 ];
 
 ReactDOM.render(
-  <Catalog
-    title="MonPlan Brand"
-    pages={pages}
-    theme={Theme}
-    logoSrc={"/logos/logo_full_black.png"}
-  />,
+  <MuiThemeProvider theme={MuiTheme}>
+    <Catalog
+      title="MonPlan Brand"
+      pages={pages}
+      theme={Theme}
+      logoSrc={"/logos/logo_full_black.png"}
+    />
+  </MuiThemeProvider>,
   document.getElementById("catalog")
 );

package.json

@@ -2,6 +2,7 @@
   "name": "branding",
   "description": "branding guidelines for monplan",
   "dependencies": {
+    "@material-ui/core": "^1.0.0",
     "@material-ui/icons": "^1.0.0",
     "catalog": "^3.0.0-rc.4",
     "material-ui": "^0.20.1",