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/Partials/Layout.jsx

@@ -95,7 +95,7 @@ export default function Layout({ children }) {
       {logoutModal && (
         <ModalCom action={logoutModalHandler} situation={logoutModal}>
           <div className="logout-modal-wrapper lg:w-[460px] h-full lg:h-auto bg-white dark:bg-dark-white   lg:rounded-2xl">
-            <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b border-light-purple dark:border-[#5356fb29] ">
+            <div className="logout-modal-header w-full flex items-center justify-between lg:px-10 lg:py-8 px-[30px] py-[23px] border-b dark:border-[#5356fb29]  border-light-purple dark:border-[#5356fb29] ">
               <h1 className="text-26 font-bold text-dark-gray dark:text-white tracking-wide">
                 Confirm
               </h1>

src/components/Partials/RightSideBar.jsx

@@ -1,5 +1,4 @@
 import React, { useState } from "react";
-import { Link } from "react-router-dom";
 import topCreator1 from "../../assets/images/top-creator-1.png";
 import topCreator2 from "../../assets/images/top-creator-2.png";
 import topCreator3 from "../../assets/images/top-creator-3.png";
@@ -178,15 +177,13 @@ export default function RightSideBar() {
             </div>
           </div>
 
-          <div className="platform-list flex flex-col gap-4">
-            <Link to="/add-reminder" className="cursor-pointer p-2 md:hover:shadow-md transition md:hover:duration-300 rounded-md">
-            <div className="item flex space-x-3 items-center">
+          <div className="platform-list">
+            <div className="item flex space-x-3 items-center mb-4">
               {/* image */}
               <div className="w-8 h-8 rounded-full">
                 <svg
-                  className="w-[100%]"
-                  // width="40"
-                  // height="41"
+                  width="40"
+                  height="41"
                   viewBox="0 0 40 41"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
@@ -209,15 +206,12 @@ export default function RightSideBar() {
               </div>
               {/* action */}
             </div>
-            </Link>
-            <Link to="/#" className="cursor-pointer p-2 md:hover:shadow-md transition md:hover:duration-300 rounded-md">       
-            <div className="item flex space-x-3 items-center">
+            <div className="item flex space-x-3 items-center mb-4">
               {/* image */}
               <div className="w-8 h-8 rounded-full">
                 <svg
-                  className="w-[100%]"
-                  // width="40"
-                  // height="41"
+                  width="40"
+                  height="41"
                   viewBox="0 0 40 41"
                   fill="none"
                   xmlns="http://www.w3.org/2000/svg"
@@ -243,7 +237,7 @@ export default function RightSideBar() {
               </div>
               {/* action */}
             </div>
-            </Link>
+
           </div>
         </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;
+}