vaibhav ka test run

ShinichiShi · Aug 30, 2024 · 4f6d30e · 4f6d30e
1 parent 887a604
commit 4f6d30e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 28 deletions.
diff --git a/client/src/components/Farmer/FDashboard.jsx b/client/src/components/Farmer/FDashboard.jsx
@@ -1,4 +1,4 @@
-import './FDashboard.css'
+import styles from './FDashboard.module.css';
 import { useState } from 'react';
 
 function Searchsvg() {
@@ -12,7 +12,7 @@ function Searchsvg() {
 
 function ProfileIcon() {
   return (
-    <div className="profileicon">
+    <div className={styles.profileicon}>
       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36" fill="white">
         <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="0.5" />
         <path d="M7.5 17C9.8317 14.5578 14.1432 14.4428 16.5 17M14.4951 9.5C14.4951 10.8807 13.3742 12 11.9915 12C10.6089 12 9.48797 10.8807 9.48797 9.5C9.48797 8.11929 10.6089 7 11.9915 7C13.3742 7 14.4951 8.11929 14.4951 9.5Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
@@ -25,19 +25,19 @@ function ProfileIcon() {
 function Navbar() {
   return (
     <header>
-      <div className="navp">
-        <div className='h1nav'>
+      <div className={styles.navp}>
+        <div className={`${styles.h1nav} ${styles['text-excess']}`}>
           <h1>Agri</h1>
-          <h1 id='h1e'>Connect</h1>
+          <h1 id={styles.h1e}>Connect</h1>
         </div>
-        <div className="search-nav">
+        <div className={styles['search-nav']}>
           <input type="text" placeholder='Search' />
           <Searchsvg />
           Search
         </div>
         <ProfileIcon />
       </div>
-      <div className="navs">
+      <div className={styles.navs}>
         <ul>
           <li>Home</li>
           <li>Sell crops</li>
@@ -51,20 +51,20 @@ function Navbar() {
 
 function Search() {
   return (
-    <div className="search-box">
-      <div className="search-box-div">
+    <div className={styles['search-box']}>
+      <div className={styles['search-box-div']}>
         <p>Search by crops:</p>
-        <div className="search-bar">
+        <div className={styles['search-bar']}>
           <input type="text" name="search" id="search" placeholder="Enter crop's name" />
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"#000000"} fill={"none"}>
             <path d="M17.5 17.5L22 22" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
             <path d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z" stroke="currentColor" strokeWidth="1.5" strokeLinejoin="round" />
           </svg>
         </div>
       </div>
-      <div className="search-box-div">
+      <div className={styles['search-box-div']}>
         <p>{`Search by District:`}</p>
-        <div className="search-bar">
+        <div className={styles['search-bar']}>
           <input type="text" name="search" id="search" placeholder="Enter District name" />
           <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width={24} height={24} color={"#000000"} fill={"none"}>
             <path d="M17.5 17.5L22 22" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
@@ -78,15 +78,15 @@ function Search() {
 
 function Box({ showSecondaryBox }) {
   return (
-    <div className="box-primary">
-      <div className='primary-details'>
+    <div className={styles['box-primary']}>
+      <div className={styles['primary-details']}>
         <p>Name : Arvind Kumar</p>
         <p>Crop : Rice</p>
         <p>Quantity required : 100kg</p>
         <p>Mobile No : 1234567890</p>
         <p>State : Karnataka</p>
       </div>
-      <div className="primary-btn">
+      <div className={styles['primary-btn']}>
         <button onClick={showSecondaryBox}>Show more details</button>
       </div>
     </div>
@@ -95,12 +95,12 @@ function Box({ showSecondaryBox }) {
 
 function Secondarybox({ hideSecondaryBox }) {
   return (
-    <div className="box-sec">
+    <div className={styles['box-sec']}>
       <h3>Details:</h3>
-      <div className="crossbtn">
+      <div className={styles.crossbtn}>
         <button onClick={hideSecondaryBox}>✕</button>
       </div>
-      <div className="sec-details">
+      <div className={styles['sec-details']}>
         <p>Name : Arvind Kumar</p>
         <p>Crop : Rice</p>
         <p>Quantity : 100kg</p>
@@ -113,7 +113,7 @@ function Secondarybox({ hideSecondaryBox }) {
         <p>State : Karnataka</p>
         <p>Pincode : 560078</p>
       </div>
-      <div className="contract-btn">
+      <div className={styles['contract-btn']}>
         <button>Make a Contract</button>
       </div>
     </div>
@@ -127,16 +127,16 @@ function MainBox() {
   const hideSecondaryBox = () => setShowBox(false);
 
   return (
-    <div className="container-p">
+    <div className={styles['container-p']}>
       <h1>DEALERS</h1>
-      <div className="container-s">
+      <div className={styles['container-s']}>
         <Box showSecondaryBox={showSecondaryBox} />
         <Box showSecondaryBox={showSecondaryBox} />
         <Box showSecondaryBox={showSecondaryBox} />
         <Box showSecondaryBox={showSecondaryBox} />
         <Box showSecondaryBox={showSecondaryBox} />
       </div>
-      {showBox && <div className="modal">
+      {showBox && <div className={styles.modal}>
         <Secondarybox hideSecondaryBox={hideSecondaryBox} />
       </div>}
     </div>

diff --git a/client/src/components/Farmer/FDashboard.css → ...c/components/Farmer/FDashboard.module.css b/client/src/components/Farmer/FDashboard.css → ...c/components/Farmer/FDashboard.module.css
@@ -66,6 +66,7 @@ header{
   display: flex;
   align-items: center;
   font-weight: bold;
+  cursor: pointer;
 }
 .profileicon:hover{
   color: #00B207;
@@ -76,24 +77,32 @@ header{
   background-color: white;
   display: flex;
   align-items: center;
+  /* justify-content: center; */
+  position: relative;
 }
 .navs ul{
+  height: 100%;
+  list-style-type:none;
+  /* flex-grow: 1; */
   display: flex;
   align-items: center;
-  list-style-type:none;
   gap: 25px;
   margin-left: 40px;
   font-size: 19px;
   font-weight: 600;
-  text-align: center;
+  /* text-align: center; */
+  /* border: 1px solid; */
+  position: absolute;
+  top: 0;
+  cursor: pointer;
 }
 .navs ul li:hover{
   /* background-color: #1fe726;
   border :1px solid #1fe726; */
   text-decoration: underline #00B207;
   text-decoration-thickness: 3px;
   border-radius: 0.5rem;
-  padding: 0px 4px;
+  /* padding: 0px 4px; */
 }
 
 
@@ -107,11 +116,13 @@ header{
 }
 .search-box-div{
   display: flex;
-  align-items: center;
+  /* align-items: center; */
   gap: 5px;
+  /* border: 1px solid; */
 } 
 .search-box-div p{
   font-size: 20px;
+  text-align: center;
 }
 .search-bar {
   border-radius: 50%; 
@@ -161,6 +172,7 @@ header{
   right: 10px;
   top: 50%;
   transform: translateY(-50%); 
+  cursor: pointer;
 }
 
 .search-bar:hover svg {
@@ -198,18 +210,21 @@ header{
   border: 0.25px solid rgb(180, 177, 177);
   border-radius: 0.5rem;
   box-shadow: 3px 3px 3px rgba(8, 0, 0, 0.6);
+  /* align-items: center; */
 }
 .primary-details{
   width: 70%;
-  font-size: 20px;
+  font-size: 16px;
   /* padding: 30px;
   line-height: 25px; */
   display: flex; 
   flex-direction: column;
   /* align-items: center; */
   justify-content: center;
   padding-left: 30px;
-  gap: 5px;
+  /* gap: 2px; */
+  /* border: 1px solid; */
+  line-height: 20px;
 }
 .primary-btn{
   display: flex;
@@ -401,6 +416,7 @@ header{
   cursor: pointer;
   border-radius: 5px;
   width: 140px;
+  margin-bottom: 10px;
 }
 
 .contract-btn button:hover {