Merge pull request #12 from Nona-Creative/feat/styling-setup

General styling setup

assets/styles/base/buttons.scss

@@ -1 +1,8 @@
 @import './assets/styles/global.scss';
+
+button {
+  cursor: pointer;
+  outline: none;
+  border: 0;
+  background: none;
+}

assets/styles/base/forms.scss

@@ -4,8 +4,3 @@ input,
 button {
   font-family: $primary-font;
 }
-
-button {
-  cursor: pointer;
-  outline: none;
-}

assets/styles/base/type.scss

@@ -10,7 +10,9 @@ body {
   font-family: $primary-font;
   font-size: calculateRem($body-font-size);
   line-height: calculateRem($body-line-height);
+  letter-spacing: -.03em;
   color: $text-color;
+  background-color: $dark-navy;
 }
 
 h1,

assets/styles/base/variables.scss

@@ -8,15 +8,21 @@ $monitor: 1220px;
 $big: 1440px;
 
 // colors
-$text-color: #666;
+$text-color: hsla(0, 0, 100, .7);
+$blue: #3830cf;
+$blue-highlight: #0069d9; // button hover
+$navy: #1c2449;
+$dark-navy: #0c143a;
+$red: #d4434a;
+$dark-red: #AA2E49;
 
 // text
-$body-font-size: 16;
-$body-line-height: 24;
+$body-font-size: 15;
+$body-line-height: 23;
 $primary-font: 'Roboto Mono', monospace;
 $secondary-font: 'bebas_neuebold', sans-serif;
 
 // layout
-$container-width: 600;
+$container-width: 750;
 $browse-left-width: 180;
 $container-padding: 24;

components/browseArchives/style.scss

@@ -9,7 +9,11 @@
   }
 
   h4 {
+    font-size: calculateRem(20);
     margin-bottom: calculateRem(24);
+    color: #fff;
+    font-family: $secondary-font;
+    letter-spacing: 1px;
   }
 }
 

components/interviews/interviewsList/index.js

@@ -3,89 +3,96 @@ import { PropTypes } from 'prop-types';
 import Modal from '../../modal';
 import './style.scss';
 
