UI Mechanics / New Look (orange - gray)

src/components/DishesCategory.js

@@ -5,8 +5,20 @@ import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import List from "@material-ui/core/List";
 import ListItem from "@material-ui/core/ListItem";
 import CardDish from "./CardDish";
+import { makeStyles } from "@material-ui/core/styles";
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    backgroundColor: "#262626",
+    color: "#bbbbbb",
+  },
+  expandIcon: {
+    color: "#bbbbbb",
+  },
+}));
 
 export default function DishesCategory(props) {
+  const classes = useStyles();
   const dishes = props.dishes;
   const dishCards = dishes.map((dish) => {
     return (
@@ -17,8 +29,10 @@ export default function DishesCategory(props) {
   });
 
   return (
-    <Accordion>
-      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
+    <Accordion className={classes.root}>
+      <AccordionSummary
+        expandIcon={<ExpandMoreIcon className={classes.expandIcon} />}
+      >
         <h4>{props.name}</h4>
       </AccordionSummary>
       <List>{dishCards}</List>