Merge pull request #831 from zheyichn/zheyichn/749-add-outline-to-cards

add outlines to content cards
CodeForPhilly · Jul 31, 2024 · 22fe886 · 22fe886
2 parents d25337d + 53e5cbc
commit 22fe886
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/src/app/(content-pages)/transform-property/TransformPropertyPage.tsx b/src/app/(content-pages)/transform-property/TransformPropertyPage.tsx
@@ -293,7 +293,7 @@ export default function TransformPropertyPage() {
         documentation for this in the future.
       </p>
 
-      <div className="bg-gray-100 rounded-lg p-8 mt-8">
+      <div className="bg-gray-100 rounded-lg p-8 mt-8 outline outline-1 outline-transparent">
         <h3 className="heading-xl font-bold mb-4">Park in a Truck</h3>
         <p className="body-md mb-4">
           Park in a Truck supports community residents in quickly building
@@ -314,7 +314,7 @@ export default function TransformPropertyPage() {
         />
       </div>
 
-      <div className="bg-gray-100 rounded-lg p-8 mt-8">
+      <div className="bg-gray-100 rounded-lg p-8 mt-8 outline outline-1 outline-transparent">
         <h3 className="heading-xl font-bold mb-4">Jump Start</h3>
         <p className="body-md mb-4">
           Jump Start is a community-oriented lender that offers acquisition and
@@ -337,9 +337,9 @@ export default function TransformPropertyPage() {
         />
       </div>
 
-      <div className="bg-gray-100 rounded-lg p-8 mt-8">
+      <div className="bg-gray-100 rounded-lg p-8 mt-8 outline outline-1 outline-transparent">
         <h3 className="heading-xl font-bold mb-4">Local Representatives</h3>
-        <p className="body-md">
+        <p className="body-md mb-4">
           Your local representatives will be crucially allies in helping you
           push your project forward and cut through red tape. Contact them with
           an explanation of what you want to do and why, and ask for their
@@ -362,7 +362,7 @@ export default function TransformPropertyPage() {
         Additional Considerations
       </h2>
 
-      <div className="bg-gray-100 rounded-lg p-8 mt-8">
+      <div className="bg-gray-100 rounded-lg p-8 mt-8 outline outline-1 outline-transparent">
         <h3 className="heading-xl font-bold mb-4">Funding</h3>
         <p className="body-md mb-4">
           Getting funding is a vital part of returning vacant properties to
@@ -388,7 +388,7 @@ export default function TransformPropertyPage() {
         </p>
       </div>
 
-      <div className="bg-gray-100 rounded-lg p-8 mt-8">
+      <div className="bg-gray-100 rounded-lg p-8 mt-8 outline outline-1 outline-transparent">
         <h3 className="heading-xl font-bold mb-4">Maintenance</h3>
         <p className="body-md mb-4">
           Transforming a vacant property isn&rsquo;t a one-and-done event. In
@@ -407,7 +407,7 @@ export default function TransformPropertyPage() {
         </p>
       </div>
 
-      <div className="bg-gray-100 rounded-lg p-8 mt-8">
+      <div className="bg-gray-100 rounded-lg p-8 mt-8 outline outline-1 outline-transparent">
         <h3 className="heading-xl font-bold mb-4">Gentrification </h3>
         <p className="body-md">
           Our goal is to help community groups reduce violence through cleaning

diff --git a/src/components/ContentCard.tsx b/src/components/ContentCard.tsx
@@ -39,11 +39,9 @@ const ContentCard: FC<ContentCardProps> = ({
 }) => {
   return (
     <div
-      className={
-        hasArrow
-          ? 'bg-green-100 rounded-md hover:bg-green-200 transition-colors duration-[250ms]'
-          : 'bg-green-100 rounded-md'
-      }
+      className={`bg-green-100 rounded-md outline outline-1 outline-transparent ${
+        hasArrow ? 'hover:bg-green-200 transition-colors duration-[250ms]' : ''
+      }`}
     >
       <div>
         <Image