styling changes for petition card images

jonogon · Aug 23, 2024 · bfc7f20 · bfc7f20
1 parent fe1db32
commit bfc7f20
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 35 deletions.
diff --git a/apps/jonogon-web-next/src/app/components/PetitionCard.tsx b/apps/jonogon-web-next/src/app/components/PetitionCard.tsx
@@ -33,48 +33,48 @@ export default function PetitionCard(props: {
             onClick={() => {
                 router.push(`/petitions/${props.id}`);
             }}>
-            <CardHeader className={'pt-5 pb-4'}>
-                <div className={'font-normal text-base text-neutral-500 pb-2'}>
-                    <div>
-                        {props.name},{' '}
-                        <time
-                            dateTime={props.date.toISOString()}
-                            suppressHydrationWarning>
-                            {formatDate(props.date)}
-                        </time>{' '}
-                        — To, <i>{props.target}</i>
-                    </div>
-                </div>
-                <CardTitle className={'flex flex-row items-center space-x-6'}>
+            <CardHeader className={'p-4'}>
+                <CardTitle className={'flex flex-row items-stretch space-x-4'}>
                     {props.attachment && (
-                        <div className={'w-32 h-32'}>
+                        <div className={'w-16 h-full bg-red-500'}>
                             <img
                                 src={`${props.attachment}`.replace(
                                     '$CORE_HOSTNAME',
                                     window.location.hostname,
                                 )}
-                                className="w-32 h-32 object-cover bg-red-500 rounded-lg"
+                                className="w-full h-full object-cover bg-red-500 rounded"
                             />
                         </div>
                     )}
 
                     <div className={'flex-1'}>
-                        <div>
-                            <Link
-                                href={`/petitions/${props.id}`}
-                                className={
-                                    'leading-snug font-bold font-serif text-2xl align-middle break-words overflow-hidden text-ellipsis'
-                                }>
-                                {props.title}
-                            </Link>
+                        <div
+                            className={
+                                'font-normal text-base text-neutral-500 pb-1'
+                            }>
+                            <div>
+                                <time
+                                    dateTime={props.date.toISOString()}
+                                    suppressHydrationWarning>
+                                    {formatDate(props.date)}
+                                </time>{' '}
+                                — To, <i>{props.target}</i>
+                            </div>
+                        </div>
+
+                        <div
+                            className={
+                                'leading-[1.1] font-bold font-serif text-xl md:text-2xl align-middle break-words overflow-hidden text-ellipsis'
+                            }>
+                            {props.title}
                         </div>
                     </div>
                 </CardTitle>
             </CardHeader>
-            <CardFooter className="flex items-center justify-between">
+            <CardFooter className="flex items-center justify-between p-2 border-t border-t-background">
                 {props.mode === 'formalized' ? (
                     <>
-                        <p className={'font-semibold text-red-600'}>
+                        <p className={'font-semibold text-red-600 px-4'}>
                             {totalVotes} {totalVotes !== 1 ? 'votes' : 'vote'}
                         </p>
                         <Button
@@ -96,7 +96,7 @@ export default function PetitionCard(props: {
                     </>
                 ) : props.mode === 'request' ? (
                     <>
-                        <div className={'flex flex-row gap-6'}>
+                        <div className={'flex flex-row gap-6 mx-2'}>
                             <div className={'flex flex-row gap-2'}>
                                 <ThumbsUp
                                     className={'w-5 h-5 text-green-500'}
@@ -127,7 +127,7 @@ export default function PetitionCard(props: {
                     </>
                 ) : props.mode === 'own' ? (
                     <>
-                        <div className={'flex flex-row gap-6'}>
+                        <div className={'flex flex-row gap-6 mx-2'}>
                             <div className={'flex flex-row gap-2'}>
                                 <ThumbsUp
                                     className={'w-5 h-5 text-green-500'}
@@ -141,7 +141,9 @@ export default function PetitionCard(props: {
                                 {props.downvotes}
                             </div>
                         </div>
-                        <div>STATUS: {props.status}</div>
+                        <div className={'font-mono text-sm'}>
+                            STATUS: {props.status}
+                        </div>
                     </>
                 ) : null}
             </CardFooter>

diff --git a/apps/jonogon-web-next/src/app/components/PetitionList.tsx b/apps/jonogon-web-next/src/app/components/PetitionList.tsx
@@ -43,12 +43,7 @@ const PetitionList = () => {
 
     return (
         <div>
-            <div
-                style={{
-                    display: 'grid',
-                    gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
-                    gap: '15px',
-                }}>
+            <div className={'flex flex-col space-y-4'}>
                 {isLoading
                     ? Array(4)
                           .fill(null)

diff --git a/apps/jonogon-web-next/src/app/page.tsx b/apps/jonogon-web-next/src/app/page.tsx
@@ -71,7 +71,7 @@ export default function Home() {
 
     return (
         <>
-            <div className="flex flex-col gap-4 max-w-screen-sm mx-auto pb-16 px-4">
+            <div className="flex flex-col gap-4 max-w-screen-sm mx-auto pb-16 px-2">
                 <h1 className="mt-12 my-5 text-3xl md:text-4xl font-semibold">
                     {params.get('type') === 'own' ? (
                         'Your Own দাবিs'