Layout And Theme

Layout system

Page

Our main container, each page start with this. Both Page and Card take in template='pink' or 'white'. Figma reference

Appbar

Unless specified otherwise, the default appbar will be applied

Card

Use this to divide the page up.

Theme

We are currently using both material-ui and styled-components. What have been done so far is:

Using theme provider both from "styled-components" and "material-ui/core/styles". Crafting a working theme from the customize theme.js. Please use the theme as much as you can. Thanks

App.tsx

import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
import {ThemeProvider} from "styled-components";

function App() {
     const customTheme = createMuiTheme(theme)
     return (
         ...
         <MuiThemeProvider theme={customeTheme}>
         <ThemeProvider theme={customeTheme}>
              ... the App here ...
         </ThemeProvider>
         </MuiThemeProvider>
     )
}

Typography

When using Figma, you can tell which font they are using by click on the text

Text Style: H2 / Left-Aligned / Purple

-> h2 -> this translate into our theme as

import {Typography} from '@material-ui/core'
...
<Typography variant="h2">
    Profile
 </Typography>

Working with styled-components

As mentioned before, we are trying to use the theme in both material-ui and styled-components

One problem is that it might be very verbose to extract style from theme to a styled component. Therefor a utils have been created to help with that problem

Page.style.js import styled from "styled-components"; import {extractStyle} from "../../../theme.js"

export const PageContainer = styled.div`
   ${props=>extractStyle(props, 'theme.typography.body1')}
   ...
`

extractStyle get the correct style by pathing and apply tranformation -> correct css