using mui

src/App.js

@@ -1,12 +1,37 @@
 import { Provider } from 'react-redux';
+import { createTheme } from '@mui/material/styles';
+import { green, yellow } from '@mui/material/colors';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import Container from '@mui/material/Container';
 import store from './store';
 import RestaurantScreen from './components/RestaurantScreen';
 
+const myTheme = createTheme({
+  pallette: {
+    primary: green,
+    secondary: yellow,
+  },
+});
+
 export default function App(){
 
   return (
     <Provider store={store}>
-      <RestaurantScreen />
+      <ThemeProvider theme={myTheme}>
+        <CssBaseline />
+        <AppBar position="static">
+          <Toolbar>
+            <Typography variant='h6'>Opinion Ate</Typography>
+          </Toolbar>
+        </AppBar>
+        <Container>
+          <RestaurantScreen />
+        </Container>
+      </ThemeProvider>
     </Provider>
   )
 }

src/components/RestaurantList.js

@@ -1,25 +1,31 @@
 import { useEffect } from "react";
 import { connect } from "react-redux";
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import { loadRestaurants } from '../store/restaurants/actions';
 
-export function RestaurantList({ loadRestaurants, restaurants }) {
+export function RestaurantList({ loadRestaurants, restaurants })
+{
     useEffect(() => 
-    { 
-        loadRestaurants(); 
+    {
+        loadRestaurants();
     }, [loadRestaurants]);
     return (
-        <ul>
-            {restaurants.map(restaurant => 
+        <List>
+            {restaurants.map(restaurant =>
             (
-                <li key={restaurant.id}>{restaurant.name}</li>
+                <ListItem key={restaurant.id}>
+                    <ListItemText>{restaurant.name}</ListItemText>
+                </ListItem>
             ))}
-        </ul>
+        </List>
     );
 };
 
 const mapStateToProps = state => ({
     restaurants: state.restaurants.records,
 });
-const mapDispatchToProps = {loadRestaurants};
+const mapDispatchToProps = { loadRestaurants };
 
 export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList);

src/components/RestaurantScreen.js

@@ -1,11 +1,15 @@
+import Card from '@mui/material/Card';
+import CardContent from '@mui/material/CardContent';
+import Typography from '@mui/material/Typography';
 import RestaurantList from "./RestaurantList";
 
 export default function RestaurantScreen() {
     return (
-        <div>
-            <h1>Restaurants</h1>
-            <RestaurantList />
-        </div>
-        
+        <Card>
+            <CardContent>
+                <Typography variant="h5">Restaurants</Typography>
+                <RestaurantList />
+            </CardContent>
+        </Card>
     )
 }