Merge pull request #507 from Riddhi162/riddhi

Made the user section responsive for mobile view

Frontend/src/CSS/UserProfile.css

@@ -86,7 +86,7 @@
 .logo-out,
 .change-photo {
   padding: 15px 20px;
-  margin: 10px;
+
   border: none;
   cursor: pointer;
   background-color: var(--color-6);
@@ -102,20 +102,18 @@
   }
 
   .userProfile-subheading {
-    font-size: 3rem;
+    font-size: 1.7rem;
   }
 
   .userProfile-paragraph {
-    font-size: 2rem;
+    font-size: 1.4rem;
   }
 
-  .buttons {
-    margin-bottom: 25px;
-  }
 
   .reset-password,
   .logo-out,
   .change-photo {
+    width: 300px;
     padding: 10px 15px;
     font-size: 0.9rem;
   }

Frontend/src/Pages/CustomDropdown.css

@@ -0,0 +1,56 @@
+.custom-dropdown {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 5px 5px;
+  background-color: rgba(217, 148, 249, 0.519);
+}
+
+.custom-dropdown-header {
+  display: flex;
+  width: 400px;
+  height: 100%;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  margin: 0px;
+  padding: 10px;
+
+  background-color: rgb(248, 235, 255);
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.custom-dropdown-selected {
+  flex-grow: 1;
+}
+
+.custom-dropdown-arrow {
+  margin-left: 10px;
+}
+
+.custom-dropdown-options {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  background-color: rgba(228, 152, 245, 0.563);
+  border: 1px solid #ccc;
+  backdrop-filter: blur(30px);
+  border-radius: 4px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin-top: 5px;
+}
+
+.custom-dropdown-option {
+  padding: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid rgba(50, 0, 56, 0.227);
+}
+
+.custom-dropdown-option:hover {
+  background-color: var(--color-hover);
+  color: #fff;
+}

Frontend/src/Pages/CustomDropdown.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import './CustomDropdown.css';
+
+const CustomDropdown = ({ className, options, onChange, value, isOpen, setIsOpen }) => {
+  const handleOptionClick = (optionValue) => {
+    onChange(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div className={`custom-dropdown ${className}`}>
+      <div className="custom-dropdown-header" onClick={() => setIsOpen(!isOpen)}>
+        <div className="custom-dropdown-selected">
+          {options.find((option) => option.value === value)?.label || 'Select'}
+        </div>
+        <div className="custom-dropdown-arrow">&#9662;</div> 
+      </div>
+      {isOpen && (
+        <div className="custom-dropdown-options">
+          {options.map((option) => (
+            <div
+              key={option.value}
+              className="custom-dropdown-option"
+              onClick={() => handleOptionClick(option.value)}
+            >
+              {option.label}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomDropdown;

Frontend/src/Pages/Product.jsx

@@ -4,6 +4,7 @@ import "../CSS/Product.css";
 import Loader from "../Components/Loader";
 import ProductDetail from "../Components/ProductDetail";
 import toast from "react-hot-toast";
+import CustomDropdown from "./CustomDropdown";
 
 const Product = () => {
   const [loading, setLoading] = useState(true);
@@ -16,6 +17,8 @@ const Product = () => {
   const [selectedCategory, setSelectedCategory] = useState("");
   const [sortByDate, setSortByDate] = useState("");
 
+  const [openDropdown, setOpenDropdown] = useState(null);
+
   useEffect(() => {
     axios
       .get("https://ecommerce-backend-0wr7.onrender.com/ecommerce/product")
@@ -113,36 +116,50 @@ const Product = () => {
           onChange={(e) => setSearchText(e.target.value)}
         />
         <div className="filters">
-          <select
+          <CustomDropdown
             className="filterSelect"
-            onChange={(e) => setSortOrder(e.target.value)}
+            options={[
+              { value: "", label: "Sort by Price" },
+              { value: "price-asc", label: "Price: Low to High" },
+              { value: "price-desc", label: "Price: High to Low" },
+            ]}
+            onChange={(value) => setSortOrder(value)}
             value={sortOrder}
-          >
-            <option value="">Sort by Price</option>
-            <option value="price-asc">Price: Low to High</option>
-            <option value="price-desc">Price: High to Low</option>
-          </select>
-          <select
+            isOpen={openDropdown === "sortOrder"}
+            setIsOpen={(isOpen) =>
+              setOpenDropdown(isOpen ? "sortOrder" : null)
+            }
+          />
+          <CustomDropdown
             className="filterSelect"
-            onChange={(e) => setSelectedCategory(e.target.value)}
+            options={[
+              { value: "", label: "Filter by Category" },
+              ...categories.map((category) => ({
+                value: category,
+                label: category,
+              })),
+            ]}
+            onChange={(value) => setSelectedCategory(value)}
             value={selectedCategory}
-          >
-            <option value="">Filter by Category</option>
-            {categories.map((category) => (
-              <option key={category} value={category}>
-                {category}
-              </option>
-            ))}
-          </select>
-          <select
+            isOpen={openDropdown === "selectedCategory"}
+            setIsOpen={(isOpen) =>
+              setOpenDropdown(isOpen ? "selectedCategory" : null)
+            }
+          />
+          <CustomDropdown
             className="filterSelect"
-            onChange={(e) => setSortByDate(e.target.value)}
+            options={[
+              { value: "", label: "Sort by Publish Date" },
+              { value: "date-asc", label: "Date: Oldest to Newest" },
+              { value: "date-desc", label: "Date: Newest to Oldest" },
+            ]}
+            onChange={(value) => setSortByDate(value)}
             value={sortByDate}
-          >
-            <option value="">Sort by Publish Date</option>
-            <option value="date-asc">Date: Oldest to Newest</option>
-            <option value="date-desc">Date: Newest to Oldest</option>
-          </select>
+            isOpen={openDropdown === "sortByDate"}
+            setIsOpen={(isOpen) =>
+              setOpenDropdown(isOpen ? "sortByDate" : null)
+            }
+          />
         </div>
         {loading ? (
           <Loader />