calender size formatted

src/components/Calendar/CalendarTable.jsx

@@ -34,7 +34,7 @@ export default function CalendarTable({ className }) {
 
 
       <div>
-      <Calendar onChange={onChange} value={value} />
+      <Calendar onChange={onChange} value={value} calendarType="US" />
     </div>
 
 

src/components/Reminders/ReminderTable.jsx

@@ -1,13 +1,11 @@
 import React, { useEffect, useState } from "react";
-import { Link } from "react-router-dom";
 import dataImage1 from "../../assets/images/data-table-user-1.png";
 import usersService from "../../services/UsersService";
 import SelectBox from "../Helpers/SelectBox";
 
-
 export default function ReminderTable({ className }) {
   const [userReminders, setUserReminders] = useState([]);
-  const filterCategories = ["All Categories", "Appointments","Exercise/Gym", "Medication"];
+
   const api = new usersService();
   useEffect(() => {
     getUserReminders();
@@ -16,13 +14,16 @@ export default function ReminderTable({ className }) {
   const getUserReminders = async () => {
     try {
       const res = await api.getUserReminders();
+     
       setUserReminders(res.data.reminders);
+      console.log("res", res);
       
     } catch (error) {
       console.log("Error from User Reminders", error);
     }
   };
 
+  const filterCategories = ["All Categories", "Doctors Visit", "Medications"];
   const [selectedCategory, setCategory] = useState(filterCategories[0]);
   return (
     <div
@@ -43,21 +44,6 @@ export default function ReminderTable({ className }) {
           contentBodyClasses="w-auto min-w-max"
         />
       </div>
-      {userReminders.map((reminders, index) =>{
-        if (userReminders.length < 1 ) {
-          return(
-            <div  className="lg:flex justify-center">
-              <div style={{ transform: 'translateY(150px)' }}>
-                <Link
-                  to="/add-reminder"
-                  className="btn-gradient lg:flex hidden w-[300px] h-[50px] rounded-full text-white justify-center items-center"
-                >
-                  0 Reminders Start Reminder
-                </Link>
-              </div>
-          </div>
-          )} else{
-            return (
       <div className="relative w-full overflow-x-auto sm:rounded-lg">
         <table className="w-full text-sm text-left text-gray-500 dark:text-gray-400">
           <tbody>
@@ -86,7 +72,7 @@ export default function ReminderTable({ className }) {
                       </div>
                       <div className="flex flex-col">
                         <h1 className="font-bold text-xl text-dark-gray dark:text-white whitespace-nowrap">
-                              {reminders.description.substring(0,30) + "..."}
+                        {reminders.description}
                         </h1>
                         <span className="text-sm text-thin-light-gray">
                         
@@ -334,22 +320,6 @@ export default function ReminderTable({ className }) {
           </tbody>
         </table>
       </div>
-
-            )
-           
-    
-
-          }
-      })} 
-      
-         
-        
-        
-           
-             
-
-
-      
     </div>
   );
 }

src/index.css

@@ -670,3 +670,38 @@ TODO: Responsive ===========================
     @apply mb-2;
   }
 }
+
+/* Calendar */
+.react-calendar{
+  width: 100%;
+  min-height: 23.2rem;
+  border-radius: 7px !important;
+}
+
+.react-calendar__navigation{
+  margin-top: 2px;
+  margin-inline: 2px;
+}
+
+.react-calendar__navigation button:enabled:hover,
+.react-calendar__navigation button:enabled:focus{
+  @apply rounded-full transition duration-500
+}
+
+.react-calendar__month-view__days{
+  display: grid !important;
+  grid-template-columns: repeat(7, 1fr);
+}
+
+.react-calendar__month-view__weekdays__weekday abbr:where([title]){
+  text-decoration: none !important;
+  cursor: default;
+}
+
+.react-calendar__tile{
+  border: 1px solid #cfd7e3 !important;
+  border-left: 0;
+  text-align: right;
+  height: 4.813rem !important;
+  transition: all 500ms;
+}