Upgrades MUI version #96

amgoodfellow · Dec 14, 2018 · b24b26b · b24b26b
1 parent 01324ce
commit b24b26b
Show file tree

Hide file tree

Showing 11 changed files with 28 additions and 29 deletions.
diff --git a/src/api/api.js b/src/api/api.js
@@ -1,7 +1,7 @@
 const getDemoEvents = async () => {
   console.warn('Running in demo mode')
   return await fetch(
-    'https://gist.githubusercontent.com/Aaron-G-9/33e35d1a86d401fc1a1e678dc66faf17/raw/52dbab0792e4e9a66b9cf1ea11c9d9099e8fa5ca/CalendarEvents.json'
+    'https://gist.githubusercontent.com/amgoodfellow/33e35d1a86d401fc1a1e678dc66faf17/raw/52dbab0792e4e9a66b9cf1ea11c9d9099e8fa5ca/CalendarEvents.json'
   )
     .then(response => response.json())
     .then(response => response.events)

diff --git a/src/components/DayBoxSchedule.js b/src/components/DayBoxSchedule.js
@@ -69,7 +69,7 @@ class DayBoxSchedule extends Component {
                   calmeetin[this.props.month][this.props.day][i].color
               }}
             >
-              <Typography type="body2" className={classes.eventText}>
+              <Typography variant="body1" className={classes.eventText}>
                 {calmeetin[this.props.month][this.props.day][i].coursetitle}
               </Typography>
             </ListItem>
@@ -103,7 +103,7 @@ class DayBoxSchedule extends Component {
                   calmeetin[this.props.month][this.props.day][i].color
               }}
             >
-              <Typography type="body2" className={classes.eventText}>
+              <Typography variant="body1" className={classes.eventText}>
                 {calmeetin[this.props.month][this.props.day][i].coursetitle}
               </Typography>
             </ListItem>

diff --git a/src/components/DayList.js b/src/components/DayList.js
@@ -29,7 +29,6 @@ class DayList extends Component {
         </div>
       )
     } catch (err) {
-      //console.log("Attempted render of undefined");
       classList = (
         <List style={{ padding: 0 }}>
           <ListItem
@@ -42,7 +41,7 @@ class DayList extends Component {
               color: '#004987'
             }}
           >
-            <ListItemText type="title" primary="You have no classes " />
+            <ListItemText primary="You have no classes " />
           </ListItem>
         </List>
       )

