add: change styles and max widths

Author: MussiDev

components/accordion/calendar-accordion.tsx

@@ -1,9 +1,9 @@
 "use client";
 
 import { AnimatePresence, motion } from "framer-motion";
+import { Button, buttonVariants } from "../ui/button";
 import { useLocale, useTranslations } from "next-intl";
 
-import { Button } from "../ui/button";
 import { Calendar as CalendarComponent } from "@/components/ui/calendar";
 import { CalendarIcon } from "lucide-react";
 import { PRIMARY_COLOR } from "@/lib/colors";
@@ -53,15 +53,19 @@ const CalendarAccordion = ({
 							)}
 							defaultMonth={date}
 							classNames={{
-								day_selected: cn(
-									"",
-									`bg-${PRIMARY_COLOR[theme]}-500 text-white hover:bg-${PRIMARY_COLOR[theme]}-500 hover:text-${PRIMARY_COLOR[theme]}-50 focus:bg-${PRIMARY_COLOR[theme]}-500 focus:text-${PRIMARY_COLOR[theme]}-50`
-								),
-								day_today: cn(
-									"",
-									`bg-${PRIMARY_COLOR[theme]}-100 text-${PRIMARY_COLOR[theme]}-900`
+								months: "w-full",
+								head_row: "flex justify-between",
+								row: "w-full mt-2 flex justify-between",
+								day: cn(
+									buttonVariants({ variant: "ghost" }),
+									"h-8 w-8 p-0 text-lg aria-selected:opacity-100"
 								),
 							}}
+							modifiersClassNames={{
+								today: "text-green-500",
+								selected:
+									"bg-green-500 text-white hover:bg-green-500 hover:text-white",
+							}}
 							mode='single'
 							selected={date}
 							onSelect={(date) => {

components/tasks/task-recurrence.tsx

@@ -1,34 +1,41 @@
-"use client"
+"use client";
 
-import React from 'react'
-import { Dialog, DialogTitle, DialogContent, DialogTrigger, DialogHeader } from '../ui/dialog'
-import { TaskRecurrenceOptions } from './task-recurrence-options'
-import { BLACK_BACKGROUND } from '@/lib/colors'
-import { cn } from '@/lib/utils'
-import { useTranslations } from 'next-intl'
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "../ui/dialog";
 
-const TaskRecurrence = ({   isOpen, setIsOpen, }) => {
-    const t = useTranslations("taskRecurrence")
+import { BLACK_BACKGROUND } from "@/lib/colors";
+import React from "react";
+import { TaskRecurrenceOptions } from "./task-recurrence-options";
+import { cn } from "@/lib/utils";
+import { useTranslations } from "next-intl";
 
-    return (
-        <Dialog open={isOpen}  onOpenChange={(open) => setIsOpen(open)}>
-            
-            <DialogContent className={
-                      cn("bg-white dark:bg-gradient-to-br  rounded-2xl p-6  max-w-xl shadow-xl space-y-4 max-h-[90vh] overflow-y-auto ", BLACK_BACKGROUND)
-                    }>
-                <DialogHeader className='text-left'>
-                    <DialogTitle className="text-2xl font-semibold text-green-600 dark:text-white mb-2">{t("title")}</DialogTitle>
-                    <p className="text-gray-700 dark:text-gray-300">{t("subtitle")}</p>
-                </DialogHeader>
-               
-                <TaskRecurrenceOptions 
-                    setIsOpen={setIsOpen}
-                />
+const TaskRecurrence = ({ isOpen, setIsOpen }) => {
+	const t = useTranslations("taskRecurrence");
 
-            </DialogContent>
+	return (
+		<Dialog open={isOpen} onOpenChange={(open) => setIsOpen(open)}>
+			<DialogContent
+				className={cn(
+					"p-6 w-[90%] max-w-md rounded-md dark:border-slate-700 dark:bg-slate-900 dark:text-white focus:border-gray-300 focus:ring focus:ring-gray-200 focus:ring-opacity-50 bg-white dark:bg-gradient-to-br shadow-xl space-y-4 max-h-[90vh] overflow-y-auto ",
+					BLACK_BACKGROUND
+				)}
+			>
+				<DialogHeader className='text-left'>
+					<DialogTitle className='text-2xl font-semibold text-green-600 dark:text-white mb-2'>
+						{t("title")}
+					</DialogTitle>
+					<p className='text-gray-700 dark:text-gray-300'>{t("subtitle")}</p>
+				</DialogHeader>
 
-        </Dialog>
-    )
-}
+				<TaskRecurrenceOptions setIsOpen={setIsOpen} />
+			</DialogContent>
+		</Dialog>
+	);
+};
 
-export default TaskRecurrence
+export default TaskRecurrence;