Small Bug Fixes and Improvements

This commit is contained in:
Ahmad 2025-01-15 20:48:47 -05:00
parent dbbd727554
commit 8c3b4b734e
No known key found for this signature in database
GPG key ID: 8FD8A93530D182BF
10 changed files with 106 additions and 22 deletions

View 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>
`;

View 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);
});
});

View file

@ -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>

View file

@ -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>

View file

@ -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'>

View file

@ -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>

View file

@ -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

View file

@ -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>

View file

@ -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>

View file

@ -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",