From 6497d0c54a6836c3db3733c8b178b183cf71bbad Mon Sep 17 00:00:00 2001
From: Vesa Luusua <vesa.luusua@gmail.com>
Date: Thu, 1 Jun 2017 20:11:03 +0300
Subject: [PATCH] Adding new font for Close modal button

---
 public/index.html                                 |  8 ++++++++
 .../StyleguidePage/Typography.example.js          | 15 +++++++++++++++
 src/marketplace.css                               |  9 +++++++++
 3 files changed, 32 insertions(+)

diff --git a/public/index.html b/public/index.html
index ac2f466a..4bba74f5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -40,6 +40,14 @@
           font-style: normal;
       }
 
+      @font-face {
+          font-family: 'sofiapro';
+          src: url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff2') format('woff2'),
+               url('https://assets-sharetribecom.sharetribe.com/webfonts/sofiapro/sofiapro-bold-webfont.woff') format('woff');
+          font-weight: 700;
+          font-style: normal;
+      }
+
     </style>
 
     <link rel="stylesheet" href="%PUBLIC_URL%/static/reactDates.css" />
diff --git a/src/containers/StyleguidePage/Typography.example.js b/src/containers/StyleguidePage/Typography.example.js
index a459cbb4..70a6319a 100644
--- a/src/containers/StyleguidePage/Typography.example.js
+++ b/src/containers/StyleguidePage/Typography.example.js
@@ -67,6 +67,12 @@ const Fonts = () => {
   line-height: 18px;
   padding: 2px 0 4px 0;`;
 
+  const tinyBoldFontStyling = `Styles affecting size:
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 18px;
+  padding: 2px 0 4px 0;`;
+
   const fontsContainerClasses = classNames(css.fontsContainer, css.baselines);
 
   return (
@@ -132,6 +138,15 @@ const Fonts = () => {
           description="Very small print."
           styling={tinyFontStyling}
         />
+        <Font
+          component={() => (
+            <p className={mpStyle.tinyBoldFont}>
+              Tiny bold mobile text (.tinyBoldFont): CLOSE
+            </p>
+          )}
+          description="Very small bold print used next to close icon."
+          styling={tinyBoldFontStyling}
+        />
       </div>
     </div>
   );
diff --git a/src/marketplace.css b/src/marketplace.css
index 1d256b2d..355ef57b 100644
--- a/src/marketplace.css
+++ b/src/marketplace.css
@@ -159,6 +159,15 @@ pre,
   /* TODO Desktop styles needs to be extracted */
 }
 
+.tinyBoldFont {
+  font-family: "sofiapro", Helvetica, Arial, sans-serif;
+  font-weight: 700;
+  font-size: 13px;
+  line-height: 18px;
+  padding: 2px 0 4px 0; /* 2px + 4px = 6px */
+  letter-spacing: 1.5px;
+}
+
 /* This font is specific to Avatar component only */
 .smallAvatarFont {
   font-family: "sofiapro", Helvetica, Arial, sans-serif;