style the heading titles

src/assets/images/search.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 64.5 64" style="enable-background:new 0 0 64.5 64;" xml:space="preserve">
+<g id="XMLID_12_">
+	<g>
+		<g id="XMLID_14_">
+			<g>
+				<path d="M56,63.7L40.9,48.5c-4.1,2.7-9.1,4.3-14.5,4.3C11.8,52.8,0,41,0,26.4C0,11.8,11.8,0,26.4,0C41,0,52.8,11.8,52.8,26.4
+					c0,5.1-1.4,9.9-3.9,13.9l15.2,15.3c0.8,0.8,0.1,2.7-1.5,4.4l-2.3,2.3C58.8,63.8,56.8,64.5,56,63.7z M44,26.4
+					c0-9.7-7.9-17.6-17.6-17.6c-9.7,0-17.6,7.9-17.6,17.6c0,9.7,7.9,17.7,17.6,17.7C36.1,44.1,44,36.1,44,26.4z"/>
+			</g>
+		</g>
+	</g>
+</g>
+</svg>

src/components/RandomTopic.js

@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import VideoItem from "./VideoItem";
 import RandomItemTitle from "./SectionHeading";
 import {Link} from 'react-router-dom';
+
 class RandomTopic extends React.Component {
 
   shuffleTopic() {
@@ -12,26 +13,33 @@ class RandomTopic extends React.Component {
 
   render() {
     return (
-      <section>
-        <h2 className="section-heading">from the Archive Topics - من مواضيع الارشيف</h2>
-        <RandomItemTitle title={this.props.topicName}
-                         count={this.props.topicCount}
-                         src={'/results/topic/' + this.props.topicName}
-        />
+      <section className="random-topic">
+        <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>
+          </span>
+        </h2>
+
         <Grid
+          className={"buttons-grid"}
           width={450}
         >
           {/* View all topics button*/}
-          <Link to="/topics">
+          <Link className="view-topics-link" to="/topics">
             <button className="view-all-topics">
-              <span className="english-text">All Topics - </span>
-              <span className="arabic-text"> جميع المواضيع </span>
+              <span className="english-text"> all topics  	&nbsp; </span>
+              <span className="arabic-text"> 	 جميع المواضيع	</span>
             </button>
           </Link>
           {/* Shuffle button */}
           <button className="shuffle-button" onClick={this.shuffleTopic.bind(this)}>
-            <span className="english-text">Shuffle Topics - </span>
             <span className="arabic-text"> موضوع عشوائي </span>
+            <span className="english-text">&nbsp; shuffle topics  </span>
+            &nbsp;
             <i className="fa fa-random"></i>
           </button>
         </Grid>
@@ -43,6 +51,10 @@ class RandomTopic extends React.Component {
             <VideoItem id={video.id} key={video.id} title={video.title}/>
           )}
         </Grid>
+        <RandomItemTitle title={this.props.topicName}
+                         count={this.props.topicCount}
+                         src={'/results/topic/' + this.props.topicName}
+        />
       </section>
 
     )

src/components/Search.js

@@ -5,9 +5,15 @@ class Search extends React.Component {
     return (
       <form action="">
         <button className="search-button" type='submit'>
-          <img src={require('../assets/images/search.png')} alt=""/>
+          <img src={require('../assets/images/search.svg')} alt=""/>
         </button>
-
+        {/*<div className="search-box">*/}
+          {/*<input type="text" required/>*/}
+            {/*<div className="placeholder">*/}
+              {/*<span className="english-text">Search</span>*/}
+              {/*<span className="arabic-text">بحث في الأرشيف - </span>*/}
+            {/*</div>*/}
+        {/*</div>*/}
         <input type="text" className="search-box" name="search-box" placeholder="search the Archive   بحث في الأرشيف"/>
       </form>
     )

src/stylesheets/globals.scss

@@ -33,18 +33,34 @@
   url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
 }
 
+@font-face {
+  font-family: 'interstate-light';
+  src: url('../assets/fonts/Interstate_Light.ttf') format('truetype');
+}
+
+@font-face {
+  font-family: 'interstate-bold';
+  src: url('../assets/fonts/Interstate-Bold.ttf') format('truetype');
+}
+
 .text-left {
   text-align: left;
 }
 
 .arabic-text {
-  font-family: "Fedra Arabic", serif;
-  padding: .3em;
+  font-family: "Fedra Arabic";
+  //padding: .3em;
+  font-weight: normal;
 }
 
 .english-text {
-  font-family: majalla, serif;
-  padding: .3em;
+  font-family: interstate-light, serif;
+  //padding: .3em;
+}
+
+.bold-english-text {
+  font-family: interstate-bold, serif;
+  //padding: 0.3em;
 }
 
 /* App */
@@ -77,7 +93,7 @@ a {
   color: black;
 }
 
-.normal-link{
+.normal-link {
   text-decoration: underline;
   color: $normal-link-color;
 }

src/stylesheets/random-item.scss

@@ -3,13 +3,21 @@
 
 .section-heading,
 .section-subheading {
-  padding-top: 1em;
+  padding-top: 2em;
 }
-.section-title{
+
+.section-title {
+  //padding-top: 1em;
   line-height: 0.5;
   text-align: center;
-  padding: 1em;
+  //padding: 1em;
 }
+
+// the bottom section
+h3.section-title {
+  padding-top: 1em;
+}
+
 // --------------------------
 //        add horizontal lines around the section title.
 //----------------------------
@@ -18,19 +26,77 @@
   content: "";
   position: absolute;
   height: 8px;
-  border-bottom: 3px solid black;
+  border-bottom: 1.7px solid black;
   top: 0;
   width: 400px;
 }
+
 .section-title span:before {
   right: 100%;
-  margin-right: 15px;
+  margin-right: 10px;
 }
+
 .section-title span:after {
   left: 100%;
-  margin-left: 15px;
+  margin-left: 10px;
 }
+
 // Topics
-.random-topics{
-  margin-top: 2em;
+.random-topics {
+  margin-top: .5em;
+}
+
+.random-section-title {
+  bottom: -3px;
+
+}
+
+// buttons
+.random-topic {
+  button {
+    background: white;
+  }
+  // topics
+  .view-topics-link {
+    justify-self: left;
+    bottom: 36px;
+    position: relative;
+    padding: 0px;
+  }
+  .view-all-topics {
+    left: 0;
+    //position: absolute;
+    justify-self: left;
+    padding: 1em 0px;
+    padding-right: 5px;
+  }
+  // shuffle
+  .shuffle-button {
+    justify-self: right;
+    bottom: 36px;
+    position: relative;
+    padding: 10px;
+    padding-right: 0px;
+  }
+}
+
+// fonts
+.shuffle-button, .view-all-topics {
+  span.arabic-text {
+    font-size: 18px;
+  }
+  span.english-text {
+    font-size: 16px;
+  }
+}
+
+.buttons-grid {
+  height: 8px;
+}
+
+span.english-text.bold-english-text{
+  font-size: 28px;
+}
+span.arabic-text.bold-arabic-text{
+  font-size: 28px;
 }

src/stylesheets/search.scss

@@ -5,19 +5,24 @@
 
 /* search */
 .search-button {
-    background: white;
-    bottom: -18px;
+    background: transparent;
+    bottom: -13px;
     position: relative;
+    right: -39px;
+    padding: 0px;
+    margin: 0px;
+    width: 126px;
 }
 
 .search-button img {
-    max-width: 50px;
+    max-width: 26%;
 }
 
 .search-box {
-    padding: 1em;
-    width: 50%;
+    padding: .9em 1em .9em 1em;
+    width: 30%;
     background: $light-gray-color;
+    margin-right: 7em;
 }
 
 .search-box::placeholder {
@@ -25,6 +30,8 @@
     text-align: center;
     font-size: 1.5em;
     color: gray;
+    font-family: "Fedra Arabic";
+    font-weight: normal;
 }
 
 @media screen and (max-width: 700px) {
@@ -46,3 +53,7 @@
     margin-bottom: 2em;
     text-align: left;
 }
+
+.App form{
+    margin-top: 2em;
+}

src/stylesheets/variables.scss

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

src/stylesheets/video-item.scss

@@ -7,6 +7,7 @@
   background: $light-gray-color;
   min-height: 300px;
   padding: 1em;
+
 }
 
 .video-thumbnail {
@@ -26,4 +27,5 @@
 
 .video-title {
   padding-top: 1em;
+  font-weight: normal;
 }