Notifications Popup

Author: gitananun

src/assets/css/main.scss

@@ -672,6 +672,7 @@ footer {
     align-items: center;
     justify-content: center;
     transition: $transition;
+    color: $secondaryTextColor;
     &:hover {
         background: $primaryColor;
         * {
@@ -887,3 +888,73 @@ footer {
         }
     }
 }
+.modal-backdrop {
+    background: rgb($color: $darkTextColor, $alpha: 0.4);
+}
+.modal {
+    opacity: 0;
+    transition: $transition;
+    &.in {
+        opacity: 1;
+    }
+    .close {
+        color: $secondaryTextColor;
+        cursor: pointer;
+        font-size: 20px;
+        margin-right: 10px;
+    }
+    .modal-title {
+        font-size: 18px;
+        font-weight: 700;
+    }
+    .modal-header {
+        border: 0;
+    }
+    .modal-body {
+        margin-bottom: 10px;
+    }
+    .modal-content {
+        padding: 10px 15px;
+        border: 0 !important;
+        .indicator {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            background-color: $primaryColor;
+            border-radius: 50%;
+        }
+    }
+    .modal-footer {
+        .footer-text {
+            cursor: pointer;
+            color: $primaryColor;
+            font-size: 14px;
+        }
+    }
+}
+.notification {
+    padding-bottom: 15px;
+    padding-top: 15px;
+    border-bottom: 1px solid $secondaryColor;
+    transition: $transition;
+    cursor: pointer;
+
+    &:first-child {
+        padding-top: 0px;
+    }
+    &:last-child {
+        border-bottom: 0;
+    }
+    &:hover {
+        padding: 15px;
+        background-color: rgb($color: $secondaryColor, $alpha: 0.3);
+    }
+    .text {
+        color: $darkTextColor;
+    }
+    .timestamp {
+        margin-top: 5px !important;
+        color: $secondaryTextColor;
+        font-size: 12px;
+    }
+}

src/components/layouts/DashboardHeader.tsx

@@ -9,7 +9,7 @@ const DashboardHeader = () => {
           <DashboardHeaderUser />
         </div>
         <div className='col d-flex align-items-center icons justify-content-end gap-4'>
-          <i className='fal fa-bell'></i>
+          <i className='fal fa-bell' data-toggle='modal' data-target='#notifications-modal'></i>
           <span className='divider'>|</span>
           <i className='fal fa-cog'></i>
           <RoundedPrimaryButton title='Logout' />

src/components/shared/Modal.tsx

@@ -0,0 +1,25 @@
+interface Props {
+  id: string;
+  title?: string;
+  children?: any;
+  footerChildren?: any;
+}
+
+const Modal = (props: Props) => {
+  return (
+    <div className='modal' id={props.id} tabIndex={-1} role='dialog'>
+      <div className='modal-dialog' role='document'>
+        <div className='modal-content'>
+          <div className='modal-header'>
+            <p className='modal-title'>Notifications</p>
+            <i className='close fa fa-times' data-dismiss='modal'></i>
+          </div>
+          <div className='modal-body'>{props.children}</div>
+          <div className='modal-footer justify-content-start mx-2'>{props.footerChildren}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

src/components/shared/NotificationItem.tsx

@@ -0,0 +1,26 @@
+import CircularIcon from 'components/common/CircularIcon';
+
+const NotificationItem = () => {
+  return (
+    <div className='notification'>
+      <div className='row'>
+        <div className='col-8'>
+          <div className='row'>
+            <div className='col-1'>
+              <span className='indicator'></span>
+            </div>
+            <div className='col'>
+              <p className='text'>Your password has been changed successfully.</p>
+              <p className='timestamp'>Jul 23, 2021 at 09:15 AM</p>
+            </div>
+          </div>
+        </div>
+        <div className='col-4 d-flex align-items-center justify-content-end'>
+          <CircularIcon iconClassName='fal fa-lock' />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NotificationItem;

src/components/shared/NotificationsModal.tsx

@@ -0,0 +1,18 @@
+import Modal from 'components/shared/Modal';
+import NotificationItem from './NotificationItem';
+
+const NotificationsModal = () => {
+  return (
+    <Modal
+      id='notifications-modal'
+      title='Notifications'
+      footerChildren={<p className='footer-text'>View all notifications</p>}
+    >
+      {[1, 2, 3, 4].map(() => (
+        <NotificationItem />
+      ))}
+    </Modal>
+  );
+};
+
+export default NotificationsModal;

src/views/Dashboard.tsx

@@ -2,6 +2,7 @@ import DashboardAccountTab from 'components/dashboard/DashboardAccountTab';
 import DashboardHelpTab from 'components/dashboard/DashboardHelpTab';
 import DashboardNavTabs from 'components/dashboard/DashboardNavTabs';
 import DashboardPasswordTab from 'components/dashboard/DashboardPasswordTab';
+import NotificationsModal from 'components/shared/NotificationsModal';
 import DashboardLayout from './layouts/DashboardLayout';
 
 const Dashboard = () => {
@@ -21,6 +22,7 @@ const Dashboard = () => {
           </div>
         </div>
       </div>
+      <NotificationsModal />
     </DashboardLayout>
   );
 };