fix(components-Card): fix card spacing styles (#1255)

* fix(components-Card): fix card spacing styles * test: update snapshots
sabertazimi · Apr 16, 2024 · ec79630 · ec79630
1 parent 9cc540f
commit ec79630
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 14 deletions.
diff --git a/components/Card/Card.css b/components/Card/Card.css
@@ -6,3 +6,8 @@
 .ant-card-meta-description {
   @apply dark:text-gray-50/50;
 }
+
+/* Add padding to card title */
+.ant-card-head-title {
+  @apply py-3;
+}
diff --git a/components/GithubCard/GithubRepoCard.tsx b/components/GithubCard/GithubRepoCard.tsx
@@ -14,7 +14,7 @@ function GithubRepoCard({ repo }: Props): JSX.Element {
   return (
     <Badge.Ribbon text={repo.name} color={getColorByName(repo.name)}>
       <Card
-        className="mt-8"
+        className="!mt-5"
         title={(
           <a href={repo.repoUrl}>
             <Branches className="align-top text-4xl" />
@@ -24,7 +24,7 @@ function GithubRepoCard({ repo }: Props): JSX.Element {
       >
         <Meta
           title={(
-            <Tag className="mb-3" color={getColorByName(repo.language)}>
+            <Tag className="!mb-3" color={getColorByName(repo.language)}>
               {repo.language}
             </Tag>
           )}

diff --git a/components/GithubCard/__snapshots__/GithubCard.test.tsx.snap b/components/GithubCard/__snapshots__/GithubCard.test.tsx.snap
@@ -185,7 +185,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered mt-8 card"
+            class="ant-card ant-card-bordered !mt-5 card"
           >
             <div
               class="ant-card-head"
@@ -240,7 +240,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
                     class="ant-card-meta-title"
                   >
                     <span
-                      class="ant-tag ant-tag-has-color mb-3"
+                      class="ant-tag ant-tag-has-color !mb-3"
                       style="background-color: rgb(245, 159, 0);"
                     >
                       TypeScript
@@ -293,7 +293,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered mt-8 card"
+            class="ant-card ant-card-bordered !mt-5 card"
           >
             <div
               class="ant-card-head"
@@ -348,7 +348,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
                     class="ant-card-meta-title"
                   >
                     <span
-                      class="ant-tag ant-tag-has-color mb-3"
+                      class="ant-tag ant-tag-has-color !mb-3"
                       style="background-color: rgb(215, 51, 108);"
                     >
                       C
@@ -401,7 +401,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered mt-8 card"
+            class="ant-card ant-card-bordered !mt-5 card"
           >
             <div
               class="ant-card-head"
@@ -456,7 +456,7 @@ exports[`GithubCard should render correctly (snapshot) 1`] = `
                     class="ant-card-meta-title"
                   >
                     <span
-                      class="ant-tag ant-tag-has-color mb-3"
+                      class="ant-tag ant-tag-has-color !mb-3"
                       style="background-color: rgb(112, 72, 232);"
                     >
                       Zsh
@@ -710,7 +710,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered mt-8 card"
+            class="ant-card ant-card-bordered !mt-5 card"
           >
             <div
               class="ant-card-head"
@@ -765,7 +765,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
                     class="ant-card-meta-title"
                   >
                     <span
-                      class="ant-tag ant-tag-has-color mb-3"
+                      class="ant-tag ant-tag-has-color !mb-3"
                       style="background-color: rgb(245, 159, 0);"
                     >
                       TypeScript
@@ -818,7 +818,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered mt-8 card"
+            class="ant-card ant-card-bordered !mt-5 card"
           >
             <div
               class="ant-card-head"
@@ -873,7 +873,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
                     class="ant-card-meta-title"
                   >
                     <span
-                      class="ant-tag ant-tag-has-color mb-3"
+                      class="ant-tag ant-tag-has-color !mb-3"
                       style="background-color: rgb(215, 51, 108);"
                     >
                       C
@@ -926,7 +926,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
           class="ant-ribbon-wrapper"
         >
           <div
-            class="ant-card ant-card-bordered mt-8 card"
+            class="ant-card ant-card-bordered !mt-5 card"
           >
             <div
               class="ant-card-head"
@@ -981,7 +981,7 @@ exports[`GithubCard should render correctly when missing bio and location data (
                     class="ant-card-meta-title"
                   >
                     <span
-                      class="ant-tag ant-tag-has-color mb-3"
+                      class="ant-tag ant-tag-has-color !mb-3"
                       style="background-color: rgb(112, 72, 232);"
                     >
                       Zsh