Refactor(scss): better Materialize-css sass file integration

Author: Armour

frontend/src/components/Footer/footer.scss

@@ -1,11 +1,9 @@
 import * as React from 'react';
 
-const styles = require('./footer.scss');
-
 export class Footer extends React.Component {
   public render() {
     return (
-      <footer className={`page-footer ${styles.footer}`}>
+      <footer className='page-footer'>
         <div className='container'>
           <div className='row'>
             <div className='col l6 s12'>

frontend/src/components/Footer/footer.tsx

@@ -5,8 +5,6 @@ import { Link } from 'react-router-dom';
 import { Dropdown } from 'components/Dropdown';
 import { IGlobalState } from 'types/global';
 
-const styles = require('./header.scss');
-
 // Component
 
 interface IHeaderProps {
@@ -33,7 +31,7 @@ class HeaderComponent extends React.Component<IHeaderProps> {
   public render() {
     return (
       <div>
-        <nav className={styles.header}>
+        <nav>
           <div className='nav-wrapper'>
             <div className='container'>
               <a className='brand-logo'><Link to='/'>Logo</Link></a>

frontend/src/components/Header/header.scss

@@ -2,8 +2,6 @@ import * as React from 'react';
 
 import { CAROUSEL_AUTOPLAY_INTERVAL, TOAST_DISPLAY_DURATION, TOOLTIP_DELAY_TIME } from './constants/carousel';
 
-const styles = require('./carousel.scss');
-
 const tooltipConfig: Partial<M.TooltipOptions> = {
   enterDelay: TOOLTIP_DELAY_TIME,
   position: 'top',
@@ -50,7 +48,7 @@ export class Carousel extends React.Component {
 
   public render() {
     return (
-      <div className={`carousel carousel-slider center z-depth-3 ${styles.carousel}`} data-indicators='true'>
+      <div className='carousel carousel-slider center z-depth-3' data-indicators='true'>
         <div className='carousel-fixed-item center'>
           <a className='btn tooltipped waves-effect white grey-text text-darken-2' data-position={tooltipConfig.position} data-delay={tooltipConfig.enterDelay} data-tooltip={tooltipConfig.html} onClick={this.displayToast} role='button'>Focus me!</a>
         </div>

frontend/src/components/Header/header.tsx

@@ -1,5 +1,3 @@
-@import '../../homePage';
-
 .pushpin {
-  @extend .home-page-block;
+  height: 825px;
 }

frontend/src/pages/HomePage/components/Carousel/carousel.scss

@@ -1,4 +1,3 @@
 .home-page-block {
-  height: 825px;
-  width: 100%;
+  height: 820px;
 }

frontend/src/pages/HomePage/components/Carousel/carousel.tsx

@@ -5,15 +5,6 @@
   @extend .react-block;
 }
 
-@media only screen and (max-width: $small-screen-size) {
-.fetch-note-layout {
-    .btn {
-      width: 80%;
-      max-width: 300px;
-    }
-  }
-}
-
 .fetch-note-title {
   @extend .react-block-title;
 }
@@ -29,3 +20,10 @@
 .fetch-note-filter-btn {
   width: 30%;
 }
+
+@media only screen and (max-width: $small-screen) {
+  .fetch-note-filter-btn {
+    width: 80%;
+    max-width: 300px;
+  }
+}

frontend/src/pages/HomePage/components/Pushpin/pushpin.scss

@@ -45,7 +45,7 @@ class FetchNoteComponent extends React.Component<IFetchNoteProps> {
         </li>
       ),
     );
-    const noteListCollection = <ul className={`collection ${styles['fetch-note-collection}']}`}> {noteList} </ul>;
+    const noteListCollection = <ul className={`collection ${styles['fetch-note-collection']}`}> {noteList} </ul>;
     const errorPanel = (
       <div className={`card-panel red ${styles['fetch-note-error-panel']}`}>
         <span className='white-text'>{this.props.error}</span>