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,17 +10,35 @@ 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>
 
-        <RandomItemTitle title={
+          </button>
-        this.props.topicName + ' (' +this.props.topicCount + ')'}/>
+          {/* Shuffle button */}
-          <Grid className="random-topics"
+          <button className="shuffle-button" onClick="">
-          width={220}
+            <span className="english-text">Shuffle Topics - </span>
-          gap={12}>
+            <span className="arabic-text"> موضوع عشوائي </span>
+            <i className="fa fa-random"></i>
+          </button>
+        </Grid>
+
+        <Grid className="random-topics"
+              width={220}
+              gap={12}>
           {this.props.videos.map(video =>
-            <VideoItem id={video.id} key={video.id} title={video.title }/>
+            <VideoItem id={video.id} key={video.id} title={video.title}/>
           )}
           {/*<Link to="/topics">*/}
-            {/*<span className="view-all-parents">See All Topics</span>*/}
+          {/*<span className="view-all-parents">See All Topics</span>*/}
           {/*</Link>*/}
           {/*<Link to="/topics">*/}
           {/*<span className="view-all-items">  See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/}

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

@@ -1,52 +1,82 @@
 @import "variables";
 /* globals */
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
-    margin: 0px;
+  margin: 0px;
-    border: 0px;
+  border: 0px;
 }
 
 /* fonts */
 @font-face {
-    font-family: 'Fedra Arabic';
+  font-family: 'Fedra Arabic';
-    src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
+  src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
 }
 
 @font-face {
-    font-family: 'bebas';
+  font-family: 'bebas';
-    src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
+  src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
 }
 
 @font-face {
-    font-family: 'majalla';
+  font-family: 'majalla';
-    src: url('../assets/fonts/majalla 2.ttf') format('truetype');
+  src: url('../assets/fonts/majalla 2.ttf') format('truetype');
 }
 
 @font-face {
-    font-family: 'MyriadPro Regular';
+  font-family: 'MyriadPro Regular';
-    src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
+  src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
 }
 
 @font-face {
-    font-family: 'interstate';
+  font-family: 'interstate';
-    src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
+  src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
-    url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
+  url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
 }
 
 .text-left {
-    text-align: left;
+  text-align: left;
 }
 
 .arabic-text {
-    font-family: "Fedra Arabic", serif;
+  font-family: "Fedra Arabic", serif;
+  padding: .3em;
 }
 
 .english-text {
-    font-family: majalla, serif;
+  font-family: majalla, serif;
+  padding: .3em;
 }
 
 /* App */
 .App {
-    max-width: 1200px;
+  max-width: 1200px;
-    margin: 0 auto;
+  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;