Merge pull request #290 from hackforla/158-FRONT-ConsistentStyling

consistent styling
hackforla · Feb 26, 2020 · d29869c · d29869c
2 parents 3d363e2 + 09f9ffc
commit d29869c
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 22 deletions.
diff --git a/public/index.html b/public/index.html
@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
           integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
           crossorigin=""/>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:700|Roboto&display=swap" rel="stylesheet">
     <title>311 Data</title>
   </head>
   <body class="has-navbar-fixed-bottom">

diff --git a/src/components/main/menu/DateSelector/DateRangePicker.jsx b/src/components/main/menu/DateSelector/DateRangePicker.jsx
@@ -12,7 +12,6 @@ import {
 import Button from '../../../common/Button';
 import Icon from '../../../common/Icon';
 
-import 'react-datepicker/dist/react-datepicker.css';
 import COLORS from '../../../../styles/COLORS';
 
 const cardStyle = {

diff --git a/src/components/main/tooltip/Tooltip.jsx b/src/components/main/tooltip/Tooltip.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import ReactTooltip from 'react-tooltip';
 import Icon from '../../common/Icon';
-import COLORS from '../../../styles/COLORS';
-import './styles.scss';
 
 const Tooltip = () => (
   <div className="tooltip">
@@ -15,7 +13,7 @@ const Tooltip = () => (
         if (!text && !title) return null;
 
         return (
-          <div style={{ color: COLORS.BRAND.MAIN }}>
+          <div className="tooltip-content">
             { title &&
               <div className="has-text-weight-bold is-size-6">
                 <Icon

diff --git a/src/styles/_base.scss b/src/styles/_base.scss
@@ -0,0 +1,14 @@
+
+h1 {
+  font-family: $brand-heading-family;
+  color: $brand-heading-color;
+  font-size: $brand-heading-size;
+  font-weight: bold;
+}
+
+h2 {
+  font-family: $brand-heading-family;
+  color: $brand-heading-color;
+  font-size: $brand-subheading-size;
+  font-weight: bold;
+}
diff --git a/src/styles/_brand.scss b/src/styles/_brand.scss
@@ -0,0 +1,21 @@
+
+// see brand stylesheet here:
+// https://www.figma.com/file/9RJJyaGAdT5hcRuv9PUMOY/311-Wireframe-v1.0?node-id=16%3A4
+
+// colors
+$brand-heading-color:   #002449;    // dark blue
+$brand-text-color:      #002449;    // dark blue
+$brand-main-color:      #002449;    // dark blue
+$brand-cta1-color:      #FFB24A;    // orange
+$brand-cta2-color:      #55D4D2;    // light blue
+$brand-bg-color:        #FFFFFF;    // white
+$brand-stroke-color:    #999999;    // grey
+
+// font families
+$brand-heading-family:  'Open Sans', sans-serif;
+$brand-text-family:     Roboto, sans-serif;
+
+// font sizes
+$brand-heading-size:    20px;
+$brand-subheading-size: 18px;
+$brand-text-size:       16px;
diff --git a/src/styles/_bulma.scss b/src/styles/_bulma.scss
@@ -0,0 +1,31 @@
+
+/*
+*  Define new sass variables or overwrite Bulma's default variables before the imports.
+*  See https://bulma.io/documentation/customize/variables/ and component-specific
+*  Bulma docs for more variables.
+*
+*  Example:
+*    $primary: #002449;
+*    $dropdown-item-color: $primary;
+*/
+
+// bulma/sass/utilities/derived-variables.scss
+$primary: $brand-main-color;
+$background: $brand-bg-color;
+$border: $brand-stroke-color;
+$text: $brand-text-color;
+$text-strong: $brand-text-color;
+$family-primary: $brand-text-family;
+$family-secondary: $brand-heading-family;
+
+// bulma/sass/base/generic.scss
+$body-background-color: $brand-bg-color;
+$body-size: $brand-text-size;
+
+// bulma-checkradio/src/sass/index.scss
+$checkbox-border: .1rem solid $brand-stroke-color;
+
+// Additional sass sheets or Bulma extension libraries used should be added to the imports below.
+@import "~bulma/bulma.sass";
+@import "~bulma-checkradio/dist/css/bulma-checkradio.sass";
+@import "~bulma-switch/dist/css/bulma-switch.sass";
diff --git a/src/styles/main/_datepicker.scss b/src/styles/main/_datepicker.scss
@@ -0,0 +1,36 @@
+@import '~react-datepicker/dist/react-datepicker.css';
+
+.react-datepicker {
+  font-family: $brand-text-family;
+  color: $brand-text-color;
+
+  &__current-month,
+  &__day-name {
+    color: $brand-text-color;
+  }
+
+  &__year-read-view--down-arrow,
+  &__month-read-view--down-arrow {
+    border-top-color: $brand-main-color;
+    top: 6px;
+    margin-left: 25px;
+  }
+
+  &__navigation--previous {
+    border-right-color: $brand-main-color;
+  }
+
+  &__navigation--next {
+    border-left-color: $brand-main-color;
+  }
+
+  &__day {
+    &:not(&--disabled) {
+      border: 1px solid $brand-stroke-color;
+      border-radius: 4px;
+    }
+    &:not(&--selected):not(&--disabled) {
+      color: $brand-text-color;
+    }
+  }
+}
diff --git a/src/components/main/tooltip/styles.scss → src/styles/main/_tooltip.scss b/src/components/main/tooltip/styles.scss → src/styles/main/_tooltip.scss
@@ -17,8 +17,11 @@
     &.place-left:after   { border-left-color:   $bg-color; }
     &.place-bottom:after { border-bottom-color: $bg-color; }
 
-    .tooltip-text {
-      margin-top: 6px;
+    .tooltip-content {
+      color: $brand-text-color;
+      .tooltip-text {
+        margin-top: 6px;
+      }
     }
   }
 }
diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,19 +1,8 @@
 @charset "utf-8";
 
-/*
-*  Define new sass variables or overwrite Bulma's default variables before the imports.
-*  See https://bulma.io/documentation/customize/variables/ and component-specific 
-*  Bulma docs for more variables.
-*
-*  Example:
-*    $primary: #002449;
-*    $dropdown-item-color: $primary;
-*/
+@import './brand';
+@import './bulma';
+@import './base';
 
-
-
-
-// Additional sass sheets or Bulma extension libraries used should be added to the imports below.
-@import "~bulma/bulma.sass";
-@import "~bulma-checkradio/dist/css/bulma-checkradio.sass";
-@import "~bulma-switch/dist/css/bulma-switch.sass";
+@import './main/datepicker';
+@import './main/tooltip';