@social-mail/social-mail-client 1.2.529 → 1.2.530

package/dist/public/store/Store.pack.js

@@ -20492,20 +20492,20 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
       storeID = parseInt(storeID, 36);
       itemID = parseInt(itemID, 36);
       css = styled.css`
-
     margin: 10px;
-
     display: flex;
     gap: 10px;
     position: relative;
     flex-wrap: wrap;
-
     & > h2 {
         flex: 1 1 100%;
     }
 
-    & > .product {
+    & .title {
+        padding-left: 5px;
+    }
 
+    & > .product {
         width: 100%;
         display: grid;
         grid-template-columns: 4fr 1fr;
@@ -20515,12 +20515,10 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
 
             grid-row: 1;
             grid-column: 1;
-
             margin: 10px;
             padding: 10px;
             border-radius: 5px;
             box-shadow: 0 0 10px 2px gray;
-
             display: inline-grid;
             grid-template-columns: auto 1fr;
             grid-template-rows: 1fr;
@@ -20560,7 +20558,57 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
         & > .offers {
             grid-row: 1;
             grid-column: 2;
+            box-shadow: 0 0 10px 2px gray;
+            border-radius: 5px;
+            margin: 10px;
+            padding: 10px;
+
+            .price {
+                text-align: center;
+                font-weight: 700;
+                font-size: var(--font-xs);
+                text-align: center;
+                
+            }
+
+                & > .buy {
+                display: inline-flex;
+                -webkit-box-align: center;
+                align-items: center;
+                -webkit-box-pack: center;
+                justify-content: center;
+                position: relative;
+                box-sizing: border-box;
+                -webkit-tap-highlight-color: transparent;
+                cursor: pointer;
+                user-select: none;
+                vertical-align: middle;
+                appearance: none;
+                line-height: 1.75;
+                text-transform: uppercase;
+                min-width: 64px;
+                width: 100%;
+                font-weight: bold;
+                font-size: 14px;
+                font-family: Mulish, sans-serif;
+                background-color: var(--button-background, #ff6733);
+                color: var(--button-text, #FFFFFF);
+                outline: 0px;
+                border-width: 0px;
+                border-style: initial;
+                border-color: initial;
+                border-image: initial;
+                margin: 0px;
+                text-decoration: none;
+                padding: 6px 16px;
+                border-radius: 4px;
+                transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1);
+            
+            }
+               
+
         }
+        
     }
 
     @media (max-width: 800px) {
@@ -20633,7 +20681,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
             this.renderer = XNode.create("div", {
               class: css,
               images: Bind.oneWay(() => this.getFiles(this.model, this.selectedVariant, this.selectedSize))
-            }, XNode.create("h2", null, this.model.name), XNode.create("section", {
+            }, XNode.create("h2", {
+              class: "title"
+            }, this.model.name), XNode.create("section", {
               class: "product"
             }, XNode.create("section", {
               class: "photos"
@@ -20656,9 +20706,13 @@ System.register(["tslib", "@web-atoms/core/dist/core/InjectProperty", "@web-atom
               "data-layout": "vertical-flex"
             }, offerHtml && XNode.create("section", {
               innerHTML: offerHtml
-            }), XNode.create("p", null, this.model.description), XNode.create("p", null, XNode.create("label", {
+            }), XNode.create("p", null, this.model.description), XNode.create("p", {
+              class: "price"
+            }, XNode.create("label", {
               text: formatPrice(price)
-            })), XNode.create("button", null, "Buy"), ((_f = this.model.sizes) === null || _f === void 0 ? void 0 : _f.length) && XNode.create(ToggleButtonBar, {
+            })), XNode.create("button", {
+              class: "buy"
+            }, "Buy"), ((_f = this.model.sizes) === null || _f === void 0 ? void 0 : _f.length) && XNode.create(ToggleButtonBar, {
               items: this.model.sizes,
               selectedItem: Bind.twoWaysImmediate(() => this.selectedSize),
               itemRenderer: x => XNode.create("div", {
@@ -20934,9 +20988,9 @@ System.register(["tslib", "@web-atoms/core/dist/core/Bind", "@web-atoms/core/dis
     execute: function () {
       styled.css`
 
-display:grid;
-grid-template-rows: auto 1fr auto;
-background-color: var(--hover-color);
+    display:grid;
+    grid-template-rows: auto 1fr auto;
+    background-color: var(--hover-color);
 
 & > header {
     grid-row:1;