Change Cart disposition

src/components/NavBar.js

@@ -1,34 +1,11 @@
 import React from "react";
 import { useSelector } from "react-redux";
 import { AppBar, Toolbar, IconButton, Badge, Button } from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
 import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
 import ArrowBackIcon from '@material-ui/icons/ArrowBack';
 import { useNavigate, useLocation } from 'react-router-dom';
 
-const useStyles = makeStyles((theme) => ({
-    appBar: {
-        top: 'auto',
-        bottom: 0,
-        backgroundColor: '#1c1f23',
-    },
-    toolbar: {
-        justifyContent: 'space-between',
-    },
-    backButton: {
-        color: 'white',
-    },
-    cartButton: {
-        color: 'white',
-    },
-    refreshButton: {
-        color: 'white',
-        marginRight: theme.spacing(2),
-    },
-}));
-
-const NavBar = ({onRefreshFiles}) => {
-    const classes = useStyles();
+const NavBar = ({ onRefreshFiles }) => {
     const navigate = useNavigate();
     const location = useLocation();
     const selectedPosters = useSelector((state) => {
@@ -49,22 +26,22 @@ const NavBar = ({onRefreshFiles}) => {
     const isPosterSelectorPage = location.pathname !== '/PosterSelector';
 
     return (
-        <AppBar position="fixed" className={classes.appBar}>
-            <Toolbar className={classes.toolbar}>
+        <AppBar position="fixed" className="navbar">
+            <Toolbar className="toolbar">
                 {isPosterSelectorPage ? (
-                    <IconButton edge="start" className={classes.backButton} onClick={handleBack}>
+                    <IconButton edge="start" className="back-button" onClick={handleBack}>
                         <ArrowBackIcon />
                     </IconButton>
                 ) : (
-                    <IconButton edge="start" className={classes.backButton} disabled>
+                    <IconButton edge="start" className="back-button" disabled>
                         {/* Un IconButton vide et désactivé */}
                     </IconButton>
                 )}
                 <div>
-                    <Button className={classes.refreshButton} onClick={onRefreshFiles}>
+                    <Button className="refresh-button" onClick={onRefreshFiles}>
                         Refresh Files
                     </Button>
-                    <IconButton edge="end" className={classes.cartButton} onClick={handleCart}>
+                    <IconButton edge="end" className="cart-button" onClick={handleCart}>
                         <Badge badgeContent={totalSelected} color="secondary">
                             <ShoppingCartIcon />
                         </Badge>