chore: add hover and refactor metod dropdown layout

blockchain-lab-um · Apr 24, 2024 · 7d31850 · 7d31850
1 parent 72b4cfe
commit 7d31850
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 16 deletions.
diff --git a/packages/dapp/src/components/MethodDropdownMenu/MethodDropdownButton.tsx b/packages/dapp/src/components/MethodDropdownMenu/MethodDropdownButton.tsx
@@ -64,25 +64,21 @@ export function DropdownButton({
       <button
         type="button"
         className={clsx(
-          'md:text-md block w-full rounded-full py-2 text-sm',
+          'md:text-md block w-full rounded-full py-2 px-1 text-sm',
           isActive ? variants[variant] : null,
           selected ? variantsSelected[variant] : variantsSelectedElse[variant]
         )}
         onClick={() => handleBtn(children as string)}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
       >
-        <div className="grid grid-cols-6">
-          <span>
-            {selected ? (
-              <CheckIcon className="ml-3 h-4 w-4 lg:h-5 lg:w-5" />
-            ) : (
-              ''
-            )}
-          </span>
-          <span className="col-span-4 col-start-2 text-center">
+        <div className="grid grid-cols-8 items-center px-1">
+          <span className="col-span-6 flex justify-start items-center">
             {children === 'did:key:jwk_jcs-pub' ? 'did:key (EBSI)' : children}
           </span>
+          <span className="col-span-2">
+            {selected && <CheckIcon className="ml-3 h-4 w-4 lg:h-5 lg:w-5" />}
+          </span>
         </div>
       </button>
     </DropdownMenuItem>

diff --git a/packages/dapp/src/components/MethodDropdownMenu/index.tsx b/packages/dapp/src/components/MethodDropdownMenu/index.tsx
@@ -107,10 +107,10 @@ export default function MethodDropdownMenu() {
     <DropdownMenu onOpenChange={() => setOpen(!open)}>
       <DropdownMenuTrigger
         className={clsx(
-          'dark:text-navy-blue-400 text-h5 font-ubuntu animated-transition inline-flex w-full justify-center rounded-3xl px-4 py-2 font-thin text-gray-600 outline-none focus:outline-none focus-visible:outline-none',
+          'dark:text-navy-blue-400 text-h5 font-ubuntu animated-transition inline-flex justify-center items-center rounded-3xl px-4 py-2 font-thin text-gray-600 outline-none focus:outline-none focus-visible:outline-none',
           open
             ? 'dark:bg-navy-blue-800 bg-orange-100/50'
-            : 'dark:hover:bg-navy-blue-800 hover:bg-orange-100/50'
+            : 'dark:hover:bg-navy-blue-800 hover:bg-white/50'
         )}
         disabled={currMethod === null}
       >
@@ -126,7 +126,7 @@ export default function MethodDropdownMenu() {
         {currMethod && (
           <ChevronDownIcon
             className={clsx(
-              'dark:text-navy-blue-400 animated-transition ml-2 mr-2 h-5 w-5 text-gray-600',
+              'dark:text-navy-blue-400 animated-transition ml-1 h-5 w-5 text-gray-600',
               open ? 'rotate-180' : ''
             )}
           />

diff --git a/packages/dapp/src/components/NetworkDropDownMenu/index.tsx b/packages/dapp/src/components/NetworkDropDownMenu/index.tsx
@@ -108,7 +108,7 @@ export default function NetworkDropDownMenu({
     <DropdownMenu onOpenChange={() => setOpen(!open)}>
       <DropdownMenuTrigger
         className={clsx(
-          'animated-transition flex items-center justify-center focus:outline-none',
+          'animated-transition flex items-center justify-center focus:outline-none hover:bg-white/50',
           variants[variant],
           sizes[size],
           `rounded-${rounded}`,
@@ -117,7 +117,7 @@ export default function NetworkDropDownMenu({
           open ? variantsHover[variant] : ''
         )}
       >
-        <div className="flex items-center justify-center p-1">
+        <div className="flex items-center justify-center">
           {selected && (
             <Image
               src={items.find((item) => item.name === selected)?.logo ?? ''}
@@ -135,7 +135,7 @@ export default function NetworkDropDownMenu({
           <div>
             {selected && (
               <ChevronDownIcon
-                className={`animated-transition h-5 w-5 ml-2 mr-2 ${
+                className={`animated-transition h-5 w-5 ml-2 ${
                   open ? 'rotate-180 ' : ''
                 }`}
                 aria-hidden="true"