mirror of
https://github.com/ahmadk953/tasko.git
synced 2025-04-30 18:59:37 +00:00
Added Basic Darkmode and Fixed Small Bugs
This commit is contained in:
parent
aacca3d141
commit
94fb5c7eb1
42 changed files with 593 additions and 72 deletions
|
@ -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' />
|
||||
|
|
|
@ -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} />
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'>
|
||||
|
|
|
@ -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'>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue