From 7d3185053a65c3884adb7b030c8cab222e9eb4bb Mon Sep 17 00:00:00 2001
From: edis <edis.sinanovic@student.um.si>
Date: Wed, 24 Apr 2024 11:21:00 +0200
Subject: [PATCH] chore: add hover and refactor metod dropdown layout

---
 .../MethodDropdownMenu/MethodDropdownButton.tsx  | 16 ++++++----------
 .../src/components/MethodDropdownMenu/index.tsx  |  6 +++---
 .../src/components/NetworkDropDownMenu/index.tsx |  6 +++---
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/dapp/src/components/MethodDropdownMenu/MethodDropdownButton.tsx b/packages/dapp/src/components/MethodDropdownMenu/MethodDropdownButton.tsx
index ec2eff1e7..22c0f0ef4 100644
--- a/packages/dapp/src/components/MethodDropdownMenu/MethodDropdownButton.tsx
+++ b/packages/dapp/src/components/MethodDropdownMenu/MethodDropdownButton.tsx
@@ -64,7 +64,7 @@ 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]
         )}
@@ -72,17 +72,13 @@ export function DropdownButton({
         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
index 3e57578e3..658da8885 100644
--- 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
index e00619f43..a058db90f 100644
--- 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"