add title to the topics page, style the video items and the links, add about page.

src/App.js

@@ -5,6 +5,7 @@ import './App.css';
 import 'font-awesome/css/font-awesome.min.css';
 import { Route, Switch } from 'react-router-dom';
 import Home from './containers/Home';
+import About from './containers/About';
 import TopicsListContainer from './containers/TopicsListContainer';
 import store from './store/configureStore';
 import history from './history';
@@ -25,11 +26,13 @@ class App extends Component {
             <Search/>
             <Switch>
               <Route exact={true} path="/" component={Home}/>
+              <Route exact={true} path="/about" component={About}/>
+
               <Route path="/topics" component={TopicsListContainer}/>
               <Route path="/results/:categoryKey/:searchValue" component={Results}/>
               <Route path="/videos/:videoId" component={Video}/>
             </Switch>
-            <Nav/>
+            <Nav />
             <Footer/>
           </div>
         </ConnectedRouter>

src/components/Nav.js

@@ -3,10 +3,10 @@ import React from 'react';
 class Nav extends React.Component {
   render() {
     return (
-      <nav>
+      <nav className={"nav-footer"}>
         <ul>
           <li>
-            <a href="">
+            <a href="/contact">
               <span className="arabic-text">اتصل بنا</span>
               <br/>
               <span className="english-text"> contact us</span>
@@ -20,21 +20,21 @@ class Nav extends React.Component {
             </a>
           </li>
           <li>
-            <a href="">
+            <a href="/">
               <span className="arabic-text">الرئيسية</span>
               <br/>
               <span className="english-text"> main</span>
             </a>
           </li>
           <li>
-            <a href="">
+            <a href="https://858.ma/">
               <span className="arabic-text">الأرشيف</span>
               <br/>
               <span className="english-text"> the archive</span>
             </a>
           </li>
           <li>
-            <a href="">
+            <a href="/about">
               <span className="arabic-text">ماهذا الشيء</span>
               <br/>
               <span className="english-text"> what is this</span>

src/components/RandomDate.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import VideoItem from "./VideoItem";
 import RandomItemTitle from "./SectionHeading";
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 class RandomDate extends React.Component {
 
@@ -15,8 +15,9 @@ class RandomDate extends React.Component {
     return (
       <section className="random-item-container">
         <h2 className="section-heading">
-          <span className="arabic-text random-section-title">من أماكن الارشيف</span>
+
-          <br/>
+          <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>
@@ -28,14 +29,19 @@ class RandomDate extends React.Component {
           {/* View all dates button*/}
           <Link className="view-items-link" to="/dates">
             <button className="view-all-items">
+              <span className={"highlighted-text"}>
                 <span className="english-text"> all dates    &nbsp; </span>
-              <span className="arabic-text"> 	 جميع الأماكن	</span>
+                <span className="arabic-text"> 	 جميع الأيام	</span>
+              </span>
             </button>
           </Link>
           {/* Shuffle button */}
           <button className="shuffle-button" onClick={this.shuffleDate.bind(this)}>
+
+            <span className={"highlighted-text"}>
               <span className="english-text">Shuffle Dates - </span>
               <span className="arabic-text"> مكان عشوائي </span>
+            </span>
             <i className="fa fa-random"></i>
           </button>
         </Grid>

src/components/RandomPlace.js

@@ -33,14 +33,18 @@ class RandomPlace extends React.Component {
           {/* View all places button*/}
           <Link className="view-items-link" to="/places">
             <button className="view-all-items">
+              <span className={"highlighted-text"}>
                 <span className="english-text"> all places    &nbsp; </span>
-              <span className="arabic-text"> 	 جميع الأماكن	</span>
+               <   span className="arabic-text"> 	 جميع الأماكن	</span>
+                </span>
             </button>
           </Link>
           {/* Shuffle button */}
           <button className="shuffle-button" onClick={this.shufflePlace.bind(this)}>
+            <span className={"highlighted-text"}>
             <span className="english-text">Shuffle Places - </span>
             <span className="arabic-text"> مكان عشوائي </span>
+            </span>
             <i className="fa fa-random"></i>
           </button>
         </Grid>

src/components/RandomTopic.js

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import VideoItem from "./VideoItem";
 import RandomItemTitle from "./SectionHeading";
-import {Link} from 'react-router-dom';
+import { Link } from 'react-router-dom';
 
 // Refactor
 class RandomTopic extends React.Component {
@@ -17,7 +17,7 @@ class RandomTopic extends React.Component {
       <section className="random-item-container">
         <h2 className="section-heading">
           <span className="arabic-text random-section-title">من مواضيع الارشيف</span>
-          <br/>
+          <br />
           {/*<span className="english-text bold-english-text">topics from the Archive   </span>*/}
           <span className="section-title">
             <span className='english-text bold-english-text random-section-title'> topics from the archive
@@ -39,9 +39,12 @@ class RandomTopic extends React.Component {
             </button>
           </Link>
           {/* Shuffle button */}
+
           <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
+            <span className="highlighted-text">
               <span className="arabic-text"> موضوع عشوائي </span>
               <span className="english-text">&nbsp; shuffle topics  </span>
+            </span>
             &nbsp;
             <i className="fa fa-random"></i>
           </button>
@@ -51,7 +54,7 @@ class RandomTopic extends React.Component {
           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} />
           )}
         </Grid>
         <RandomItemTitle title={this.props.topicName}

src/components/Search.js

@@ -14,6 +14,8 @@ class Search extends React.Component {
               {/*<span className="arabic-text">بحث في الأرشيف - </span>*/}
             {/*</div>*/}
         {/*</div>*/}
+
+        {/* TODO: apply the font for search the archive */}
         <input type="text" className="search-box" name="search-box" placeholder="search the Archive   بحث في الأرشيف"/>
       </form>
     )

src/containers/About.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import Grid from 'react-css-grid'
+
+class About extends React.Component {
+
+  render() {
+    return (
+      <div>
+
+        <Grid>
+          <div>
+          Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.        </div>
+          <div>
+            second Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+          </div>
+        </Grid>
+      </div>
+    );
+  }
+}
+
+
+export default (About);

src/containers/Results.js

@@ -3,7 +3,7 @@ import Grid from "react-css-grid";
 import Loading from "../components/Loading";
 import VideoItem from "../components/VideoItem";
 import PropTypes from "prop-types";
-import {getSearchResults} from "../actions/search";
+import { getSearchResults } from "../actions/search";
 import connect from "react-redux/es/connect/connect";
 
 class Results extends React.Component {
@@ -12,24 +12,35 @@ class Results extends React.Component {
     // get params from url
     const categoryKey = this.props.match.params.categoryKey;
     const searchValue = this.props.match.params.searchValue;
-
     //FIXME: first check if current key / value / results is already in state
     this.props.getSearchResults(categoryKey, searchValue);
   }
 
   render() {
-    // console.log('results', this.props.searchResults);
+    let title = this.props.match.params.searchValue;
+
     return (
+
       <div>
-        {/* TODO: add the title with out very own beautiful format!*/}
+
+        <h2 className="section-heading">
+          <span className="section-title">
+            <span className='english-text bold-english-text random-section-title'>Topic: {title}
+            </span>
+          </span>
+        </h2>
+        <br />
+
         <Grid className="random-topics"
           width={220}
           gap={12}>
+
           {this.props.loadingResults && (
             <Loading />
           )}
+
           {this.props.searchResults && this.props.searchResults.map(video =>
-            <VideoItem id={video.id} key={video.id} title={video.title}/>
+            <VideoItem id={video.id} key={video.id} title={video.title} />
           )}
         </Grid>
       </div>

src/logo.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3">
-    <g fill="#61DAFB">
-        <path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/>
-        <circle cx="420.9" cy="296.5" r="45.7"/>
-        <path d="M520.5 78.1z"/>
-    </g>
-</svg>

src/stylesheets/footer.scss

@@ -9,3 +9,9 @@ footer {
   padding: 1em;
   font-weight: bold;
 }
+
+.nav-footer {
+  a {
+    color: gray;
+  }
+}

src/stylesheets/globals.scss

@@ -8,39 +8,39 @@
 
 /* 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");
 }
 
 @font-face {
-  font-family: 'interstate-light';
+  font-family: "interstate-light";
-  src: url('../assets/fonts/Interstate_Light.ttf') format('truetype');
+  src: url("../assets/fonts/Interstate_Light.ttf") format("truetype");
 }
 
 @font-face {
-  font-family: 'interstate-bold';
+  font-family: "interstate-bold";
-  src: url('../assets/fonts/Interstate-Bold.ttf') format('truetype');
+  src: url("../assets/fonts/Interstate-Bold.ttf") format("truetype");
 }
 
 .text-left {
@@ -60,7 +60,6 @@
 
 .bold-english-text {
   font-family: interstate-bold, serif;
-  //padding: 0.3em;
 }
 
 /* App */
@@ -78,11 +77,9 @@ button {
   max-width: 300px;
   justify-self: center; // for the css grid
   cursor: pointer;
-}
-button.view-all-items:focus{
-  outline: none;
-}
   
+}
+button:focus {outline:0 !important;}
 // spans
 span {
   display: inline-block;
@@ -100,10 +97,7 @@ a {
   text-decoration: underline;
   font-size: 1em;
   color: black;
-  &:hover{
+  &:hover {
     color: gray;
   }
 }
-
-
-//

src/stylesheets/header.scss

@@ -12,7 +12,7 @@ header {
 }
 
 .counter-container {
-    width: 10%;
+    width: 18%;
     position: absolute;
     display: inline-block;
     right: 0;

src/stylesheets/items-list.scss

@@ -1,11 +1,12 @@
 @import "variables";
 @import "globals";
 // title
-.all-items{
+.all-items {
-  .section-heading{
+  .section-heading {
     padding-bottom: 1em;
   }
-  .section-title span:before, .section-title span:after{
+  .section-title span:before,
+  .section-title span:after {
     width: 530px;
   }
 }
@@ -13,12 +14,12 @@
 #search-topics {
   font-size: 1em;
   padding: 1em;
-  border: .5px solid gray;
+  border: 0.5px solid gray;
   height: 30px;
   position: relative;
   top: -3px;
   left: 1px;
-  font-size: .7em;
+  font-size: 0.7em;
 }
 
 .label {
@@ -27,9 +28,11 @@
 
 .topic-item {
   h3 {
-    &:hover{
+    color: rgb(16, 16, 16);
+    &:hover {
       color: gray;
     }
+
     text-align: left;
     padding: 1em;
     //font-size: 30px;
@@ -38,4 +41,3 @@
   border-bottom: 6px solid black;
   margin-bottom: 2em;
 }
-

src/stylesheets/search.scss

@@ -6,7 +6,7 @@
 /* search */
 .search-button {
     background: transparent;
-    bottom: -13px;
+    bottom: 4px;
     position: relative;
     right: -39px;
     padding: 0px;

src/stylesheets/video-item.scss

@@ -7,6 +7,7 @@
   background: $light-gray-color;
   min-height: 300px;
   padding: 1em;
+  color : rgb(16, 16, 16);
 }
 
 .video-thumbnail {
@@ -29,7 +30,6 @@
   padding-top: 1em;
   font-weight: normal;
 }
-// FIXME:
 section.video-item:hover {
   outline: 2px solid black;
 }