create all topics (button), shuffle (button), all videos (link)

src/App.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import {Provider} from 'react-redux';
 import { ConnectedRouter } from 'connected-react-router'
 import './App.css';
+import 'font-awesome/css/font-awesome.min.css';
 import { Route, Switch } from 'react-router-dom';
 import Home from './containers/Home';
 import TopicsList from './containers/TopicsList';

src/components/RandomTopic.js

@@ -3,7 +3,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import VideoItem from "./VideoItem";
 import RandomItemTitle from "./SectionHeading";
-import { Link } from 'react-router-dom';
 
 class RandomTopic extends React.Component {
 
@@ -11,9 +10,27 @@ class RandomTopic extends React.Component {
     return (
       <section>
         <h2 className="section-heading">from the Archive Topics - من مواضيع الارشيف</h2>
+        <RandomItemTitle title={this.props.topicName}
+                         count={this.props.topicCount}
+                         src={'/topic/' + this.props.topicName}
+        />
+        <Grid
+          width={450}
+        >
+          {/* View all topics button*/}
+          <button className="view-all-topics" onClick="">
+            <span className="english-text">All Topics - </span>
+            <span className="arabic-text"> جميع المواضيع </span>
+
+          </button>
+          {/* Shuffle button */}
+          <button className="shuffle-button" onClick="">
+            <span className="english-text">Shuffle Topics - </span>
+            <span className="arabic-text"> موضوع عشوائي </span>
+            <i className="fa fa-random"></i>
+          </button>
+        </Grid>
 
-        <RandomItemTitle title={
-        this.props.topicName + ' (' +this.props.topicCount + ')'}/>
         <Grid className="random-topics"
               width={220}
               gap={12}>

src/components/SectionHeading.js

@@ -7,7 +7,11 @@ import React from 'react';
 class SectionHeading extends React.Component {
   render() {
     return (
-      <h3 className="section-title"><span>{this.props.title}</span></h3>
+      <h3 className="section-title">
+        <span>{this.props.title}
+          <a className="normal-link" href={this.props.src}> ({this.props.count})</a>
+        </span>
+      </h3>
     )
   }
 }

src/stylesheets/globals.scss

@@ -39,10 +39,12 @@
 
 .arabic-text {
   font-family: "Fedra Arabic", serif;
+  padding: .3em;
 }
 
 .english-text {
   font-family: majalla, serif;
+  padding: .3em;
 }
 
 /* App */
@@ -50,3 +52,31 @@
   max-width: 1200px;
   margin: 0 auto;
 }
+
+// buttons
+
+button {
+  padding: 1em;
+  font-weight: bold;
+  font-size: 1em;
+  max-width: 300px;
+  justify-self: center; // for the css grid
+}
+
+// spans
+span {
+  display: inline-block;
+  position: relative;
+}
+
+// links
+a {
+  text-decoration: none;
+  font-size: 14px;
+  color: black;
+}
+
+.normal-link{
+  text-decoration: underline;
+  color: $normal-link-color;
+}

src/stylesheets/random-item.scss

@@ -1,5 +1,5 @@
 @import "variables";
-
+@import "globals";
 
 .section-heading {
   padding-top: 1em;
@@ -12,10 +12,6 @@
 // --------------------------
 //        add horizontal lines around the section title.
 //----------------------------
-.section-title span{
-  display: inline-block;
-  position: relative;
-}
 .section-title span:before,
 .section-title span:after {
   content: "";
@@ -33,3 +29,7 @@
   left: 100%;
   margin-left: 15px;
 }
+// Topics
+.random-topics{
+  margin-top: 2em;
+}

src/stylesheets/variables.scss

@@ -1 +1,2 @@
 $light-gray-color: #ebebeb;
+$normal-link-color: blue;

src/stylesheets/video-item.scss

@@ -5,16 +5,10 @@
 /* Video item*/
 .video-item {
   background: $light-gray-color;
-  min-height: 250px;
+  min-height: 300px;
   padding: 1em;
 }
 
-a {
-  text-decoration: none;
-  font-size: 14px;
-  color: black;
-}
-
 .video-thumbnail {
   width: 100%;
   max-height: 150px;