From 36958b895b872515ea286bcefeb8562001dbbda1 Mon Sep 17 00:00:00 2001
From: yesim <sityesim@gmail.com>
Date: Tue, 23 Aug 2022 23:05:28 +0300
Subject: [PATCH] feat: conflict solved

---
 src/components/AddMeal/AddMeal.jsx            | 20 ++++-----
 .../__snapshots__/AddMeal.test.jsx.snap       | 18 ++++----
 src/components/Cards/Cards.jsx                |  8 ++--
 .../__snapshots__/Cards.test.jsx.snap         |  8 ++--
 src/components/LandingMeals/LandingMeals.jsx  | 40 +++++++++---------
 .../__snapshots__/LandingMeals.test.jsx.snap  | 40 +++++++++---------
 src/components/Navbar/Navbar.jsx              |  6 +--
 .../Navbar/__snapshots__/Navbar.test.jsx.snap |  5 ++-
 src/components/Orders/Orders.jsx              | 42 +++++++++----------
 .../__snapshots__/Orders.test.jsx.snap        | 42 +++++++++----------
 src/components/Profile/Profile.jsx            |  2 +-
 .../SignUpForm/SignUpChef/SignUpChef.jsx      | 36 +++++++---------
 .../__snapshots__/SignUpChef.test.jsx.snap    |  2 +-
 .../SignUpForm/SignUpUser/SignUpUser.jsx      | 36 +++++++---------
 .../__snapshots__/SignUpUser.test.jsx.snap    |  2 +-
 src/pages/index.jsx                           |  2 +-
 tailwind.config.js                            |  4 --
 17 files changed, 149 insertions(+), 164 deletions(-)

diff --git a/src/components/AddMeal/AddMeal.jsx b/src/components/AddMeal/AddMeal.jsx
index 4f65dc7..79a7665 100644
--- a/src/components/AddMeal/AddMeal.jsx
+++ b/src/components/AddMeal/AddMeal.jsx
@@ -50,7 +50,7 @@ export default function AddMeal() {
                 }}
                 className='mx-0 mt-0 flex h-48 w-full items-center justify-center overflow-hidden bg-center bg-no-repeat'
             >
-                <div className='md:gap-80 lg:gap-y-96 flex items-center justify-between gap-28 text-white'>
+                <div className='flex items-center justify-between gap-28 text-white md:gap-80 lg:gap-y-96'>
                     {/* <HiArrowSmLeft
                         className='cursor-pointer'
                         style={{ fontSize: "40px" }}
@@ -84,14 +84,14 @@ export default function AddMeal() {
             <input
                 type='text'
                 placeholder='Fried Chips'
-                className='lg:text-base ml-5 w-2/3 rounded border-none bg-[#00494533] text-center text-sm focus:ring-1 focus:ring-[#004945]'
+                className='ml-5 w-2/3 rounded border-none bg-[#00494533] text-center text-sm focus:ring-1 focus:ring-[#004945] lg:text-base'
                 required
                 value={mealName}
                 onChange={(e) => {
                     setMealName(e.target.value);
                 }}
             />
-            <p className='lg:text-base ml-3 text-sm'>Dietary</p>
+            <p className='ml-3 text-sm lg:text-base'>Dietary</p>
             <ul className='ml-5 flex w-full items-center justify-start gap-3'>
                 <li>
                     <input
@@ -144,14 +144,14 @@ export default function AddMeal() {
                 </li>
             </ul>
 
-            <p className='lg:text-base ml-3 text-sm'>Ingredients</p>
+            <p className='ml-3 text-sm lg:text-base'>Ingredients</p>
             <div className='ml-5 flex w-full flex-col items-start justify-start gap-3'>
                 <div className='relative w-1/3'>
                     <input
                         type='text'
                         placeholder='Tomatoes'
                         value={ingredient}
-                        className=' lg:text-sm w-full rounded-full border-none bg-[#00494533] p-2 text-start text-xs focus:ring-1 focus:ring-[#004945]'
+                        className=' w-full rounded-full border-none bg-[#00494533] p-2 text-start text-xs focus:ring-1 focus:ring-[#004945] lg:text-sm'
                         onChange={(e) => setIngredient(e.target.value)}
                     ></input>
                     <IoAddCircleOutline
@@ -164,7 +164,7 @@ export default function AddMeal() {
                     {ingredients.map((ingredient, id) => (
                         // eslint-disable-next-line react/jsx-key
                         <div className=' relative w-1/3'>
-                            <p className='lg:text-sm w-full rounded-full border-none bg-[#00494533] p-2 text-start text-xs text-zinc-800'>
+                            <p className='w-full rounded-full border-none bg-[#00494533] p-2 text-start text-xs text-zinc-800 lg:text-sm'>
                                 {ingredient}
                             </p>
                             <IoTrashBinOutline
@@ -175,18 +175,18 @@ export default function AddMeal() {
                     ))}
                 </div>
             </div>
-            <p className='lg:text-base ml-3 text-sm'>Delivery in</p>
+            <p className='ml-3 text-sm lg:text-base'>Delivery in</p>
             <input
                 type='text'
-                className='lg:text-base  ml-5 rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945]'
+                className='ml-5  rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945] lg:text-base'
                 placeholder='30 min'
                 onChange={(e) => setDeliveryMin(e.target.value)}
             ></input>
 
-            <p className='lg:text-base ml-3 text-sm'>Price</p>
+            <p className='ml-3 text-sm lg:text-base'>Price</p>
             <input
                 type='text'
-                className='lg:text-base ml-5 mb-3 rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945]'
+                className='ml-5 mb-3 rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945] lg:text-base'
                 placeholder='30 dollar'
                 onChange={(e) => setPrice(e.target.value)}
             ></input>
diff --git a/src/components/AddMeal/__test__/__snapshots__/AddMeal.test.jsx.snap b/src/components/AddMeal/__test__/__snapshots__/AddMeal.test.jsx.snap
index 8338425..93bbca5 100644
--- a/src/components/AddMeal/__test__/__snapshots__/AddMeal.test.jsx.snap
+++ b/src/components/AddMeal/__test__/__snapshots__/AddMeal.test.jsx.snap
@@ -15,7 +15,7 @@ exports[`renders correctly 1`] = `
     }
   >
     <div
-      className="md:gap-80 lg:gap-y-96 flex items-center justify-between gap-28 text-white"
+      className="flex items-center justify-between gap-28 text-white md:gap-80 lg:gap-y-96"
     >
       <input
         className="peer hidden"
@@ -58,7 +58,7 @@ exports[`renders correctly 1`] = `
     </div>
   </div>
   <input
-    className="lg:text-base ml-5 w-2/3 rounded border-none bg-[#00494533] text-center text-sm focus:ring-1 focus:ring-[#004945]"
+    className="ml-5 w-2/3 rounded border-none bg-[#00494533] text-center text-sm focus:ring-1 focus:ring-[#004945] lg:text-base"
     onChange={[Function]}
     placeholder="Fried Chips"
     required={true}
@@ -66,7 +66,7 @@ exports[`renders correctly 1`] = `
     value=""
   />
   <p
-    className="lg:text-base ml-3 text-sm"
+    className="ml-3 text-sm lg:text-base"
   >
     Dietary
   </p>
@@ -142,7 +142,7 @@ exports[`renders correctly 1`] = `
     </li>
   </ul>
   <p
-    className="lg:text-base ml-3 text-sm"
+    className="ml-3 text-sm lg:text-base"
   >
     Ingredients
   </p>
@@ -153,7 +153,7 @@ exports[`renders correctly 1`] = `
       className="relative w-1/3"
     >
       <input
-        className=" lg:text-sm w-full rounded-full border-none bg-[#00494533] p-2 text-start text-xs focus:ring-1 focus:ring-[#004945]"
+        className=" w-full rounded-full border-none bg-[#00494533] p-2 text-start text-xs focus:ring-1 focus:ring-[#004945] lg:text-sm"
         onChange={[Function]}
         placeholder="Tomatoes"
         type="text"
@@ -195,23 +195,23 @@ exports[`renders correctly 1`] = `
     />
   </div>
   <p
-    className="lg:text-base ml-3 text-sm"
+    className="ml-3 text-sm lg:text-base"
   >
     Delivery in
   </p>
   <input
-    className="lg:text-base ml-5 rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945]"
+    className="ml-5 rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945] lg:text-base"
     onChange={[Function]}
     placeholder="30 min"
     type="text"
   />
   <p
-    className="lg:text-base ml-3 text-sm"
+    className="ml-3 text-sm lg:text-base"
   >
     Price
   </p>
   <input
-    className="lg:text-base ml-5 mb-3 rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945]"
+    className="ml-5 mb-3 rounded border-none text-xs ring-1 ring-[#004945] focus:rounded focus:ring-1 focus:ring-[#004945] lg:text-base"
     onChange={[Function]}
     placeholder="30 dollar"
     type="text"
diff --git a/src/components/Cards/Cards.jsx b/src/components/Cards/Cards.jsx
index c0d7dc2..91b4e81 100644
--- a/src/components/Cards/Cards.jsx
+++ b/src/components/Cards/Cards.jsx
@@ -1,11 +1,11 @@
 import Image from "next/image";
 const Cards = () => {
     return (
-        <div className='md:ml-0 mt-20 ml-10 flex flex-col items-center justify-center'>
+        <div className='mt-20 ml-10 flex flex-col items-center justify-center md:ml-0'>
             {/* title part */}
             <div className='bflex m-auto flex-col'>
                 <div className=' flex  flex-col'>
