Add box shadow and class for the popover tail

mirainc · Jun 29, 2023 · a1b83a6 · a1b83a6
1 parent 6cbfb47
commit a1b83a6
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 4 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "raydial-tailwind-datepicker",
-  "version": "1.0.15",
+  "version": "1.0.16",
   "description": "A modern Datepicker for the Raydial component library using Tailwind CSS 3",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

diff --git a/src/components/Datepicker.tsx b/src/components/Datepicker.tsx
@@ -322,12 +322,12 @@ const Datepicker: React.FC<DatepickerType> = ({
         </div>
 
         <div
-          className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden w-full md:w-auto"
+          className="transition-all ease-out duration-300 absolute z-10 mt-[1px] text-sm lg:text-xs 2xl:text-sm translate-y-4 opacity-0 hidden w-full md:w-auto calendar-container"
           ref={calendarContainerRef}
         >
           <Arrow ref={arrowRef} />
 
-          <div className="mt-2.5 shadow-xs px-1 py-0.5 bg-white rounded-xl">
+          <div className="mt-2.5 shadow-xl px-1 py-0.5 bg-white rounded-xl">
             <div className="flex flex-col lg:flex-row py-2">
               {showShortcuts && <Shortcuts />}
 

diff --git a/src/components/utils.tsx b/src/components/utils.tsx
@@ -150,7 +150,7 @@ export const DoubleChevronRightIcon: React.FC<IconProps> = ({ className = "w-6 h
 
 // eslint-disable-next-line react/display-name,@typescript-eslint/ban-types
 export const Arrow = React.forwardRef<HTMLDivElement, {}>((props, ref) => {
-  return <div ref={ref} className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] bg-white" />;
+  return <div ref={ref} className="absolute z-20 h-4 w-4 rotate-45 mt-0.5 ml-[1.2rem] bg-white calendar-popover-tail" />;
 });
 
 export const SecondaryButton: React.FC<Button> = ({ children, onClick, disabled = false }) => {

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -9,13 +9,20 @@ module.exports = {
   plugins: [
     plugin(function ({ addComponents, theme }) {
       addComponents({
+        ".calendar-container": {},
+        ".calendar-popover-tail": {
+          border: "none"
+        },
         ".calendar": {
+          fontSize: theme("fontSize.base"),
           padding: `${theme("spacing.5")} !important`,
           ".calendar-wrapper": {
             minWidth: "100%",
             width: "100%",
             padding: `${theme("spacing.0")} !important`,
             ".calendar-header": {
+              fontSize: "inherit",
+              fontWeight: theme("fontWeight.semibold"),
               padding: `${theme("spacing.0")} !important`,
               ".calendar-wrapper": {
                 ".calendar-header-previous, .calendar-header-next": {
@@ -29,6 +36,7 @@ module.exports = {
                 borderRadius: theme("borderRadius.xl"),
                 "button.calendar-day": {
                   aspectRatio: "1/1",
+                  fontSize: "inherit",
                   width: `100% !important`,
                   height: `100% !important`,
                   "&.calendar-day-selected": {
@@ -55,6 +63,18 @@ module.exports = {
             },
             ".calendar-day-previous , .calendar-day-next": {
               color: theme("colors.stone.300")
+            },
+            ".calendar-month": {
+              fontSize: "inherit",
+              fontWeight: "inherit"
+            },
+            ".calendar-week": {
+              color: theme("colors.stone.300"),
+              fontSize: theme("fontSize.sm"),
+              fontWeight: theme("fontWeight.semibold")
+            },
+            ".calendar-year": {
+              fontSize: "inherit"
             }
           }
         },