#292 Improved mobile styling and item card layouts

app/(dashboard)/about/page.tsx

@@ -7,7 +7,10 @@ import AccordionItem from '@/components/accordian/AccordionItem';
 
 const AboutPage = () => {
   return (
-    <div className='mt-10 flex flex-col items-center justify-center gap-10 px-10 md:px-20 lg:gap-20 lg:px-48 lg:text-lg xl:px-80'>
+    <div
+      className='flex flex-grow flex-col items-center justify-center
+     gap-10 px-10 md:mt-10 md:px-20 lg:gap-20 lg:px-48 lg:text-lg xl:px-80'
+    >
       <h1 className='p-10 text-center text-4xl font-extrabold'>About</h1>
       <p>
         KINDLY is a platform that lets you donate unwanted items to Ukrainian
@@ -47,7 +50,7 @@ const AboutPage = () => {
           <FaTwitter size={60} />
         </Link>
       </div>
-      <div>
+      <div className='mb-32 flex flex-col gap-1'>
         <h2 className='my-8 text-center text-4xl font-extrabold'>FAQs</h2>
         {questionsAndAnswers.map((faq, index) => (
           <AccordionItem key={index} {...faq} />

app/(dashboard)/layout.tsx

@@ -13,7 +13,7 @@ export default async function DashBoardLayout({
       <Providers>
         <FullHeightContainer>
           <Header />
-          <main className='flex flex-grow flex-col'>{children}</main>
+          <main className='flex flex-col'>{children}</main>
           <Footer />
         </FullHeightContainer>
       </Providers>

app/(dashboard)/search/page.tsx

@@ -44,7 +44,7 @@ export default function SearchItemPage() {
 
   return (
     <div className='mb-28 mt-8'>
-      <div className='m-auto flex max-w-[500px] flex-wrap justify-center gap-3'>
+      <div className='m-auto flex max-w-[450px] flex-wrap justify-center gap-3'>
         <SearchBar
           searchParams={searchParams}
           setSearchParams={setSearchParams}

app/globals.css

@@ -67,11 +67,8 @@ body {
 /*  Cards */
 
 .card {
-  @apply max-w-md overflow-hidden rounded-lg bg-white  px-8 pb-5 shadow-sm transition-all hover:scale-95 hover:shadow-lg lg:text-lg;
-}
-
-.reserved {
-  @apply p-2 text-xl font-bold text-primaryOrange;
+  @apply max-w-md overflow-hidden rounded-lg bg-white pb-5 shadow-sm transition-all 
+  hover:scale-95 hover:shadow-lg lg:text-lg;
 }
 
 /*  Menus */

components/Footer.tsx

@@ -12,7 +12,7 @@ const Footer = () => {
   return (
     isBreakpoint &&
     showConversationsList && (
-      <footer className='fixed bottom-0 h-auto w-full bg-background py-2'>
+      <footer className='fixed bottom-0 z-20 h-auto w-full bg-background py-2'>
         <MobileNavbar />
       </footer>
     )

components/Header.tsx

@@ -36,7 +36,7 @@ export default function Header() {
   };
 
   return (
-    <header className='min-h-30 sticky top-0 z-10 flex flex-shrink-0 items-center justify-between bg-background px-4 py-2 shadow-sm'>
+    <header className='min-h-30 sticky top-0 z-20 flex flex-shrink-0 items-center justify-between bg-background px-4 py-2 shadow-sm'>
       {!isBreakpoint && <KindlyLogoLink />}
       {isBreakpoint ? (
         showConversationsList ? (

components/ItemCard.stories.ts

@@ -18,20 +18,34 @@ export const ItemCardDefault: Story = {
     imageSrc: testItem.src,
     item_name: 'White Jumper',
     condition: 'New',
-    item_type: 'Clothing',
+    size: 'Medium',
     postcode: 'E12',
     postable: true,
     id: 2,
     reserved: false,
   },
 };
 
+export const ItemCardPotageCovered: Story = {
+  args: {
+    imageSrc: testItem.src,
+    item_name: 'White Jumper',
+    condition: 'New',
+    size: 'Medium',
+    postcode: 'E12',
+    postable: true,
+    id: 2,
+    reserved: false,
+    postage_covered: true,
+  },
+};
+
 export const ItemCardReserved: Story = {
   args: {
     imageSrc: testItem.src,
     item_name: 'White Jumper',
     condition: 'New',
-    item_type: 'Clothing',
+    size: 'Medium',
     postcode: 'E12',
     postable: true,
     id: 2,
@@ -41,9 +55,8 @@ export const ItemCardReserved: Story = {
     const canvas = within(canvasElement);
 
     await step('Check if reserved tag is present', async () => {
-      const reservedTag = await canvas.findByText('Reserved');
+      const reservedTag = await canvas.findByText(/reserved/i);
       expect(reservedTag).toBeInTheDocument();
-      expect(reservedTag).toHaveClass('reserved');
     });
   },
 };

components/ItemCard.tsx

@@ -12,38 +12,46 @@ const ItemCard: React.FC<PartialItem> = ({
   imageSrc,
   item_name,
   condition,
-  item_type,
   postcode,
+  size,
   postage_covered,
   id,
   reserved,
 }) => {
   return (
-    <div className='card'>
-      <Link href={`/item/${id}`} className=''>
-        <div className='flex flex-row justify-between align-middle'>
-          <h2 className='p-4  font-semibold'>{item_name}</h2>
-          {reserved && <p className='reserved'>Reserved</p>}
-        </div>
-        <div className='flex gap-3'>
-          <div className='relative h-36 w-48 md:h-52 md:w-64'>
-            <Image
-              src={imageSrc ? `${imageSrc}` : '/default-item-img.png'}
-              alt={`Image of ${item_name}`}
-              fill
-              sizes='(max-width: 768px) 100vw, 50vw'
-            />
+    <Link href={`/item/${id}`}>
+      <div
+        className='card relative m-auto mt-8
+        flex h-[400px] w-[176px] flex-col gap-3 sm:w-[200px] md:h-[450px] md:w-[256px]'
+      >
+        {reserved && (
+          <div
+            className='absolute left-0 right-0 top-14 z-10 m-auto w-[175px] rounded-lg border border-primaryGreen
+            bg-background p-2 text-center opacity-70 md:w-[200px]'
+          >
+            <p className='text-lg text-primaryGreen'>RESERVED</p>
           </div>
-          <ItemDetails
-            condition={condition}
-            item_type={item_type}
-            postcode={postcode}
-            postage_covered={postage_covered}
-            fontSize='text-sm'
+        )}
+        <div className='relative h-[176px] w-[176px] sm:w-[200px] md:h-52 md:w-64'>
+          <Image
+            src={imageSrc ? `${imageSrc}` : '/default-item-img.png'}
+            alt={`Image of ${item_name}`}
+            fill
+            sizes='(max-width: 768px) 100vw, 50vw'
           />
         </div>
-      </Link>
-    </div>
+        <h2 className='p-4 text-center font-semibold md:text-xl'>
+          {item_name}
+        </h2>
+        <ItemDetails
+          condition={condition}
+          size={size}
+          postcode={postcode}
+          postage_covered={postage_covered}
+          fontSize='text-md'
+        />
+      </div>
+    </Link>
   );
 };
 

components/ItemDetails.tsx

@@ -5,40 +5,39 @@ type ItemDetailPropType = PartialItem & {
   condition?: string;
   item_type?: string;
   postcode?: string;
+  size?: string;
 };
 
 const ItemDetails: React.FC<ItemDetailPropType> = ({
   condition,
-  item_type,
+  size,
   postcode,
   postage_covered,
   fontSize,
 }) => {
   return (
-    <div
-      className={`flex flex-col items-center justify-center gap-1 ${fontSize}`}
-    >
+    <div className={`flex flex-col items-center gap-2 ${fontSize}`}>
+      {size && (
+        <p>
+          <span className='mr-2 font-light text-primaryOrange'>Size:</span>
+          {size}
+        </p>
+      )}
       {condition && (
-        <p className=''>
+        <p>
           <span className='mr-2 font-light text-primaryOrange'>Condition:</span>
           {condition}
         </p>
       )}
-      {item_type && (
-        <p className=''>
-          <span className='mr-2 font-light text-primaryOrange'>Category:</span>
-          {item_type}
-        </p>
-      )}
       {postcode && (
-        <p className=''>
+        <p>
           <span className='mr-2 font-light text-primaryOrange'>Location:</span>
           {postcode}
         </p>
       )}
 
       {postage_covered && (
-        <p className='mt-5 text-center italic'>Postage covered</p>
+        <p className='mt-3 text-center italic'>Postage covered</p>
       )}
     </div>
   );

components/search/ItemDisplayContainer.tsx

@@ -23,25 +23,27 @@ const ItemDisplayContainer: React.FC<ItemDisplayContainerProps> = ({
     );
   }
   return (
-    <div className='lg-px-20 m-auto mt-5 lg:w-5/6'>
-      <div className='mt-10 flex flex-col items-center gap-5'>
-        {searchResults.length > 0 ? (
-          searchResults.map((result) => (
-            <ItemCard
-              key={result.id}
-              imageSrc={result.imageSrc}
-              item_name={result.item_name}
-              condition={result.condition}
-              item_type={result.item_type}
-              postcode={result.postcode}
-              postage_covered={result.postage_covered}
-              id={result.id}
-            />
-          ))
-        ) : (
-          <p className='text-center'>No results found.</p>
-        )}
-      </div>
+    <div
+      className='m-auto mt-10 grid grid-cols-2 px-1
+        sm:max-w-[825px] sm:grid-cols-3 lg:max-w-[1140px] lg:grid-cols-4 lg:gap-10'
+    >
+      {searchResults.length > 0 ? (
+        searchResults.map((result) => (
+          <ItemCard
+            key={result.id}
+            imageSrc={result.imageSrc}
+            item_name={result.item_name}
+            condition={result.condition}
+            size={result.size}
+            postcode={result.postcode}
+            postage_covered={result.postage_covered}
+            id={result.id}
+            reserved={result.reserved}
+          />
+        ))
+      ) : (
+        <p className='text-center'>No results found.</p>
+      )}
     </div>
   );
 };