Merge remote-tracking branch 'origin/Dev' into Routing

src/App.css

@@ -1,7 +1,6 @@
 #root {
-  margin: auto;
   padding: 0rem;
-  text-align: center;
+  margin: 0px auto 0px auto;
 }
 body {
   --outside-color: #e61919;
@@ -13,6 +12,7 @@ body {
   flex-direction: column;
   height: 100vh;
 }
+
 main {
   background-color: var(--background-color);
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
@@ -26,6 +26,63 @@ main {
   top: 0;
   padding-left: 2rem;
   border-radius: 15px;
-  width: 18em;
+  width: 15em;
   height: 20em;
+
+}
+.frontPage {
+  display: flex;
+  justify-content: space-between;
+  align-items: default;
+  padding: 2em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between; 
+}
+
+@media (max-width: 768px) {
+  .frontPage {
+    flex-direction: column;
+    align-items: center; 
+    text-align: center; 
+  }
+
+  .rightCollumn {
+    width: 100%; 
+    max-width: 400px;
+    margin: auto; 
+    display: block; 
+  }
+
+  .rightCollumn > * {
+    margin: 0 auto; 
+  }
+}
+.frontPage {
+  display: flex;
+  justify-content: space-between;
+  align-items: default;
+  padding: 2em;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between; 
+}
+
+@media (max-width: 768px) {
+  .frontPage {
+    flex-direction: column;
+    align-items: center; 
+    text-align: center; 
+  }
+
+  .rightCollumn {
+    width: 100%; 
+    max-width: 400px;
+    margin: auto; 
+    display: block; 
+  }
+
+  .rightCollumn > * {
+    margin: 0 auto; 
+  }
 }

src/components/basket/basket.css

@@ -46,13 +46,6 @@
   border-radius: 8px;
   margin: 5px;
 }
-.frontPage {
-  display: flex;
-  justify-content: space-between;
-  align-items: default;
-  padding: 2em;
-}
-
 
 .shoppingCart td,
 .shoppingCart th {

src/components/productLine/productLine.css

@@ -1,11 +1,16 @@
 .productLine.removing {
-    animation: fadeOut 1s ease-out forwards;
-  }
+  opacity: 0;
+  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+}
+.productLine {
+  opacity: 1;
+}
 
+/*
   @keyframes fadeOut {
     from { opacity: 1; }
     to { opacity: 0; }
-  }
+  }*/
 
 .productImages:hover {
   transform: scale(1.5);
@@ -52,7 +57,7 @@
   border-radius: 50%;
   margin: 5px;
   width: 20px;
-  height: 40px; 
+  height: 40px;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/productLine/productLine.tsx

@@ -22,7 +22,7 @@ export function ProductLine({
 
   const handleRemove = () => {
     setIsRemoving(true);
-    setTimeout(() => handleRemoveItem(product.id), 1000); // Animation duration
+    setTimeout(() => handleRemoveItem(product.id), 300); // Animation duration
   };
 
   var originalLinePrice = product.price * quantity;

src/components/productLine/removeButton.tsx

@@ -15,7 +15,7 @@ export function RemoveButton({ onClick }: RemoveButtonProps) {
       onClick={onClick}
     >
       <img
-        src={isHovered ? "openTrashcan.png" : "trashcan.png"}
+        src={isHovered ? "/openTrashcan.png" : "/trashcan.png"}
         alt="Remove icon"
         width="25px"
       />

src/index.css

@@ -25,7 +25,6 @@ a:hover {
 body {
   margin: 0;
   display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }

tsconfig.json

@@ -21,5 +21,5 @@
     "noFallthroughCasesInSwitch": true
   },
   "include": ["src", "./vitest.setup.ts"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "references": [{ "path": "tsconfig.node.json" }]
 }