style: tiny BestPractice component styling fix (#1758)

This commit is contained in:
Filip Wojda
2023-12-07 04:22:26 -05:00
committed by GitHub
parent 62dbd9e121
commit 8d422eeda0

View File

@@ -83,8 +83,8 @@ export default function BestPracticeNavigation() {
return (
<div className="mx-auto grid grid-cols-1 gap-6 px-2 md:grid-cols-3">
{BestPractices.map((bestPractice) => (
<Link href={bestPractice.href} key={bestPractice.name}>
<div className="drop-shadow-card duration-120 hover:border-brand-dark relative rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:border-slate-600 dark:bg-slate-800">
<Link className="relative block" href={bestPractice.href} key={bestPractice.name}>
<div className="drop-shadow-card duration-120 hover:border-brand-dark relative h-full rounded-lg border border-slate-100 bg-slate-100 p-6 transition-all ease-in-out hover:scale-105 hover:cursor-pointer dark:border-slate-600 dark:bg-slate-800">
<div
className={clsx(
// base styles independent what type of button it is
@@ -105,7 +105,9 @@ export default function BestPracticeNavigation() {
<h3 className="mb-1 mt-3 text-xl font-bold text-slate-700 dark:text-slate-200">
{bestPractice.name}
</h3>
<p className="text-sm text-slate-600 dark:text-slate-400">{bestPractice.description}</p>
<p className="flex self-end text-sm text-slate-600 dark:text-slate-400">
{bestPractice.description}
</p>
</div>
</Link>
))}