Merge pull request #215 from vtex-apps/feature/aspect-ratio-and-css

`aspectRatio` on summary and fixed styles.
vtex-apps · Apr 13, 2020 · a3f0812 · a3f0812
2 parents 72af2de + 8cda786
commit a3f0812
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+### Added
+- `aspectRatio` and `maxHeight` on `product-summary-image#shelf`.
+
+### Fixed
+- Some styles on product summary and price components.
 
 ## [3.34.0] - 2020-04-07
 ### Added

diff --git a/store/blocks.jsonc b/store/blocks.jsonc
@@ -51,7 +51,9 @@
 
   "product-summary-image#shelf": {
     "props": {
-      "showBadge": false
+      "showBadge": false,
+      "aspectRatio": "1:1",
+      "maxHeight": 300
     }
   },
   "stack-layout#prodsum": {

diff --git a/store/blocks/product.jsonc b/store/blocks/product.jsonc
@@ -78,7 +78,7 @@
       "rowGap": 0
     },
     "children": [
-      "vtex.store-components:product-name",
+      "flex-layout.row#product-name",
       "product-rating-summary",
       "flex-layout.row#list-price-savings",
       "flex-layout.row#selling-price",
@@ -96,6 +96,15 @@
     ]
   },
 
+  "flex-layout.row#product-name": {
+    "props": {
+      "marginBottom": 3
+    },
+    "children": [
+      "vtex.store-components:product-name"
+    ]
+  },
+
   "sku-selector": {
     "props": {
       "variationsSpacing": 3,

diff --git a/styles/css/vtex.product-price.css b/styles/css/vtex.product-price.css
@@ -1,6 +1,7 @@
 .listPrice {
-  color: #979899;
+  color: #727273;
   margin-bottom: .25rem;
+  font-size: 1rem;
 }
 
 .sellingPrice {
@@ -14,7 +15,7 @@
 }
 
 .installments {
-  color: #3f3f40;
+  color: #727273;
   margin-bottom: 1rem;
 }
 
@@ -24,7 +25,7 @@
 }
 
 .sellingPriceValue--summary {
-  font-size: 1.2rem;
+  font-size: 1.25rem;
   font-weight: 600;
   color: #2E2E2E;
 }
@@ -37,7 +38,8 @@
 }
 
 .savings-discount--summary {
-  font-size: 0.9rem;
+  font-size: 0.875rem;
+  font-weight: 600;
   vertical-align: baseline;
   color: #FFFFFF;
   padding-left: 0.5rem;
@@ -46,8 +48,10 @@
 
 .listPrice--summary {
   margin-bottom: 0.25rem;
+  font-size: .875rem;
 }
 
 .installments--summary {
   margin-bottom: 2rem;
+  font-size: 0.875rem;
 }
diff --git a/styles/css/vtex.product-summary.css b/styles/css/vtex.product-summary.css
@@ -36,3 +36,7 @@
 .imageContainer {
   text-align: center;
 }
+
+.image {
+  border-radius: 0.25rem;
+}