Merge pull request #993 from charlessipe/display-scholarship-data

Display scholarship data

Author: jjhampton

src/scenes/home/scholarship/preview/preview.css

@@ -1,9 +1,3 @@
-.scholarshipPreviewLink {
-  text-decoration: none;
-  font-family: "Noto Serif", sans-serif;
-  color: rgb(71, 86, 107);
-}
-
 .preview {
   position: relative;
   background: rgb(255, 255, 255);
@@ -14,15 +8,6 @@
   border: 1px solid rgba(34,36,38,.15);
 }
 
-.preview:hover {
-  -webkit-box-shadow: 0 14px 28px rgba(0,0,0,0.25);
-  box-shadow: 0 14px 28px rgba(0,0,0,0.25);
-}
-
-.preview:hover > h6::after {
-  background-color: rgb(65, 164, 192);
-}
-
 .previewHeader6 {
   display: flex;
   letter-spacing: .05em;
@@ -32,7 +17,11 @@
   flex-grow: 1;
   height: 3px;
   content: '\a0';
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: rgb(65, 164, 192);
   align-self: center;
   margin: 0 10px 5px 10px;
 }
+
+.buttonContainer {
+  text-align: center;
+}

src/scenes/home/scholarship/preview/preview.js

@@ -1,22 +1,16 @@
 import React, { Component } from 'react';
+import LinkButton from 'shared/components/linkButton/linkButton';
 import PropTypes from 'prop-types';
 import styles from './preview.css';
 
 class Preview extends Component {
-  snip = (description) => {
-    const str = `${description.substr(0, 300)}...`;
-    return str;
-  }
-
   render() {
     const { scholarship } = this.props;
     return (
-      <a className={styles.scholarshipPreviewLink} href={`scholarships/${scholarship.id}/apply`}>
-        <div className={styles.preview}>
-          <h6 className={styles.previewHeader6}>{scholarship.name}</h6>
-          <span> {this.snip(scholarship.description)} </span>
-        </div>
-      </a>
+      <div className={styles.preview}>
+        <h6 className={styles.previewHeader6}>{scholarship.name}</h6>
+        <div className={styles.buttonContainer}><LinkButton link={`scholarships/${scholarship.id}/apply`} text="Read More" theme="blue" scrollLink /></div>
+      </div>
     );
   }
 }