edit and delete button added in mobile view for address list | 20

temp
mahdi 2 years ago
parent 800f85613c
commit 654e2e2eb4
  1. 24
      src/views/Address/index.js
  2. 21
      src/views/DeliveryForm/Address/index.js

@ -12,7 +12,8 @@ import Loading from "../../components/Loading";
import Radio from "../../components/Radio";
//assets
import dropdownIcon from "../../assets/icons/dropdown-blue.svg";
import dropdownIcon from "../../assets/icons/white-dropdown.svg";
import arrowBlueIcon from "../../assets/icons/arrow-right-blue.svg";
import arrowWhiteIcon from "../../assets/icons/arrow-left-white.svg";
@ -328,16 +329,27 @@ export const Address = ({
onClick={() => submit()}
/>
<button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full"
className="bg-transparent mt-4 text-base lg:text-tiny border bg-blueC0 text-white font-bold rounded-md py-3.5 lg:py-4 flex flex-row justify-center items-center"
onClick={() => setPhase("deliveryForm")}
>
بازگشت
<img
src={dropdownIcon}
alt=""
className="w-3.5 transform rotate-90"
className="w-4 transform rotate-90"
/>
</button>
{/* <button
className="bg-transparent mt-4 text-tiny py-3 flex flex-row justify-center items-center border border-solid border-blueC0 text-green7B rounded-full"
onClick={() => setPhase("deliveryForm")}
>
fsddsf
<img
src={dropdownIcon}
alt=""
className="w-3.5 transform rotate-90"
/>
</button> */}
</div>
</div>
</div>
@ -348,6 +360,7 @@ export const Address = ({
profilePage ? "mx-auto" : ""
}`}
>
{!profilePage && (
<div
className={`flex flex-row items-center mb-7 cursor-pointer
`}
@ -369,8 +382,9 @@ export const Address = ({
</span>
</p>
</div>
{console.log(activeCheckbox)}
{activeCheckbox === false ? (
)}
{activeCheckbox === false && !profilePage ? (
<>
<Header
title="اطلاعات هویتی"

@ -22,7 +22,7 @@ function Address({
const Location = ({ address, active }) => {
return isMobile ? (
<button
className={`flex flex-row border-2 border-solid items-center w-full px-3 py-2 rounded-md mt-2 transition-all duration-500 dark:bg-opacity-5 ${
className={`flex flex-col border-2 border-solid items-center w-full px-3 py-2 rounded-md mt-2 transition-all duration-500 dark:bg-opacity-5 ${
userAddressId === address?.id
? "bg-blueC0 bg-opacity-5 border-blueC0"
: "bg-grayF9 border-gray-200 dark:border-gray-500"
@ -33,6 +33,7 @@ function Address({
: update({ userAddressId: address.id, userId })
}
>
<div className="flex items-center">
{loading && userAddressId !== address?.id ? (
<Loading size={2} color="bg-gray-400" />
) : (
@ -49,6 +50,24 @@ function Address({
{address.address}
</li>
</div>
</div>
{/* edit / delete button */}
<div className="flex items-center gap-x-4 mt-4">
<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>
</div>
</button>
) : (
<button

Loading…
Cancel
Save