images centered

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 || ""
       }`}
     >
@@ -41,4 +41,4 @@ export default function CalendarTable({ className }) {
 
     </div>
   );
-}
+}

src/components/Cards/TrackItemCard.jsx

@@ -17,17 +17,17 @@ export default function TrackItemCard({ datas, hidden = false }) {
     }
   };
   return (
-    <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="card-style-one flex flex-col justify-between w-full h-[190px] bg-white dark:bg-dark-white p-3 rounded-2xl cursor-pointer" onClick={()=>{navigate(`/track-action/${datas.widget}`, { replace: true })}}>
       <div className="content">
         {/* thumbnail */}
-        <div className="w-full h-40">
+        <div className="w-full h-32">
           {/* thumbnail image */}
           <div
             className="thumbnail w-full h-full rounded-xl overflow-hidden px-4 pt-4"
             style={{
               background: `url(${localImgLoad(
                 `images/${datas.thumbnil}`
-              )}) 0% 0% / cover no-repeat`,
+              )}) 0% 0% / 100% no-repeat`,
             }}
           >
             <div className="product-options flex justify-between relative">
@@ -76,12 +76,12 @@ export default function TrackItemCard({ datas, hidden = false }) {
           </div>
         </div>
         {/* user */}
-        <div className="user w-full text-center mt-3">
+        <div className="user w-full text-center">
 
           <p className="text-sm text-thin-light-gray dark:text-white">
             <Link
             to={`/track-action/${datas.widget}`}
-            className="text-xl font-bold text-dark-gray dark:text-white mb-2 capitalize line-clamp-1"
+            className="text-xl font-bold text-dark-gray dark:text-white capitalize line-clamp-1"
             >
             {datas.title}
             </Link>

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;
-  /* background-color: #006edc; */
-  @apply bg-pink;
-}
+.react-calendar__tile--active{color: #fff; font-weight: bold; background-color: #006edc;}
 .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;}