feat: improve menu ui

forbole · Mar 6, 2024 · 9d2b71b · 9d2b71b
1 parent 93e539e
commit 9d2b71b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/src/features/core/components/base.tsx b/src/features/core/components/base.tsx
@@ -64,6 +64,28 @@ export const ButtonPill = ({ className, ...props }: ButtonPillProps) => (
   />
 );
 
+type ButtonLinkProps = React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  variant?: "danger" | "default" | "success";
+};
+
+export const ButtonLink = ({
+  className,
+  variant,
+  ...props
+}: ButtonLinkProps) => (
+  <button
+    {...props}
+    className={[
+      "cursor-pointer rounded-full bg-transparent px-[8px] py-[4px] text-white disabled:cursor-not-allowed disabled:bg-bg-600 disabled:text-typo-150",
+      variant === "danger" ? "[&]:text-danger" : "",
+      className,
+    ].join(" ")}
+  />
+);
+
 export const ClipboardCopy = ({ textToCopy }: { textToCopy: string }) => (
   <button
     className="cursor-pointer"

diff --git a/src/features/staking/components/delegation-details.tsx b/src/features/staking/components/delegation-details.tsx
@@ -2,7 +2,11 @@ import type { useAbstraxionSigningClient } from "@burnt-labs/abstraxion";
 import type { Validator } from "cosmjs-types/cosmos/staking/v1beta1/staking";
 import { memo, useEffect, useState } from "react";
 
-import { ButtonPill, FloatingDropdown } from "@/features/core/components/base";
+import {
+  ButtonLink,
+  ButtonPill,
+  FloatingDropdown,
+} from "@/features/core/components/base";
 import { HeaderTitleBase } from "@/features/core/components/table";
 import { useCore } from "@/features/core/context/hooks";
 import { setIsLoadingBlocking } from "@/features/core/context/reducer";
@@ -19,7 +23,7 @@ import { getTotalDelegation, getTotalUnbonding } from "../context/selectors";
 import type { StakingContextType, StakingState } from "../context/state";
 import { useValidatorLogo } from "../hooks";
 import { coinIsPositive } from "../lib/core/coins";
-import { pointer } from "../lib/core/icons";
+import { menu, pointer } from "../lib/core/icons";
 import {
   formatCoin,
   formatCommission,
@@ -73,7 +77,7 @@ const rowStyle =
 const wrapperStyle =
   "w-full overflow-hidden rounded-[24px] bg-bg-600 pb-4 text-typo-100 px-[16px]";
 
-const Menu = () => <span>. . .</span>;
+const Menu = () => <span dangerouslySetInnerHTML={{ __html: menu }} />;
 
 type DelegationRowProps = {
   accountAddress: string;
@@ -158,8 +162,8 @@ const DelegationRowBase = ({
           Delegate
         </ButtonPill>
         <FloatingDropdown Trigger={Menu} id={`delegation-${index}`}>
-          <div className="flex flex-col gap-[12px] bg-black">
-            <ButtonPill
+          <div className="flex flex-col gap-[12px] rounded-[8px] bg-bg-600 py-[4px]">
+            <ButtonLink
               disabled={disabled}
               onClick={() => {
                 if (!client) return;
@@ -177,8 +181,8 @@ const DelegationRowBase = ({
               }}
             >
               Claim rewards
-            </ButtonPill>
-            <ButtonPill
+            </ButtonLink>
+            <ButtonLink
               disabled={disabled}
               onClick={() => {
                 if (!validator) return;
@@ -190,9 +194,10 @@ const DelegationRowBase = ({
                   }),
                 );
               }}
+              variant="danger"
             >
               Undelegate
-            </ButtonPill>
+            </ButtonLink>
           </div>
         </FloatingDropdown>
       </div>

diff --git a/src/features/staking/lib/core/icons.ts b/src/features/staking/lib/core/icons.ts
@@ -23,3 +23,12 @@ export const pointer = [
   '<path d="M1.00003 6.24271L5.24268 2.00007L9.48532 6.24271" stroke="#F2F2F2" stroke-width="1.5"/>',
   "</svg>",
 ].join("");
+
+export const menu = [
+  '<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">',
+  '<circle cx="16" cy="16" r="15.5" stroke="white" stroke-opacity="0.2"/>',
+  '<circle cx="16" cy="10" r="2" fill="#6C6A6A"/>',
+  '<circle cx="16" cy="16" r="2" fill="#6C6A6A"/>',
+  '<circle cx="16" cy="22" r="2" fill="#6C6A6A"/>',
+  "</svg>",
+].join(" ");