refactor the project to use scss

src/components/RandomTopic.js

@@ -20,12 +20,12 @@ class RandomTopic extends React.Component {
           {this.props.videos.map(video =>
             <VideoItem id={video.id} key={video.id} title={video.title }/>
           )}
-          <Link to="/topics">
+          {/*<Link to="/topics">*/}
-            <span className="view-all-parents">See All Topics</span>
+            {/*<span className="view-all-parents">See All Topics</span>*/}
-          </Link>
+          {/*</Link>*/}
-          <Link to="/topics">
+          {/*<Link to="/topics">*/}
-          <span className="view-all-items">  See All videos of {this.props.topicName} ({this.props.topicCount})</span>
+          {/*<span className="view-all-items">  See All videos of {this.props.topicName} ({this.props.topicCount})</span>*/}
-          </Link>
+          {/*</Link>*/}
         </Grid>
       </section>
 

src/stylesheets/footer.scss

@@ -0,0 +1,11 @@
+@import "variables";
+/* footer */
+footer {
+  background: $light-gray-color;
+  position: absolute;
+  width: 100%;
+  left: 0;
+  margin-top: 1em;
+  padding: 1em;
+  font-weight: bold;
+}

src/stylesheets/globals.scss

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

src/stylesheets/header.scss

@@ -0,0 +1,25 @@
+@import "variables";
+@import "globals";
+
+/* header */
+header {
+    padding-top: 1em;
+}
+
+.site-logo {
+    max-width: 300px;
+    text-align: center;
+}
+
+.counter-container {
+    position: absolute;
+    display: inline-block;
+    right: 0;
+    top: 0;
+    padding: 2em;
+}
+
+.counter {
+    position: relative;
+    right: 0;
+}

src/stylesheets/nav.scss

@@ -0,0 +1,24 @@
+@import "variables";
+@import "globals";
+@import "header";
+
+/* nav */
+nav {
+    margin: 3em;
+}
+
+nav ul li {
+    display: inline-block;
+    list-style-type: none;
+    padding: 1em;
+    border-right: 1px solid black;
+}
+
+nav ul li:last-child {
+    border-right: none;
+}
+
+nav ul li a {
+    text-decoration: none;
+    color: black;
+}

src/stylesheets/random-item.scss

@@ -0,0 +1,37 @@
+@import "variables";
+
+
+/* section heading*/
+.section-title {
+    padding: 1em;
+    margin-bottom: 1em;
+}
+.section-title::after{
+    width: 100%;
+}
+.section-heading{
+    padding-top: 1em;
+}
+
+/* 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;
+}

src/stylesheets/search.scss

@@ -0,0 +1,40 @@
+@import "variables";
+@import "globals";
+@import "header";
+
+
+/* search */
+.search-button {
+    background: white;
+    bottom: -18px;
+    position: relative;
+}
+
+.search-button img {
+    max-width: 50px;
+}
+
+.search-box {
+    padding: 1em;
+    width: 50%;
+    background: $light-gray-color;
+}
+
+.search-box::placeholder {
+    color: black;
+    text-align: center;
+    font-size: 1.5em;
+    color: gray;
+}
+
+@media screen and (max-width: 700px) {
+    .search-box::placeholder {
+        font-size: 1em;
+    }
+}
+
+@media screen and (max-width: 400px) {
+    .search-box::placeholder {
+        font-size: .75em;
+    }
+}

src/stylesheets/style.scss

@@ -1,206 +1,8 @@
 @import "variables";
-/* globals */
+@import "globals";
-* {
+@import "header";
-    box-sizing: border-box;
+@import "nav";
-    margin: 0px;
+@import "search";
-    border: 0px;
+@import "random-item";
-}
+@import "video-item";
-
+@import "footer";
-/* fonts */
-@font-face {
-    font-family: 'Fedra Arabic';
-    src: url('../assets/fonts/Fedra Arabic Reg_beta.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'bebas';
-    src: url('../assets/fonts/BEBAS___.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'majalla';
-    src: url('../assets/fonts/majalla 2.ttf') format('truetype');
-}
-
-@font-face {
-    font-family: 'MyriadPro Regular';
-    src: url('../assets/fonts/MyriadPro-Regular.otf') format('otf');
-}
-
-@font-face {
-    font-family: 'interstate';
-    src: url('../assets/fonts/Interstate-Regular.bmap') format('bmap'),
-    url('../assets/fonts/Interstate-Bold.bmap') format('bmap');
-}
-
-.text-left {
-    text-align: left;
-}
-
-.arabic-text {
-    font-family: "Fedra Arabic", serif;
-}
-
-.english-text {
-    font-family: majalla, serif;
-}
-
-/* variables */
-
-/* App */
-.App {
-    max-width: 960px;
-    margin: 0 auto;
-}
-
-/* header */
-header {
-    padding-top: 1em;
-}
-
-.site-logo {
-    max-width: 300px;
-    text-align: center;
-}
-
-.counter-container {
-    position: absolute;
-    display: inline-block;
-    right: 0;
-    top: 0;
-    padding: 2em;
-}
-
-.counter {
-    position: relative;
-    right: 0;
-}
-
-/* search */
-.search-button {
-    background: white;
-    bottom: -18px;
-    position: relative;
-}
-
-.search-button img {
-    max-width: 50px;
-}
-
-.search-box {
-    padding: 1em;
-    width: 50%;
-    background: $light-gray-color;
-}
-
-.search-box::placeholder {
-    color: black;
-    text-align: center;
-    font-size: 1.5em;
-    color: gray;
-}
-
-@media screen and (max-width: 700px) {
-    .search-box::placeholder {
-        font-size: 1em;
-    }
-}
-
-@media screen and (max-width: 400px) {
-    .search-box::placeholder {
-        font-size: .75em;
-    }
-}
-
-/* Video item*/
-.video-item {
-    background: #f6f6f6;
-    min-height: 400px;
-    padding: 1em;
-}
-a{
-    text-decoration: none;
-    font-size: 14px;
-    color: black;
-}
-
-.video-thumbnail {
-    transition: all .4s ease-in-out;
-}
-
-.video-thumbnail:hover {
-    transform: scale(1.1);
-}
-
-.video-thumbnail-container {
-    position: relative;
-    overflow: hidden;
-}
-
-/* section heading*/
-.section-title {
-    padding: 1em;
-    margin-bottom: 1em;
-}
-.section-title::after{
-    width: 100%;
-}
-.section-heading{
-    padding-top: 1em;
-}
-
-/* footer */
-footer {
-    background: $light-gray-color;
-    position: absolute;
-    width: 100%;
-    left: 0;
-    margin-top: 1em;
-    padding: 1em;
-    font-weight: bold;
-}
-
-/* nav */
-nav {
-    margin: 3em;
-}
-
-nav ul li {
-    display: inline-block;
-    list-style-type: none;
-    padding: 1em;
-    border-right: 1px solid black;
-}
-
-nav ul li:last-child {
-    border-right: none;
-}
-
-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;
-}

src/stylesheets/video-item.scss

@@ -0,0 +1,30 @@
+@import "variables";
+@import "globals";
+@import "header";
+
+/* Video item*/
+.video-item {
+  background: #f6f6f6;
+  min-height: 400px;
+  padding: 1em;
+}
+
+a {
+  text-decoration: none;
+  font-size: 14px;
+  color: black;
+}
+
+.video-thumbnail {
+  transition: all .4s ease-in-out;
+}
+
+.video-thumbnail:hover {
+  transform: scale(1.1);
+}
+
+.video-thumbnail-container {
+  position: relative;
+  overflow: hidden;
+}
+

src/stylesheets/video-player.scss

@@ -0,0 +1 @@
+@import "variables";