Fix cart sidebar style

CHANGELOG.md

@@ -31,6 +31,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add purchase availability to product details page - #878 by @orzechdev
 - Require payment recreate when payment price is wrong - #892 by @orzechdev
 - Handle JWT token refreshing and verifying - #883 by @orzechdev
+- Fix cart sidebar style - #897 by @orzechdev
 
 ## 2.10.4
 

locale/defaultMessages.json

@@ -227,6 +227,21 @@
   "account_dot_AddressBook_dot_AddressBook_dot_2776756156": {
     "string": "Edit address"
   },
+  "app_dot_Notifications_dot_1053546789": {
+    "string": "To update the application to the latest version, please refresh the page!"
+  },
+  "app_dot_Notifications_dot_1308518649": {
+    "string": "Refresh"
+  },
+  "app_dot_Notifications_dot_1917823234": {
+    "string": "You are now logged in"
+  },
+  "app_dot_Notifications_dot_2378877294": {
+    "string": "You are now logged out"
+  },
+  "app_dot_Notifications_dot_795565": {
+    "string": "New version is available!"
+  },
   "components_dot_Breadcrumbs_dot_index_dot_1347475195": {
     "string": "Back"
   },
@@ -278,8 +293,9 @@
   "components_dot_OverlayManager_dot_Cart_dot_Cart_dot_1316031908": {
     "string": "My bag,"
   },
-  "components_dot_OverlayManager_dot_Cart_dot_Cart_dot_2287516380": {
-    "string": "items"
+  "components_dot_OverlayManager_dot_Cart_dot_Cart_dot_1397761112": {
+    "context": "items quantity in cart",
+    "string": "{itemsQuantity,plural,one{{itemsQuantity} item} other{{itemsQuantity} items}}"
   },
   "components_dot_OverlayManager_dot_Cart_dot_Cart_dot_2426849470": {
     "string": "Go to my bag"
@@ -350,21 +366,6 @@
   "components_dot_Select_dot_SelectOptionsList_dot_1394135378": {
     "string": "No Options"
   },
-  "index_dot_1053546789": {
-    "string": "To update the application to the latest version, please refresh the page!"
-  },
-  "index_dot_1308518649": {
-    "string": "Refresh"
-  },
-  "index_dot_1917823234": {
-    "string": "You are now logged in"
-  },
-  "index_dot_2378877294": {
-    "string": "You are now logged out"
-  },
-  "index_dot_795565": {
-    "string": "New version is available!"
-  },
   "intl_dot_checkoutMessages_dot_addNewAddress": {
     "string": "Add new address"
   },

src/components/OverlayManager/Cart/Cart.tsx

@@ -53,6 +53,9 @@ const Cart: React.FC<{ overlay: OverlayContextInterface }> = ({ overlay }) => {
     return items.find(item => !item.variant || !item.totalPrice);
   };
 
+  const itemsQuantity =
+    items?.reduce((prevVal, currVal) => prevVal + currVal.quantity, 0) || 0;
+
   return (
     <Overlay testingContext="cartOverlay" context={overlay}>
       <Online>
@@ -62,11 +65,13 @@ const Cart: React.FC<{ overlay: OverlayContextInterface }> = ({ overlay }) => {
             <div className="overlay__header-text">
               <FormattedMessage defaultMessage="My bag," />{" "}
               <span className="overlay__header-text-items">
-                {items?.reduce(
-                  (prevVal, currVal) => prevVal + currVal.quantity,
-                  0
-                ) || 0}{" "}
-                <FormattedMessage defaultMessage="items" />
+                <FormattedMessage
+                  defaultMessage="{itemsQuantity,plural,one{{itemsQuantity} item} other{{itemsQuantity} items}}"
+                  description="items quantity in cart"
+                  values={{
+                    itemsQuantity,
+                  }}
+                />
               </span>
             </div>
             <ReactSVG

src/components/OverlayManager/Cart/scss/index.scss

@@ -1,10 +1,18 @@
 @import "../../../../globalStyles/scss/variables.scss";
 
 .cart {
+  display: grid;
+  grid-template-areas:
+    "header"
+    "list"
+    "footer";
+  grid-template-rows: min-content auto min-content;
+  height: 100%;
   width: 25rem;
   max-width: 100vw;
 
   .overlay__header {
+    grid-area: header;
     justify-content: initial;
 
     &__close-icon {
@@ -13,8 +21,8 @@
   }
 
   &__list {
+    grid-area: list;
     padding: 0 $spacer;
-    height: calc(100vh - 17.5rem);
     overflow: auto;
 
     &__item {
@@ -74,9 +82,9 @@
   }
 
   &__footer {
+    grid-area: footer;
     background-color: $gray-light;
     padding: $spacer;
-    position: absolute;
     bottom: 0;
     width: 25rem;