From c831931083cd61e487340e75ab1eb55ba4863d41 Mon Sep 17 00:00:00 2001
From: mahdi andalib <andalibmahdi45@gmail.com>
Date: Thu, 23 Jun 2022 12:14:42 +0430
Subject: [PATCH] roye ye jozeyat kar kardam | 120

---
 .../Dashboard/layouts/Main/Addresses/index.js | 152 ++++++++----------
 .../layouts/Mobile/ProfileAddress/index.js    |  11 +-
 src/views/DeliveryForm/Address/index.js       |   4 +-
 3 files changed, 77 insertions(+), 90 deletions(-)

diff --git a/src/views/Dashboard/layouts/Main/Addresses/index.js b/src/views/Dashboard/layouts/Main/Addresses/index.js
index 026d632..06a3d13 100644
--- a/src/views/Dashboard/layouts/Main/Addresses/index.js
+++ b/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,100 +113,75 @@ 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={`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>
-      </div>
-      <div className="flex flex-col flex-1 mr-2">
-        {active && (
-          <div className="w-full flex justify-between mb-3">
-            <div className="flex items-center">
-              <strong className="text-base">آدرس انتخابی شما</strong>
-              <span className="mr-4 text-sm">فعال</span>
+      <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={`w-2 h-2 rounded-full ${
+              active === true ? "bg-blueC0" : ""
+            }`}
+          ></div>
+        </div>
+        <div className="flex flex-col flex-1 mr-2">
+          {active && (
+            <div className="w-full flex justify-between mb-3">
+              <div className="flex items-center">
+                <strong className="text-base">آدرس انتخابی شما</strong>
+                <span className="mr-4 text-sm">فعال</span>
+              </div>
+            </div>
+          )}
+          <div className={`flex w-full ${active ? "" : "flex-row"}`}>
+            <div className="flex flex-col flex-1 mb-4">
+              <span className="mb-2 leading-6">
+                {"آدرس:" + " " + address.address}
+              </span>
+              <span className="mb-2 leading-6">
+                {"نام:" + " " + address.firstName + " " + address.lastName}
+              </span>
+              <span className="mb-2 leading-6">
+                {"کد پستی:" + " " + address.postalCode}
+              </span>
+              <span className="mb-2 leading-6">
+                {"شماره تماس:" + " " + address.cellphone}
+              </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"}`}>
-          <div className="flex flex-col flex-1 mb-4">
-            <span className="mb-2 leading-6">
-              {"آدرس:" + " " + address.address}
-            </span>
-            <span className="mb-2 leading-6">
-              {"نام:" + " " + address.firstName + " " + address.lastName}
-            </span>
-            <span className="mb-2 leading-6">
-              {"کد پستی:" + " " + address.postalCode}
-            </span>
-            <span className="mb-2 leading-6">
-              {"شماره تماس:" + " " + address.cellphone}
-            </span>
+        </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"
+          >
+            <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>
-          {!active && (
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width={24}
-              height={24}
-              onClick={(e) => clickOnMenu(e)}
-            >
-              <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>
-          )}
         </div>
-        <Button
-          title="مشاهده روی نقشه"
-          backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
-          border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
-          width="100%"
-          color={"text-white"}
-          onClick={() => {}}
-        />
       </div>
+      <Button
+        title="مشاهده روی نقشه"
+        backgroundColor={isDark ? "bg-blueC0" : "bg-blueC0"}
+        border={{ color: isDark ? "#ffffff55" : "#196EC055", width: "0px" }}
+        width="100%"
+        color={"text-white"}
+        onClick={() => {}}
+      />
     </div>
   );
 };
diff --git a/src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js b/src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
index 55a954c..1af2340 100644
--- a/src/views/Dashboard/layouts/Mobile/ProfileAddress/index.js
+++ b/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 })
       }
diff --git a/src/views/DeliveryForm/Address/index.js b/src/views/DeliveryForm/Address/index.js
index bbf39bf..ee42ce1 100644
--- a/src/views/DeliveryForm/Address/index.js
+++ b/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"