Skip to content

Commit

Permalink
native dropdown and add ballot button state change (#81)
Browse files Browse the repository at this point in the history
  • Loading branch information
@escottalexander
escottalexander authored Sep 26, 2023
1 parent d0a39e6 commit 3ad45ab
Show file tree
Hide file tree
Showing 2 changed files with 52 additions and 37 deletions.
2 changes: 1 addition & 1 deletion packages/nextjs/components/op/modals/VoteModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const VoteModal: React.FC<IVoteModal> = ({ project, handleAllocationChange, onCl
{/* Render the BaseModal component and pass the onClose prop */}
<div className="max-w-[400px] bg-white rounded-xl p-6">
<div className="grid gap-6 grid-flow-col items-center justify-between">
<h3 className="text-lg font-bold text-OPblack">vote</h3>
<h3 className="text-lg font-bold text-OPblack">Vote</h3>
{/* Render a button with an onClick event that calls the onClose function */}
<button onClick={onClose} className="text-lg text-OPgray btn btn-sm btn-circle btn-ghost">
✕
Expand Down
87 changes: 51 additions & 36 deletions packages/nextjs/components/project/ProjectHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
EllipsisHorizontalIcon,
FolderIcon,
} from "@heroicons/react/24/outline";
import { ArrowUturnRightIcon, CheckCircleIcon, FlagIcon } from "@heroicons/react/24/solid";
import { ArrowUturnRightIcon, CheckBadgeIcon, CheckCircleIcon, FlagIcon } from "@heroicons/react/24/solid";
import { useBallot } from "~~/context/BallotContext";
import { ProjectDocument } from "~~/models/Project";
import { notification } from "~~/utils/scaffold-eth";
Expand All @@ -27,7 +27,6 @@ const ProjectHeader = ({ project }: { project: ProjectDocument }) => {
const handle = project && project.twitterLink ? `@${project.twitterLink.replace("https://twitter.com/", "")}` : "";
// const [addVote, setAddVote] = useState(false);
const [addressCopied, setAddressCopied] = useState(false);
const [openLikedModal, setOpenLikedModal] = useState(false);
const [newAllocation, setNewAllocation] = useState(0);
// const [addBallot, setAddBallot] = useState(false);
const [editBallotVote, setEditBallotVote] = useState(false);
Expand Down Expand Up @@ -58,8 +57,14 @@ const ProjectHeader = ({ project }: { project: ProjectDocument }) => {
};

const handleEditBallot = () => {
// TODO: Need to save input data to state
setLoadingMessage("Saving distribution");
let message = "Saving distribution";
let completedMessage = "Distribution changed successfully";
if (!isAdded) {
addProjectToBallot();
message = "Adding project to ballot";
completedMessage = "Successfully added project";
}
setLoadingMessage(message);
dispatch({
type: "UPDATE_ALLOCATION",
projectId: project._id,
Expand All @@ -76,8 +81,7 @@ const ProjectHeader = ({ project }: { project: ProjectDocument }) => {
setIsSuccess(false);
}, 2000);
}, 1000);
setSuccessMessage("Distribution changed successfully");
setOpenLikedModal(false);
setSuccessMessage(completedMessage);
};

// const handleAddOrEditModal = (close: boolean, edit = false) => {
Expand Down Expand Up @@ -124,7 +128,7 @@ const ProjectHeader = ({ project }: { project: ProjectDocument }) => {
<div className="flex items-center gap-8 flex-wrap">
<a
href="#"
className="bg-gradient-to-r from-OPred to-purple inline-block text-transparent bg-clip-text"
className="bg-gradient-to-r from-primary to-purple inline-block text-transparent bg-clip-text"
>
{handle}
</a>
Expand Down Expand Up @@ -174,39 +178,50 @@ const ProjectHeader = ({ project }: { project: ProjectDocument }) => {
</div>

<div className="relative flex md:self-end">
<button
onClick={() => {
setOpenLikedModal(!openLikedModal);
}}
className="py-2 px-2 rounded-md flex border border-neutral mr-4"
>
<EllipsisHorizontalIcon className="font-semibold h-10 w-10 text-neutral-content" />
</button>

{openLikedModal && (
<div className="absolute bg-OPwhite rounded-xl top-16 -left-0 sm:right-0 py-3 px-8 border-[1px] border-OPoffwhite text-OPblack">
<button onClickCapture={() => setEditBallotVote(true)} className="flex gap-4 items-center">
<AdjustmentsHorizontalIcon className="w-6 h-6 text-OPdarkgray" />
<p>Edit Distribution</p>
</button>
<button className="flex gap-4 items-center ">
<ArrowUturnRightIcon className="w-6 h-6 text-OPdarkgray" />
<p>Share</p>
</button>
<button className="flex gap-4 items-center">
<FlagIcon className="w-6 h-6 text-OPdarkgray" />
<p>Report</p>
</button>
</div>
)}
<div className="dropdown">
<label tabIndex={0} className="cursor-pointer py-2 px-2 rounded-md flex border border-gray-200 mr-4">
<EllipsisHorizontalIcon className="font-semibold h-10 w-10 text-neutral-content" />
</label>
<ul tabIndex={0} className="dropdown-content menu p-2 shadow bg-white rounded-xl rounded-box w-52">
{isAdded && (
<li
onClickCapture={() => setEditBallotVote(true)}
className="cursor-pointer flex flex-row items-center"
>
<div className="w-full py-0">
<AdjustmentsHorizontalIcon className="w-6 h-6 text-OPdarkgray" />
<p className="text-OPdarkgray">Edit Distribution</p>
</div>
</li>
)}
<li className="cursor-pointer flex flex-row items-center">
<div className="w-full py-0">
<ArrowUturnRightIcon className="w-6 h-6 text-OPdarkgray" />
<p className="text-OPdarkgray">Share</p>
</div>
</li>
<li className="cursor-pointer flex flex-row items-center">
<div className="w-full py-0">
<FlagIcon className="w-6 h-6 text-OPdarkgray" />
<p className="text-OPdarkgray">Report</p>
</div>
</li>
</ul>
</div>

<button
onClick={() => addProjectToBallot()}
onClick={() => setEditBallotVote(true)}
disabled={isAdded}
className="rounded-lg flex items-center bg-OPred text-white py-2 px-4 xl:px-8"
className={`rounded-lg flex items-center py-2 px-4 xl:px-8 whitespace-nowrap ${
isAdded ? "border-gray-200 text-primary border-2 whitespace-nowrap bg-white" : "bg-primary text-white"
}`}
>
<FolderIcon className=" font-semibold h-10 w-10 text-white mr-4" />
{isAdded ? "Added to ballot" : "Add to Ballot"}
{isAdded ? (
<CheckBadgeIcon className=" font-semibold h-6 w-6 text-primary mr-4" />
) : (
<FolderIcon className=" font-semibold h-6 w-6 text-white mr-4" />
)}
{isAdded ? `${newAllocation.toLocaleString()} OP allocated` : "Add to Ballot"}
</button>

{editBallotVote && (
Expand Down

0 comments on commit 3ad45ab

Please sign in to comment.