feat: create disconnect/connect drop menu

[od-hunter]

Ready for review

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
mancala	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 29, 2024 9:34am
mancala-pkco	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jun 29, 2024 9:34am

[supreme2580]

Hi @od-hunter I am updating your branch and reviewing it now

[xpanvictor]

@supreme2580 sorry was the issue resolved? There were some tags that will cause white screens across the app

[supreme2580]

@xpanvictor will confirm Links are used instead of a tags before I approve or not

[xpanvictor]

Oh, it's develop into ...

[od-hunter]

Hello @supreme2580 @xpanvictor I am currently having issues viewing the page on live server from my end, after install and running the necessary client setup. Also am trying to install and import Link from react-router-dom but the installation is creating another package.json file instead of updating the previous package.json file.

Kindly assist.

[supreme2580]

@od-hunter where is it creating a second package.json? You are probably running the install script on the wrong path, but you do not have to install react-router-dom it is already installed, just run pnpm i on the client folder and you should have it, also I will prefer you debug your code from localhost as I will be testing on localhost

[supreme2580]

Hi @od-hunter I just pulled from the code again, could you please change the a tags to Link components?

[od-hunter]

@supreme2580
kindly review implemented requested change

[supreme2580]

Hi @od-hunter Your branch have a conflict with header.tsx

[od-hunter]

@supreme2580 i've resolved the conflicts

[supreme2580]

Hi @od-hunter I reviewed your PR and here are a list of things needed to be resolved

It is not rounded properly (till it is clicked)

When clicked the entire connect button does not open the dropdown (only the chevron icon), this should be changed the entirety of the connect button should open the modal

The chevron icon is of the wrong color (should be #FCE3AA)

The disconnected wallet connect button is of the wrong color, the icon section background should be #FFA158 and the rest of the body should be #F58229 and the text color should be #FCE3AA

The connect item and image in the dropdown should be both #F58229 in color

The connected state still has radius issues

The connected wallet icon background color should be #272A32 and the rest of the body should be #171922 (including the dropdown)

The border color of the dropdown should be #272A32 and of 1px in thickness

A typo on the dropdown (It should be Leaderboard not Leadership)

The text color for everything but connect/disconnect wallet on the dropdown should be #BFC5D4

Reduce the font weight of text across he connect wallet button according to the design

Each item of the dropdown should be of full width and each item background color should be of 50% of the background color when hovered on, when hovered on it should have a bit of padding and a bit rounded, when hovered on the item (any part of the full width) the cursor type should be pointer

[od-hunter]

@supreme2580 kindly review implemented changes

[supreme2580]

Checking it out

[supreme2580]

@od-hunter I love it but there are two more things

Instead of using an image for the chevron down image from logo-arrow.svg, import a chevron-down icon from heroicons and customize the color based on if connected or not, when connected it should be of color #C7CAD4 else #FCE3AA

I expect the code to look like

` import { ChevronDownIcon } from "@heroicons/react/24/solid"; import clsx from "clsx";

<ChevronDownIcon className={clsx(connection?.isConnected ? "#C7CAD4" : "#FCE3AA", "w-4 h-4" )} />

//adjust as necessary `

The second issue is when the user is disconnected and the audio play button is clicked it triggers the wallet connect function, make both work but not reliant on eachother

[od-hunter]

@supreme2580 hopefully there's no more issues Kindly review

[supreme2580]

@od-hunter the following files do not belong in the component folder unless they're a react functional component

• client/src/components/Logo - Golden 1.svg
• client/src/components/Logo - Golden 2.svg
• client/src/components/LogoW.svg
• client/src/components/connect.svg
• client/src/components/leader.svg
• client/src/components/lobby.svg
• client/src/components/logo-arrow.svg
• client/src/components/profile.svg

They belong in the assets folder

[od-hunter]

@supreme2580 implemented requested changes

[supreme2580]

Checking it out

[supreme2580]

Hi @od-hunter this

<ChevronDownIcon className={clsx(connection?.isConnected ? "text-[#3156cf]" : "text-[#ecb533]", "w-4 h-4 ml-3 transition duration-300", { 'transform rotate-180': isDropdownClose })} />

Should be this

<ChevronDownIcon className={clsx(connection?.isConnected ? "text-[#C7CAD4]" : "text-[#FCE3AA]", "w-4 h-4 ml-3 transition duration-300", { 'transform rotate-180': isDropdownClose })} />

[od-hunter]

@supreme2580 done, changed it

[supreme2580]

Checking it out

[supreme2580]

Looks great

[od-hunter]

hello @supreme2580 @xpanvictor thank you for merging it. I'm up and open for any open issues