Skip to content

Commit

Permalink
fix(mobile style): fix menu items style
Browse files Browse the repository at this point in the history
  • Loading branch information
hamidroohi92 committed Aug 19, 2024
1 parent 8ae81e9 commit b0512c6
Show file tree
Hide file tree
Showing 2 changed files with 15 additions and 11 deletions.
20 changes: 14 additions & 6 deletions src/components/chainButton.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,20 @@ export default function ChainButton() {
return (
<div className="relative">
<div
className="flex h-[36px] w-fit cursor-pointer items-center justify-center gap-[5px] rounded-[10px] bg-white px-[10px] duration-300 hover:shadow-lg"
className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px] duration-300 hover:shadow-lg lg:w-fit lg:justify-center"
onClick={handleToggleSubMenu}
>
<Image src={getChainLogoSrc(sourceChain.logo)} width={24} height={24} alt={sourceChain.name} />
<span className="block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
<p className="lg:hidden">
{sourceChain.name.includes("Polkadot") ? sourceChain.name.replace(" AssetHub", "") : sourceChain.name}
</p>
<span className="lg:ml-unset ml-auto block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
</div>
{subMenu && (
<div className="absolute right-[-21px] top-[calc(100%+20px)] flex w-[200px] flex-col gap-[20px] rounded-[10px] bg-white p-[20px]">
<div
className="absolute left-[-5px] right-[-5px] top-[calc(100%+20px)] overflow-hidden rounded-[10px] shadow-lg duration-500 lg:left-[unset] lg:right-[-21px]"
style={{ maxHeight: subMenu ? "3s0vh" : "0" }}
>
<div className=" flex w-[200px] flex-col gap-[20px] bg-white p-[20px]">
{sourceChainOptions.map((chain) => (
<div
key={chain.name}
Expand All @@ -45,11 +51,13 @@ export default function ChainButton() {
}}
>
<Image src={getChainLogoSrc(chain.logo)} width={24} height={24} alt={chain.name} />
<p className="flex-shrink-0 whitespace-nowrap text-[14px] leading-[24px] text-[#121619]">{chain.name}</p>
<p className="flex-shrink-0 whitespace-nowrap text-[14px] leading-[24px] text-[#121619]">
{chain.name.includes("Polkadot") ? chain.name.replace(" AssetHub", "") : chain.name}
</p>
</div>
))}
</div>
)}
</div>
</div>
);
}
6 changes: 1 addition & 5 deletions src/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -75,11 +75,7 @@ export default function Header() {
</div>
</div>
<div className="flex flex-col items-center gap-[20px] pt-[20px]">
<div className="flex h-[36px] w-[190px] cursor-pointer items-center gap-[5px] rounded-[10px] bg-white px-[10px]">
<span className="block h-[24px] w-[24px] bg-[url('/images/icons/assethub-icon.svg')] bg-contain bg-center bg-no-repeat" />
<p className="text-[14px] leading-[24px]">Asset Hub</p>
<span className="ml-auto block h-[16px] w-[16px] bg-[url('/images/icons/downarrow-icon.svg')] bg-contain bg-center bg-no-repeat" />
</div>
<ChainButton />
{!sender ? (
<WalletButton
openModal={() => {
Expand Down

0 comments on commit b0512c6

Please sign in to comment.