Ui updates + tried to setup another about link

parti-renaissance · Jan 10, 2018 · dffa301 · dffa301
1 parent 3fc045b
commit dffa301
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 49 deletions.
diff --git a/src/js/components/dashboard.js b/src/js/components/dashboard.js
@@ -38,12 +38,13 @@ const DashboardBox = ({ children, className }) =>
     {children}
   </div>
 
-const DashboardHeader = ({ locale }) =>
+const DashboardHeader = ({ locale, openAbout }) =>
   <div className="dashboard-header">
     <div className="dashboard-blurb">
       <h2>On l&apos;a dit, on le fait</h2>
       <p>
         La transformation du pays est en marche ! Suivez l&apos;application du programme d&apos;Emmanuel Macron et <strong>votez en faveur des mesures qui vous tiennent à cœur</strong>.
+
       </p>
 
       <Link className="dashboard-header__link" to={`/${locale}/results`}>Découvrir ce qui me concerne</Link>
@@ -128,12 +129,15 @@ class Dashboard extends Component {
   }
 
   render() {
-    let { allMeasures, popular, status, locale } = this.props;
+    let { allMeasures, popular, status, locale, openAbout } = this.props;
     let measures = compact(popular.map(({ itemId }) => allMeasures.measures[itemId]));
 
     return (
       <div className="dashboard">
-        <DashboardHeader locale={locale} />
+        <DashboardHeader
+          locale={locale}
+          openAbout={openAbout}
+        />
 
         <DashboardBody>
           <DashboardTimer total={this.state.totalDaysInTerm} current={this.state.daysRemainingInTerm} />

diff --git a/src/scss/about-modal.scss b/src/scss/about-modal.scss
@@ -41,7 +41,7 @@
 }
 
 .about-modal__body > p {
-  font-size: 16px;
+  font-size: 15px;
   font-family: $font-roboto;
   color: $darkergray;
 }

diff --git a/src/scss/layout.scss b/src/scss/layout.scss
@@ -10,58 +10,45 @@
 }
 
 .header {
-  background-color: $purple;
   font-size: 20px;
   padding: 15px;
   display: flex;
   justify-content: space-between;
-  color: white;
   position: sticky;
   top: 0;
   z-index: $zIndex--header;
 
-  border-bottom: 1px solid transparent;
+  border-bottom: 1px solid $blueishgray;
+  background-color: white;
+  color: black;
 
   @include mq($medium-and-up) {
     font-size: 28px;
   }
-
-  .Page__dashboard > & {
-    background-color: white;
-    color: black;
-    border-bottom-color: $blueishgray;
-  }
 }
 
 .header-logo {
   font-family: $font-gillsans;
   font-weight: bold;
   font-style: oblique;
-  color: white;
+  color: black;
   text-decoration: none;
   border: 0;
 
   &:hover {
       border: 0;
       opacity: 0.8;
   }
-
-  .Page__dashboard & {
-    color: black;
-  }
 }
 
 .header-tag {
   font-weight: 100;
   font-size: 18px;
+  color: $darkergray;
 
   @include mq($medium-and-up) {
     font-size: 28px;
   }
-
-  .Page__dashboard & {
-    color: $darkergray;
-  }
 }
 
 .header-sep {
@@ -89,33 +76,24 @@
     align-items: center;
     font-size: 14px;
     font-family: $font-roboto;
-    font-weight: bold;
-
-    color: white;
-
-    .Page__dashboard & {
-      color: $gray;
-    }
+    color: $gray;
   }
 
   > .SocialMediaShareButton {
     cursor: pointer;
     margin-left: 10px;
 
     path {
-      fill: $purple;
-
-      .Page__dashboard & {
-        fill: white;
-      }
+      fill: white;
     }
 
     circle {
-      fill: white;
+      fill: $purple;
+      transition: all .2s;
+    }
 
-      .Page__dashboard & {
-        fill: $purple;
-      }
+    &:hover circle {
+      fill: $lightpurple;
     }
   }
 
@@ -144,19 +122,11 @@
     padding: 0;
     margin-left: 10px;
     background: transparent;
-    color: white;
+    color: $gray;
 
     &:hover {
-        border-bottom: 1px solid white;
-    }
-
-    .Page__dashboard & {
-        color: $gray;
-
-        &:hover {
-          color: $purple;
-          border-bottom: 1px solid $purple;
-        }
+      color: $purple;
+      border-bottom: 1px solid $purple;
     }
   }
 }