Changed primary color

01-frontend/src/App.tsx

@@ -9,10 +9,20 @@ import Payment from './pages/Payment';
 import Contact from './pages/Contact';
 import Category from './pages/Category';
 import { BasketProvider } from './helper/BasketProvider';
+import { createTheme, ThemeProvider } from '@mui/material/styles';
+import { green } from '@mui/material/colors';
 
 export default function App() {
 
+  const theme = createTheme({
+    palette: {
+      primary: {
+        main: green[500],
+      },
+    },});
+
   return (
+    <ThemeProvider theme={theme}>
     <BasketProvider>
       <BrowserRouter>
         <NavBar />
@@ -27,6 +37,7 @@ export default function App() {
         </Routes>
       </BrowserRouter>
     </BasketProvider>
+    </ThemeProvider>
   )
 }
 

01-frontend/src/helper/ItemCard.tsx

@@ -35,7 +35,7 @@ export default function ItemCard({ item }: { item: Item }) {
                         <Rating name="half-rating" readOnly defaultValue={item.rating} precision={0.5} />
                         <Typography variant="body2" sx={{ color: 'text.secondary' }} className="item-description">
                             {item.price * (1 - item.discount / 100)} €
-                            <IconButton color="primary" aria-label="add to shopping cart" onClick={handleAddToCart}>
+                            <IconButton aria-label="add to shopping cart" onClick={handleAddToCart}>
                                 <AddShoppingCart />
                             </IconButton>
                         </Typography>

01-frontend/src/helper/NavBar.css

@@ -1,6 +1,6 @@
 /* Navbar styles */
 .navbar {
-    background-color: #1976d2; /* Material-UI Primary Color */
+    background-color: green; /* Material-UI Primary Color */
     box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
     position: absolute;
     top: 0;

01-frontend/src/helper/NavBar.tsx

@@ -84,7 +84,7 @@ export default function NavBar() {
 
 
     return (
-        <AppBar>
+        <AppBar sx={{bgcolor: 'green'}}>
             <Container maxWidth="xl">
                 <Toolbar disableGutters>
                     <AdbIcon sx={{ display: { xs: 'none', md: 'flex' }, mr: 1 }} />

01-frontend/src/helper/helper.css

@@ -3,4 +3,8 @@
     justify-content: space-between; /* Elemente an gegenüberliegenden Seiten platzieren */
     align-items: center; /* Vertikale Zentrierung */
     width: 100%;
+}
+
+.item-card-button{
+    color: green;
 }

01-frontend/src/pages/Product.tsx

@@ -107,7 +107,7 @@ export default function Product() {
                         <Stack direction="row" alignItems="center" spacing={2}>
                             {item.discount > 0 ? (
                                 <>
-                                    <Typography variant="h4" color="primary">
+                                    <Typography variant="h4" color="green">
                                         €{discountedPrice.toFixed(2)}
                                     </Typography>
                                     <Typography
@@ -122,7 +122,7 @@ export default function Product() {
                                     </Typography>
                                 </>
                             ) : (
-                                <Typography variant="h4" color="primary">
+                                <Typography variant="h4" color="green">
                                     €{item.price.toFixed(2)}
                                 </Typography>
                             )}

01-frontend/src/pages/pages.css

@@ -13,7 +13,7 @@
 .no-page-title {
   font-size: 8rem;
   font-weight: bold;
-  color: #1976d2; /* Material-UI Primary Color */
+  color: primary; /* Material-UI Primary Color */
   margin-bottom: 16px;
 }