From ca69cb7fc0fc6661f89929ecf56e0167608ee450 Mon Sep 17 00:00:00 2001 From: Luis Fernando Molina Date: Tue, 18 Sep 2018 08:59:24 +0200 Subject: [PATCH] theme separated in a file, now all typography is consistent --- client/public/index.html | 11 +--- client/src/App.js | 10 +--- client/src/components/Home.js | 95 +++++++++++++++++++++++++---------- client/src/theme.js | 72 ++++++++++++++++++++++++++ 4 files changed, 143 insertions(+), 45 deletions(-) create mode 100644 client/src/theme.js diff --git a/client/public/index.html b/client/public/index.html index 59bf85d0a..d5814b15e 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -32,6 +32,7 @@ work correctly both with client-side routing and a non-root public URL. Learn how to configure a non-root public URL by running `npm run build`. --> + @@ -52,15 +53,5 @@
- diff --git a/client/src/App.js b/client/src/App.js index 37711c7ae..3cc637415 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -12,6 +12,7 @@ import { Route, BrowserRouter, Switch } from 'react-router-dom' // Material UI import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles' +import theme from './theme' // Components @@ -70,15 +71,6 @@ export const client = new ApolloClient({ export const auth = new Auth(result => console.log('auth result', result), client) -/* Here we change the default Material UI theme for Advanced Algos brand colors. */ - -const theme = createMuiTheme({ - palette: { - primary: { main: '#303036' }, // DARK. - secondary: { main: '#CC5835' } // RUSTED_RED. - } -}) - class App extends Component { render () { return ( diff --git a/client/src/components/Home.js b/client/src/components/Home.js index 73572c700..6983aa808 100644 --- a/client/src/components/Home.js +++ b/client/src/components/Home.js @@ -5,6 +5,7 @@ import {LineChart} from 'react-easy-chart' import Paper from '@material-ui/core/Paper' import Grid from '@material-ui/core/Grid' import Typography from '@material-ui/core/Typography' +import CssBaseline from '@material-ui/core/CssBaseline' const styles = theme => ({ root: { @@ -19,6 +20,26 @@ const styles = theme => ({ width: '100%', marginTop: 20, marginBottom: 20 + }, + '@global': { + body: { + backgroundColor: theme.palette.common.white + } + }, + layout: { + width: 'auto', + marginLeft: theme.spacing.unit * 3, + marginRight: theme.spacing.unit * 3, + [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: { + width: 900, + marginLeft: 'auto', + marginRight: 'auto' + } + }, + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` } }) @@ -27,41 +48,63 @@ class Home extends Component { render () { const { classes } = this.props return ( - + + +
+
+ + Collaborate. Innovate. Evolve. + + + Welcome to Advanced Algos Users Module + +
+
+ - Welcome to the Users Module - + Intro + - This module is responsible for managing users across the Advanced Algos system. Here you can browse the Users Directory, search for users and get to their profiles. You can create your own User profile if you sign up, or manage it if you already have one by logging in. - + This module is responsible for managing users across the Advanced Algos system. Here you can browse the Users Directory, search for users and get to their profiles. You can create your own User profile if you sign up, or manage it if you already have one by logging in. + - Development Status - + Development Status + - This module is is currently under heavy development. Implementation started 1st of September 2018 and this is the result of the 1st sprint of 2 weeks of work. - + This module is is currently under heavy development. Implementation started 1st of September 2018 and this is the result of the 1st sprint of 2 weeks of work. + - What can you do? - + What can you do? + - Currently you can use the Browse section to list all registered users. Clicking on View Profile you can see some more info about that user. You can signup with your Github account and manage your profile information while logged in. You will find all features under develpment with a dialog indicating it is not ready. - + Currently you can use the Browse section to list all registered users. Clicking on View Profile you can see some more info about that user. You can signup with your Github account and manage your profile information while logged in. You will find all features under develpment with a dialog indicating it is not ready. + - What is next? - + What is next? + - The major features for the next sprint are: - + The major features for the next sprint are: +
  • 1. Managing profile images.
  • 2. Making sure that Auth0 integration server side is working well.
  • 3. Making sure that mutations can not be impersonated.
- Below, you can see some usage statistics of this module, in this case, the total amount of users over time. [data is not real yet.] - + Below, you can see some usage statistics of this module, in this case, the total amount of users over time. [data is not real yet.] + + /> - + ) } diff --git a/client/src/theme.js b/client/src/theme.js new file mode 100644 index 000000000..5f9ff7569 --- /dev/null +++ b/client/src/theme.js @@ -0,0 +1,72 @@ +import { createMuiTheme } from '@material-ui/core/styles' +import indigo from '@material-ui/core/colors/indigo' +// import red from '@material-ui/core/colors/red' + +export const theme = createMuiTheme({ + palette: { + primary: { main: '#303036' }, // DARK. + secondary: { main: '#CC5835' } // RUSTED_RED. + }, + typography: { + fontFamily: '"Saira","Saira Condenses", sans-serif' + }, + overrides: { + Paper: { + root: { + backgroundColor: '#ffffff' + }, + elevation: 0, + square: true + } + } +}) + +export const globalStyles = theme => ({ + '@global': { + body: { + backgroundColor: theme.palette.common.white + } + }, + appBar: { + position: 'relative' + }, + toolbarTitle: { + flex: 1 + }, + layout: { + width: 'auto', + marginLeft: theme.spacing.unit * 3, + marginRight: theme.spacing.unit * 3, + [theme.breakpoints.up(900 + theme.spacing.unit * 3 * 2)]: { + width: 900, + marginLeft: 'auto', + marginRight: 'auto' + } + }, + heroContent: { + maxWidth: 600, + margin: '0 auto', + padding: `${theme.spacing.unit * 8}px 0 ${theme.spacing.unit * 6}px` + }, + cardHeader: { + backgroundColor: theme.palette.grey[200] + }, + cardPricing: { + display: 'flex', + justifyContent: 'center', + alignItems: 'baseline', + marginBottom: theme.spacing.unit * 2 + }, + cardActions: { + [theme.breakpoints.up('sm')]: { + paddingBottom: theme.spacing.unit * 2 + } + }, + footer: { + marginTop: theme.spacing.unit * 8, + borderTop: `1px solid ${theme.palette.divider}`, + padding: `${theme.spacing.unit * 6}px 0` + } +}) + +export default theme