update edit.svg and src/views/DeliveryForm/Address/index.js

src/assets/icons/edit.svg

@@ -1,9 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31">
   <g id="vuesax_linear_edit" data-name="vuesax/linear/edit" transform="translate(-620 -252)">
     <g id="edit" transform="translate(620 252)">
-      <path id="Vector" d="M11.625,0H9.042C2.583,0,0,2.583,0,9.042v7.75c0,6.458,2.583,9.042,9.042,9.042h7.75c6.458,0,9.042-2.583,9.042-9.042V14.208" transform="translate(2.583 2.583)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector" d="M11.625,0H9.042C2.583,0,0,2.583,0,9.042v7.75c0,6.458,2.583,9.042,9.042,9.042h7.75c6.458,0,9.042-2.583,9.042-9.042V14.208" transform="translate(2.583 2.583)" fill="none" stroke="#12CF7F" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-      <path id="Vector-2" data-name="Vector" d="M11.613,1.642,1.435,11.82a3.5,3.5,0,0,0-.852,1.705L.027,17.413a1.84,1.84,0,0,0,2.2,2.2l3.888-.555A3.618,3.618,0,0,0,7.816,18.2L17.994,8.023c1.757-1.757,2.583-3.8,0-6.381S13.37-.115,11.613,1.642Z" transform="translate(9.105 2.259)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-2" data-name="Vector" d="M11.613,1.642,1.435,11.82a3.5,3.5,0,0,0-.852,1.705L.027,17.413a1.84,1.84,0,0,0,2.2,2.2l3.888-.555A3.618,3.618,0,0,0,7.816,18.2L17.994,8.023c1.757-1.757,2.583-3.8,0-6.381S13.37-.115,11.613,1.642Z" transform="translate(9.105 2.259)" fill="none" stroke="#12CF7F" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
-      <path id="Vector-3" data-name="Vector" d="M0,0A9.228,9.228,0,0,0,6.381,6.381" transform="translate(19.259 5.36)" fill="none" stroke="#292d32" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
+      <path id="Vector-3" data-name="Vector" d="M0,0A9.228,9.228,0,0,0,6.381,6.381" transform="translate(19.259 5.36)" fill="none" stroke="#12CF7F" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
       <path id="Vector-4" data-name="Vector" d="M0,0H31V31H0Z" fill="none" opacity="0"/>
     </g>
   </g>

src/views/DeliveryForm/Address/index.js

@@ -6,6 +6,9 @@ import { userFactor } from "../../../redux/actions";
 import Radio from "../../../components/Radio";
 import Loading from "../../../components/Loading";
 
+import editButton from "../../../assets/icons/edit.svg";
+import trash from "../../../assets/icons/trash.svg";
+
 function Address({
   addresses,
   isDark,
@@ -52,7 +55,7 @@ function Address({
         className={`flex flex-row justify-between border border-solid items-center w-full px-3 py-6 rounded-md mt-4 transition-all duration-500 gap-10 border-opacity-30 dark:bg-opacity-5 ${
           userAddressId === address?.id
             ? "bg-blueC0 bg-opacity-5 border-blueC0"
-            : "bg-grayF9 border-gray45"
+            : "bg-[#F9F9F9] border-gray-400"
         }`}
         onClick={() =>
           userAddressId === address?.id
@@ -60,7 +63,7 @@ function Address({
             : update({ userAddressId: address.id, userId })
         }
       >
-        <div className="flex flex-row flex-8 gap-4">
+        <div className="flex flex-row flex-1 gap-4">
           {loading && userAddressId !== address?.id ? (
             <Loading size={2} color="bg-gray-400" />
           ) : (
@@ -76,7 +79,7 @@ function Address({
             </li>
           </div>
         </div>
-        <div className="flex flex-col flex-5">
+        <div className="flex flex-col ">
           <li className="text-right text-tiny leading-6 text-blue52 dark:text-white">
             نام تحویل گیرنده:&nbsp;{address.firstName + " " + address.lastName}
           </li>
@@ -84,13 +87,21 @@ 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-5">
-          <button class="w-full text-sm cursor-pointer border border-red-200 bg-red-100 px-2 py-1 rounded-sm ">
+          <div
-            حذف
+            style={{ border: "solid 1px #fca5a5" }}
-          </button>
+            class="w-full flex flex-row items-center justify-between px-2 py-1 rounded-sm cursor-pointer"
-          <button class="w-full text-sm cursor-pointer border border-green-200 bg-green-100 px-2 py-1 rounded-sm ">
+          >
-            ویرایش
+            <button class="text-sm">حذف</button>
-          </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>
       </button>
     );
@@ -167,3 +178,7 @@ const mapDispatchToProps = {
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Address);
+
+Address.defaultProps = {
+  edit: "src/assets/icons/eidt.svg",
+};