Merge pull request #1306 from w3bdesign/develop

Improve single product design and responsiveness

Author: w3bdesign

src/components/Layout/PageTitle.component.tsx

@@ -13,7 +13,7 @@ interface IPageTitleProps {
 const PageTitle = ({ title, marginLeft }: IPageTitleProps) => (
   <section
     className={`container ${
-      marginLeft ? 'pl-8' : 'pl-4'
+      marginLeft ? 'p-4' : 'p-0'
     }  pl-4 mx-auto mt-24 text-center bg-white`}
   >
     <span className="py-2 text-2xl font-bold tracking-wide text-center text-gray-800 no-underline uppercase hover:no-underline">

src/components/Product/AddToCart.component.tsx

@@ -80,15 +80,18 @@ export interface IProduct {
 export interface IProductRootObject {
   product: IProduct;
   variationId?: number;
+  fullWidth?: boolean;
 }
 
 /**
  * Handles the Add to cart functionality.
  * Uses GraphQL for product data
  * @param {IAddToCartProps} product // Product data
+ * @param {number} variationId // Variation ID
+ * @param {boolean} fullWidth // Whether the button should be full-width
  */
 
-const AddToCart = ({ product, variationId }: IProductRootObject) => {
+const AddToCart = ({ product, variationId, fullWidth = false }: IProductRootObject) => {
   const { setCart } = useContext(CartContext);
   const [requestError, setRequestError] = useState<boolean>(false);
 
@@ -146,6 +149,7 @@ const AddToCart = ({ product, variationId }: IProductRootObject) => {
       <Button
         handleButtonClick={() => handleAddToCart()}
         buttonDisabled={addToCartLoading || requestError}
+        fullWidth={fullWidth}
       >
         KJØP
       </Button>

src/components/Product/SingleProduct.component.tsx

@@ -57,7 +57,7 @@ const SingleProduct = ({ product }: IProductRootObject) => {
           <LoadingSpinner />
         </div>
       ) : (
-        <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto ">
+        <div className="container flex flex-wrap items-center pt-4 pb-12 mx-auto">
           <div className="grid grid-cols-1 gap-4 md:mt-16 lg:grid-cols-2 xl:grid-cols-2 md:grid-cols-2 sm:grid-cols-2">
             {image && (
               <img
@@ -78,45 +78,44 @@ const SingleProduct = ({ product }: IProductRootObject) => {
                 className="h-auto p-8 transition duration-500 ease-in-out transform xl:p-2 md:p-2 lg:p-2 md:hover:grow md:hover:shadow-lg md:hover:scale-105"
               />
             )}
-            <div className="ml-8">
-              <p className="text-3xl font-bold text-center md:text-left">{name}</p>
-              <br />
+            <div className="px-4 md:ml-8">
+              <h1 className="text-3xl font-bold text-center md:text-left mb-4">
+                {name}
+              </h1>
               {/* Display sale price when on sale */}
               {onSale && (
-                <div className="flex">
-                  <p className="pt-1 mt-4 text-3xl text-gray-900">
+                <div className="flex flex-col md:flex-row items-center md:items-start mb-4">
+                  <p className="text-3xl font-bold text-red-600">
                     {product.variations && filteredVariantPrice(price, '')}
                     {!product.variations && salePrice}
                   </p>
-                  <p className="pt-1 pl-8 mt-4 text-2xl text-gray-900 line-through">
+                  <p className="text-xl text-gray-500 line-through md:ml-4">
                     {product.variations && filteredVariantPrice(price, 'right')}
                     {!product.variations && regularPrice}
                   </p>
                 </div>
               )}
               {/* Display regular price when not on sale */}
               {!onSale && (
-                <p className="pt-1 mt-4 text-2xl text-gray-900"> {price}</p>
+                <p className="text-2xl font-bold mb-4">{price}</p>
               )}
-              <br />
-              <p className="pt-1 mt-4 text-2xl text-gray-900">
-                {DESCRIPTION_WITHOUT_HTML}
-              </p>
+              <p className="text-lg mb-4 text-center md:text-left">{DESCRIPTION_WITHOUT_HTML}</p>
               {Boolean(product.stockQuantity) && (
-                <p
-                  v-if="data.product.stockQuantity"
-                  className="pt-1 mt-4 mb-4 text-2xl text-gray-900"
-                >
-                  {product.stockQuantity} på lager
-                </p>
+                <div className="mb-4 p-2 bg-green-100 border border-green-400 rounded-lg mx-auto md:mx-0 max-w-[14.375rem]">
+                  <p className="text-lg text-green-700 font-semibold text-center md:text-left">
+                    {product.stockQuantity} på lager
+                  </p>
+                </div>
               )}
               {product.variations && (
-                <p className="pt-1 mt-4 text-xl text-gray-900">
-                  <span className="py-2">Varianter</span>
+                <div className="mb-4">
+                  <label htmlFor="variant" className="block text-lg font-medium mb-2">
+                    Varianter
+                  </label>
                   <select
                     id="variant"
                     name="variant"
-                    className="block w-80 px-6 py-2 bg-white border border-gray-500 rounded-lg focus:outline-none focus:shadow-outline"
+                    className="block w-full px-4 py-2 bg-white border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
                     onChange={(e) => {
                       setSelectedVariation(Number(e.target.value));
                     }}
@@ -133,20 +132,17 @@ const SingleProduct = ({ product }: IProductRootObject) => {
                       },
                     )}
                   </select>
-                </p>
+                </div>
               )}
-              <div className="pt-1 mt-2">
-                {
-                  // Display default AddToCart button if we do not have variations.
-                  // If we do, send the variationId to AddToCart button
-                }
+              <div className="w-full p-4 md:p-0">
                 {product.variations && (
                   <AddToCart
                     product={product}
                     variationId={selectedVariation}
+                    fullWidth={true}
                   />
                 )}
-                {!product.variations && <AddToCart product={product} />}
+                {!product.variations && <AddToCart product={product} fullWidth={true} />}
               </div>
             </div>
           </div>

src/components/UI/Button.component.tsx

@@ -7,22 +7,25 @@ interface IButtonProps {
   buttonDisabled?: boolean;
   color?: TButtonColors;
   children: ReactNode;
+  fullWidth?: boolean;
 }
 
 /**
  * Renders a clickable button
- * @function PageTitle
+ * @function Button
  * @param {void} handleButtonClick - Handle button click
  * @param {boolean?} buttonDisabled - Is button disabled?
- * @param {color?} TButtonColors - Color for button, either red or blue
+ * @param {TButtonColors?} color - Color for button, either red or blue
  * @param {ReactNode} children - Children for button
+ * @param {boolean?} fullWidth - Whether the button should be full-width on mobile
  * @returns {JSX.Element} - Rendered component
  */
 const Button = ({
   handleButtonClick,
   buttonDisabled,
   color = 'blue',
   children,
+  fullWidth = false,
 }: IButtonProps) => (
   <button
     onClick={handleButtonClick}
@@ -33,6 +36,7 @@ const Button = ({
           ? 'bg-blue-500 hover:bg-blue-600'
           : 'bg-red-500 hover:bg-red-600'
       }
+      ${fullWidth ? 'w-full md:w-auto' : ''}
     `}
   >
     {children}