Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add border radius in tags #1116

Merged
6 changes: 3 additions & 3 deletions app/(app)/articles/_client.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -158,10 +158,10 @@ const ArticlesPage = () => {
</section>
</div>
<section className="col-span-4 hidden lg:block">
<div className="mb-8 mt-2 border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
<div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
<Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
<Image
className="w-full"
className="w-full rounded-t"
src={challenge}
alt={`"Codú Writing Challenge" text on white background`}
/>
Expand Down Expand Up @@ -191,7 +191,7 @@ const ArticlesPage = () => {
key={title}
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${title.toLowerCase()}`}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
className="rounded border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{getCamelCaseFromLower(title)}
</Link>
Expand Down
4 changes: 2 additions & 2 deletions app/(app)/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -52,10 +52,10 @@ const Home = async () => {
<TrendingPosts session={session} />
</Suspense>
<section className="col-span-5 hidden lg:block">
<div className="mb-8 mt-2 border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
<div className="mb-8 mt-2 rounded border border-neutral-300 bg-white text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50">
<Link href="/articles/join-our-6-week-writing-challenge-quohtgqb">
<Image
className="w-full"
className="w-full rounded-t"
src={challenge}
alt={`"Codú Writing Challenge" text on white background`}
/>
Expand Down
3 changes: 2 additions & 1 deletion components/ArticlePreview/ArticlePreview.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,8 @@ const ArticlePreview: NextPage<Props> = ({
};

return (
<article className="my-2 rounded-r border border-l-4 border-neutral-300 border-l-pink-600 bg-white p-4 dark:border-neutral-600 dark:border-l-pink-600 dark:bg-neutral-900">
<article className="relative my-2 rounded-r border border-l-0 border-neutral-300 bg-white p-4 pl-6 dark:border-neutral-600 dark:bg-neutral-900">
<div className="absolute bottom-[-1px] left-0 top-[-1px] flex w-2 justify-between bg-pink-600" />
<div className="flex justify-between">
<div className="mb-4 flex items-center">
<span className="sr-only">{name}</span>
Expand Down
2 changes: 1 addition & 1 deletion components/PopularTags/PopularTags.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export default async function PopularTags() {
// only reason this is toLowerCase is to make url look nicer. Not needed for functionality
href={`/articles?tag=${tag.title.toLowerCase()}`}
key={tag.title}
className="border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
className="rounded border border-neutral-300 bg-white px-6 py-2 text-neutral-900 dark:border-neutral-600 dark:bg-neutral-900 dark:text-neutral-50"
>
{getCamelCaseFromLower(tag.title)}
</Link>
Expand Down
Loading