Merge pull request sharetribe#1476 from sharetribe/fix-modal-close-te…

…xt-alignment Fix modal close button text/icon alignment
Gnito · Oct 4, 2021 · 878c782 · 878c782
2 parents 6e85669 + aeb864f
commit 878c782
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,9 @@ way to update this template, but currently, we follow a pattern:
 
 ## Upcoming version 2021-XX-XX
 
+- [fix] Fix modal close button text/icon alignment
+  [#1476](https://github.com/sharetribe/ftw-daily/pull/1476)
+
 ## [v8.3.0] 2021-09-22
 
 - [change] Increase input font size on mobile to avoid Mobile Safari zooming in when focusing on

diff --git a/README.md b/README.md
@@ -7,9 +7,14 @@ customized. It is based on an application bootstrapped with
 [create-react-app](https://github.com/facebookincubator/create-react-app) with some additions,
 namely server side rendering and a custom CSS setup.
 
-> Note: We also have two more templates available: [FTW-hourly](https://github.com/sharetribe/ftw-hourly) and [FTW-product](https://github.com/sharetribe/ftw-product).
-> FTW-hourly focuses on time-based booking processes. You can read more in the [Flex Docs article introducing FTW-hourly](https://www.sharetribe.com/docs/ftw-introduction/ftw-hourly/).
-> FTW-product focuses on product marketplace with listing stock management. You can find more information in the [introduction to FTW-product Flex Docs](https://www.sharetribe.com/docs/ftw-introduction/ftw-product/).
+> Note: We also have two more templates available:
+> [FTW-hourly](https://github.com/sharetribe/ftw-hourly) and
+> [FTW-product](https://github.com/sharetribe/ftw-product). FTW-hourly focuses on time-based booking
+> processes. You can read more in the
+> [Flex Docs article introducing FTW-hourly](https://www.sharetribe.com/docs/ftw-introduction/ftw-hourly/).
+> FTW-product focuses on product marketplace with listing stock management. You can find more
+> information in the
+> [introduction to FTW-product Flex Docs](https://www.sharetribe.com/docs/ftw-introduction/ftw-product/).
 
 ## Quick start
 

diff --git a/src/styles/propertySets.css b/src/styles/propertySets.css
@@ -770,18 +770,25 @@
   --marketplaceModalCloseText {
     /* Font */
     @apply --marketplaceH6FontStyles;
-    margin: -2.5px 0 0 0;
+    margin: 0;
 
     @media (--viewportMedium) {
-      margin-top: -1px;
+      margin: 0;
     }
   }
 
   --marketplaceModalCloseIcon {
     display: inline-block;
     margin-left: 8px;
-    padding: 2px 0 4px;
+
+    /* Move X icon vertically to align it with the close text. */
+    margin-top: 3px;
+
     box-sizing: content-box;
+
+    @media (--viewportMedium) {
+      margin-top: 2px;
+    }
   }
 
   --marketplaceModalErrorStyles {