Added Basic Darkmode and Fixed Small Bugs

This commit is contained in:
Ahmad 2025-01-13 19:12:06 -05:00
parent aacca3d141
commit 94fb5c7eb1
No known key found for this signature in database
GPG key ID: 8FD8A93530D182BF
42 changed files with 593 additions and 72 deletions

View file

@ -82,7 +82,7 @@ export const Actions = ({ data }: ActionsProps) => {
<DatePicker
type='dueDate'
variant='gray'
className='w-full justify-start text-black'
className='w-full justify-start text-black dark:text-white'
size='inline'
placeholder='Add Due Date'
afterSelectText='Due '
@ -92,7 +92,7 @@ export const Actions = ({ data }: ActionsProps) => {
<DatePicker
type='startedAtDate'
variant='gray'
className='w-full justify-start text-black'
className='w-full justify-start text-black dark:text-white'
size='inline'
placeholder='Add Started Date'
afterSelectText='Started '
@ -103,7 +103,7 @@ export const Actions = ({ data }: ActionsProps) => {
onClick={onDelete}
disabled={isLoadingDelete}
variant='gray'
className='w-full justify-start text-destructive'
className='w-full justify-start text-destructive dark:text-red-500'
size='inline'
>
<Trash className='mr-2 h-4 w-4' />

View file

@ -13,9 +13,11 @@ interface ActivityProps {
export const Activity = ({ items }: ActivityProps) => {
return (
<div className='flex w-full items-start gap-x-3'>
<ActivityIcon className='mt-0.5 h-5 w-5 text-neutral-700' />
<ActivityIcon className='mt-0.5 h-5 w-5 text-neutral-700 dark:text-neutral-100' />
<div className='w-full'>
<p className='mb-2 font-semibold text-neutral-700'>Activity</p>
<p className='mb-2 font-semibold text-neutral-700 dark:text-neutral-100'>
Activity
</p>
<ol className='mt-2 space-y-4'>
{items.map((item) => (
<ActivityItem key={item.id} data={item} />

View file

@ -74,9 +74,11 @@ export const Description = ({ data }: DescriptionProps) => {
return (
<div className='flex w-full items-start gap-x-3'>
<AlignLeft className='mt-0.5 h-5 w-5 text-neutral-700' />
<AlignLeft className='mt-0.5 h-5 w-5 text-neutral-700 dark:text-neutral-100' />
<div className='w-full'>
<p className='mb-2 font-semibold text-neutral-700'>Description</p>
<p className='mb-2 font-semibold text-neutral-700 dark:text-neutral-100'>
Description
</p>
{isEditing ? (
<form ref={formRef} className='space-y-2' action={onSubmit}>
<FormTextarea
@ -103,7 +105,7 @@ export const Description = ({ data }: DescriptionProps) => {
<div
onClick={enaleEditing}
role='button'
className='min-h-[78px] rounded-md bg-neutral-200 px-3.5 py-3 text-sm font-medium'
className='min-h-[78px] rounded-md bg-neutral-200 px-3.5 py-3 text-sm font-medium dark:bg-neutral-800'
>
{data.description ?? 'Add a more detailed description...'}
</div>

View file

@ -61,7 +61,7 @@ export const Header = ({ data }: HeaderProps) => {
return (
<div className='mb-6 flex w-full items-start gap-x-3'>
<Layout className='mt-1 h-5 w-5 text-neutral-700' />
<Layout className='mt-1 h-5 w-5 text-neutral-700 dark:text-neutral-100' />
<div className='w-full'>
<form action={onSubmit}>
<FormInput
@ -69,7 +69,7 @@ export const Header = ({ data }: HeaderProps) => {
ref={inputRef}
onBlur={onBlur}
defaultValue={title}
className='font-semi-bold relative -left-1 mb-0.5 w-[95%] truncate border-transparent bg-transparent px-1 text-xl text-neutral-700 focus-visible:border-input focus-visible:bg-white'
className='font-semi-bold relative -left-1 mb-0.5 w-[95%] truncate border-transparent bg-transparent px-1 text-xl text-neutral-700 focus-visible:border-input focus-visible:bg-white dark:text-neutral-100 dark:focus-visible:bg-black'
/>
</form>
<p className='text-sm text-muted-foreground'>

View file

@ -37,9 +37,9 @@ export const ProModal = () => {
<div className='relative flex aspect-video items-center justify-center'>
<Image src='/hero.svg' alt='hero' className='object-cover' fill />
</div>
<div className='mx-auto space-y-6 p-6 text-neutral-700'>
<div className='mx-auto space-y-6 p-6 text-neutral-700 dark:text-neutral-200'>
<h1 className='text-xl font-semibold'>Upgrade to Tasko Pro Today!</h1>
<p className='text-xs font-semibold text-neutral-600'>
<p className='text-xs font-semibold text-neutral-600 dark:text-neutral-300'>
Explore the best of Tasko
</p>
<div className='pl-3'>