From 8046bd2b6bde0f890cd55c860df3fedd6ff375e3 Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Wed, 27 Apr 2022 17:23:39 -0700
Subject: [PATCH] Move pic to top of card. Other misc styling.

---
 web/components/charity/charity-card.tsx | 14 +++++++++-----
 web/pages/charity/index.tsx             |  4 ++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/web/components/charity/charity-card.tsx b/web/components/charity/charity-card.tsx
index c126c8c2..4789051f 100644
--- a/web/components/charity/charity-card.tsx
+++ b/web/components/charity/charity-card.tsx
@@ -12,14 +12,18 @@ export function CharityCard(props: { charity: Charity }) {
 
   return (
     <Link href={`/charity/${slug}`} passHref>
-      <div className="card image-full bg-base-100 glass cursor-pointer shadow-xl">
-        <figure className="absolute h-full">
-          {photo && <img className="!object-contain" src={photo} alt="" />}
+      <div className="card card-compact transition:shadow cursor-pointer border-2 bg-white hover:shadow-md">
+        <figure className="h-32">
+          {photo ? (
+            <img className="h-full w-full object-contain" src={photo} alt="" />
+          ) : (
+            <div className="h-full w-full bg-gradient-to-r from-slate-300 to-indigo-200" />
+          )}
         </figure>
         <div className="card-body">
           <h3 className="card-title line-clamp-3">{name}</h3>
-          <div className="line-clamp-4 text-sm text-gray-100">{blurb}</div>
-          <Row className="mt-4 items-end justify-center gap-1 text-green-300">
+          <div className="line-clamp-4 text-sm">{blurb}</div>
+          <Row className="text-primary mt-4 items-end justify-center gap-1">
             <span className="text-3xl">${Math.floor((raised ?? 0) / 100)}</span>
             <span>raised</span>
           </Row>
diff --git a/web/pages/charity/index.tsx b/web/pages/charity/index.tsx
index f3b7226d..cf91efd2 100644
--- a/web/pages/charity/index.tsx
+++ b/web/pages/charity/index.tsx
@@ -23,7 +23,7 @@ export default function Charity() {
 
   return (
     <Page>
-      <Col className="w-full rounded bg-white px-4 py-6 sm:px-8">
+      <Col className="w-full items-center rounded px-4 py-6 sm:px-8 xl:w-[125%]">
         <Col className="max-w-xl">
           <Title className="!mt-0" text="Donate to a charity" />
           <div className="mb-6 text-gray-500">
@@ -36,7 +36,7 @@ export default function Charity() {
             className="input input-bordered mb-6 w-full"
           />
         </Col>
-        <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-3 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
+        <div className="grid max-w-xl grid-flow-row grid-cols-1 gap-4 lg:max-w-full lg:grid-cols-2 xl:grid-cols-3">
           {filterCharities.map((charity) => (
             <div key={charity.name}>
               <CharityCard charity={charity} />