bug fixes

Author: tsaxena4k

components/Layout.jsx

@@ -1,6 +1,6 @@
 import Head from 'next/head';
 import React, { useEffect } from 'react';
-import Link from 'next/link';
+import { GrEmoji } from 'react-icons/gr';
 import { AiTwotoneHome } from 'react-icons/ai';
 import { FaFacebook, FaGithub, FaLinkedin, FaInstagram } from 'react-icons/fa';
 import { MdNotifications } from 'react-icons/md';
@@ -23,8 +23,8 @@ export default function Layout({ children }) {
             </Head>
             <main>
                 <nav>
-                    <div className="nav-wrapper teal">
-                        <a href="https://github.com/tsaxena4k/Next.js-Mongodb-Authentication-App" target="_blank" className="brand-logo btn left tooltipped" data-position="bottom" data-tooltip="Github Repo"><FaGithub/></a>
+                    <div className="nav-wrapper">
+                        <a className="brand-logo btn left tooltipped" data-position="bottom" data-tooltip="Keep smiling"><GrEmoji /></a>
                         <ul id="nav-mobile" className="right">
                             <li><a className={'waves-effect waves-light btn-small tooltipped'} data-position="bottom" data-tooltip="Home" onClick={() => Router.replace("/")}><AiTwotoneHome /></a></li>
                             <li><a className={"waves-effect waves-light btn-small modal-trigger"} href="#modal1">About</a></li>
@@ -41,7 +41,7 @@ export default function Layout({ children }) {
                 </div>
                 <ul id='dropdown1' className='dropdown-content dropdown-menu'>
                     <li>
-                        <img src="https://scontent.fdel25-1.fna.fbcdn.net/v/t1.0-9/119100373_1478954398979631_272182958440296923_o.jpg?_nc_cat=103&ccb=2&_nc_sid=09cbfe&_nc_ohc=PWiRytDUkykAX-Cm1BG&_nc_ht=scontent.fdel25-1.fna&oh=0850bf94c6b52a3edd41f5d179886cb2&oe=5FB837AD " className="circle responsive-img"/>
+                        <img src="https://scontent.fdel25-1.fna.fbcdn.net/v/t1.0-9/119100373_1478954398979631_272182958440296923_o.jpg?_nc_cat=103&ccb=2&_nc_sid=09cbfe&_nc_ohc=PWiRytDUkykAX-Cm1BG&_nc_ht=scontent.fdel25-1.fna&oh=0850bf94c6b52a3edd41f5d179886cb2&oe=5FB837AD " className="circle responsive-img" />
                         <span>Hey! Welcome</span>
                     </li>
                     <li className="divider" tabIndex="-1"></li>

package-lock.json

@@ -25,6 +25,7 @@
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-icons": "^3.11.0",
+    "sass": "^1.29.0",
     "swr": "^0.3.5",
     "validator": "^13.1.17"
   }

package.json

@@ -1,10 +1,13 @@
 import Layout from '../components/Layout';
-import '../style.css';
+import '../style.scss';
 
 export default function MyApp({ Component, pageProps }) {
+
     return (
-        <Layout>
-            <Component {...pageProps} />
-        </Layout>
+        <>
+            <Layout>
+                <Component {...pageProps} />
+            </Layout>
+        </>
     );
 }

pages/_app.js

@@ -1,5 +1,11 @@
+$primary-color:#80cbc4;
+$secondary-color:#009688;
+
 body{
-    background:#80cbc4;
+    background: $primary-color;
+}
+.nav-wrapper{
+    background-color: $secondary-color ;
 }
 a{
     text-decoration: none;