Finetune design

Had to finetune design after Tailwind CSS upgrade

Author: w3bdesign

components/Cart/CartPage/CartItemsContainer.component.jsx

@@ -7,9 +7,8 @@ import { AppContext } from 'utils/context/AppContext';
 import {
   getFormattedCart,
   getUpdatedItems,
-} from '../../../utils/functions/functions';
+} from 'utils/functions/functions';
 
-import PageTitle from 'components/Title/PageTitle.component';
 import RegularCart from './RegularCart.component';
 import MobileCart from './MobileCart.component';
 import LoadingSpinner from 'components/LoadingSpinner/LoadingSpinner.component';
@@ -75,7 +74,7 @@ const CartItemsContainer = () => {
       // Update cart data in React Context.
       setCart(updatedCart);
     },
-    onError: (error) => {     
+    onError: (error) => {
       setRequestError(error);
     },
   });
@@ -85,7 +84,6 @@ const CartItemsContainer = () => {
         <div className="container flex flex-wrap items-center mx-auto">
           {cart ? (
             <div className="p-6 mx-auto mt-5">
-              <PageTitle title="Handlekurv" />
               <RegularCart
                 cart={cart}
                 updateCartProcessing={updateCartProcessing}

components/Cart/CartPage/MobileCart.component.jsx

@@ -7,13 +7,13 @@ const MobileCart = ({ cart, handleRemoveProductClick, updateCart }) => {
     <section className="bg-white md:hidden lg:hidden xl:hidden">
       <div className="flex items-center justify-center">
         <div className="container">
-          <table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg">
+          <table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden ">
             <thead className="text-black">
               {cart.products.length &&
                 cart.products.map(() => (
                   <tr
                     key={v4()}
-                    className="flex flex-col mb-2 bg-white rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
+                    className="flex flex-col mb-2 bg-white border border-gray-300 rounded-l-lg flex-no wrap sm:table-row sm:rounded-none sm:mb-0"
                   >
                     <th className="p-3 text-left">Fjern</th>
                     <th className="p-3 text-left">Navn</th>

components/Cart/CartPage/MobileCartItem.component.jsx

@@ -48,7 +48,7 @@ const MobileCartItem = ({
 
   return (
     <>
-      <tr className="flex flex-col mb-2 flex-no wrap sm:table-row sm:mb-0">
+      <tr className="flex flex-col mb-2 border border-gray-300 sm:mb-0">
         <td className="h-12 p-3">
           <SVGX
             cartKey={item.cartKey}

components/Checkout/Billing.component.jsx

@@ -1,7 +1,5 @@
 import { useForm } from 'react-hook-form';
 
-import CheckoutTitle from 'components/Title/CheckoutTitle.component';
-
 const Input = ({
   name,
   label,
@@ -34,8 +32,7 @@ const Billing = ({ onSubmit }) => {
     <>
       <section className="text-gray-700">
         <form onSubmit={handleSubmit(onSubmit)}>
-          <div className="container p-4 py-2 mx-auto">
-            <CheckoutTitle title="Betalingsdetaljer" />
+          <div className="container p-4 py-2 mx-auto">           
             <div className="mx-auto lg:w-1/2 md:w-2/3">
               <div className="flex flex-wrap -m-2">
                 <div className="w-1/2 p-2">

components/Checkout/MobileOrderDetails.component.jsx

@@ -1,14 +1,12 @@
 import { v4 } from 'uuid';
 
 import MobileOrderDetailsItem from './MobileOrderDetailsItem.component';
-import CheckoutTitle from 'components/Title/CheckoutTitle.component';
 
 const MobileOrderDetails = ({ cart }) => {
   return (
     <section className="block py-8 bg-white lg:hidden xl:hidden md:hidden">
       <div className="flex items-center justify-center">
         <div className="p-6 mx-auto mt-5">
-          <CheckoutTitle title="Din Ordre" />
           <table className="flex flex-row flex-no-wrap mx-auto my-5 overflow-hidden rounded-lg sm:bg-white sm:shadow-lg">
             <thead className="text-black">
               {cart.products.length &&

components/Checkout/OrderDetails.component.jsx

@@ -1,4 +1,3 @@
-import CheckoutTitle from 'components/Title/CheckoutTitle.component';
 import OrderDetailsCartItem from './OrderDetailsCartItem.component';
 
 const OrderDetails = ({ cart }) => {
@@ -8,7 +7,6 @@ const OrderDetails = ({ cart }) => {
         <div className="container flex flex-wrap items-center mx-auto">
           {cart ? (
             <div className="p-6 mx-auto mt-5">
-              <CheckoutTitle title="Din Ordre" />
               <table className="table-auto">
                 <thead>
                   <tr>

components/Index/Hero.component.jsx

@@ -4,28 +4,26 @@
 const Hero = () => {
   return (
     <>
-    
-    <section
-      id="hero"     
-      className="flex w-full pt-12 mx-auto mt-40 bg-right bg-cover md:pt-0 md:items-center"
-    >
-      <div className="container mx-auto">
-        <div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
-          <h1 className="p-4 my-4 text-2xl text-white bg-black rounded-lg">
-            Stripete Zig Zag Pute Sett
-          </h1>
+      <section
+        id="hero"
+        className="flex w-full pt-10 mx-auto bg-right bg-cover mt-36 md:pt-0 md:items-center"
+      >
+        <div className="container mx-auto">
+          <div className="flex flex-col items-start justify-center w-full px-6 tracking-wide lg:w-1/2">
+            <h1 className="p-4 my-4 text-2xl text-white bg-black rounded-lg">
+              Stripete Zig Zag Pute Sett
+            </h1>
 
-          <a
-            className="inline-block px-6 py-3 text-xl leading-relaxed text-white uppercase bg-black rounded-lg hover:underline"
-            href="#"
-          >
-            se utvalget
-          </a>
+            <a
+              className="inline-block px-6 py-3 text-xl leading-relaxed text-white uppercase bg-black rounded-lg hover:underline"
+              href="#"
+            >
+              se utvalget
+            </a>
+          </div>
         </div>
-      </div>
-    </section>
-  </>
-
+      </section>
+    </>
   );
 };
 

components/Title/CheckoutTitle.component.jsx

@@ -1,10 +1,12 @@
 import Header from 'components/Header/Header.component';
 import CartItemsContainer from 'components/Cart/CartPage/CartItemsContainer.component';
+import PageTitle from 'components/Title/PageTitle.component';
 
 const Handlekurv = () => {
   return (
     <>
       <Header title="- Handlekurv" />
+      <PageTitle title="Handlekurv" />
       <CartItemsContainer />
     </>
   );

pages/handlekurv.js

@@ -1,9 +1,11 @@
 import Header from 'components/Header/Header.component';
 import CheckoutForm from 'components/Checkout/CheckoutForm.component';
+import PageTitle from 'components/Title/PageTitle.component';
 
 const Kasse = () => (
   <>
     <Header title="- Gå til kasse" />
+    <PageTitle title="Din ordre" />
     <CheckoutForm />
   </>
 );