Added styling to calendar page

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

src/components/Cards/TrackItemCard.jsx

@@ -2,7 +2,6 @@ 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 }) {
@@ -18,7 +17,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
     }
   };
   return (
-    <div className="card-style-one flex flex-col justify-between w-full h-[200px] bg-white dark:bg-dark-white p-3 pb rounded-2xl cursor-pointer" onClick={()=>{navigate(`/track-action/${datas.widget}`, { replace: true })}}>
+    <div className="card-style-one flex flex-col justify-between w-full h-[220px] bg-white dark:bg-dark-white p-3 pb rounded-2xl cursor-pointer" onClick={()=>{navigate(`/track-action/${datas.widget}`, { replace: true })}}>
       <div className="content">
         {/* thumbnail */}
         <div className="w-full h-40">
@@ -77,7 +76,7 @@ export default function TrackItemCard({ datas, hidden = false }) {
           </div>
         </div>
         {/* user */}
-        <div className="user w-ful -mt-6 mb-2">
+        <div className="user w-full text-center mt-3">
 
           <p className="text-sm text-thin-light-gray dark:text-white">
             <Link

src/components/Subscriptions/SubScriptionTop.jsx

@@ -0,0 +1,36 @@
+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,13 +8,14 @@ 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,6 +684,7 @@ TODO: Responsive ===========================
   width: 100%;
   min-height: 23.2rem;
   border-radius: 7px !important;
+  @apply border border-pink !important;
 }
 
 .dark .react-calendar{
@@ -699,9 +700,13 @@ TODO: Responsive ===========================
 .react-calendar__navigation{
   margin-top: 2px;
   margin-inline: 2px;
+  @apply text-pink !important;
 }
 
-.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
+.react-calendar__tile--active{color: #fff; font-weight: bold;
+  /* background-color: #006edc; */
+  @apply bg-pink;
+}
 .dark .react-calendar__tile--active{color: #fff;}
 
 .react-calendar__navigation button:enabled:hover,
@@ -717,14 +722,16 @@ 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: 4.813rem !important;
+  height: 6.813rem !important;
   transition: all 500ms;
+  /* @apply border border-pink !important; */
 }
 
 .dark .react-calendar__tile{background: #11131F;}