mirror of
https://github.com/ahmadk953/tasko.git
synced 2025-01-30 16:43:37 +00:00
Small Bug Fixes and Improvements
This commit is contained in:
parent
dbbd727554
commit
8c3b4b734e
10 changed files with 106 additions and 22 deletions
48
__tests__/__snapshots__/blog-page.test.tsx.snap
Normal file
48
__tests__/__snapshots__/blog-page.test.tsx.snap
Normal file
|
@ -0,0 +1,48 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Blog Page renders blog page unchanged 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="ml-4 mr-4 flex flex-col items-center space-y-10"
|
||||
>
|
||||
<h1
|
||||
class="text-4xl font-semibold text-neutral-800 dark:text-neutral-100"
|
||||
>
|
||||
Blog
|
||||
</h1>
|
||||
<div
|
||||
class="grid grid-cols-2 gap-20 md:grid-cols-3 lg:grid-cols-4"
|
||||
>
|
||||
<div
|
||||
class="space-y-4 text-center"
|
||||
>
|
||||
<a
|
||||
href="blog/posts/blog-welcome"
|
||||
>
|
||||
<img
|
||||
alt="post cover image"
|
||||
class="aspect-video w-full rounded-md object-cover"
|
||||
data-nimg="1"
|
||||
decoding="async"
|
||||
height="100"
|
||||
loading="lazy"
|
||||
src="/hero.svg"
|
||||
style="color: transparent;"
|
||||
width="300"
|
||||
/>
|
||||
<h2
|
||||
class="text-lg font-semibold text-neutral-800 dark:text-neutral-100"
|
||||
>
|
||||
Welcome to the Blog!
|
||||
</h2>
|
||||
<p
|
||||
class="text-sm text-neutral-700 dark:text-neutral-200"
|
||||
>
|
||||
Welcome to our new blog page!
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
26
__tests__/blog-page.test.tsx
Normal file
26
__tests__/blog-page.test.tsx
Normal file
|
@ -0,0 +1,26 @@
|
|||
import { render, screen } from '@testing-library/react';
|
||||
|
||||
import Page from '@/app/(main)/blog/page';
|
||||
|
||||
describe('Blog Page', () => {
|
||||
it('renders blog page unchanged', () => {
|
||||
const { container } = render(<Page />);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('renders a heading', () => {
|
||||
render(<Page />);
|
||||
|
||||
const heading = screen.getByRole('heading', { level: 1 });
|
||||
|
||||
expect(heading).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('renders blog posts', () => {
|
||||
render(<Page />);
|
||||
|
||||
const posts = screen.getAllByRole('heading', { level: 2 });
|
||||
|
||||
expect(posts.length).toBeGreaterThan(0);
|
||||
});
|
||||
});
|
|
@ -12,7 +12,7 @@ const PostPage = async (props: PostPageProps) => {
|
|||
|
||||
if (!post) {
|
||||
return (
|
||||
<h1 className='text-6xl font-semibold text-neutral-900'>
|
||||
<h1 className='mx-auto text-center text-6xl font-semibold text-neutral-800 dark:text-neutral-100'>
|
||||
Post not found
|
||||
</h1>
|
||||
);
|
||||
|
@ -27,10 +27,10 @@ const PostPage = async (props: PostPageProps) => {
|
|||
height={600}
|
||||
alt='post cover image'
|
||||
/>
|
||||
<h1 className='mb-12 text-center text-6xl font-bold text-neutral-900'>
|
||||
<h1 className='mb-12 text-center text-6xl font-bold text-neutral-800 dark:text-neutral-100'>
|
||||
{post.title}
|
||||
</h1>{' '}
|
||||
<div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-black prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl dark:prose-headings:text-white'>
|
||||
<div className='container prose prose-headings:mt-8 prose-headings:font-semibold prose-headings:text-neutral-800 prose-h1:text-5xl prose-h2:text-4xl prose-h3:text-3xl prose-h4:text-2xl prose-h5:text-xl prose-h6:text-lg prose-p:text-xl prose-p:text-neutral-700 dark:prose-headings:text-neutral-100 dark:prose-p:text-neutral-200'>
|
||||
<MDXContent code={post.mdx} />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -50,14 +50,14 @@ BoardLiveblocks.Skeleton = function SkeletonBoardLiveblocks() {
|
|||
<div className='h-full overflow-x-auto p-4'>
|
||||
<ol className='flex h-full gap-x-3'>
|
||||
<li className='h-full w-[272px] shrink-0 select-none'>
|
||||
<div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md'>
|
||||
<div className='w-full rounded-md bg-[#f1f2f4] pb-2 shadow-md dark:bg-[#1f1f1f]'>
|
||||
<div className='flex items-start justify-between gap-x-2 px-2 pt-2 text-sm font-semibold'>
|
||||
<Skeleton className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium' />
|
||||
</div>
|
||||
<ol className='mx-1 mt-2 flex flex-col gap-y-2 px-1 py-0.5'>
|
||||
<Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
|
||||
<Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
|
||||
<Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm' />
|
||||
<Skeleton className='h-12 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
|
||||
<Skeleton className='h-24 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
|
||||
<Skeleton className='h-16 space-y-2 truncate rounded-md border-2 border-transparent bg-white px-3 py-2 text-sm shadow-sm dark:bg-black' />
|
||||
</ol>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
@ -76,7 +76,7 @@ export const ListForm = () => {
|
|||
className='h-7 border-transparent px-2 py-1 text-sm font-medium transition hover:border-input focus:border-input'
|
||||
placeholder='Enter list title...'
|
||||
/>
|
||||
<input hidden value={params.boardId} name='boardId' />
|
||||
<input hidden defaultValue={params.boardId} name='boardId' />
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<FormSubmit>Add list</FormSubmit>
|
||||
<Button onClick={disableEditing} size='sm' variant='ghost'>
|
||||
|
|
|
@ -88,7 +88,7 @@ export const ListHeader = ({ data, onAddCard }: ListHeaderProps) => {
|
|||
id='title'
|
||||
placeholder='Enter list title...'
|
||||
defaultValue={title}
|
||||
className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white'
|
||||
className='h-7 truncate border-transparent bg-transparent px-[7px] py-1 text-sm font-medium transition hover:border-input focus:border-input focus:bg-white dark:focus:bg-black'
|
||||
/>
|
||||
<button hidden type='submit' />
|
||||
</form>
|
||||
|
|
|
@ -68,12 +68,12 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
|||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className='px-0 pb-3 pt-3' side='bottom' align='start'>
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600'>
|
||||
<div className='pb-4 text-center text-sm font-medium text-neutral-600 dark:text-neutral-200'>
|
||||
List Actions
|
||||
</div>
|
||||
<PopoverClose ref={closeRef} asChild>
|
||||
<Button
|
||||
className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600'
|
||||
className='absolute right-2 top-2 h-auto w-auto p-2 text-neutral-600 dark:text-neutral-200'
|
||||
variant='ghost'
|
||||
>
|
||||
<X className='h-4 w-4' />
|
||||
|
@ -87,8 +87,13 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
|||
Add card...
|
||||
</Button>
|
||||
<form action={onCopy}>
|
||||
<input hidden name='id' id='id' value={data.id} />
|
||||
<input hidden name='boardId' id='boardId' value={data.boardId} />
|
||||
<input hidden name='id' id='id' defaultValue={data.id} />
|
||||
<input
|
||||
hidden
|
||||
name='boardId'
|
||||
id='boardId'
|
||||
defaultValue={data.boardId}
|
||||
/>
|
||||
<FormSubmit
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal'
|
||||
variant='ghost'
|
||||
|
@ -98,10 +103,15 @@ export const ListOptions = ({ data, onAddCard }: ListOptionsProps) => {
|
|||
</form>
|
||||
<Separator />
|
||||
<form action={onDelete}>
|
||||
<input hidden name='id' id='id' value={data.id} />
|
||||
<input hidden name='boardId' id='boardId' value={data.boardId} />
|
||||
<input hidden name='id' id='id' defaultValue={data.id} />
|
||||
<input
|
||||
hidden
|
||||
name='boardId'
|
||||
id='boardId'
|
||||
defaultValue={data.boardId}
|
||||
/>
|
||||
<FormSubmit
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive'
|
||||
className='h-auto w-full justify-start rounded-none p-2 px-5 text-sm font-normal text-destructive hover:text-destructive dark:text-red-500 dark:hover:text-red-500'
|
||||
variant='ghost'
|
||||
>
|
||||
Delete this list
|
||||
|
|
|
@ -9,17 +9,17 @@ import { ModalProvider } from '@/components/providers/modal-provider';
|
|||
import { QueryProvider } from '@/components/providers/query-provider';
|
||||
|
||||
const PlatformLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
const { theme } = useTheme();
|
||||
const { resolvedTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<ClerkProvider
|
||||
afterSignOutUrl='/'
|
||||
appearance={{
|
||||
baseTheme: theme === 'dark' ? dark : undefined,
|
||||
baseTheme: resolvedTheme === 'dark' ? dark : undefined,
|
||||
}}
|
||||
>
|
||||
<QueryProvider>
|
||||
<Toaster theme='system' />
|
||||
<Toaster theme={resolvedTheme === 'dark' ? 'dark' : 'light'} />
|
||||
<ModalProvider />
|
||||
{children}
|
||||
</QueryProvider>
|
||||
|
|
|
@ -48,7 +48,7 @@ export const FormTextarea = forwardRef<HTMLTextAreaElement, FormTextareaProps>(
|
|||
{label ? (
|
||||
<Label
|
||||
htmlFor={id}
|
||||
className='text-xs font-semibold text-neutral-700'
|
||||
className='text-xs font-semibold text-neutral-700 dark:text-neutral-200'
|
||||
>
|
||||
{label}
|
||||
</Label>
|
||||
|
|
|
@ -2,8 +2,8 @@
|
|||
"$schema": "https://mintlify.com/schema.json",
|
||||
"name": "Tasko",
|
||||
"logo": {
|
||||
"dark": "/public/logo-light.svg",
|
||||
"light": "/public/logo-dark.svg",
|
||||
"dark": "/public/logo-dark.svg",
|
||||
"light": "/public/logo-light.svg",
|
||||
"href": "https://tasko.ahmadk953.org/"
|
||||
},
|
||||
"favicon": "/public/favicon.svg",
|
||||
|
|
Loading…
Reference in a new issue