From d7c5d1405569e8819bb80fda67d56cdebbdad071 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Let=C3=ADcia=20Camara?= <lettcamara@gmail.com>
Date: Thu, 4 Oct 2018 02:54:54 -0300
Subject: [PATCH] Add dynamic font size to testinomies

---
 src/components/pages/MarketingPage.js         |  2 --
 src/components/sections/TestimoniesSection.js | 26 ++++++++++++++++---
 2 files changed, 23 insertions(+), 5 deletions(-)

diff --git a/src/components/pages/MarketingPage.js b/src/components/pages/MarketingPage.js
index b929cb1..49df096 100644
--- a/src/components/pages/MarketingPage.js
+++ b/src/components/pages/MarketingPage.js
@@ -100,9 +100,7 @@ class MarketingPage extends React.Component {
   }
 
   render() {
-    console.log(this.state.height);
     const whiteSpaceheight = (this.state.height > 602) ? this.state.height - 602: 0;
-    console.log(whiteSpaceheight);
     return (
       <div>
       <AppHeader />
diff --git a/src/components/sections/TestimoniesSection.js b/src/components/sections/TestimoniesSection.js
index 2cf77ad..0fe85e3 100644
--- a/src/components/sections/TestimoniesSection.js
+++ b/src/components/sections/TestimoniesSection.js
@@ -43,13 +43,33 @@ class TestimoniesSection extends React.Component {
 
     this.state = {
       activeItem: 1,
-      maxLength: testimonies.length
+      maxLength: testimonies.length,
+      width: 0,
+      height: 0
     };
+
+    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
   }
 
+  componentDidMount() {
+    this.updateWindowDimensions();
+    window.addEventListener('resize', this.updateWindowDimensions);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.updateWindowDimensions);
+  }
+
+  updateWindowDimensions() {
+    this.setState({ width: window.innerWidth, height: window.innerHeight });
+  }
+
+
   render() {
     const { activeItem, maxLength } = this.state;
 
+    const fontSize = (this.state.width > 1000) ? 16 * (1 + (this.state.width/2000)): 16;
+
     return (
       <span>
       <section className="testimonials text-center" id="testimonies">
@@ -77,8 +97,8 @@ class TestimoniesSection extends React.Component {
                       <CarouselItem itemId={index+1} key={index}>
                         <Col mb-lg="0" mx="auto" mb="4">
                           <i className="fa fa-user-circle-o" />
-                          <h5>{testimony.name} &#9733;&#9733;&#9733;&#9733;&#9733;</h5>
-                          <div className="font-weight-light mb-3">
+                          <h5 style={{fontSize}}>{testimony.name} &#9733;&#9733;&#9733;&#9733;&#9733;</h5>
+                          <div style={{fontSize}} className="font-weight-light mb-3">
                             &#34;{testimony.description}&#34;
                           </div>
                         </Col>