Adjust AuthorCard styling

Author: agjs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@programmer_network/yail",
-  "version": "1.0.152",
+  "version": "1.0.153",
   "description": "Programmer Network's official UI library for React",
   "author": "Aleksandar Grbic - (https://programmer.network)",
   "publishConfig": {

src/Components/AuthorCard/__snapshots__/AuthorCard.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`AuthorCard component > renders correctly 1`] = `
 <DocumentFragment>
   <div
-    class="border border-primary-text-color p-6"
+    class="border-2 border-primary-text-color/20 p-6 rounded-lg"
   >
     <div
       class="flex flex-col items-center gap-4 md:flex-row"
@@ -24,13 +24,13 @@ exports[`AuthorCard component > renders correctly 1`] = `
         </div>
       </div>
       <div>
-        <h3
-          class="text-xs md:text-2xl font-bold text-primary mb-4 !mb-0"
+        <h2
+          class="text-lg md:text-3xl font-bold text-primary mb-4 !mb-0"
         >
           John Doe
-        </h3>
+        </h2>
         <p
-          class="mb-2 text-primary-text-color !text-base"
+          class="mb-2 text-primary-text-color !text-lg"
         >
           An expert in the field.
         </p>

src/Components/AuthorCard/index.tsx

@@ -1,28 +1,33 @@
+import classNames from "classnames";
 import React from "react";
 
 import Avatar from "Components/Avatar";
-import { H3, Paragraph } from "Components/Typography";
+import { H2, Paragraph } from "Components/Typography";
 
 import { IAuthorCardProps } from "./types";
 
 const AuthorCard: React.FC<IAuthorCardProps> = ({
   name,
   avatar,
   about,
+  className,
   onClick
 }) => {
   return (
     <div
-      className='border border-primary-text-color p-6'
+      className={classNames(
+        "border-2 border-primary-text-color/20 p-6 rounded-lg",
+        className
+      )}
       onClick={() => (onClick ? onClick({ name, avatar, about }) : undefined)}
     >
       <div className='flex flex-col items-center gap-4 md:flex-row'>
         <div className='hidden md:block'>
           <Avatar src={avatar} size={75} />
         </div>
         <div>
-          <H3 className='!mb-0'>{name}</H3>
-          <Paragraph className='!text-base'>{about}</Paragraph>
+          <H2 className='!mb-0'>{name}</H2>
+          <Paragraph className='!text-lg'>{about}</Paragraph>
         </div>
       </div>
     </div>

src/Components/AuthorCard/types.ts

@@ -3,4 +3,5 @@ export interface IAuthorCardProps {
   avatar?: string;
   about: string;
   onClick?: (author: { name: string; avatar?: string; about: string }) => void;
+  className?: string;
 }