refactor the css to be global for all the random sections

src/components/RandomDate.js

@@ -1,25 +1,69 @@
+import Grid from 'react-css-grid'
 import React from 'react';
-import Grid from 'react-css-grid';
+import PropTypes from 'prop-types';
 import VideoItem from "./VideoItem";
-import SectionHeading from "./SectionHeading";
+import RandomItemTitle from "./SectionHeading";
+import {Link} from 'react-router-dom';
 
 class RandomDate extends React.Component {
-  render() {
 
+  shuffleDate() {
+    this.props.getRandomDateVideos(this.props.allDates);
+  }
+
+  render() {
     return (
-      <section>
-        <SectionHeading title="Random Date"/>
+      <section className="random-item-container">
+        <h2 className="section-heading">
+          <span className="arabic-text random-section-title">من أماكن الارشيف</span>
+          <br/>
+          <span className="section-title">
+          <span className='english-text bold-english-text random-section-title'> Dates from the archive
+        </span>
+          </span>
+        </h2>
         <Grid
+          width={450}
+        >
+          {/* View all dates button*/}
+          <Link className="view-items-link" to="/dates">
+            <button className="view-all-items">
+              <span className="english-text"> all dates    &nbsp; </span>
+              <span className="arabic-text"> 	 جميع الأماكن	</span>
+            </button>
+          </Link>
+          {/* Shuffle button */}
+          <button className="shuffle-button" onClick={this.shuffleDate.bind(this)}>
+            <span className="english-text">Shuffle Dates - </span>
+            <span className="arabic-text"> مكان عشوائي </span>
+            <i className="fa fa-random"></i>
+          </button>
+        </Grid>
+
+        <Grid className="random-dates"
               width={220}
               gap={12}>
-          <VideoItem/>
-          <VideoItem/>
-          <VideoItem/>
-          <VideoItem/>
+          {/*{this.props.videos.map(video =>*/}
+            {/*<VideoItem id={video.id} key={video.id} title={video.title}/>*/}
+          {/*)}*/}
         </Grid>
+        <RandomItemTitle title={this.props.dateName}
+                         count={this.props.dateCount}
+                         src={'/results/date/' + this.props.dateName}
+        />
       </section>
+
     )
   }
 }
 
+RandomDate.propTypes = {
+  dateName: PropTypes.string,
+  allDates: PropTypes.array,
+  videos: PropTypes.array,
+  loading: PropTypes.bool,
+  dateCount: PropTypes.number,
+  getRandomDateVideos: PropTypes.func
+};
+
 export default (RandomDate);

src/components/RandomPlace.js

@@ -13,26 +13,29 @@ class RandomPlace extends React.Component {
 
   render() {
     return (
-      <section>
-        <h2 className="section-heading">from the Archive Places - من مواضيع الارشيف</h2>
-        <RandomItemTitle title={this.props.placeName}
-                         count={this.props.placeCount}
-                         src={'/results/place/' + this.props.placeName}
-        />
+      <section className="random-item-container">
+        <h2 className="section-heading">
+          <span className="arabic-text random-section-title">من أماكن الارشيف</span>
+          <br/>
+          <span className="section-title">
+          <span className='english-text bold-english-text random-section-title'> Places from the archive
+        </span>
+          </span>
+        </h2>
         <Grid
           width={450}
         >
           {/* View all places button*/}
-          <Link to="/places">
-            <button className="view-all-places">
-              <span className="english-text">All Places - </span>
+          <Link className="view-items-link" to="/places">
+            <button className="view-all-items">
+              <span className="english-text"> all places    &nbsp; </span>
               <span className="arabic-text"> 	 جميع الأماكن	</span>
             </button>
           </Link>
           {/* Shuffle button */}
           <button className="shuffle-button" onClick={this.shufflePlace.bind(this)}>
             <span className="english-text">Shuffle Places - </span>
-            <span className="arabic-text"> موضوع عشوائي </span>
+            <span className="arabic-text"> مكان عشوائي </span>
             <i className="fa fa-random"></i>
           </button>
         </Grid>
@@ -44,6 +47,10 @@ class RandomPlace extends React.Component {
             <VideoItem id={video.id} key={video.id} title={video.title}/>
           )}
         </Grid>
+        <RandomItemTitle title={this.props.placeName}
+                         count={this.props.placeCount}
+                         src={'/results/place/' + this.props.placeName}
+        />
       </section>
 
     )

src/components/RandomTopic.js

@@ -5,6 +5,7 @@ import VideoItem from "./VideoItem";
 import RandomItemTitle from "./SectionHeading";
 import {Link} from 'react-router-dom';
 
+// Refactor
 class RandomTopic extends React.Component {
 
   shuffleTopic() {
@@ -13,13 +14,13 @@ class RandomTopic extends React.Component {
 
   render() {
     return (
-      <section className="random-topic">
+      <section className="random-item-container">
         <h2 className="section-heading">
           <span className="arabic-text random-section-title">من مواضيع الارشيف</span>
           <br/>
           {/*<span className="english-text bold-english-text">topics from the Archive   </span>*/}
           <span className="section-title">
-          <span className='english-text bold-english-text'> topics from the archive
+          <span className='english-text bold-english-text random-section-title'> topics from the archive
         </span>
           </span>
         </h2>
@@ -29,8 +30,8 @@ class RandomTopic extends React.Component {
           width={450}
         >
           {/* View all topics button*/}
-          <Link className="view-topics-link" to="/topics">
-            <button className="view-all-topics">
+          <Link className="view-items-link" to="/topics">
+            <button className="view-all-items">
               <span className="english-text"> all topics    &nbsp; </span>
               <span className="arabic-text"> 	 جميع المواضيع	</span>
             </button>

src/stylesheets/random-item.scss

@@ -5,12 +5,10 @@
 .section-subheading {
   padding-top: 2em;
 }
-
+// TODO: Refactor
 .section-title {
-  //padding-top: 1em;
   line-height: 0.5;
   text-align: center;
-  //padding: 1em;
 }
 
 // the bottom section
@@ -50,20 +48,20 @@ h3.section-title {
   bottom: -3px;
 
 }
-
+// TODO: Refactor
 // buttons
-.random-topic {
+.random-item-container {
   button {
     background: white;
   }
-  // topics
-  .view-topics-link {
+  // view all and shuffle button
+  .view-items-link {
     justify-self: left;
     bottom: 36px;
     position: relative;
     padding: 0px;
   }
-  .view-all-topics {
+  .view-all-items {
     left: 0;
     //position: absolute;
     justify-self: left;
@@ -81,7 +79,7 @@ h3.section-title {
 }
 
 // fonts
-.shuffle-button, .view-all-topics {
+.shuffle-button, .view-all-items {
   span.arabic-text {
     font-size: 18px;
   }

src/stylesheets/video-item.scss

@@ -7,7 +7,6 @@
   background: $light-gray-color;
   min-height: 300px;
   padding: 1em;
-
 }
 
 .video-thumbnail {