small fixes

README.md

@@ -3,10 +3,11 @@
 
 ## Class Summary `Chapter-10 What is seen is sold` (28/01/2023)
 
+  In this weekend (chpater-10 & chapter-11), we will be covering the two important layers of any Single Page Application - `UI layer` & `Data layer`. As the name says, Chapter-10 is all about UI layer where the presentation of the components is discussed. Started with various ways of writing CSS for app, we discussed about all the ways in brief and stated few examples of each method, its pros and cons. This chapter mainly focusses on a CSS framework `Tailwind CSS`. We tried converting the whole css that we wrote for our InstaFood app into Tailwind CSS. It will be painful in the beginning but definitely worth the try. 
 
   Find my version of detailed explanation of these concepts in [theory-assignment.md](/~https://github.com/Learn-React-With-Harshi/chapter-10-what-is-seen-is-sold/blob/main/theory-assignment.md). Check [coding-assignment.md](/~https://github.com/Learn-React-With-Harshi/chapter-10-what-is-seen-is-sold/blob/main/coding-assignment.md) for all the features that I implemented in this chapter.
 
-One line about this chapter : ``
+One line about this chapter : `Leave the Styling (writing long classes in css files) to Tailwind, use its utility classes and concentrate on your logic part of the application `
 
 Check out [Chapter-10 Live](https://learn-react-with-harshi-chapter-10.netlify.app/) for the live demo of this chapter's coding assignment `(InstaFood Version 6.0)`. Also check out the following chapters to see how InstaFood has progressed. Happy Reacting !!!
 

coding-assignment.md

@@ -44,4 +44,23 @@ Since we are going to use tailwind css, we can remove all the existing css that
 
 ### 5. Start small, don't panic 
 
-I initally had lot of hesitation to use tailwind css. What helped me going was to s
+I initally had lot of hesitation to use tailwind css. What helped me going was to start with one component at a time. Started in the order of Component hierarchy -
+  AppLayout -> Header (its children) -> Body (its children) -> Footer -> Shimmer -> (its children) -> About (its children) -> Login 
+
+### 6. What helped ? 
+Since I created the previous versions with plain native css (no framework), it was easy to remove and replace it with tailwind css framework.
+
+
+<ans>Done :</ans>
+
+1. Web version of UI 
+2. Tries to bring the same look as earlier
+3. Just replaced the previous styles with utility classes of tailwind (not so efficient for now)
+
+<ans>Work in progress : </ans>
+1. Responsiveness
+2. Reuable classes
+3. Reduce the arbitrary values 
+
+
+

src/components/Body.js

@@ -49,7 +49,7 @@ const Body = () => {
   }
 
   if(!isOnline) {
-    return <div className="container"><h1>Offline, please check your internet connection </h1></div>
+    return <div className="container mt-24 min-h-screen min-w-screen"><h1 className="font-bold text-red text-3xl text-center">Offline, please check your internet connection </h1></div>
   } 
 
   const addFavourite = (props) => {
@@ -86,12 +86,12 @@ return (
       <div className="features-container flex justify-start">
         <div className="search-container flex justify-evenly min-w-[500px] h-[100px] items-center m-auto"> 
           <input type="text" placeholder=" Search for restaurant" value={searchText}
-            className="search-input outline-none text-base p-2 basis-96 h-8 rounded-md ring-1 ring-gray  bg-gray sm:text-sm sm:basis-[300px]" key="input-text" onChange = {(e) => setSearchText(e.target.value)}/>
-          <button className="search-btn bg-yellow h-8 text-blue-dark basis-16 rounded-md outline-none text-base border-yellow sm:text-sm sm:basis-[50px]" 
+            className="search-input outline-none text-base p-[5px] basis-[350px] h-[30px] rounded-md ring-1 ring-gray bg-gray sm:text-sm sm:basis-[300px]" key="input-text" onChange = {(e) => setSearchText(e.target.value)}/>
+          <button className="search-btn bg-yellow h-[30px] text-blue-dark basis-[60px] rounded-md outline-none text-base border-yellow" 
             onClick={searchData(searchText, allRestaurants)}> Search </button>
         </div>
-        <div className="favourite-container flex justify-end h-[100px] items-center m-auto sm:flex-col ">
-            <button className={isFavourite? "fav-btn fav-btn-active bg-yellow h-8 text-blue-dark rounded-md border border-yellow outline-none text-base px-2": "fav-btn bg-white h-8 text-blue-dark rounded-md border-yellow border outline-none text-base px-2" } 
+        <div className="favourite-container flex justify-end h-[100px] items-center m-auto">
+            <button className={isFavourite? "fav-btn fav-btn-active bg-yellow h-[30px] text-blue-dark rounded-md border border-yellow outline-none text-base px-[5px]": "fav-btn bg-white h-[30px] text-blue-dark rounded-md border-yellow border outline-none text-base px-[5px]" } 
             onClick={()=> {showFavouriteRestaurants()}}>Favourites </button>
         </div>
       </div>
@@ -102,10 +102,10 @@ return (
     }
 
     { allRestaurants?.length === 0 ? (<Shimmer />) : 
-    <div className="restaurant-container flex flex-wrap gap-5 justify-evenly">
+    <div className="restaurant-container flex flex-wrap gap-5 justify-center">
       {filteredRestaurants.map((restaurant) => {
         return ( <Link
-          className="link-styles basis-60 p-3 mb-3" to={"/restaurant/" + restaurant.data.id} key={restaurant.data.id}>
+          className="link-styles basis-[250px] p-2.5 mb-2.5" to={"/restaurant/" + restaurant.data.id} key={restaurant.data.id}>
           <RestaurantCard props={restaurant} key={restaurant.data.id} setRestaurants={addFavourite} />
         </Link>
         )

src/components/Error.js

@@ -4,7 +4,7 @@ const Error = () => {
   const err = useRouteError();
   console.log(err);
   return (
-    <div>
+    <div className="mt-24 min-h-screen min-w-screen">
       <h1>Oops!!</h1>
       <h2>Something went wrong!!</h2>
       <h2>{err.status + " :  " + err.statusText}</h2>

src/components/Header.js

@@ -5,13 +5,13 @@ import useOnline from '../utils/useOnline';
 
 export const ImgComponent = ({item, itemname}) => {
   return(
-    <a href="/"> <img className="h-20 p-2" alt={itemname} src= {item} /> </a>
+    <a href="/"> <img className={itemname} alt={itemname} src= {item} /> </a>
     )
 }
 
 export const Title = () => {
   return(
-    <ImgComponent item={logo} itemname={"logo ml-2.5 w-16"}/>
+    <ImgComponent item={logo} itemname={"logo ml-2.5 w-[70px]"}/>
   )
 };
 
@@ -46,7 +46,7 @@ export const NavComponent = (user) => {
 
 export const Header = (state) => {
   return (
-    <div className="flex justify-between bg-white shadow fixed top-0 left-0 w-full h-20 z-50">
+    <div className="flex justify-between bg-white shadow fixed top-0 left-0 w-full h-[70px] z-50">
       <Title />
       <NavComponent {...state} />
     </div>

src/components/RepoClass.js

@@ -27,7 +27,7 @@ class Repo extends Component {
       <div className="repo-card flex flex-col gap-5 p-5 border border-gray">
         <a target="_blank" href={repo.html_url}><h3 className="repo-title text-xl text-title font-bold hover:text-blue hover:underline hover:decoration-blue">{repo.name}</h3></a>
         <p className="repo-bio text-base text-bio">{repo.description}</p>
-        { repo.name !== 'table-of-contents' && <a target="_blank" href={repo.homepage}><h4 className="repo-demo text-base text-blue font-semibold">Show live demo</h4></a> }
+        { repo.name !== 'table-of-contents' && <a target="_blank" href={repo.homepage}><h4 className="repo-demo text-base text-blue font-semibold underline">Show live demo</h4></a> }
       </div>
   )}
 }

src/components/RestaurantCard.js

@@ -18,9 +18,9 @@ export const RestaurantCard = ({ props, setRestaurants}) => {
   }
 
   return (
-    <div className="card basis-60 p-3 mb-3 hover:shadow">
+    <div className="card basis-[250px] p-2.5 mb-2.5 hover:shadow">
       <div className="card-img-container relative w-full ">
-        <div className="heart-button absolute z-20 text-gray-light text-2xl text-right cursor-pointer rounded-3xl w-[99%] ">
+        <div className="heart-button absolute z-[2] text-gray-light text-[25px] text-right cursor-pointer rounded-[10rem] w-[99%] ">
           <span className={isFavourite? "mark-fav-icon text-red" : ""} 
           onClick={(e) => {markFavourite(e)}} >&#x2764;</span>
         </div>