Ryan/documenso
1
0
Fork 1
mirror of https://github.com/documenso/documenso.git synced 2025-11-13 08:13:56 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: styling updates

Browse Source
This commit is contained in:
Mythie
2023-07-28 20:14:04 +10:00
parent 38323b5ea5
commit c64ff8ec95
3 changed files with 1996 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
apps/marketing/src/app/(marketing)/blog/[post]/page.tsx
View File

@ -1,7 +1,9 @@
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link';
import { notFound } from 'next/navigation'; import { notFound } from 'next/navigation';
import { allBlogPosts } from 'contentlayer/generated'; import { allBlogPosts } from 'contentlayer/generated';
import { ChevronLeft } from 'lucide-react';
import type { MDXComponents } from 'mdx/types'; import type { MDXComponents } from 'mdx/types';
import { useMDXComponent } from 'next-contentlayer/hooks'; import { useMDXComponent } from 'next-contentlayer/hooks';
@ -54,8 +56,8 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
</div> </div>
<div className="text-sm leading-6"> <div className="text-sm leading-6">
<p className="text-left font-semibold text-gray-900">{post.authorName}</p> <p className="text-foreground text-left font-semibold">{post.authorName}</p>
<p className="text-gray-600">{post.authorRole}</p> <p className="text-muted-foreground">{post.authorRole}</p>
</div> </div>
</div> </div>
</div> </div>
@ -67,13 +69,20 @@ export default function BlogPostPage({ params }: { params: { post: string } }) {
{post.tags.map((tag, i) => ( {post.tags.map((tag, i) => (
<li <li
key={`tag-${i}`} key={`tag-${i}`}
className="relative z-10 whitespace-nowrap rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100" className="bg-muted hover:bg-muted/60 text-foreground relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 text-sm font-medium"
> >
{tag} {tag}
</li> </li>
))} ))}
</ul> </ul>
)} )}
<hr />
<Link href="/blog" className="text-muted-foreground flex items-center hover:opacity-60">
<ChevronLeft className="mr-2 h-6 w-6" />
Back to all posts
</Link>
</article> </article>
); );
} }

18
apps/marketing/src/app/(marketing)/blog/page.tsx
View File

@ -19,14 +19,14 @@ export default function BlogPage() {
</p> </p>
</div> </div>
<div className="mt-10 divide-y divide-gray-100 border-t border-gray-200 "> <div className="mt-10 divide-y divide-slate-100 border-t border-slate-200 ">
{blogPosts.map((post, i) => ( {blogPosts.map((post, i) => (
<article <article
key={`blog-${i}`} key={`blog-${i}`}
className="mx-auto mt-8 flex max-w-xl flex-col items-start justify-between pt-8 first:pt-0 sm:mt-16 sm:pt-16" className="mx-auto mt-8 flex max-w-xl flex-col items-start justify-between pt-8 first:pt-0 sm:mt-16 sm:pt-16"
> >
<div className="flex items-center gap-x-4 text-xs"> <div className="flex items-center gap-x-4 text-xs">
<time dateTime={post.date} className="text-gray-500"> <time dateTime={post.date} className="text-muted-foreground">
{new Date(post.date).toLocaleDateString()} {new Date(post.date).toLocaleDateString()}
</time> </time>
@ -35,7 +35,7 @@ export default function BlogPage() {
{post.tags.map((tag, j) => ( {post.tags.map((tag, j) => (
<li <li
key={`blog-${i}-tag-${j}`} key={`blog-${i}-tag-${j}`}
className="relative z-10 whitespace-nowrap rounded-full bg-gray-50 px-3 py-1.5 font-medium text-gray-600 hover:bg-gray-100" className="text-foreground bg-muted hover:bg-muted/60 relative z-10 whitespace-nowrap rounded-full px-3 py-1.5 font-medium"
> >
{tag} {tag}
</li> </li>
@ -45,31 +45,31 @@ export default function BlogPage() {
</div> </div>
<div className="group relative"> <div className="group relative">
<h3 className="mt-3 text-lg font-semibold leading-6 text-gray-900 group-hover:text-gray-600"> <h3 className="text-foreground group-hover:text-foreground/60 mt-3 text-lg font-semibold leading-6">
<a href={post.href}> <a href={post.href}>
<span className="absolute inset-0" /> <span className="absolute inset-0" />
{post.title} {post.title}
</a> </a>
</h3> </h3>
<p className="mt-5 line-clamp-3 text-sm leading-6 text-gray-600"> <p className="text-foreground/60 mt-5 line-clamp-3 text-sm leading-6">
{post.description} {post.description}
</p> </p>
</div> </div>
<div className="relative mt-4 flex items-center gap-x-4"> <div className="relative mt-4 flex items-center gap-x-4">
<div className="h-10 w-10 rounded-full bg-gray-50"> <div className="h-10 w-10 rounded-full bg-slate-50">
{post.authorImage && ( {post.authorImage && (
<img <img
src={post.authorImage} src={post.authorImage}
alt={`Image of ${post.authorName}`} alt={`Image of ${post.authorName}`}
className="h-10 w-10 rounded-full bg-gray-50" className="h-10 w-10 rounded-full bg-slate-50"
/> />
)} )}
</div> </div>
<div className="text-sm leading-6"> <div className="text-sm leading-6">
<p className="font-semibold text-gray-900">{post.authorName}</p> <p className="text-foreground font-semibold">{post.authorName}</p>
<p className="text-gray-600">{post.authorRole}</p> <p className="text-foreground/60">{post.authorRole}</p>
</div> </div>
</div> </div>
</article> </article>

1976
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff