Merge pull request 'dev' (#2) from dev into main

Reviewed-on: #2

src/components/CartOverview.css

@@ -1,62 +1,62 @@
 .cart-overview {
-  padding: 15px;
+  padding: 8px 4px;
 }
 
 .cart-summary {
-  background-color: #f5f5f5;
+  background-color: #f7f9fc;
-  border-radius: 8px;
+  border-radius: 6px;
-  padding: 15px;
+  padding: 12px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
 .count-info {
   display: flex;
   justify-content: space-between;
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .food-count, .drink-count {
   font-weight: 500;
+  font-size: 0.9rem;
 }
 
 .total-price {
   font-weight: bold;
-  font-size: 1.2rem;
+  font-size: 1.1rem;
   text-align: center;
-  margin-top: 10px;
+  margin-top: 8px;
   color: #2c7be5;
 }
 
-.clear-cart-button {
-  width: 100%;
-  padding: 12px;
-  margin-bottom: 15px;
-  background-color: #ff5252;
-  color: white;
-  border: none;
-  border-radius: 8px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-.calculate-change-button {
-  width: 100%;
-    padding: 12px;
-    background-color: #2c7be5;
-    color: white;
-    border: none;
-    border-radius: 8px;
-    font-weight: bold;
-    cursor: pointer;
-    transition: background-color 0.2s;
-}
 .cart-actions {
   display: flex;
   flex-direction: column;
-  gap: 12px;
+  gap: 10px;
-  margin-bottom: 20px;
+  margin-bottom: 16px;
 }
+
+.calculate-change-button, .clear-cart-button {
+  width: 100%;
+  padding: 10px;
+  border: none;
+  border-radius: 6px;
+  font-weight: 600;
+  font-size: 0.95rem;
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+
+.calculate-change-button {
+  background-color: #2c7be5;
+  color: white;
+}
+
+.clear-cart-button {
+  background-color: #ff5252;
+  color: white;
+}
+
 .calculate-change-button:active {
   background-color: #1b5eb5;
 }
@@ -68,49 +68,51 @@
 .cart-items {
   display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 8px;
 }
 
 .cart-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  background-color: white;
+  background-color: #f7f9fc;
-  padding: 15px;
+  padding: 12px;
-  border-radius: 8px;
+  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
 }
 
 .item-info {
   display: flex;
   flex-direction: column;
-  gap: 5px;
+  gap: 3px;
   flex: 1;
 }
 
 .item-name {
   font-weight: 500;
+  font-size: 0.95rem;
 }
 
 .item-option {
-  font-size: 0.9rem;
+  font-size: 0.85rem;
   color: #666;
 }
 
 .item-price {
   font-weight: bold;
   color: #2c7be5;
+  font-size: 0.9rem;
 }
 
 .item-quantity {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
 }
 
 .item-quantity button {
-  width: 30px;
+  width: 26px;
-  height: 30px;
+  height: 26px;
   border: none;
   border-radius: 50%;
   background-color: #2c7be5;
@@ -126,7 +128,8 @@
 
 .empty-cart {
   text-align: center;
-  padding: 30px;
+  padding: 20px;
-  color: #666;
+  color: #888;
   font-style: italic;
+  font-size: 0.9rem;
 }

src/components/ProductDetails.tsx

@@ -15,6 +15,9 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
   const { addToCart } = useCart();
   const navigate = useNavigate();
 
+  // Check if all options have the same price
+  const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
+
   const handleAddToCart = () => {
     addToCart({
       productId: product.id,
@@ -26,14 +29,10 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
     navigate('/');
   };
 
-  const incrementQuantity = () => setQuantity(prev => prev + 1);
-  const decrementQuantity = () => setQuantity(prev => Math.max(1, prev - 1));
-
-  // Check if all options have the same price
-  const hasSamePrice = product.options.every(option => option.price === product.options[0].price);
-
   return (
-    <div className="product-details">
+    <div 
+      className="product-details"
+    >
       <h2>{product.name}</h2>
       
       <div className="options-list">
@@ -43,24 +42,24 @@ const ProductDetails: React.FC<ProductDetailsProps> = ({ product, category }) =>
             key={option.name}
             className={`option-item ${selectedOption.name === option.name ? 'selected' : ''}`}
             onClick={() => setSelectedOption(option)}
+            style={(option.color || product.color) ? 
+              { backgroundColor: `${option.color || product.color}60` } : {}}
           >
             <span>{option.name}</span>
             {!hasSamePrice && <span className="option-price">{option.price.toFixed(2)} €</span>}
           </div>
         ))}
         {hasSamePrice && (
-          <div className="uniform-price">
+          <div className="uniform-price">Preis: {product.options[0].price.toFixed(2)} €</div>
-            Preis: {product.options[0].price.toFixed(2)} €
-          </div>
         )}
       </div>
       
       <div className="quantity-controls">
         <h3>Menge:</h3>
         <div className="quantity-buttons">
-          <button onClick={decrementQuantity}>-</button>
+          <button onClick={() => setQuantity(prev => Math.max(1, prev - 1))}>-</button>
           <span>{quantity}</span>
-          <button onClick={incrementQuantity}>+</button>
+          <button onClick={() => setQuantity(prev => prev + 1)}>+</button>
         </div>
       </div>
       

src/components/ProductList.css

@@ -1,34 +1,35 @@
 .product-list {
   display: flex;
   flex-direction: column;
-  gap: 10px;
+  gap: 8px;
-  padding: 10px;
+  padding: 6px;
 }
 
 .product-item {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 15px;
+  padding: 14px;
   background-color: #fff;
-  border-radius: 8px;
+  border-radius: 6px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   text-decoration: none;
   color: #333;
   transition: transform 0.2s, box-shadow 0.2s;
 }
 
 .product-item:active {
-  transform: scale(0.98);
+  transform: scale(0.99);
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .product-name {
   font-weight: 500;
-  font-size: 1.1rem;
+  font-size: 1rem;
 }
 
 .product-price {
-  font-weight: bold;
+  font-weight: 600;
   color: #2c7be5;
-  font-size: 1.1rem;
+  font-size: 0.95rem;
 }

src/components/ProductList.tsx

@@ -21,6 +21,7 @@ const ProductList: React.FC<ProductListProps> = ({ products, category }) => {
           to={`/product/${category}/${product.id}`} 
           key={product.id} 
           className="product-item"
+          style={product.color ? { backgroundColor: `${product.color}80` } : {}}
         >
           <div className="product-name">{product.name}</div>
           <div className="product-price">{product.basePrice.toFixed(2)} €</div>

src/data/products.json

@@ -4,9 +4,10 @@
       "id": "f1",
       "name": "Hendl",
       "basePrice": 9.50,
+      "color": "#FFEBCD",
       "options": [
         {"name": "Halbes Hendl", "price": 9.50},
-        {"name": "Ganzes Hendl", "price": 16.00},
+        {"name": "Ganzes Hendl", "price": 16.00, "color": "#FFDAB9"},
         {"name": "Hendl mit Semmel", "price": 11.00}
       ]
     },
@@ -14,16 +15,18 @@
       "id": "f2",
       "name": "Schnitzelsemmel",
       "basePrice": 5.80,
+      "color": "#FFEFC1",
       "options": [
         {"name": "Klassisch", "price": 5.80},
-        {"name": "Mit Salat", "price": 6.50},
+        {"name": "Mit Salat", "price": 6.50, "color": "#E8F5E9"},
-        {"name": "Mit Käse", "price": 6.80}
+        {"name": "Mit Käse", "price": 6.80, "color": "#FFF9C4"}
       ]
     },
     {
       "id": "f3",
       "name": "Pommes",
       "basePrice": 3.50,
+      "color": "#FFD700",
       "options": [
         {"name": "Klein", "price": 3.50},
         {"name": "Groß", "price": 4.50},
@@ -34,6 +37,7 @@
       "id": "f4",
       "name": "Grillwurst",
       "basePrice": 4.20,
+      "color": "#FFCCCB",
       "options": [
         {"name": "Bratwurst", "price": 4.20},
         {"name": "Käsekrainer", "price": 4.50},
@@ -44,6 +48,7 @@
       "id": "f5",
       "name": "Leberkässemmel",
       "basePrice": 4.00,
+      "color": "#FFE4E1",
       "options": [
         {"name": "Klassisch", "price": 4.00},
         {"name": "Mit Gurkerl", "price": 4.30},
@@ -54,6 +59,7 @@
       "id": "f6",
       "name": "Langos",
       "basePrice": 4.80,
+      "color": "#DEB887",
       "options": [
         {"name": "Mit Knoblauch", "price": 4.80},
         {"name": "Mit Käse", "price": 5.50},
@@ -66,16 +72,18 @@
       "id": "d1",
       "name": "Bier",
       "basePrice": 4.20,
+      "color": "#F0E68C",
       "options": [
-        {"name": "Krügerl (0,5L)", "price": 4.20},
+        {"name": "Krügerl (0,5L)", "price": 4.20, "color": "#F5DEB3"},
         {"name": "Seidl (0,3L)", "price": 3.50},
-        {"name": "Radler (0,5L)", "price": 4.20}
+        {"name": "Radler (0,5L)", "price": 4.20, "color": "#FAFAD2"}
       ]
     },
     {
       "id": "d2",
       "name": "Cola",
       "basePrice": 3.50,
+      "color": "#D2B48C",
       "options": [
         {"name": "Cola Rot (0,5L)", "price": 3.50},
         {"name": "Cola Weiß (0,5L)", "price": 3.50},
@@ -87,6 +95,7 @@
       "id": "d3",
       "name": "Softdrinks",
       "basePrice": 3.50,
+      "color": "#FFDAB9",
       "options": [
         {"name": "Fanta (0,5L)", "price": 3.50},
         {"name": "Sprite (0,5L)", "price": 3.50},
@@ -98,6 +107,7 @@
       "id": "d4",
       "name": "Mineral",
       "basePrice": 2.80,
+      "color": "#E0FFFF",
       "options": [
         {"name": "Prickelnd (0,5L)", "price": 2.80},
         {"name": "Still (0,5L)", "price": 2.80},
@@ -109,6 +119,7 @@
       "id": "d5",
       "name": "Gespritzt",
       "basePrice": 3.00,
+      "color": "#FFDAB9",
       "options": [
         {"name": "Apfelsaft g'spritzt", "price": 3.00},
         {"name": "Johannisbeer g'spritzt", "price": 3.20},
@@ -120,6 +131,7 @@
       "id": "d6",
       "name": "Spritzer",
       "basePrice": 3.80,
+      "color": "#FFE4E1",
       "options": [
         {"name": "Weißer Spritzer", "price": 3.80},
         {"name": "Aperol Spritzer", "price": 4.50},
@@ -131,6 +143,7 @@
       "id": "d7",
       "name": "Schnaps",
       "basePrice": 3.00,
+      "color": "#E6E6FA",
       "options": [
         {"name": "Marille (2cl)", "price": 3.00},
         {"name": "Williams (2cl)", "price": 3.00},

src/pages/HomePage.css

@@ -1,37 +1,61 @@
 .home-page {
-  padding-bottom: 20px;
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background-color: #f9fafb;
 }
 
 .app-header {
   background-color: #2c7be5;
   color: white;
   text-align: center;
-  padding: 15px;
+  padding: 12px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 .app-header h1 {
   margin: 0;
-  font-size: 1.5rem;
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.main-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 16px;
+  max-width: 600px;
+  margin: 0 auto;
+  width: 100%;
+}
+
+.section-title {
+  margin: 8px 0;
+  font-size: 1.2rem;
+  color: #333;
+  font-weight: 500;
+  padding-left: 8px;
+  border-left: 3px solid #2c7be5;
 }
 
 .category-tabs {
   display: flex;
-  margin: 10px;
   border-radius: 8px;
   overflow: hidden;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  margin-bottom: 4px;
 }
 
 .category-tabs button {
   flex: 1;
-  padding: 15px;
+  padding: 12px;
   background-color: #f5f5f5;
   border: none;
-  font-size: 1.1rem;
+  font-size: 1rem;
   font-weight: 500;
   cursor: pointer;
-  transition: background-color 0.2s;
+  transition: all 0.2s ease;
 }
 
 .category-tabs button.active {
@@ -39,14 +63,22 @@
   color: white;
 }
 
-.products-section, .cart-section {
+.products-container {
-  margin: 20px 0;
+  background-color: white;
+  border-radius: 10px;
+  padding: 12px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
 }
 
-.products-section h2, .cart-section h2 {
+.cart-container {
-  margin: 0 10px 10px 10px;
+  background-color: white;
-  font-size: 1.3rem;
+  border-radius: 10px;
-  color: #333;
+  padding: 12px;
-  padding-left: 10px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
-  border-left: 4px solid #2c7be5;
+}
+
+@media (min-width: 768px) {
+  .main-container {
+    max-width: 800px;
+  }
 }

src/pages/HomePage.tsx

@@ -9,23 +9,11 @@ const HomePage: React.FC = () => {
   const [activeTab, setActiveTab] = useState<'food' | 'drinks'>('drinks');
   
   useEffect(() => {
-    const loadProducts = async () => {
+    import('../data/products.json')
-      try {
+      .then(data => {
-        const data = await import('../data/products.json');
+        setProductsData(data);
-        
+      })
-        // Sort both food and drinks by name
+      .catch(error => console.error('Failed to load products:', error));
-        const sortedData = {
-          food: [...data.food].sort((a, b) => a.name.localeCompare(b.name)),
-          drinks: [...data.drinks].sort((a, b) => a.name.localeCompare(b.name))
-        };
-        
-        setProductsData(sortedData);
-      } catch (error) {
-        console.error('Failed to load products:', error);
-      }
-    };
-    
-    loadProducts();
   }, []);
   
   return (
@@ -34,12 +22,14 @@ const HomePage: React.FC = () => {
         <h1>Preis Rechner</h1>
       </header>
 
+      <div className="main-container">
+        <div className="products-container">
           <div className="category-tabs">
             <button
               className={activeTab === 'drinks' ? 'active' : ''}
               onClick={() => setActiveTab('drinks')}
             >
-          Trinken
+              Getränke
             </button>
             <button 
               className={activeTab === 'food' ? 'active' : ''}
@@ -47,20 +37,21 @@ const HomePage: React.FC = () => {
             >
               Essen
             </button>
-
           </div>
           
-      <div className="products-section">
+          <h2 className="section-title">{activeTab === 'food' ? 'Essen' : 'Getränke'}</h2>
-        <h2>{activeTab === 'food' ? 'Essen' : 'Getränke'}</h2>
+          <ProductList 
-        {activeTab === 'food' && <ProductList products={productsData.food} category="food" />}
+            products={productsData[activeTab]} 
-        {activeTab === 'drinks' && <ProductList products={productsData.drinks} category="drinks" />}
+            category={activeTab} 
+          />
         </div>
         
-      <div className="cart-section">
+        <div className="cart-container">
-        <h2>Warenkorb</h2>
+          <h2 className="section-title">Warenkorb</h2>
           <CartOverview />
         </div>
       </div>
+    </div>
   );
 };
 

src/types/types.ts

@@ -1,6 +1,7 @@
 export type ProductOption = {
   name: string;
   price: number;
+  color?: string; // Optional color for this specific option
 };
 
 export type Product = {
@@ -8,6 +9,7 @@ export type Product = {
   name: string;
   basePrice: number;
   options: ProductOption[];
+  color?: string; // Optional color code for background highlight
 };
 
 export type ProductsData = {