Roadmap

client/src/components/App/App.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, lazy, Suspense } from "react";
+import React, { useContext, useEffect, useState,lazy, Suspense } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import Store, { InfoContext, AuthContext } from "../../state/Store";
 import { loadUser } from "../../state/auth/authActions";
@@ -57,6 +57,7 @@ const WriteArticle = lazy(() => import("../../pages/WriteArticle"));
 const CertificateVerification = lazy(() =>
   import("../../pages/CertificateVerification")
 );
+const UpdateModal = lazy(() => import("../Updates/UpdateModal"));
 const About = lazy(() => import("../../pages/About"));
 const Contact = lazy(() => import("../../pages/Feedback"));
 // const Home = lazy(() => import("../../pages/Home"));
@@ -79,6 +80,7 @@ const Logout = lazy(() => import("../../pages/Logout"));
 function App() {
   const auth = useContext(AuthContext);
   const info = useContext(InfoContext);
+
   useEffect(() => {
     loadUser(auth.dispatch);
   }, []);
@@ -254,9 +256,21 @@ function App() {
   );
 }
 function AppWithStore() {
+  const [updateModelOpen, setUpdateModelOpen] = useState(true);
+  const closeModal = () => {
+    setUpdateModelOpen(false);
+  }
   return (
     <Store>
       <App />
+     {updateModelOpen && 
+      <UpdateModal 
+        modalOpen={updateModelOpen} 
+        closeModal={closeModal} 
+        setModalOpen={setUpdateModelOpen}
+        modalHeader = 'Roadmap Feature'
+        buttonContent = 'Start' 
+        msg='We have added Roadmap feature. Want to take a look?'/>}
     </Store>
   );
 }

client/src/components/Roadmaps/RoadmapCard.js

@@ -8,15 +8,15 @@ import htmllogo from '../../../public/icons/HTML.svg'
 const miniCard = (title,icon) => {
   let url = slugify(title.toLowerCase(), {remove: /[*+~.()'"!:@//\\?]/g})
   return (
+    <Link to={`/roadmaps/${url}`} className='mini-card-wrapper'>
       <div className='miniCard'>
-        <Link to={`/roadmaps/${url}`}>
           <div className='circleIcon'>
             {!icon && <img src={htmllogo} alt={title}/>}
             {icon && <img src={icon} alt={title}/>}
           </div>
           <div className='titleHolder'>{title}</div>
-        </Link>
-      </div>
+        </div>
+    </Link>
   )
 }
 

client/src/components/Roadmaps/roadmapCard.scss

@@ -28,7 +28,7 @@
   .cardHeader {
     position: relative;
     margin-bottom: 1rem;
-    font-family: "Poppins", sans-serif;
+    font-family: "Nunito", sans-serif;
     font-weight: 500;
     text-transform: capitalize;
   }
@@ -47,17 +47,17 @@
   }
 }
 
-.miniCard {
+.mini-card-wrapper{
   width: 15%;
   height: 12rem;
   min-height: fit-content;
   margin: 0.5rem;
   padding: 2rem 1rem;
   padding-bottom: 1rem;
   background-color: rgb(225,224,222);
-  font-family: "Poppins", sans-serif;
+  font-family: "Nunito", sans-serif;
   font-weight: 600;
-  font-size: 0.9em;
+  font-size: 0.8em;
   text-align: center;
   text-transform: capitalize;
   border-radius: 18px;
@@ -86,6 +86,6 @@
     box-shadow: 0px 2px 5px #888;
     background-color: rgba($color: #fff, $alpha: 0.2);
     padding: 0.5em 0.6em;
-    margin-bottom: 1rem;
+    margin-bottom: 2rem;
   }
 }

client/src/components/Roadmaps/roadmaps.scss

@@ -12,7 +12,7 @@ $color-primary: rgb(236, 124, 45);
     letter-spacing: 0em;
     font-size: 2em;
     margin-top: 0px;
-    font-family: "Poppins", sans-serif;
+    font-family: "Nunito", sans-serif;
     margin-bottom: 1rem;
     font-weight: bolder;
   }

client/src/components/Updates/UpdateModal.js

@@ -0,0 +1,40 @@
+import React from "react";
+import { Modal, ModalHeader, ModalBody, ModalFooter, Button } from "reactstrap";
+// import { Link } from "react-router-dom";
+import './updateModal.scss'
+const UpdateModal = ({
+  modalOpen,
+  setModalOpen,
+  msg,
+  modalHeader,
+  buttonContent,
+}) => {
+  const toggle = () => {
+    console.log('closing modal')
+    setModalOpen(false);
+  };
+
+  return (
+    <Modal isOpen={modalOpen} toggle={toggle}>
+      <ModalHeader toggle={toggle} 
+        className='modal-header' 
+        cssModule={{'modal-title': 'w-100 text-center'}}>
+          <i class="fas fa-road"/>
+          <div className='modal-heading'>{modalHeader}</div>
+          <div className='modal-body'>{msg}</div>
+        </ModalHeader>
+      {/* <ModalBody className='modal-body'>{msg}</ModalBody> */}
+      <ModalFooter className='modal-footer justify-content-center'>
+        <a href='/roadmaps'>
+        <Button
+          color="warning"
+          className="start-btn"
+        >
+          {buttonContent}
+        </Button>
+        </a>
+      </ModalFooter>
+    </Modal>
+  );
+};
+export default UpdateModal;

client/src/components/Updates/updateModal.scss

@@ -0,0 +1,28 @@
+.modal-header {
+  background-color: #EC8C24;
+  text-align: center;
+  color: #fff;
+  border: none;
+  overflow-y: hidden;
+  i {
+    background-color: #fff;
+    color: #EC8C24;
+    padding: 0.5rem;
+    border-radius: 5px;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .modal-heading {
+    font-size: 1em;
+    font-weight: 600;
+  }
+  .modal-body {
+    margin: 0;
+    font-size: 0.6em;
+    padding: 0;
+  }
+}
+
+.start-btn {
+  margin:0 auto;
+}