diff --git a/src/components/ErrorMessages.js b/src/components/ErrorMessages.js
@@ -51,7 +51,7 @@ class ErrorMessages extends Component {
               <CardHeader title={header} />
 
               <CardContent className={classes.content}>
-                <Typography type="body1">{subheader}</Typography>
+                <Typography variant="body1">{subheader}</Typography>
               </CardContent>
             </div>
           </div>

diff --git a/src/components/MobileMonthView.js b/src/components/MobileMonthView.js
@@ -141,7 +141,7 @@ class MobileMonthView extends Component {
     for (let i = 0; i < 7; ++i) {
       weekDaysRow.push(
         <td key={i + Math.random()} style={{ width: '100rem' }}>
-          <Typography type="body1" component="div" style={{ fontWeight: 600 }}>
+          <Typography variant="body1" component="div" style={{ fontWeight: 600 }}>
             {shortDayNames[i]}
           </Typography>
         </td>
@@ -263,7 +263,7 @@ class MobileMonthView extends Component {
                 className={classes.currentDay}
               >
                 <Typography
-                  type="body1"
+                  variant="body1"
                   component="div"
                   className={classes.todayNumber}
                 >
@@ -281,7 +281,7 @@ class MobileMonthView extends Component {
                 className={classes.currentDay}
               >
                 <Typography
-                  type="body1"
+                  variant="body1"
                   component="div"
                   className={classes.todayNumber}
                 >
@@ -336,7 +336,7 @@ class MobileMonthView extends Component {
                 className={classes.monthDay}
               >
                 <Typography
-                  type="body1"
+                  variant="body1"
                   component="div"
                   className={classes.otherDayNumber}
                 >
@@ -354,7 +354,7 @@ class MobileMonthView extends Component {
                 className={classes.monthDay}
               >
                 <Typography
-                  type="body1"
+                  variant="body1"
                   component="div"
                   className={classes.otherDayNumber}
                 >

diff --git a/src/components/MobileView.js b/src/components/MobileView.js
@@ -1,11 +1,8 @@
 import React, { Component } from 'react'
-import DayCard from './DayCard'
 import Paper from '@material-ui/core/Paper'
 import PropTypes from 'prop-types'
-import Toolbar from '@material-ui/core/Toolbar'
 import Typography from '@material-ui/core/Typography'
-import { dayNames, shortDayNames } from './../utils/Strings'
-import { getEvents } from './../api/api'
+import { shortDayNames } from './../utils/Strings'
 import { getWeeksOfMonth, getDaysInMonth } from './../utils/DateHelper'
 import { withStyles } from '@material-ui/core/styles'
 
@@ -132,7 +129,7 @@ class MobileView extends Component {
               }}
             >
               <Typography
-                type="body1"
+                variant="body1"
                 component="div"
                 style={{ fontWeight: '600' }}
               >
@@ -149,7 +146,7 @@ class MobileView extends Component {
                 padding: '10px'
               }}
             >
-              <Typography type="body1" component="div">
+              <Typography variant="body1" component="div">
                 {this.monthDayCounter}
               </Typography>
             </td>
@@ -167,7 +164,7 @@ class MobileView extends Component {
     for (let i = 0; i < 7; ++i) {
       weekDaysRow.push(
         <td key={weekDaysRow[i]} style={{ width: '100rem' }}>
-          <Typography type="body1" component="div" style={{ fontWeight: 600 }}>
+          <Typography variant="body1" component="div" style={{ fontWeight: 600 }}>
             {shortDayNames[i]}
           </Typography>
         </td>

diff --git a/src/components/MonthView.js b/src/components/MonthView.js
@@ -187,7 +187,7 @@ class MonthView extends Component {
               }
             }}
           >
-            <Typography type="body1" component="div" style={fontStyle}>
+            <Typography variant="body1" component="div" style={fontStyle}>
               {this.monthDayCounter}
               <div aria-hidden="true" id={this.monthDayCounter + 'class'}>
                 <DayBoxSchedule
@@ -214,7 +214,7 @@ class MonthView extends Component {
       weekDaysRow.push(
         <th scope="col" key={dayNames[i]} style={{ width: '100rem' }}>
           <Typography
-            type="body1"
+            variant="body1"
             component="div"
             style={{ fontWeight: 600 }}
             aria-label={dayNames[i]}
@@ -244,7 +244,7 @@ class MonthView extends Component {
           <Toolbar className={classes.dayTitleBar}>
             <Typography
               tabIndex="0"
-              type="title"
+              variant="h6"
               style={{ fontWeight: 'bold', opacity: 0.9 }}
             >
               {this.displayWeekDay()}

diff --git a/src/components/ScheduleEvent.js b/src/components/ScheduleEvent.js
@@ -58,13 +58,13 @@ class ScheduleEvent extends Component {
               }}
               tabIndex="0"
             >
-              <Typography type="title" className={classes.courseTitle}>
+              <Typography variant="h6" className={classes.courseTitle}>
                 {this.props.events[month][day][i].coursename}
               </Typography>
-              <Typography type="body1" className={classes.eventBody}>
+              <Typography variant="body1" className={classes.eventBody}>
                 {this.props.events[month][day][i].coursetitle}
               </Typography>
-              <Typography type="body1" className={classes.eventBody}>
+              <Typography variant="body1" className={classes.eventBody}>
                 {displayTime}
               </Typography>
             </Paper>

diff --git a/src/components/ScheduleView.js b/src/components/ScheduleView.js
@@ -63,14 +63,14 @@ class ScheduleView extends Component {
               aria-label={week[i].day + ' ' + week[i].dayNameFull}
             >
               <Typography
-                type="display2"
+                variant="h3"
                 className={classes.dayTextNumber}
                 aria-hidden="true"
               >
                 {week[i].day}
               </Typography>
               <Typography
-                type="display1"
+                variant="h4"
                 className={classes.dayTextDay}
                 aria-hidden="true"
               >
@@ -109,14 +109,14 @@ class ScheduleView extends Component {
               }
             >
               <Typography
-                type="display2"
+                variant="h3"
                 className={classes.dayTextNumber}
                 aria-hidden="true"
               >
                 {week[i].day}
               </Typography>
               <Typography
-                type="display1"
+                variant="h4"
                 className={classes.dayTextDay}
                 aria-hidden="true"
               >

diff --git a/src/components/Titlebar.js b/src/components/Titlebar.js
@@ -337,7 +337,7 @@ class Titlebar extends Component {
 
     return (
       <Typography
-        variant="title"
+        variant="h6"
         className={classes.dateRange}
         style={{ width: 140 }}
         aria-label={ariaLabel}

diff --git a/src/index.js b/src/index.js
@@ -9,6 +9,9 @@ import 'typeface-arimo'
 
 const oaklandTheme = createMuiTheme({
   palette: {
+    typography: {
+      useNextVariants: true
+    },
     primary: {
       light: '#b89f74',
       main: '#877148',