tracking component text centralized

src/components/Calendar/CalendarTable.jsx

@@ -14,7 +14,7 @@ export default function CalendarTable({ className }) {
 
   return (
     <div
-      className={`update-table w-full p-8 bg-white dark:bg-dark-white overflow-hidden rounded-2xl section-shadow min-h-[800px] ${
+      className={`update-table w-full p-8 bg-white dark:bg-dark-white   overflow-hidden rounded-2xl section-shadow min-h-[620px] ${
         className || ""
       }`}
     >

src/components/Cards/TrackItemCard.jsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 // import { toast } from "react-toastify";
 import localImgLoad from "../../lib/localImgLoad";
+import CountDown from "../Helpers/CountDown";
 import Icons from "../Helpers/Icons";
 
 export default function TrackItemCard({ datas, hidden = false }) {

src/components/Helpers/Inputs/InputCom/index.jsx

@@ -9,8 +9,7 @@ export default function InputCom({
   iconName,
   inputHandler,
   value,
-  maxLength,
+  maxLength
-  borderColor
 }) {
   return (
     <div className="input-com">
@@ -22,12 +21,12 @@ export default function InputCom({
           {label}
         </label>
       )}
-      <div className={`input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ${borderColor}`}>
+      <div className="input-wrapper border border-light-purple dark:border-[#5356fb29] w-full rounded-[50px] h-[58px] overflow-hidden relative ">
         <input
           placeholder={placeholder}
           value={value}
           onChange={inputHandler}
-          className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F] focus:ring-0 focus:outline-none"
+          className="input-field placeholder:text-base text-base px-6 text-dark-gray dark:text-white w-full h-full bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none"
           type={type}
           id={name}
           name={name}

src/components/Partials/Layout.jsx

@@ -26,8 +26,6 @@ export default function Layout({ children }) {
     localStorage.removeItem('member_uuid');
     localStorage.removeItem('session_token');
     localStorage.removeItem('status');
-    localStorage.removeItem('layout');
-    localStorage.removeItem('measurement_units');
     // toast.success("Come Back Soon", {
     //   icon: `🙂`,
     // });

src/components/Reminders/AddEditReminder.jsx

@@ -128,7 +128,6 @@ export default function AddEditReminder({ className }) {
                 value={reminder.description}
                 inputHandler={onReminderInputChange}
                 maxLength={100}
-                borderColor='border border-pink'
               />
             </div>
 
@@ -230,7 +229,7 @@ export default function AddEditReminder({ className }) {
                     value={reminder.notes}
                     placeholder="Provide a detailed description of your item."
                     rows="7"
-                    className="w-full h-full px-7 py-4  border border-pink dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
+                    className="w-full h-full px-7 py-4  border border-light-purple dark:border-[#5356fb29]  rounded-[20px] text-dark-gray dark:text-white bg-[#FAFAFA] dark:bg-[#11131F]  focus:ring-0 focus:outline-none resize-none"
                     onChange={onReminderInputChange}
                     maxLength={250}
                   />

src/components/Reminders/ReminderTable.jsx

@@ -205,6 +205,7 @@ export default function ReminderTable({ className }) {
                     })
                   )
                 }
+
           </tbody>
         </table>
       </div>

src/components/Subscriptions/SubScriptionTop.jsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { Link } from "react-router-dom";
-
-export default function SubScriptionTop({ className }) {
-  return (
-    <div
-      className={`create-nft w-full lg:h-[140px] shadow lg:flex rounded-lg justify-between items-center  md:p-9 p-4 bg-white dark:bg-dark-white   border-b dark:border-[#5356fb29] -2 border-pink mb-10 ${
-        className || ""
-      }`}
-    >
-      <div className="lg:w-8/12 w-full mb-8 lg:mb-0">
-        <h1 className="text-2xl text-dark-gray dark:text-white font-bold mb-2">
-         Some how we will say the name of uout current Subscription 
-        </h1>
-        <p className="text-base text-thin-light-gray tracking-wide">
-          Last paymant date + nect pay day 
-        </p>
-      </div>
-      <div className="flex-1 flex lg:justify-end">
-        <div className="flex items-center space-x-5">
-          <Link
-            to="#"
-            className="w-40 h-11 flex justify-center items-center btn-gradient text-base rounded-full text-white"
-          >
-            Some actions
-          </Link>
-          <Link to="#" className="text-dark-gray dark:text-white text-base">
-            <span className=" border-b dark:border-[#5356fb29]  border-dark-gray font-medium">
-              terms and conditions 
-            </span>
-          </Link>
-        </div>
-      </div>
-    </div>
-  );
-}

src/components/Subscriptions/index.jsx

@@ -8,14 +8,13 @@ import CurrentBalanceWidget from "../MyWallet/CurrentBalanceWidget";
 import Layout from "../Partials/Layout";
 //import SellAnaliseStatics from "./SellAnaliseStatics";
 import SellProductHistoryTable from "./SellProductHistoryTable";
-import SubScriptionTop from "./SubScriptionTop";
+
 
 import PricingListTable from "./PricingListTable";
 export default function Subscriptions() {
   return (
     <>
       <Layout>
-        <SubScriptionTop />
         <div className="sell-page-wrapper w-full mb-10">
           <div className="main-wrapper w-full">
             <div className="current_balance-bit-sell-widget w-full lg:h-[436px] mb-11">

src/index.css

@@ -684,7 +684,6 @@ TODO: Responsive ===========================
   width: 100%;
   min-height: 23.2rem;
   border-radius: 7px !important;
-  @apply border border-pink !important;
 }
 
 .dark .react-calendar{
@@ -700,13 +699,9 @@ TODO: Responsive ===========================
 .react-calendar__navigation{
   margin-top: 2px;
   margin-inline: 2px;
-  @apply text-pink !important;
 }
 
-.react-calendar__tile--active{color: #fff; font-weight: bold;
+.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
-  /* background-color: #006edc; */
-  @apply bg-pink;
-}
 .dark .react-calendar__tile--active{color: #fff;}
 
 .react-calendar__navigation button:enabled:hover,
@@ -722,16 +717,14 @@ TODO: Responsive ===========================
 .react-calendar__month-view__weekdays__weekday abbr:where([title]){
   text-decoration: none !important;
   cursor: default;
-  @apply text-pink !important;
 }
 
 .react-calendar__tile{
   border: 1px solid #cfd7e3 !important;
   border-left: 0;
   text-align: right;
-  height: 6.813rem !important;
+  height: 4.813rem !important;
   transition: all 500ms;
-  /* @apply border border-pink !important; */
 }
 
 .dark .react-calendar__tile{background: #11131F;}
@@ -742,7 +735,7 @@ TODO: Responsive ===========================
   appearance: none;
   background: url("data:image/svg+xml,<svg height='10px' width='10px' viewBox='0 0 16 16' fill='%23000000' xmlns='http://www.w3.org/2000/svg'><path d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/></svg>") no-repeat #fafafa;
   background-position: calc(100% - 0.75rem) center !important;
-  @apply border border-pink;
+  border: 0.5px solid #E3E4FE; 
 }
 
 .dark .reminder-select select {
@@ -771,7 +764,6 @@ TODO: Responsive ===========================
   padding: 1.25rem;
   background: #fafafa;
   border-radius: 9999px;
-  @apply border border-pink;
 }
 
 .dark .react-date-picker__wrapper {border: 0.5px solid #25284F;}
@@ -797,5 +789,3 @@ TODO: Responsive ===========================
   cursor: pointer;
   color: #374151;
 }
-
-.animate-fadeIn {@apply transition duration-300}

src/middleware/AuthRoute.jsx

@@ -18,8 +18,6 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
     localStorage.removeItem('member_id');
     localStorage.removeItem('member_uuid');
     localStorage.removeItem('status');
-    localStorage.removeItem('layout');
-    localStorage.removeItem('measurement_units');
     navigate("/login", { replace: true }); // redirects user to login page after session expires
   };
 
@@ -32,15 +30,15 @@ const AuthRoute = ({ redirectPath = "/login", children }) => {
 
 
   useEffect(()=>{
-    let sessionExpReminder = setTimeout(()=>{ //reminds user of session expiry after 8 mins
+    let sessionExpReminder = setTimeout(()=>{ //reminds user of session expiry after 4 mins 240000
       expireSessionReminder()
-    }, 480000)
+    }, 240000) 
 
-    let timeForSessionExpiry = setTimeout(()=>{ //expire session after 10 mins
+    let timeForSessionExpiry = setTimeout(()=>{ //reminds user of session expiry after 4 mins 300000
       expireSession()
-    }, 600000) 
+    }, 300000) 
 
-    return ()=>{ // clears timeout side effect7
+    return ()=>{ // clears timeout side effect
       clearTimeout(sessionExpReminder)
       clearInterval(timeForSessionExpiry)
     }