added profile info update card

.eslintignore

@@ -1,2 +1,4 @@
 node_modules/
-public/
+public/
+rules: { ... 'react/prop-types': ['off'], 
+}

.eslintrc

@@ -14,7 +14,7 @@
     "import/no-extraneous-dependencies": 0,
     "react/jsx-filename-extension": 0,
     //  proptypes is not required : 
-    "react/prop-types": 2,
+    "react/prop-types":0,
     "no-unused-vars":0,
     "react/jsx-props-no-spreading":0,
     // Label must have a htmlFor attr

src/components/App/App.js

@@ -11,14 +11,16 @@ import LoadingSimple from '../UI/LoadingSimple/LoadingSimple'
 // Routes and Layout for public/unauthorized user
 import Layout from '../Layouts/PublicLayout'
 
+import ProfilePage from '../../pages/Profile/ProfilePage'
+
 const App = ({ title }) => {
   // Get current location. if it's homepage =>  rendering landing
   const location = useLocation()
 
   let layoutToDisplay = ''
 
   if (location.pathname === '/') {
-    layoutToDisplay = <Layout />
+    layoutToDisplay = <ProfilePage />
   }
   return <div className={styles.Container}>{layoutToDisplay}</div>
 }

src/pages/Profile/Components/ProfileInfoUpdate.js

@@ -0,0 +1,35 @@
+import React from 'react'
+import styles from './ProfileInfoUpdate.module.scss'
+import TickMark from '../assets/TickMark.svg'
+import close from '../assets/close.svg'
+
+export default () => (
+  <div className={styles.CoursesContainer}>
+    <div className={styles.CompleteMark}>
+      <img src={TickMark} alt="Your imformation is saved" />
+    </div>
+    <div className={styles.title}>
+      <p>Success!</p>
+    </div>
+    <div className={styles.description}>
+      <span>Your profile information was updated</span>
+    </div>
+    <div className={styles.closeApp}>
+      <img src={close} alt="close application" />
+    </div>
+  </div>
+)
+
+/*  <div className={styles.closeApp}>
+      <img src={close} alt="close application" />
+    </div>
+    <div className={styles.completedMark}>
+      <img src={complete} alt="attandance complete" />
+    </div>
+    <p>Take attandance sucessfully</p>
+    <div className={styles.bottom}>
+      <button className={styles.btn}>Live Lecture</button>
+      <h6>Historic Attandance</h6>
+    </div>
+
+    */

src/pages/Profile/Components/ProfileInfoUpdate.module.scss

@@ -0,0 +1,61 @@
+@import 'sass/variables';
+
+* {
+  box-sizing: border-box;
+}
+body {
+  background-image: url('../assets/Group\ 1595.png');// delete this when the profile page is made , it will pop up over that page
+  background-size: 720px 1010px; // delete this when the profile page is made 
+  background-repeat: no-repeat;// delete this when the profile page is made 
+  background-position-x: center;// delete this when the profile page is made 
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  margin: 0;
+}
+
+.CoursesContainer {
+
+  background-color:$secondary-color;
+  border-radius: 5px;
+  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2);
+  max-width: 100%;
+  padding: 20px;
+  overflow: hidden;
+  width: 440px;
+  height: 120px;
+  display: inline-grid;
+  grid-template-columns: 47px 1fr 24px;
+  grid-template-rows: 50% 50%;
+  grid-template-areas:
+    'tickmark Title closeApp'
+    'tickmark description closeApp';
+  .CompleteMark {
+    grid-area: tickmark;
+    align-self: center;
+    > img {
+      height: 34px;
+      width: 47px;
+      padding-right: 10px;
+    }
+  }
+
+  .title {
+    grid-area: Title;
+    font-size: 18px;
+    color: $primary-color;
+    align-self: end;
+  }
+  .closeApp {
+    grid-area: closeApp;
+  }
+  .description {
+    grid-area: description;
+    font-size: 16px;
+    color: #707070;
+    align-self: start;
+  }
+}
+

src/pages/Profile/ProfilePage.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ProfileInfoUpdated from './Components/ProfileInfoUpdate'
+import styles from './ProfilePage.module.scss'
+
+const ProfilePage = props => {
+  return (
+    <div className={styles.mainBody}>
+      <ProfileInfoUpdated />
+    </div>
+  )
+}
+
+ProfilePage.propTypes = {}
+
+export default ProfilePage

src/pages/Profile/ProfilePage.module.scss

@@ -0,0 +1,4 @@
+.mainBody{
+    padding: 3rem;
+  }
+