style the home page

src/components/Footer.js

@@ -5,7 +5,7 @@ render(){
    <footer>
      <span className="arabic-text"> ‫جميع الحقوق محفوظة لمؤسسة مٌصرين‬</span>
 
-     <span className="english-text">  all rights reserved</span>
+     <span className="english-text">&nbsp; all rights reserved</span>
    </footer>
   )
 }

src/components/RandomTopic.js

@@ -32,8 +32,10 @@ class RandomTopic extends React.Component {
           {/* View all topics button*/}
           <Link className="view-items-link" to="/topics">
             <button className="view-all-items">
-              <span className="english-text"> all topics    &nbsp; </span>
+              <span className="highlighted-text">
+                <span className="english-text"> all topics    &nbsp; </span>
               <span className="arabic-text"> 	 جميع المواضيع	</span>
+              </span>
             </button>
           </Link>
           {/* Shuffle button */}

src/components/SectionHeading.js

@@ -8,8 +8,8 @@ class SectionHeading extends React.Component {
   render() {
     return (
       <h3 className="section-title">
-        <span>{this.props.title}
-          <a className="normal-link" href={this.props.src}> ({this.props.count})</a>
+        <span>
+          <a className="normal-link highlighted-link" href={this.props.src}> {this.props.title} /{this.props.count}/</a>
         </span>
       </h3>
     )

src/components/TopicsList.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {Link} from 'react-router-dom';
+import Grid from "react-css-grid";
 
 class TopicsList extends React.Component {
   constructor() {
@@ -30,23 +31,28 @@ class TopicsList extends React.Component {
     return (
       <main className="topics-list">
         <section className="filter-box">
-          <label className="label" htmlFor="search-topics">
+          <label className="label english-text" htmlFor="search-topics">
             <i className="fa fa-filter">&nbsp;</i>
-            Filter Topics : &nbsp;
+            <span className="english-text">Filter Topics &nbsp;</span>
+            <span className="arabic-text"> تنقية المواضيع: </span>
             <input type="text" id="search-topics" ref="filter-element" onChange={event => this.filterTopics(event)}/>
           </label>
         </section>
+        <Grid className="random-topics"
+              width={220}
+              gap={12}>
+          {this.state.filteredTopics.map(topic => {
+              return (
+                <section className="topic-item" key={topic.name}>
+                  <Link to={"/results/topic/" + topic.name}>
+                    <h3 className="english-text">{topic.name} ({topic.items} videos)</h3>
+                  </Link>
+                </section>
+              )
+            }
+          )}
+        </Grid>
 
-        {this.state.filteredTopics.map(topic => {
-            return (
-              <section className="topic-item" key={topic.name}>
-                <Link to={"/results/topic/" + topic.name}>
-                  <h3>{topic.name} ({topic.items} videos)</h3>
-                </Link>
-              </section>
-            )
-          }
-        )}
       </main>
     )
   }

src/containers/Results.js

@@ -17,7 +17,7 @@ class Results extends React.Component {
   }
 
   render() {
-    console.log('results', this.props.searchResults);
+    // console.log('results', this.props.searchResults);
     return (
       <Grid className="random-topics"
             width={220}

src/containers/TopicsListContainer.js

@@ -12,8 +12,16 @@ class TopicsListContainer extends React.Component {
   }
   render() {
     return (
-      <section>
-        <SectionHeading title="All Topics"/>
+      <section className="all-items">
+        <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 random-section-title'> all topics
+        </span>
+          </span>
+        </h2>
         {/* TODO: get the topics objects*/}
         <TopicsList allTopics={this.props.allTopics}/>
       </section>

src/stylesheets/globals.scss

@@ -79,6 +79,9 @@ button {
   justify-self: center; // for the css grid
   cursor: pointer;
 }
+button.view-all-items:focus{
+  outline: none;
+}
 
 // spans
 span {
@@ -95,6 +98,12 @@ a {
 
 .normal-link {
   text-decoration: underline;
-  color: $normal-link-color;
+  font-size: 1em;
+  color: black;
+  &:hover{
+      color: gray;
+  }
 }
 
+
+//

src/stylesheets/items-list.scss

@@ -1,20 +1,38 @@
 @import "variables";
 @import "globals";
+// title
+.all-items{
+  .section-heading{
+    padding-bottom: 1em;
+  }
+  .section-title span:before, .section-title span:after{
+    width: 530px;
+  }
+}
 
 #search-topics {
+  font-size: 1em;
   padding: 1em;
   border: .5px solid gray;
+  height: 30px;
+  position: relative;
+  top: -3px;
+  left: 1px;
+  font-size: .7em;
 }
 
 .label {
-  font-size: 1.5em;
+  font-size: 1.3em;
 }
 
 .topic-item {
   h3 {
+    &:hover{
+      color: gray;
+    }
     text-align: left;
     padding: 1em;
-    font-size: 30px;
+    //font-size: 30px;
   }
   border-left: 2px solid black;
   border-bottom: 6px solid black;

src/stylesheets/nav.scss

@@ -10,8 +10,15 @@ nav {
 nav ul li {
     display: inline-block;
     list-style-type: none;
-    padding: 1em;
-    border-right: 1px solid black;
+    padding: 0em 3em;
+    border-right: 2px solid black;
+    .arabic-text{
+        font-size: 1.2em;
+    }
+    .english-text{
+        font-size: 1.2em;
+        font-family: interstate-bold;
+    }
 }
 
 nav ul li:last-child {

src/stylesheets/random-item.scss

@@ -65,7 +65,7 @@ h3.section-title {
     left: 0;
     //position: absolute;
     justify-self: left;
-    padding: 1em 0px;
+    padding: .9em 0px;
     padding-right: 5px;
   }
   // shuffle
@@ -97,4 +97,22 @@ span.english-text.bold-english-text{
 }
 span.arabic-text.bold-arabic-text{
   font-size: 28px;
-}
+}
+
+// highlighted text
+.highlighted-text:hover{
+  background: black;
+  color:white;
+  position: relative;
+}
+//.navbar-link-overlay {
+//  width: calc(100% + 6px);
+//  height: calc(100% - 3px - 2px);
+//  position: absolute;
+//  top: 3px;
+//  left: 0px;
+//  z-index: -1;
+//}
+//.navbar-link-neonblue:hover .navbar-link-overlay{
+//  background: black;
+//}

src/stylesheets/results.scss

@@ -0,0 +1,5 @@
+@import "variables";
+@import "globals";
+@import "header";
+
+/* nav */

src/stylesheets/search.scss

@@ -48,8 +48,8 @@
 
 // filter
 .filter-box{
-    background: $light-gray-color;
-    padding: 1em;
+    //background: $light-gray-color;
+    //padding: 1em;
     margin-bottom: 2em;
     text-align: left;
 }

src/stylesheets/style.scss

@@ -8,4 +8,5 @@
 @import "video-player";
 @import "footer";
 @import "items-list";
+@import "results";
 @import "~video-react/styles/scss/video-react";

src/stylesheets/video-item.scss

@@ -28,3 +28,7 @@
   padding-top: 1em;
   font-weight: normal;
 }
+// FIXME:
+section.video-item:hover {
+  outline: 2px solid black;
+}