style the video-items.

src/App.js

@@ -18,6 +18,7 @@ class App extends Component {
 
         <div className="App">
           <Header/>
+          <Nav/>
           <Search/>
           <Route exact={true} path="/" component={Home}/>
           <Route path="/topics" component={TopicsList}/>

src/components/RandomTopic.js

@@ -10,18 +10,21 @@ class RandomTopic extends React.Component {
   render() {
     return (
       <section>
-        <SectionHeading title={this.props.topicName}/>
+        <SectionHeading title={this.props.topicName + ' (' +this.props.topicCount + ')'}/>
-        <Grid
+        <Link to="/topics">
+          <span className="">See All Topics</span>
+        </Link>
+          <Grid
           width={450}
           gap={16}>
           {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">
-            See All Topics
+            <span className="view-all-parents">See All Topics</span>
           </Link>
           <Link to="/topics">
-            See All videos of {this.props.topicName} ({this.props.topicCount})
+          <span className="view-all-items">  See All videos of {this.props.topicName} ({this.props.topicCount})</span>
           </Link>
         </Grid>
       </section>

src/components/Search.js

@@ -8,7 +8,7 @@ class Search extends React.Component {
           <img src={require('../assets/images/search.png')} alt=""/>
         </button>
 
-        <input type="text" className="search-box" name="search-box" placeholder="بحث في الأرشيف  search the Archive"/>
+        <input type="text" className="search-box" name="search-box" placeholder="search the Archive   بحث في الأرشيف"/>
       </form>
     )
   }

src/stylesheets/style.css

@@ -31,9 +31,11 @@
     src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
     url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
 }
-.text-left{
+
+.text-left {
     text-align: left;
 }
+
 .arabic-text {
     font-family: "Fedra Arabic", serif;
 }
@@ -70,10 +72,12 @@ header {
     top: 0;
     padding: 2em;
 }
-.counter{
+
+.counter {
     position: relative;
     right: 0;
 }
+
 /* search */
 .search-button {
     background: white;
@@ -111,6 +115,17 @@ header {
 }
 
 /* Video item*/
+.video-item {
+    background: #f6f6f6;
+    min-height: 520px;
+    padding: 1em;
+}
+.sc-bdVaJa.cCHrGu a{
+    text-decoration: none;
+    font-size: 1em;
+    color: black;
+}
+
 .video-thumbnail {
     max-width: 300px;
     transition: all .4s ease-in-out;
@@ -164,3 +179,27 @@ nav ul li a {
     text-decoration: none;
     color: black;
 }
+
+/* view all elements*/
+
+.view-all-parents {
+    color: white;
+    background: black;
+    padding: 1em;
+    position: relative;
+    top: 1em;
+}
+
+.view-all-parents,
+.view-all-items {
+    text-decoration: none;
+}
+
+.view-all-items {
+    color: black;
+    text-decoration: none;
+    padding: 1em;
+    border: 1px solid black;
+    position: relative;
+    top: 1em;
+}