-const InterviewsList = (props) => {
-  // Sort interviews alphabetically
-  const sortedInterviews = props.data.sort((a, b) => a.name.localeCompare(b.name));
-  const interviews = {};
+class InterviewsList extends React.Component {
+  constructor(props) {
+    super(props);
 
-  // Build up interviews object with letter key
-  sortedInterviews.forEach((interview) => {
-    const firstLetter = interview.name.charAt(0);
+    this.state = {
+      activeLetter: 'A',
+    };
+  }
 
-    if (typeof interviews[firstLetter] === 'undefined') {
-      interviews[firstLetter] = [];
-    }
+  render() {
+    const { activeLetter } = this.state;
 
-    interviews[firstLetter].push(interview);
-  });
+    // Sort interviews alphabetically
+    const sortedInterviews = this.props.data.sort((a, b) => a.name.localeCompare(b.name));
+    const interviews = {};
 
-  return (
-    <div className="interviews-wrap">
-      <div className="mob-interviews-link">
-        {/* eslint-disable-next-line */}
-        <span
-          role="button"
-          tabIndex="0"
-          onClick={props.toggleInterviewsListModal}
+    // Build up interviews object with letter key
+    sortedInterviews.forEach((interview) => {
+      const firstLetter = interview.name.charAt(0);
+
+      if (typeof interviews[firstLetter] === 'undefined') {
+        interviews[firstLetter] = [];
+      }
+
+      interviews[firstLetter].push(interview);
+    });
+
+    return (
+      <div className="interviews-wrap">
+        <div className="mob-interviews-link">
+          <button onClick={this.props.toggleInterviewsListModal}>
+            Interviews ({this.props.data.length})
+          </button>
+          <button onClick={this.props.toggleInterviewsListModal}>
+            View
+          </button>
+        </div>
+        <Modal
+          isModalOpen={this.props.isInterviewsListModalOpen}
+          closeModal={this.props.toggleInterviewsListModal}
+          modalOnMobileOnly
         >
-          Interviews ({props.data.length})
-        </span>
-        {/* eslint-disable-next-line */}
-        <span
-          role="button"
-          tabIndex="0"
-          onClick={props.toggleInterviewsListModal}
-        >
-          View
-        </span>
-      </div>
-      <Modal
-        isModalOpen={props.isInterviewsListModalOpen}
-        closeModal={props.toggleInterviewsListModal}
-        modalOnMobileOnly
-      >
-        <React.Fragment>
-          <h4>Interviews ({ props.data.length })</h4>
-          <div className="interviews-nav-wrap">
-            <div className="interviews-list">
-              {
-                Object.keys(interviews).map(firstLetter => (
-                  <div className="letter-block" key={firstLetter}>
-                    <div id={firstLetter}>{ firstLetter }</div>
-                    <ul>
-                      { interviews[firstLetter].map(interview => (
-                        <li
-                          id={interview.id}
-                          key={interview.id}
-                        >
-                          <button onClick={props.toggleSingleInterview}>{interview.name}</button>
-                        </li>
+          <React.Fragment>
+            <h4>Interviews ({ this.props.data.length })</h4>
+            <div className="interviews-nav-wrap">
+              <div className="interviews-list">
+                {
+                  Object.keys(interviews).map(firstLetter => (
+                    <div className="letter-block" key={firstLetter}>
+                      <div id={firstLetter}>{ firstLetter }</div>
+                      <ul>
+                        { interviews[firstLetter].map(interview => (
+                          <li
+                            id={interview.id}
+                            key={interview.id}
+                          >
+                            <button onClick={this.props.toggleSingleInterview}>
+                              { interview.name }
+                            </button>
+                          </li>
                         ))
-                      }
-                    </ul>
-                  </div>
-                ))
-              }
+                        }
+                      </ul>
+                    </div>
+                  ))
+                }
+              </div>
+              <div className="letters-nav">
+                {
+                  Object.keys(interviews).map(firstLetter => (
+                    <button
+                      key={firstLetter}
+                      onClick={() => {
+                        document.querySelector(`#${firstLetter}`).scrollIntoView({ behavior: 'smooth' });
+                        this.setState({ activeLetter: firstLetter });
+                      }}
+                      className={activeLetter === firstLetter ? 'active' : ''}
+                    >
+                      { firstLetter }
+                    </button>
+                  ))
+                }
+              </div>
             </div>
-            <div className="letters-nav">
-              {
-                Object.keys(interviews).map(firstLetter => (
-                  // eslint-disable-next-line
-                  <span
-                    key={firstLetter}
-                    onClick={() => { document.querySelector(`#${firstLetter}`).scrollIntoView({ behavior: 'smooth' }); }}
-                  >
-                    { firstLetter }
-                  </span>
-                ))
-              }
-            </div>
-          </div>
-        </React.Fragment>
-      </Modal>
-    </div>
-  );
-};
+          </React.Fragment>
+        </Modal>
+      </div>
+    );
+  }
+}
 
 InterviewsList.propTypes = {
   isInterviewsListModalOpen: PropTypes.bool.isRequired,

components/interviews/interviewsList/style.scss

@@ -9,9 +9,10 @@
     display: none;
   }
 
-  span {
-    cursor: pointer;
-    outline: none;
+  button {
+    color: $text-color;
+    padding: 0;
+    font-size: calculateRem($body-font-size);
 
     &:hover {
       text-decoration: underline;
@@ -41,6 +42,7 @@
   }
 
   .letter-block {
+    color: #fff;
     padding-bottom: calculateRem(32);
   }
 
@@ -49,6 +51,7 @@
     padding: 0;
     text-align: left;
     font-size: calculateRem(14);
+    color: #fff;
 
     &:hover {
       text-decoration: underline;
@@ -63,8 +66,14 @@
     display: flex;
     flex-direction: column;
 
-    span {
-      cursor: pointer;
+    button {
+      color: #fff;
+      margin-bottom: calculateRem(4);
+      text-transform: lowercase;
+
+      &.active {
+        background-color: $red;
+      }
     }
   }
 }

components/interviews/relatedInterviewsList/style.scss

@@ -3,11 +3,17 @@
 .related-interviews-list {
   margin-bottom: calculateRem(24);
 
+  li {
+    margin-bottom: calculateRem(12);
+    line-height: 1.1;
+  }
+
   button {
     border: 0;
     padding: 0;
     text-align: left;
     font-size: calculateRem(14);
+    color: #fff;
 
     &:hover {
       text-decoration: underline;

components/modal/style.scss

@@ -11,7 +11,7 @@
     width: 100vw;
     height: 100vh;
     z-index: 3;
-    background-color: #fff;
+    background-color: $dark-navy;
     overflow: auto;
   }
 

components/pageFooter/index.js

@@ -1,10 +1,12 @@
 import React from 'react';
 import './style.scss';
 
-export default () => (
+const PageFooter = () => (
   <div className="page-footer">
     <div className="container">
       <p>Copyright { (new Date()).getFullYear() }</p>
     </div>
   </div>
 );
+
+export default PageFooter;

components/pageFooter/style.scss

@@ -1,7 +1,7 @@
 @import './assets/styles/global.scss';
 
 .page-footer {
-  background-color: #efefef;
+  background-color: $blue;
   padding: calculateRem(8) 0;
   text-align: center;
   font-size: calculateRem(12);

components/pageHeader/index.js

@@ -5,16 +5,17 @@ import './style.scss';
 const PageHeader = () => (
   <div className="page-header">
     <div className="container">
+      <nav className="page-header-nav">
+        <AnchorLink offset="24" href="#resources">Resources</AnchorLink>
+        <AnchorLink offset="24" href="#browse">Browse Archives</AnchorLink>
+      </nav>
+
+      <img className="logo" src="/static/img/ETHPrize-logo.png" alt="ETHPrize logo" />
       <h1>Ethereum Report</h1>
       <p>
         We&rsquo;ve interviewed 100+ developers to showcase the biggest opportunities in the
         Ethereum ecosystem
       </p>
-
-      <nav className="page-header-nav">
-        <AnchorLink offset="24" href="#resources">Resources</AnchorLink>
-        <AnchorLink offset="24" href="#browse">Browse Archives</AnchorLink>
-      </nav>
     </div>
   </div>
 );

components/pageHeader/style.scss

@@ -1,15 +1,32 @@
 @import './assets/styles/global.scss';
 
 .page-header {
-  background-color: #efefef;
+  background-color: $blue;
+  background-image: url('/static/img/header-bg.jpg');
+  background-position: center;
+  background-size: cover;
   padding: calculateRem(24) 0;
   text-align: center;
-  margin-bottom: calculateRem(24);
+
+  .logo {
+    width: calculateRem(116);
+    margin-bottom: calculateRem(24);
+  }
 
   h1 {
+    color: #fff;
     margin-bottom: calculateRem(24);
+    text-transform: uppercase;
     font-family: $secondary-font;
-    font-size: calculateRem(36);
+    font-size: calculateRem(40);
+    color: $red;
+    letter-spacing: 4px;
+    line-height: 1.1;
+
+    @media (min-width: $desktop) {
+      font-size: calculateRem(50);
+      letter-spacing: 10px;
+    }
   }
 
   p {
@@ -18,11 +35,17 @@
 }
 
 .page-header-nav {
+  margin-bottom: calculateRem(32);
 
   a {
-    color: $text-color;
+    font-family: $secondary-font;
+    color: #fff;
     text-decoration: none;
-    margin: 0 calculateRem(16);
+    margin: 0 calculateRem(8);
+    font-size: calculateRem(17);
+    text-shadow: 0 0 11px #000;
+    padding: calculateRem(8);
+    letter-spacing: .08em;
 
     &:hover {
       text-decoration: underline;

components/projectsList/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
 import { PropTypes } from 'prop-types';
 import Data from '../../data/archives/projects';
 import './style.scss';
@@ -9,9 +10,8 @@ const ProjectsList = props => (
     <ul>
       {
         Data.map(project => (
-          // eslint-disable-next-line
-          <li key={project} onClick={props.setSearchTerm}>
-            <span>{ project }</span>
+          <li key={project}>
+            <AnchorLink href="#browse" onClick={props.setSearchTerm}>{ project }</AnchorLink>
           </li>
         ))
       }

components/projectsList/style.scss

@@ -13,12 +13,17 @@
     padding: 0 calculateRem(8) calculateRem(8) 0;
     cursor: pointer;
 
-    span {
-      background-color: rgba(0, 0, 0, 0.1);
-      padding: calculateRem(4) calculateRem(12);
+    a {
+      display: inline-block;
+      text-decoration: none;
+      background-color: $red;
+      padding: calculateRem(8) calculateRem(12);
+      border-radius: 4px;
+      color: #fff;
+      transition: background-color 0.5s ease;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.3);
+        background-color: $dark-red;
       }
     }
   }

components/resources/style.scss

@@ -1,9 +1,23 @@
 @import './assets/styles/global.scss';
 
-.resources-wrap h2 {
-  text-transform: uppercase;
-  font-family: $secondary-font;
-  font-size: calculateRem(36);
+.resources-wrap {
+  padding: calculateRem(40) 0;
+
+  h2 {
+    text-transform: uppercase;
+    font-family: $secondary-font;
+    font-size: calculateRem(40);
+    color: $red;
+    letter-spacing: 4px;
+    text-align: center;
+    line-height: 1.1;
+    margin-bottom: calculateRem(24);
+
+    @media (min-width: $desktop) {
+      font-size: calculateRem(50);
+      letter-spacing: 10px;
+    }
+  }
 }
 
 .wordclouds-wrap {

components/searchBar/index.js

@@ -5,7 +5,7 @@ import './style.scss';
 const SearchBar = props => (
   <div className="search-bar">
     <div className="container">
-      <h3>Browse Archives</h3>
+      <h3>Browse</h3>
       <form className="search-form">
         <input
           className="search-input"
@@ -15,13 +15,12 @@ const SearchBar = props => (
           onChange={props.onSearchInputChange}
         />
         { props.isSearchActive && (
-          // eslint-disable-next-line
-          <span
+          <button
             className="search-clear-button"
             onClick={props.clearSearchInput}
           >
             Clear search
-          </span>
+          </button>
           )
         }
       </form>

components/searchBar/style.scss

@@ -1,15 +1,26 @@
 @import './assets/styles/global.scss';
 
 .search-bar {
-  background-color: #efefef;
+  background-color: $blue;
+  background-image: url('/static/img/header-bg.jpg');
+  background-position: center;
+  background-size: cover;
   margin-bottom: calculateRem(56);
 
   h3 {
-    padding: calculateRem(32) 0 0;
-    text-align: center;
+    padding: calculateRem(24) 0 0;
     text-transform: uppercase;
     font-family: $secondary-font;
-    font-size: calculateRem(36);
+    font-size: calculateRem(40);
+    color: $red;
+    letter-spacing: 4px;
+    text-align: center;
+    line-height: 1.1;
+
+    @media (min-width: $desktop) {
+      font-size: calculateRem(50);
+      letter-spacing: 10px;
+    }
   }
 }
 
@@ -22,7 +33,7 @@
   width: 100%;
   height: calculateRem(48);
   border: 5px solid #efefef;
-  padding: calculateRem(12) calculateRem(100) calculateRem(12) calculateRem(12);
+  padding: calculateRem(12);
   font-size: calculateRem(16);
 
   &:focus,

components/searchResults/style.scss

@@ -9,11 +9,13 @@
     h3 {
       font-size: calculateRem(18);
       margin-bottom: calculateRem(8);
+      color: #fff;
     }
 
     h5 {
       font-size: calculateRem(16);
       margin-bottom: calculateRem(8);
+      color: #fff;
     }
 
     p {
@@ -29,7 +31,8 @@
           left: -15%;
           height: 120%;
           width: 130%;
-          background-color: #efefef;
+          background-color: $red;
+          color: $navy;
           z-index: -1;
         }
       }

components/topicsList/index.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import AnchorLink from 'react-anchor-link-smooth-scroll';
 import { PropTypes } from 'prop-types';
 import Data from '../../data/archives/topics';
 import './style.scss';
@@ -9,9 +10,8 @@ const TopicsList = props => (
     <ul>
       {
         Data.map(topic => (
-          // eslint-disable-next-line
-          <li key={topic} onClick={props.setSearchTerm}>
-            <span>{ topic }</span>
+          <li key={topic}>
+            <AnchorLink href="#browse" onClick={props.setSearchTerm}>{ topic }</AnchorLink>
           </li>
         ))
       }

components/topicsList/style.scss

@@ -13,12 +13,17 @@
     padding: 0 calculateRem(8) calculateRem(8) 0;
     cursor: pointer;
 
-    span {
-      background-color: rgba(0, 0, 0, 0.1);
-      padding: calculateRem(4) calculateRem(12);
+    a {
+      display: inline-block;
+      text-decoration: none;
+      background-color: $red;
+      padding: calculateRem(8) calculateRem(12);
+      border-radius: 4px;
+      color: #fff;
+      transition: background-color 0.5s ease;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.3);
+        background-color: $dark-red;
       }
     }
   }

styles.scss

@@ -7,7 +7,7 @@
 @import './assets/styles/global.scss';
 
 .page-wrapper {
-  min-width: calculateRem(320);
+  min-width: calculateRem(300);
 }
 
 .container {