Replace direct theme imports with MUI useTheme hook

ECN · Oct 14, 2020 · 1e6c208 · 1e6c208
1 parent 0639739
commit 1e6c208
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 16 deletions.
diff --git a/src/components/DirectoryInformation/DirectoryInformation.js b/src/components/DirectoryInformation/DirectoryInformation.js
@@ -1,11 +1,10 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { TableContainer, Table, TableRow, TableCell, Paper, makeStyles } from "@material-ui/core";
-import webqueue2Theme from "../../theme";
+import { TableContainer, Table, TableRow, TableCell, Paper, makeStyles, useTheme } from "@material-ui/core";
 
 export default function DirectoryInformation({ section }) {
 
-    const theme = webqueue2Theme(false);
+    const theme = useTheme();
     const useStyles = makeStyles((theme) => ({
         headerCell: {
             borderBottom:  "none",

diff --git a/src/components/EmailHeader/EmailHeader.js b/src/components/EmailHeader/EmailHeader.js
@@ -1,12 +1,11 @@
 import React from "react";
 import PropTypes from "prop-types";
-import { Card, CardHeader, makeStyles } from "@material-ui/core";
+import { Card, CardHeader, makeStyles, useTheme } from "@material-ui/core";
 import UserAvatar from "../UserAvatar/";
-import webqueue2Theme from "../../theme";
 
 export default function EmailHeader({name, date, email}){
 
-	const theme = webqueue2Theme(false);
+	const theme = useTheme();
 	const useStyles = makeStyles({
 		"verticalPadding": {
 			paddingTop: theme.spacing(1),

diff --git a/src/components/ItemMetadataView/ItemMetadataView.js b/src/components/ItemMetadataView/ItemMetadataView.js
@@ -1,14 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { makeStyles, Typography } from '@material-ui/core';
+import { makeStyles, Typography, useTheme } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
-import webqueue2Theme from "../../theme";
 import EmailHeader from '../EmailHeader/EmailHeader';
 
 
 export default function ItemMetadataView({item}){
 
-	const theme = webqueue2Theme(false);
+	const theme = useTheme();
 	const useStyles = makeStyles({
 		"verticalSpacing": {
 			marginTop: theme.spacing(1),

diff --git a/src/components/ItemTableAppBar/ItemTableAppBar.md b/src/components/ItemTableAppBar/ItemTableAppBar.md
@@ -2,11 +2,11 @@ The ItemTableAppBar is the primary toolbar for the [ItemTable](/#/Components/Ite
 
 ```jsx
 import React, { useState } from "react";
-import webqueue2Theme from "../../theme.js";
+import { useTheme } from '@material-ui/core';
 
 const [darkMode, setDarkMode] = useState(false);
 
-const theme = webqueue2Theme(darkMode);
+const theme = useTheme();
 
 <ItemTableAppBar title="webqueue2" darkMode={darkMode} setDarkMode={setDarkMode} theme={theme} />
 ```

diff --git a/src/components/ItemViewAppBar/ItemViewAppBar.md b/src/components/ItemViewAppBar/ItemViewAppBar.md
@@ -3,9 +3,9 @@ The ItemViewAppBar is the primary toolbar for the [ItemView](/#/Components/ItemV
 ```jsx
 import React, { useState } from "react";
 import ItemViewAppBar from "./ItemViewAppBar";
-import webqueue2Theme from "../../theme.js";
+import { useTheme } from '@material-ui/core';
 
-const theme = webqueue2Theme(false);
+const theme = useTheme();
 
 const [sidebarOpen, setSidebarOpen] = useState(false);
 

diff --git a/src/components/TeamMemberCard/TeamMemberCard.js b/src/components/TeamMemberCard/TeamMemberCard.js
@@ -1,13 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types'
 import { Card, CardHeader, Avatar, IconButton, CardContent, 
-	CardActions, Link, makeStyles } from '@material-ui/core';
+	CardActions, Link, makeStyles, useTheme } from '@material-ui/core';
 import WebsiteIcon from '@material-ui/icons/Language';
-import webqueue2Theme from "../../theme";
+
 
 export default function TeamMemberCard({firstName, lastName, imageUrl, websiteUrl, children}){
 
-	const theme = webqueue2Theme();
+	const theme = useTheme();
 
 	const useStyles = () => makeStyles({
 		"avatarImageLarge": {