Style fix

components/Card.js

@@ -4,7 +4,7 @@ import React from 'react';
 
 function Card({ backgroundImageSource, backgroundImageAltText, children }) {
   return (
-    <div className="card shadow-xl image-full">
+    <div className="card transition duration-500 ease-in-out transform hover:-translate-y-4 filter brightness-105 shadow-xl image-full">
       {backgroundImageSource && (
         <figure>
           <Image
@@ -14,7 +14,7 @@ function Card({ backgroundImageSource, backgroundImageAltText, children }) {
           />
         </figure>
       )}
-      <div className="card-body justify-end space-y-3">{children}</div>
+      <div className="card-body space-y-3">{children}</div>
     </div>
   );
 }
@@ -43,14 +43,14 @@ CardParagraph.propTypes = {
 
 export function CardAction({ children, linkTo, isPending, onClick }) {
   return (
-    <div className="pt-5">
+    <div className="pt-5" style={{ marginTop: 'auto' }}>
       {linkTo ? (
-        <a className="btn btn-primary" href={linkTo}>
+        <a className="btn btn-accent" href={linkTo}>
           {children}
         </a>
       ) : (
         <button
-          className={`btn btn-primary h-16 md:h-13 ${
+          className={`btn btn-accent w-full h-auto ${
             isPending ? 'loading' : ''
           }`}
           onClick={onClick}
@@ -72,8 +72,8 @@ CardAction.propTypes = {
 
 export function CardAddress({ children, label }) {
   return (
-    <div className="shaded-text">
-      <div>{label}</div>
+    <div className="shaded-text" style={{ marginTop: 'auto' }}>
+      <div className="font-semibold">{label}</div>
       <span>{children}</span>
     </div>
   );

components/DoctorsAsVolunteers.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import Card, { CardParagraph, CardTitle } from './Card';
+import Card, { CardAddress, CardParagraph, CardTitle } from './Card';
 
 function DoctorsAsVolunteers() {
   return (
@@ -23,13 +23,18 @@ function DoctorsAsVolunteers() {
       <CardParagraph>
         {'Scheduling is flexible and based on your availability.'}
       </CardParagraph>
-
-      <CardParagraph>{'Requirements:'}</CardParagraph>
-
-      <ul className="list-disc text-left pl-6">
-        <li>{'Current medical board license for your region and country'}</li>
-        <li>{'Fluency in English or Spanish'}</li>
-      </ul>
+      <br />
+      <CardAddress>
+        <div className="p-2">
+          <span className="font-semibold">{'Requirements:'}</span>
+          <ul className="list-disc text-left pl-6">
+            <li>
+              {'Current medical board license for your region and country'}
+            </li>
+            <li>{'Fluency in English or Spanish'}</li>
+          </ul>
+        </div>
+      </CardAddress>
     </Card>
   );
 }

components/HygieneKitsCard.js

@@ -27,6 +27,7 @@ function HygieneKitsCard() {
       <CardAction linkTo="https://www.amazon.com/96-Kits-Hygiene-Travel-Charity/dp/B0881YKMBL">
         {'96 Hygiene Kits for $153'}
       </CardAction>
+      <br />
       <CardAddress label="Ship the kits to:">
         {'1543 E Palmdale Blvd, Ste E, Palmdale, CA 93550'}
       </CardAddress>

components/form/SelectFormControl.js

@@ -12,7 +12,7 @@ function SelectFormControl({ id, label, options, value, onChange }) {
         </label>
       )}
       <select
-        className="select select-bordered w-full max-w-xs select-sm"
+        className="select select-bordered w-full select-sm"
         id={id}
         name={id}
         onChange={handleChange}