roye ye jozeyat kar kardam | 120

src/views/Dashboard/layouts/Main/Addresses/index.js

@@ -12,6 +12,9 @@ import Button from "../../../../../components/Button";
 
 import { Link, useNavigate } from "react-router-dom";
 
+import editButton from "../../../../../assets/icons/edit.svg";
+import trash from "../../../../../assets/icons/trash.svg";
+
 const ProfileAddress = ({
   addresses,
   update,
@@ -32,7 +35,11 @@ const ProfileAddress = ({
   }, []);
 
   return (
-    <div className={`flex-1 ${isMobile ? "" : "w-1/2"} mx-auto`}>
+    <div
+      className={`flex-1 ${isMobile ? "" : "w-full"} ${
+        isMobile ? "p-0" : "px-10"
+      } mx-auto`}
+    >
       <div className="w-full flex flex-row justify-between items-center mt-4">
         <button
           className={`flex justify-center text-tiny lg:text-sm rounded-md py-3 bg-grayF9 dark:bg-blueC0 dark:bg-opacity-30 cursor:pointer ${
@@ -49,7 +56,7 @@ const ProfileAddress = ({
           <strong className="text-lg transform translate-y-0.5 mr-1">+</strong>
         </button>
       </div>
-      <div className={`p-0 m-0 flex flex-col mb-4`}>
+      <div className={`p-0 m-0 flex flex-col mb-4 w-full `}>
         {addresses.map((address, index) => (
           <Location
             address={address}
@@ -106,35 +113,22 @@ const Location = ({
 
   return (
     <div
-      className={`flex items-center w-full px-3 py-4 rounded-md my-4 border-2 border-solid ${
+      className={`flex flex-col items-center w-full px-3 py-4 rounded-md my-4 border-2 border-solid transition-all duration-500 dark:bg-opacity-5  ${
         active
-          ? "border-green-400 bg-blueC0 bg-opacity-5"
-          : "border-gray-300 bg-white"
+          ? "bg-blueC0 bg-opacity-5 border-blueC0"
+          : "bg-grayF9 border-gray-200 dark:border-gray-500"
       }`}
       onClick={() =>
         active ? {} : update({ userAddressId: address.id, userId })
       }
     >
+      <div className="w-full flex items-center justify-between ">
+        <div className="w-4 h-4 flex flex-col items-center justify-center ml-1 bg-gray-200 rounded-full">
           <div
-        className={`absolute left-8 top-0 transform transition-all origin-bottom-left ${
-          locationMenu ? "scale-100" : "scale-0"
-        } -translate-y-1/2 bg-white roundd-md flex flex-col gap-1 p-1 shadow-all divide-y divide-solid divide-gray-200`}
-        style={{ zIndex: 70 }}
-        onClick={(e) => e.stopPropagation()}
-      >
-        <Link
-          to={"/editAddress/" + address.id}
-          className="py-3 pr-2 pl-10 text-sm font-bold"
-          onClick={() => setMenu()}
-        >
-          ویرایش
-        </Link>
-        <button
-          className="py-3 pr-2 pl-10 border-none m-0 text-sm text-red19 font-bold"
-          onClick={() => delAddress(address.id)}
-        >
-          حذف
-        </button>
+            className={`w-2 h-2 rounded-full ${
+              active === true ? "bg-blueC0" : ""
+            }`}
+          ></div>
         </div>
         <div className="flex flex-col flex-1 mr-2">
           {active && (
@@ -143,20 +137,6 @@ const Location = ({
                 <strong className="text-base">آدرس انتخابی شما</strong>
                 <span className="mr-4 text-sm">فعال</span>
               </div>
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              onClick={(e) => clickOnMenu(e)}
-            >
-              <g fill="#07612c" data-name="vuesax/linear/more">
-                <path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
-                <path
-                  data-name="Vector"
-                  d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
-                />
-              </g>
-            </svg>
             </div>
           )}
           <div className={`flex w-full ${active ? "" : "flex-row"}`}>
@@ -174,22 +154,25 @@ const Location = ({
                 {"شماره تماس:" + " " + address.cellphone}
               </span>
             </div>
-          {!active && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              onClick={(e) => clickOnMenu(e)}
+          </div>
+        </div>
+        {/* edit / delete button */}
+        <div className="flex flex-col items-center gap-y-2">
+          <div
+            style={{ border: "solid 1px #fca5a5" }}
+            class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
           >
-              <g fill={"#aaa"} data-name="vuesax/linear/more">
-                <path d="M10 19a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z" />
-                <path
-                  data-name="Vector"
-                  d="M10 5a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2ZM10 12a2 2 0 1 0 2-2 2.006 2.006 0 0 0-2 2Z"
-                />
-              </g>
-            </svg>
-          )}
+            <button class="text-sm">حذف</button>
+            <img src={trash} alt="delete-address" className="w-5 mr-3" />
+          </div>
+          <div
+            style={{ border: "solid 1px #12CF7F" }}
+            class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
+          >
+            <button class="text-sm">ویرایش</button>
+            <img src={editButton} alt="edit-address" className="w-5 mr-3 " />
+          </div>
+        </div>
       </div>
       <Button
         title="مشاهده روی نقشه"
@@ -200,7 +183,6 @@ const Location = ({
         onClick={() => {}}
       />
     </div>
-    </div>
   );
 };
 

src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js

@@ -120,9 +120,14 @@ const Location = ({
 
   return (
     <div
-      className={`bg-opacity-5 border border-solid flex items-center w-full px-3 py-2 rounded-md relative ${
-        active ? "bg-blueC0 border-blueC0" : "bg-gray-300 border-gray-300"
-      }`}
+      className={`bg-opacity-5 border border-solid flex items-center w-full px-3 py-2 rounded-md relative 
+      ${
+        active
+          ? "border-green-400 bg-blueC0 bg-opacity-5"
+          : "border-gray-300 bg-white"
+      }
+      
+      `}
       onClick={() =>
         active ? {} : update({ userAddressId: address.id, userId })
       }

src/views/DeliveryForm/Address/index.js

@@ -52,7 +52,7 @@ function Address({
           </div>
         </div>
         {/* edit / delete button */}
-        <div className="flex items-center gap-x-4 mt-4">
+        <div className="flex items-center gap-x-4 mt-2">
           <div
             style={{ border: "solid 1px #fca5a5" }}
             class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
@@ -106,7 +106,7 @@ function Address({
             شماره تماس:&nbsp;{address.cellphone}
           </li>
         </div>
-        <div className="flex flex-col items-center gap-y-5">
+        <div className="flex flex-col items-center gap-y-2">
           <div
             style={{ border: "solid 1px #fca5a5" }}
             class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"