merged the two actions in bubble

.env

@@ -13,5 +13,5 @@ REACT_APP_USERS_ENDPOINT = "https://devapi.mermsemr.com/en/desktop/api/v2/myfitu
 
 REACT_APP_SESSION_EXPIRE_MINUTES = 5
 
-REACT_APP_TRACKING = "Tracking"
-REACT_APP_RESOURCES = "Resources"
+REACT_APP_TRACKING="Tracking"
+REACT_APP_RESOURCES="Resources"

src/components/Helpers/Icons.jsx

@@ -1,4 +1,11 @@
 import React from "react";
+import Calendar from "../../assets/images/icons/myFit_calendar.png";
+import History from "../../assets/images/icons/myFit_history.png";
+import Profile from "../../assets/images/icons/myFit_profile.png";
+import Reminder from "../../assets/images/icons/myFit_reminder.png";
+import Resources from "../../assets/images/icons/myFit_resources.png";
+import Settings from "../../assets/images/icons/myFit_settings.png";
+import Tracking from "../../assets/images/icons/myFit_tracking.png";
 
 export default function Icons({ name }) {
   return (
@@ -468,7 +475,14 @@ export default function Icons({ name }) {
         >
           <rect y="0.823242" width="20" height="2.35294" rx="1.17647" />
         </svg>
-      ) : (
+      ) : name === "settings" ? (<img src={Settings} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "tracking" ? (<img src={Tracking} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "resources" ? (<img src={Resources} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "reminder" ? (<img src={Reminder} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "profile" ? (<img src={Profile} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "History" ? (<img src={History} alt="image" className="w-[24px] h-[24px]" />)
+        : name === "calendar" ? (<img src={Calendar} alt="image" className="w-[24px] h-[24px]" />)
+        : (
         ""
       )}
     </>

src/components/Partials/Sidebar.jsx

@@ -116,11 +116,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                   } `}
                   to="/"
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
                     <Icons name="dashboard" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white dark:focus:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -136,16 +136,16 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="reminder" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple dark:hover:text-white dark:focus:text-white text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
                    Reminders
-                    <span className="absolute left-24 -top-1 text-sm flex justify-center items-center w-5 h-5 primary-gradient rounded-full text-white">
+                    <span className={`absolute left-24 -top-1 text-sm flex primary-gradient justify-center items-center w-5 h-5 rounded-full text-white ${'dark' ? 'dark-primary-gradient text-purple' : '', userReminders.length == 0 ? 'hidden' : ''}`}>
                       {userReminders.length > 0 && userReminders.length}
                     </span>
                   </span>
@@ -159,11 +159,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="tracking" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -179,11 +179,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="active-bids" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="calendar" />
                   </span>
                   <span
-                    className={`item-content relative group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
+                    className={`item-content relative group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -199,11 +199,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="star" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="resources" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -220,11 +220,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="history" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="History" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -249,11 +249,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="people-two" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="profile" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >
@@ -269,11 +269,11 @@ export default function Sidebar({ sidebar, action, logoutModalHandler }) {
                     sidebar ? "justify-start space-x-3.5" : "justify-center")
                   }`}
                 >
-                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple  rounded-full text-dark-gray dark:text-white dark:text-lighter-gray">
-                    <Icons name="setting" />
+                  <span className="item-icon group-hover:bg-purple group-hover:text-white w-8 h-8 flex justify-center items-center transition-all duration-300 ease-in-out  bg-light-purple dark:bg-dark-light-purple rounded-full">
+                    <Icons name="settings" />
                   </span>
                   <span
-                    className={`item-content group-hover:text-purple text-[18px] transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
+                    className={`item-content group-hover:text-purple text-[18px] dark:hover:text-white transition-all duration-300 ease-in-out text-lighter-gray relative font-medium ${
                       sidebar ? "active flex-1" : "w-0"
                     }`}
                   >

src/index.css

@@ -47,6 +47,10 @@ html {
   background-size: cover; */
 }
 
+.dark .dark-primary-gradient {
+  background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(188,73,190,1) 100%);
+}
+
 .primary-home {
   /*background: linear-gradient(134.38deg, #f539f8 0%, #284f64 43.55%, #1a3544 104.51%); */
   background-image: url("./assets/images/left-myft.jpg");
@@ -309,6 +313,9 @@ input[type="number"] {
 .menu-setting-items .nav-item.active span.item-content {
   @apply text-purple;
 }
+.dark .menu-setting-items .nav-item.active span.item-content {
+  @apply text-white
+}
 /* TODO: =================================layout end================================ */
 /* TODO: =================================HomePage ================================ */
 .home-page-wrapper .hero-slider .slick-slider .slick-dots li {