Merge branch 'master' into 1112-design-categories-1920-x-1080

Author: w3bdesign

src/components/Category/Categories.component.tsx

@@ -7,7 +7,7 @@ interface ICategoriesProps {
 
 const Categories = ({ categories }: ICategoriesProps) => (
   <section className="container mx-auto bg-white">
-    <div className="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-4 sm:grid-cols-2 md:grid-cols-3 xs:grid-cols-3">
+    <div className="grid gap-2 px-2 pt-2 pb-2 lg:px-0 xl:px-0 md:px-0 lg:grid-cols-3 sm:grid-cols-1 md:grid-cols-3 xs:grid-cols-3">
       {categories.map(({ id, name, slug }) => (
         <Link
           key={uuidv4()}

src/components/Product/DisplayProducts.component.tsx

@@ -111,7 +111,7 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                 >
                   <span>
                     <div className="flex justify-center pt-3">
-                      <p className="font-bold text-center cursor-pointer">
+                      <p className="font-bold text-center cursor-pointer text-2xl">
                         {name}
                       </p>
                     </div>
@@ -120,19 +120,19 @@ const DisplayProducts = ({ products }: IDisplayProductsProps) => (
                 {/* Display sale price when on sale */}
                 {onSale && (
                   <div className="flex justify-center">
-                    <div className="pt-1 text-gray-900">
+                    <div className="pt-1 text-gray-900 text-xl">
                       {variations && filteredVariantPrice(price, '')}
                       {!variations && salePrice}
                     </div>
-                    <div className="pt-1 ml-2 text-gray-500 line-through">
+                    <div className="pt-1 ml-2 text-gray-500 line-through text-lg">
                       {variations && filteredVariantPrice(price, 'right')}
                       {!variations && regularPrice}
                     </div>
                   </div>
                 )}
                 {/* Display regular price when not on sale */}
                 {!onSale && (
-                  <p className="pt-1 text-center text-gray-900">{price}</p>
+                  <p className="pt-1 text-center text-gray-900 text-xl">{price}</p>
                 )}
               </div>
             );