-                    <p className=' md:text-3xl text-2xl font-bold text-black'>
+                    <p className=' text-2xl font-bold text-black md:text-3xl'>
                         You’ve missed home made food?
                     </p>
                     <p className=' pb-12  pt-2 font-normal   text-black'>
@@ -25,7 +25,7 @@ const Cards = () => {
                                     alt='x'
                                 />
                             </div>
-                            <div className=' md:text-3xl h-40 w-[307px] text-2xl font-semibold text-black'>
+                            <div className=' h-40 w-[307px] text-2xl font-semibold text-black md:text-3xl'>
                                 Pick your chef order the food and get it when
                                 you want
                                 <div>
@@ -51,7 +51,7 @@ const Cards = () => {
                     </div>
                     <div className='flex   h-[17.813rem] w-[34.375] flex-row rounded-[12px] bg-[#FFE7E3] shadow-lg '>
                         <div className='flex  flex-col justify-center gap-7 px-6 '>
-                            <p className='  md:pt-12   md:text-3xl   w-[310px] text-2xl font-semibold text-black'>
+                            <p className='  w-[310px]   text-2xl   font-semibold text-black md:pt-12 md:text-3xl'>
                                 Get a 15% discount for your first order!
                             </p>
                             <button className='  box-border  h-10 w-32 bg-green-900 '>
diff --git a/src/components/Cards/__test__/__snapshots__/Cards.test.jsx.snap b/src/components/Cards/__test__/__snapshots__/Cards.test.jsx.snap
index 23f9002..2f661a3 100644
--- a/src/components/Cards/__test__/__snapshots__/Cards.test.jsx.snap
+++ b/src/components/Cards/__test__/__snapshots__/Cards.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="md:ml-0 mt-20 ml-10 flex flex-col items-center justify-center"
+  className="mt-20 ml-10 flex flex-col items-center justify-center md:ml-0"
 >
   <div
     className="bflex m-auto flex-col"
@@ -11,7 +11,7 @@ exports[`renders correctly 1`] = `
       className=" flex flex-col"
     >
       <p
-        className=" md:text-3xl text-2xl font-bold text-black"
+        className=" text-2xl font-bold text-black md:text-3xl"
       >
         You’ve missed home made food?
       </p>
@@ -149,7 +149,7 @@ exports[`renders correctly 1`] = `
             </span>
           </div>
           <div
-            className=" md:text-3xl h-40 w-[307px] text-2xl font-semibold text-black"
+            className=" h-40 w-[307px] text-2xl font-semibold text-black md:text-3xl"
           >
             Pick your chef order the food and get it when you want
             <div>
@@ -400,7 +400,7 @@ exports[`renders correctly 1`] = `
           className="flex flex-col justify-center gap-7 px-6 "
         >
           <p
-            className=" md:pt-12 md:text-3xl w-[310px] text-2xl font-semibold text-black"
+            className=" w-[310px] text-2xl font-semibold text-black md:pt-12 md:text-3xl"
           >
             Get a 15% discount for your first order!
           </p>
diff --git a/src/components/LandingMeals/LandingMeals.jsx b/src/components/LandingMeals/LandingMeals.jsx
index 4827cbb..f7a96cc 100644
--- a/src/components/LandingMeals/LandingMeals.jsx
+++ b/src/components/LandingMeals/LandingMeals.jsx
@@ -5,7 +5,7 @@ const LandingMeals = () => {
     const { t } = useTranslation("landing-meals");
 
     return (
-        <div className='md:grid-cols-6 m-14 grid '>
+        <div className='m-14 grid md:grid-cols-6 '>
             <div className='md:col-span-1 '>
                 <nav>
                     <div>
@@ -31,7 +31,7 @@ const LandingMeals = () => {
                 </nav>
             </div>
             <div className='md:col-span-5  '>
-                <div className='md:grid-cols-3 m-16 mt-8 grid gap-10'>
+                <div className='m-16 mt-8 grid gap-10 md:grid-cols-3'>
                     <div className='card relative'>
                         <Image
                             src='/images/meat.jpg'
@@ -39,11 +39,11 @@ const LandingMeals = () => {
                             height='300'
                             alt='meatball'
                         />
-                        <span className='md:text-base m-4 text-sm font-bold '>
+                        <span className='m-4 text-sm font-bold md:text-base '>
                             Spanish Paella{" "}
                         </span>
                         <div className='flex items-center '>
-                            <div className='md:w-11 flex items-center  p-2'>
+                            <div className='flex items-center p-2  md:w-11'>
                                 <Image
                                     src='/images/Avatar.png'
                                     width='32'
@@ -52,7 +52,7 @@ const LandingMeals = () => {
                                     alt='chef'
                                 />
                             </div>
-                            <span className='text-grey-500 md:text-sm text-xs'>
+                            <span className='text-grey-500 text-xs md:text-sm'>
                                 Jennifer Lawrence
                             </span>
                         </div>
@@ -68,11 +68,11 @@ const LandingMeals = () => {
                             height='300'
                             alt='meatball'
                         />
-                        <span className='md:text-base m-4 text-sm font-bold'>
+                        <span className='m-4 text-sm font-bold md:text-base'>
                             Spanish Paella{" "}
                         </span>
                         <div className='flex items-center '>
-                            <div className='md:w-11 flex items-center  p-2'>
+                            <div className='flex items-center p-2  md:w-11'>
                                 <Image
                                     src='/images/Avatar.png'
                                     width='32'
@@ -81,7 +81,7 @@ const LandingMeals = () => {
                                     alt='chef'
                                 />
                             </div>
-                            <span className='text-grey-500 md:text-sm text-xs'>
+                            <span className='text-grey-500 text-xs md:text-sm'>
                                 Jennifer Lawrence
                             </span>
                         </div>
@@ -97,11 +97,11 @@ const LandingMeals = () => {
                             height='300'
                             alt='meatball'
                         />
-                        <span className='md:text-base m-4 text-sm font-bold'>
+                        <span className='m-4 text-sm font-bold md:text-base'>
                             Spanish Paella{" "}
                         </span>
                         <div className='flex items-center '>
-                            <div className='md:w-11 flex items-center  p-2'>
+                            <div className='flex items-center p-2  md:w-11'>
                                 <Image
                                     src='/images/Avatar.png'
                                     width='32'
@@ -110,7 +110,7 @@ const LandingMeals = () => {
                                     alt='chef'
                                 />
                             </div>
-                            <span className='text-grey-500 md:text-sm text-xs'>
+                            <span className='text-grey-500 text-xs md:text-sm'>
                                 Jennifer Lawrence
                             </span>
                         </div>
@@ -126,11 +126,11 @@ const LandingMeals = () => {
                             height='300'
                             alt='meatball'
                         />
-                        <span className='md:text-base m-4 text-sm font-bold'>
+                        <span className='m-4 text-sm font-bold md:text-base'>
                             Spanish Paella{" "}
                         </span>
                         <div className='flex items-center '>
-                            <div className='md:w-11 flex items-center  p-2'>
+                            <div className='flex items-center p-2  md:w-11'>
                                 <Image
                                     src='/images/Avatar.png'
                                     width='32'
@@ -139,7 +139,7 @@ const LandingMeals = () => {
                                     alt='chef'
                                 />
                             </div>
-                            <span className='text-grey-500 md:text-sm text-xs'>
+                            <span className='text-grey-500 text-xs md:text-sm'>
                                 Jennifer Lawrence
                             </span>
                         </div>
@@ -155,11 +155,11 @@ const LandingMeals = () => {
                             height='300'
                             alt='meatball'
                         />
-                        <span className='md:text-base m-4 text-sm font-bold'>
+                        <span className='m-4 text-sm font-bold md:text-base'>
                             Spanish Paella{" "}
                         </span>
                         <div className='flex items-center '>
-                            <div className='md:w-11 flex items-center  p-2'>
+                            <div className='flex items-center p-2  md:w-11'>
                                 <Image
                                     src='/images/Avatar.png'
                                     width='32'
@@ -168,7 +168,7 @@ const LandingMeals = () => {
                                     alt='chef'
                                 />
                             </div>
-                            <span className='text-grey-500 md:text-sm text-xs'>
+                            <span className='text-grey-500 text-xs md:text-sm'>
                                 Jennifer Lawrence
                             </span>
                         </div>
@@ -184,11 +184,11 @@ const LandingMeals = () => {
                             height='300'
                             alt='meatball'
                         />
-                        <span className='md:text-base m-4 text-sm font-bold'>
+                        <span className='m-4 text-sm font-bold md:text-base'>
                             Spanish Paella{" "}
                         </span>
                         <div className='flex items-center '>
-                            <div className='md:w-11 flex items-center  p-2'>
+                            <div className='flex items-center p-2  md:w-11'>
                                 <Image
                                     src='/images/Avatar.png'
                                     width='32'
@@ -197,7 +197,7 @@ const LandingMeals = () => {
                                     alt='chef'
                                 />
                             </div>
-                            <span className='text-grey-500 md:text-sm text-xs'>
+                            <span className='text-grey-500 text-xs md:text-sm'>
                                 Jennifer Lawrence
                             </span>
                         </div>
diff --git a/src/components/LandingMeals/__snapshots__/LandingMeals.test.jsx.snap b/src/components/LandingMeals/__snapshots__/LandingMeals.test.jsx.snap
index 09aa678..90602d9 100644
--- a/src/components/LandingMeals/__snapshots__/LandingMeals.test.jsx.snap
+++ b/src/components/LandingMeals/__snapshots__/LandingMeals.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders correctly 1`] = `
 <div
-  className="md:grid-cols-6 m-14 grid "
+  className="m-14 grid md:grid-cols-6 "
 >
   <div
     className="md:col-span-1 "
@@ -52,7 +52,7 @@ exports[`renders correctly 1`] = `
     className="md:col-span-5 "
   >
     <div
-      className="md:grid-cols-3 m-16 mt-8 grid gap-10"
+      className="m-16 mt-8 grid gap-10 md:grid-cols-3"
     >
       <div
         className="card relative"
@@ -174,7 +174,7 @@ exports[`renders correctly 1`] = `
           </noscript>
         </span>
         <span
-          className="md:text-base m-4 text-sm font-bold "
+          className="m-4 text-sm font-bold md:text-base "
         >
           Spanish Paella
            
@@ -183,7 +183,7 @@ exports[`renders correctly 1`] = `
           className="flex items-center "
         >
           <div
-            className="md:w-11 flex items-center p-2"
+            className="flex items-center p-2 md:w-11"
           >
             <span
               style={
@@ -303,7 +303,7 @@ exports[`renders correctly 1`] = `
             </span>
           </div>
           <span
-            className="text-grey-500 md:text-sm text-xs"
+            className="text-grey-500 text-xs md:text-sm"
           >
             Jennifer Lawrence
           </span>
@@ -437,7 +437,7 @@ exports[`renders correctly 1`] = `
           </noscript>
         </span>
         <span
-          className="md:text-base m-4 text-sm font-bold"
+          className="m-4 text-sm font-bold md:text-base"
         >
           Spanish Paella
            
@@ -446,7 +446,7 @@ exports[`renders correctly 1`] = `
           className="flex items-center "
         >
           <div
-            className="md:w-11 flex items-center p-2"
+            className="flex items-center p-2 md:w-11"
           >
             <span
               style={
@@ -566,7 +566,7 @@ exports[`renders correctly 1`] = `
             </span>
           </div>
           <span
-            className="text-grey-500 md:text-sm text-xs"
+            className="text-grey-500 text-xs md:text-sm"
           >
             Jennifer Lawrence
           </span>
@@ -700,7 +700,7 @@ exports[`renders correctly 1`] = `
           </noscript>
         </span>
         <span
-          className="md:text-base m-4 text-sm font-bold"
+          className="m-4 text-sm font-bold md:text-base"
         >
           Spanish Paella
            
@@ -709,7 +709,7 @@ exports[`renders correctly 1`] = `
           className="flex items-center "
         >
           <div
-            className="md:w-11 flex items-center p-2"
+            className="flex items-center p-2 md:w-11"
           >
             <span
               style={
@@ -829,7 +829,7 @@ exports[`renders correctly 1`] = `
             </span>
           </div>
           <span
-            className="text-grey-500 md:text-sm text-xs"
+            className="text-grey-500 text-xs md:text-sm"
           >
             Jennifer Lawrence
           </span>
@@ -963,7 +963,7 @@ exports[`renders correctly 1`] = `
           </noscript>
         </span>
         <span
-          className="md:text-base m-4 text-sm font-bold"
+          className="m-4 text-sm font-bold md:text-base"
         >
           Spanish Paella
            
@@ -972,7 +972,7 @@ exports[`renders correctly 1`] = `
           className="flex items-center "
         >
           <div
-            className="md:w-11 flex items-center p-2"
+            className="flex items-center p-2 md:w-11"
           >
             <span
               style={
@@ -1092,7 +1092,7 @@ exports[`renders correctly 1`] = `
             </span>
           </div>
           <span
-            className="text-grey-500 md:text-sm text-xs"
+            className="text-grey-500 text-xs md:text-sm"
           >
             Jennifer Lawrence
           </span>
@@ -1226,7 +1226,7 @@ exports[`renders correctly 1`] = `
           </noscript>
         </span>
         <span
-          className="md:text-base m-4 text-sm font-bold"
+          className="m-4 text-sm font-bold md:text-base"
         >
           Spanish Paella
            
@@ -1235,7 +1235,7 @@ exports[`renders correctly 1`] = `
           className="flex items-center "
         >
           <div
-            className="md:w-11 flex items-center p-2"
+            className="flex items-center p-2 md:w-11"
           >
             <span
               style={
@@ -1355,7 +1355,7 @@ exports[`renders correctly 1`] = `
             </span>
           </div>
           <span
-            className="text-grey-500 md:text-sm text-xs"
+            className="text-grey-500 text-xs md:text-sm"
           >
             Jennifer Lawrence
           </span>
@@ -1489,7 +1489,7 @@ exports[`renders correctly 1`] = `
           </noscript>
         </span>
         <span
-          className="md:text-base m-4 text-sm font-bold"
+          className="m-4 text-sm font-bold md:text-base"
         >
           Spanish Paella
            
@@ -1498,7 +1498,7 @@ exports[`renders correctly 1`] = `
           className="flex items-center "
         >
           <div
-            className="md:w-11 flex items-center p-2"
+            className="flex items-center p-2 md:w-11"
           >
             <span
               style={
@@ -1618,7 +1618,7 @@ exports[`renders correctly 1`] = `
             </span>
           </div>
           <span
-            className="text-grey-500 md:text-sm text-xs"
+            className="text-grey-500 text-xs md:text-sm"
           >
             Jennifer Lawrence
           </span>
diff --git a/src/components/Navbar/Navbar.jsx b/src/components/Navbar/Navbar.jsx
index 27f6e82..c066873 100644
--- a/src/components/Navbar/Navbar.jsx
+++ b/src/components/Navbar/Navbar.jsx
@@ -9,9 +9,9 @@ function Navbar() {
 
     return (
         <>
-            <nav className='fixed m-auto flex w-[100%] items-center bg-white pt-[1.5rem] pb-[1.5rem] pl-8 pr-8 font-opensans tablet:pl-3 tablet:pr-3'>
+            <nav className='tablet:pl-3 tablet:pr-3 fixed m-auto flex w-[100%] items-center bg-white pt-[1.5rem] pb-[1.5rem] pl-8 pr-8 font-opensans'>
                 <div className='navbar flex w-[100%] items-center justify-between'>
-                    <div className='logo text-2xl tablet:text-xl'>
+                    <div className='logo tablet:text-xl text-2xl'>
                         <Link href='#'>
                             <a>
                                 <span className='font-black'>COOK</span>IEZ
@@ -101,7 +101,7 @@ function Navbar() {
                         </Menu>
                     ) : (
                         <div className='nav-list'>
-                            <ul className='flex items-center gap-10 text-lg tablet:text-base'>
+                            <ul className='tablet:text-base flex items-center gap-10 text-lg'>
                                 <li>
                                     <button>En</button>/<button>Tr</button>
                                 </li>
diff --git a/src/components/Navbar/__snapshots__/Navbar.test.jsx.snap b/src/components/Navbar/__snapshots__/Navbar.test.jsx.snap
index 7f9f1f5..d3718b8 100644
--- a/src/components/Navbar/__snapshots__/Navbar.test.jsx.snap
+++ b/src/components/Navbar/__snapshots__/Navbar.test.jsx.snap
@@ -2,18 +2,19 @@
 
 exports[`Navbar Component 1`] = `
 <nav
-  className="fixed m-auto flex w-[100%] items-center bg-white pt-[1.5rem] pb-[1.5rem] pl-8 pr-8 font-opensans tablet:pl-3 tablet:pr-3"
+  className="tablet:pl-3 tablet:pr-3 fixed m-auto flex w-[100%] items-center bg-white pt-[1.5rem] pb-[1.5rem] pl-8 pr-8 font-opensans"
 >
   <div
     className="navbar flex w-[100%] items-center justify-between"
   >
     <div
-      className="logo text-2xl tablet:text-xl"
+      className="logo tablet:text-xl text-2xl"
     >
       <a
         href="/#"
         onClick={[Function]}
         onMouseEnter={[Function]}
+        onTouchStart={[Function]}
       >
         <span
           className="font-black"
diff --git a/src/components/Orders/Orders.jsx b/src/components/Orders/Orders.jsx
index f158516..e0112e9 100644
--- a/src/components/Orders/Orders.jsx
+++ b/src/components/Orders/Orders.jsx
@@ -9,58 +9,58 @@ import {
 const Orders = () => {
     return (
         <div className=' flex h-screen'>
-            <div className='sm:pl-12 w-full pt-7 pl-4'>
-                <div className='sm:text-6xl flex items-center justify-items-center gap-3  text-4xl'>
+            <div className='w-full pt-7 pl-4 sm:pl-12'>
+                <div className='flex items-center justify-items-center gap-3 text-4xl  sm:text-6xl'>
                     <BiNotepad />
                     <p>Orders</p>
                 </div>
-                <div className='sm:gap-4 mt-8 flex w-full items-center justify-items-center gap-2'>
-                    <div className='sm:h-40 flex h-24 w-1/4 flex-col items-start justify-center  gap-4 rounded-lg border-l-4 border-l-[#ABD0AC] bg-[#DFECE0] pl-4'>
-                        <p className='sm:text-xl text-sm text-[#707070]'>
+                <div className='mt-8 flex w-full items-center justify-items-center gap-2 sm:gap-4'>
+                    <div className='flex h-24 w-1/4 flex-col items-start justify-center gap-4  rounded-lg border-l-4 border-l-[#ABD0AC] bg-[#DFECE0] pl-4 sm:h-40'>
+                        <p className='text-sm text-[#707070] sm:text-xl'>
                             Total orders
                         </p>
-                        <p className='sm:text-3xl text-base'>
+                        <p className='text-base sm:text-3xl'>
                             <b>135</b>
                         </p>
                     </div>
-                    <div className='sm:h-40 flex  h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4  border-l-[#E1CDB4] bg-[#FEEDD8] pl-4'>
-                        <p className='sm:text-xl text-sm text-[#707070]'>
+                    <div className='flex h-24  w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#E1CDB4]  bg-[#FEEDD8] pl-4 sm:h-40'>
+                        <p className='text-sm text-[#707070] sm:text-xl'>
                             Revenue
                         </p>
-                        <p className='sm:text-3xl text-base'>
+                        <p className='text-base sm:text-3xl'>
                             <b>450$</b>
                         </p>
                     </div>
-                    <div className='sm:h-40 flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#BBCDE1] bg-[#E2EDF9] pl-4'>
-                        <p className='sm:text-xl text-sm text-[#707070]'>
+                    <div className='flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#BBCDE1] bg-[#E2EDF9] pl-4 sm:h-40'>
+                        <p className='text-sm text-[#707070] sm:text-xl'>
                             Popular Order
                         </p>
-                        <p className='sm:text-3xl text-base'>
+                        <p className='text-base sm:text-3xl'>
                             <b>Fried Chips</b>
                         </p>
                     </div>
                 </div>
                 <p className='mt-8  text-2xl font-bold'>Filter</p>
-                <div className='sm:gap-4 mt-4 flex items-center justify-start gap-2'>
-                    <div className='sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]'>
+                <div className='mt-4 flex items-center justify-start gap-2 sm:gap-4'>
+                    <div className='flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945] sm:text-xl'>
                         <BiSearch />
                         <p>Search by food name</p>
                     </div>
-                    <div className='sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]'>
+                    <div className='flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945] sm:text-xl'>
                         <BiCalendar />
                         <p>Date range</p>
                     </div>
-                    <div className='sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs  text-[#004945]'>
+                    <div className='flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]  sm:text-xl'>
                         <BiPackage />
                         <p>Status</p>
                     </div>
-                    <div className='sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]'>
+                    <div className='flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945] sm:text-xl'>
                         <BiWallet />
                         <p>Payment Method</p>
                     </div>
                 </div>
                 <div className='flex w-full flex-col'>
-                    <div className='justify-stretch sm:gap-26 sm:font-bold mt-6  flex h-10 w-5/6 items-center gap-6 bg-[#F6F6F6]  pl-4 text-base font-semibold'>
+                    <div className='justify-stretch sm:gap-26 mt-6 flex  h-10 w-5/6 items-center gap-6 bg-[#F6F6F6] pl-4  text-base font-semibold sm:font-bold'>
                         <p>DATE</p>
                         <p>CUSTOMER</p>
                         <p>FOOD</p>
@@ -68,7 +68,7 @@ const Orders = () => {
                         <p>PAYMENT</p>
                         <p>PRICE</p>
                     </div>
-                    <div className='sm:gap-24 sm:text-xl flex w-5/6 items-center  justify-start gap-4 bg-[#F6F6F6]  py-8 pl-4 text-lg hover:bg-[#FFFDF3]'>
+                    <div className='flex w-5/6 items-center justify-start gap-4  bg-[#F6F6F6] py-8 pl-4  text-lg hover:bg-[#FFFDF3] sm:gap-24 sm:text-xl'>
                         <div className='flex flex-col'>
                             <p>01/02/2022</p>
                             <p>16:00</p>
@@ -89,7 +89,7 @@ const Orders = () => {
                             <p>5</p>
                         </div>
                     </div>
-                    <div className='sm:gap-24 sm:text-xl  flex w-5/6 items-center  justify-start gap-4 bg-[#F6F6F6]  py-8 pl-4 text-lg hover:bg-[#FFFDF3]'>
+                    <div className='flex w-5/6  items-center justify-start gap-4  bg-[#F6F6F6] py-8 pl-4  text-lg hover:bg-[#FFFDF3] sm:gap-24 sm:text-xl'>
                         <div className='flex flex-col'>
                             <p>01/02/2022</p>
                             <p>16:00</p>
@@ -110,7 +110,7 @@ const Orders = () => {
                             <p>5</p>
                         </div>
                     </div>
-                    <div className='sm:gap-24 sm:text-xl  flex w-5/6 items-center  justify-start gap-4 bg-[#F6F6F6]  py-8 pl-4 text-lg hover:bg-[#FFFDF3]'>
+                    <div className='flex w-5/6  items-center justify-start gap-4  bg-[#F6F6F6] py-8 pl-4  text-lg hover:bg-[#FFFDF3] sm:gap-24 sm:text-xl'>
                         <div className='flex flex-col'>
                             <p>01/02/2022</p>
                             <p>16:00</p>
diff --git a/src/components/Orders/__test__/__snapshots__/Orders.test.jsx.snap b/src/components/Orders/__test__/__snapshots__/Orders.test.jsx.snap
index aabffa3..ea30d97 100644
--- a/src/components/Orders/__test__/__snapshots__/Orders.test.jsx.snap
+++ b/src/components/Orders/__test__/__snapshots__/Orders.test.jsx.snap
@@ -5,10 +5,10 @@ exports[`Navbar Component 1`] = `
   className=" flex h-screen"
 >
   <div
-    className="sm:pl-12 w-full pt-7 pl-4"
+    className="w-full pt-7 pl-4 sm:pl-12"
   >
     <div
-      className="sm:text-6xl flex items-center justify-items-center gap-3 text-4xl"
+      className="flex items-center justify-items-center gap-3 text-4xl sm:text-6xl"
     >
       <svg
         fill="currentColor"
@@ -36,18 +36,18 @@ exports[`Navbar Component 1`] = `
       </p>
     </div>
     <div
-      className="sm:gap-4 mt-8 flex w-full items-center justify-items-center gap-2"
+      className="mt-8 flex w-full items-center justify-items-center gap-2 sm:gap-4"
     >
       <div
-        className="sm:h-40 flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#ABD0AC] bg-[#DFECE0] pl-4"
+        className="flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#ABD0AC] bg-[#DFECE0] pl-4 sm:h-40"
       >
         <p
-          className="sm:text-xl text-sm text-[#707070]"
+          className="text-sm text-[#707070] sm:text-xl"
         >
           Total orders
         </p>
         <p
-          className="sm:text-3xl text-base"
+          className="text-base sm:text-3xl"
         >
           <b>
             135
@@ -55,15 +55,15 @@ exports[`Navbar Component 1`] = `
         </p>
       </div>
       <div
-        className="sm:h-40 flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#E1CDB4] bg-[#FEEDD8] pl-4"
+        className="flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#E1CDB4] bg-[#FEEDD8] pl-4 sm:h-40"
       >
         <p
-          className="sm:text-xl text-sm text-[#707070]"
+          className="text-sm text-[#707070] sm:text-xl"
         >
           Revenue
         </p>
         <p
-          className="sm:text-3xl text-base"
+          className="text-base sm:text-3xl"
         >
           <b>
             450$
@@ -71,15 +71,15 @@ exports[`Navbar Component 1`] = `
         </p>
       </div>
       <div
-        className="sm:h-40 flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#BBCDE1] bg-[#E2EDF9] pl-4"
+        className="flex h-24 w-1/4 flex-col items-start justify-center gap-4 rounded-lg border-l-4 border-l-[#BBCDE1] bg-[#E2EDF9] pl-4 sm:h-40"
       >
         <p
-          className="sm:text-xl text-sm text-[#707070]"
+          className="text-sm text-[#707070] sm:text-xl"
         >
           Popular Order
         </p>
         <p
-          className="sm:text-3xl text-base"
+          className="text-base sm:text-3xl"
         >
           <b>
             Fried Chips
@@ -93,10 +93,10 @@ exports[`Navbar Component 1`] = `
       Filter
     </p>
     <div
-      className="sm:gap-4 mt-4 flex items-center justify-start gap-2"
+      className="mt-4 flex items-center justify-start gap-2 sm:gap-4"
     >
       <div
-        className="sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]"
+        className="flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945] sm:text-xl"
       >
         <svg
           fill="currentColor"
@@ -121,7 +121,7 @@ exports[`Navbar Component 1`] = `
         </p>
       </div>
       <div
-        className="sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]"
+        className="flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945] sm:text-xl"
       >
         <svg
           fill="currentColor"
@@ -149,7 +149,7 @@ exports[`Navbar Component 1`] = `
         </p>
       </div>
       <div
-        className="sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]"
+        className="flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945] sm:text-xl"
       >
         <svg
           fill="currentColor"
@@ -174,7 +174,7 @@ exports[`Navbar Component 1`] = `
         </p>
       </div>
       <div
-        className="sm:text-xl flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945]"
+        className="flex items-center justify-center gap-3 rounded border-2 border-[#004945] p-2 text-xs text-[#004945] sm:text-xl"
       >
         <svg
           fill="currentColor"
@@ -206,7 +206,7 @@ exports[`Navbar Component 1`] = `
       className="flex w-full flex-col"
     >
       <div
-        className="justify-stretch sm:gap-26 sm:font-bold mt-6 flex h-10 w-5/6 items-center gap-6 bg-[#F6F6F6] pl-4 text-base font-semibold"
+        className="justify-stretch sm:gap-26 mt-6 flex h-10 w-5/6 items-center gap-6 bg-[#F6F6F6] pl-4 text-base font-semibold sm:font-bold"
       >
         <p>
           DATE
@@ -228,7 +228,7 @@ exports[`Navbar Component 1`] = `
         </p>
       </div>
       <div
-        className="sm:gap-24 sm:text-xl flex w-5/6 items-center justify-start gap-4 bg-[#F6F6F6] py-8 pl-4 text-lg hover:bg-[#FFFDF3]"
+        className="flex w-5/6 items-center justify-start gap-4 bg-[#F6F6F6] py-8 pl-4 text-lg hover:bg-[#FFFDF3] sm:gap-24 sm:text-xl"
       >
         <div
           className="flex flex-col"
@@ -269,7 +269,7 @@ exports[`Navbar Component 1`] = `
         </div>
       </div>
       <div
-        className="sm:gap-24 sm:text-xl flex w-5/6 items-center justify-start gap-4 bg-[#F6F6F6] py-8 pl-4 text-lg hover:bg-[#FFFDF3]"
+        className="flex w-5/6 items-center justify-start gap-4 bg-[#F6F6F6] py-8 pl-4 text-lg hover:bg-[#FFFDF3] sm:gap-24 sm:text-xl"
       >
         <div
           className="flex flex-col"
@@ -310,7 +310,7 @@ exports[`Navbar Component 1`] = `
         </div>
       </div>
       <div
-        className="sm:gap-24 sm:text-xl flex w-5/6 items-center justify-start gap-4 bg-[#F6F6F6] py-8 pl-4 text-lg hover:bg-[#FFFDF3]"
+        className="flex w-5/6 items-center justify-start gap-4 bg-[#F6F6F6] py-8 pl-4 text-lg hover:bg-[#FFFDF3] sm:gap-24 sm:text-xl"
       >
         <div
           className="flex flex-col"
diff --git a/src/components/Profile/Profile.jsx b/src/components/Profile/Profile.jsx
index fe1793e..6e9deaa 100644
--- a/src/components/Profile/Profile.jsx
+++ b/src/components/Profile/Profile.jsx
@@ -6,7 +6,7 @@ function Profile({ children }) {
             <div className='sidebar w-[15%] border-r-[1px] pt-[1.5rem] pb-[1.5rem]'>
                 <div className='dash-title mb-10 border-b-[1px]'>
                     <div className='logo-wrapper mb-[7rem] pl-8'>
-                        <div className='logo text-2xl tablet:text-xl'>
+                        <div className='logo tablet:text-xl text-2xl'>
                             <Link href='#'>
                                 <a>
                                     <span className='font-black'>COOK</span>IEZ
diff --git a/src/components/SignUpForm/SignUpChef/SignUpChef.jsx b/src/components/SignUpForm/SignUpChef/SignUpChef.jsx
index b7aeefe..c918290 100644
--- a/src/components/SignUpForm/SignUpChef/SignUpChef.jsx
+++ b/src/components/SignUpForm/SignUpChef/SignUpChef.jsx
@@ -59,27 +59,21 @@ export default function SignUpChefForm() {
     // POSTing to chef endpoint
     const handleSubmit = async (e) => {
         e.preventDefault();
-        try {
-            const res = await api.post("/auth/chef/signup", newUser);
-            // if res.ok redirect to sign in
-            if (res) {
-                router.push("/");
-            }
-            // debugging
-            console.log(res.data);
-            console.log("Server Response: " + res.statusText);
-        } catch (err) {
-            // res not in 200 res, errs from axios itself
-            // errs from axios, if err is within the 200 range
-            if (err.response) {
-                console.log(err.response.data);
-                console.log(err.response.status);
-                console.log(err.response.headers);
-            } else {
-                // if err is not in 200 range, tis will display the err message itself
-                console.log(`Error, res not in 200 range: ${err.message}`);
-            }
+        //try {
+        const res = await api.post("/auth/chef/signup", newUser);
+        // if res.ok redirect to sign in
+        if (res) {
+            router.push("/");
         }
+        // debugging
+        //} catch (err) {
+        // res not in 200 res, errs from axios itself
+        // errs from axios, if err is within the 200 range
+        // if (err.response) {
+        //} else {
+        // if err is not in 200 range, tis will display the err message itself
+        // }
+        //}
     };
 
     // initializing router
@@ -314,7 +308,7 @@ export default function SignUpChefForm() {
 
             {/* make this hidden */}
 
-            <div className='max-w-screen-sm flex items-center bg-signUpImageColor'>
+            <div className='flex max-w-screen-sm items-center bg-signUpImageColor'>
                 <Image
                     src='/images/signup2.jpg'
                     alt='test'
diff --git a/src/components/SignUpForm/SignUpChef/__test__/__snapshots__/SignUpChef.test.jsx.snap b/src/components/SignUpForm/SignUpChef/__test__/__snapshots__/SignUpChef.test.jsx.snap
index 10f4c98..d10d581 100644
--- a/src/components/SignUpForm/SignUpChef/__test__/__snapshots__/SignUpChef.test.jsx.snap
+++ b/src/components/SignUpForm/SignUpChef/__test__/__snapshots__/SignUpChef.test.jsx.snap
@@ -216,7 +216,7 @@ exports[`Create Sign up Chef Form Component 1`] = `
     </form>
   </div>
   <div
-    className="max-w-screen-sm flex items-center bg-signUpImageColor"
+    className="flex max-w-screen-sm items-center bg-signUpImageColor"
   >
     <span
       style={
diff --git a/src/components/SignUpForm/SignUpUser/SignUpUser.jsx b/src/components/SignUpForm/SignUpUser/SignUpUser.jsx
index ec98435..ae708fd 100644
--- a/src/components/SignUpForm/SignUpUser/SignUpUser.jsx
+++ b/src/components/SignUpForm/SignUpUser/SignUpUser.jsx
@@ -62,27 +62,21 @@ export default function SignUpUserForm() {
     // POSTing to customer endpoint
     const handleSubmit = async (e) => {
         e.preventDefault();
-        try {
-            const res = await api.post("/auth/customer/signup", newUser);
-            // if res.ok redirect to sign in
-            if (res) {
-                router.push("/");
-            }
-            // debugging
-            console.log(res.data);
-            console.log("Server Response: " + res.statusText);
-        } catch (err) {
-            // res not in 200 res, errs from axios itself
-            // errs from axios, if err is within the 200 range
-            if (err.response) {
-                console.log(err.response.data);
-                console.log(err.response.status);
-                console.log(err.response.headers);
-            } else {
-                // if err is not in 200 range, tis will display the err message itself
-                console.log(`Error, res not in 200 range: ${err.message}`);
-            }
+        //try {
+        const res = await api.post("/auth/customer/signup", newUser);
+        // if res.ok redirect to sign in
+        if (res) {
+            router.push("/");
         }
+        // debugging
+        // } catch (err) {
+        // res not in 200 res, errs from axios itself
+        // errs from axios, if err is within the 200 range
+        // if (err.response) {
+        //} else {
+        // if err is not in 200 range, tis will display the err message itself
+        // }
+        //}
     };
 
     // initializing router
@@ -282,7 +276,7 @@ export default function SignUpUserForm() {
             </div>
 
             {/* image section */}
-            <div className='max-w-screen-sm flex items-center bg-signUpImageColor'>
+            <div className='flex max-w-screen-sm items-center bg-signUpImageColor'>
                 <Image
                     src='/images/signup.png'
                     alt='test'
diff --git a/src/components/SignUpForm/SignUpUser/__test__/__snapshots__/SignUpUser.test.jsx.snap b/src/components/SignUpForm/SignUpUser/__test__/__snapshots__/SignUpUser.test.jsx.snap
index 22f507c..4228ba3 100644
--- a/src/components/SignUpForm/SignUpUser/__test__/__snapshots__/SignUpUser.test.jsx.snap
+++ b/src/components/SignUpForm/SignUpUser/__test__/__snapshots__/SignUpUser.test.jsx.snap
@@ -189,7 +189,7 @@ exports[`Create Sign up User Form Component 1`] = `
     </form>
   </div>
   <div
-    className="max-w-screen-sm flex items-center bg-signUpImageColor"
+    className="flex max-w-screen-sm items-center bg-signUpImageColor"
   >
     <span
       style={
diff --git a/src/pages/index.jsx b/src/pages/index.jsx
index 0b47859..2ac5e6c 100644
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@@ -22,7 +22,7 @@ export default function HomePage() {
 export async function getStaticProps({ locale }) {
     return {
         props: {
-            ...(await serverSideTranslations(locale, ["common"])),
+            ...(await serverSideTranslations(locale, ["common", "navbar"])),
             // Will be passed to the page component as props
         },
     };
diff --git a/tailwind.config.js b/tailwind.config.js
index 42c8a9d..ec4399a 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -17,10 +17,6 @@ module.exports = {
                 herobg: "url('/images/new-bg-test.jpg')",
             },
         },
-        screens: {
-            tablet: { max: "1024px" },
-            mobile: { max: "640" },
-        },
     },
     plugins: [require("@tailwindcss/forms")],
 };