From 618b4693f7bdd1d20d098dc7ebe77c3e6cb40f46 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 15 Nov 2022 19:44:14 +0100
Subject: [PATCH] change(ui) - underline the clickbale console item

---
 .../shared/DevTools/ConsoleRow/ConsoleRow.tsx |  2 +-
 .../shared/DevTools/JumpButton/JumpButton.tsx | 26 ++++++++++---------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
index 8e24e4c7b..145f14640 100644
--- a/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
+++ b/frontend/app/components/shared/DevTools/ConsoleRow/ConsoleRow.tsx
@@ -32,7 +32,7 @@ function ConsoleRow(props: Props) {
           info: !log.isYellow() && !log.isRed(),
           warn: log.isYellow(),
           error: log.isRed(),
-          'cursor-pointer': clickable,
+          'cursor-pointer underline decoration-dotted decoration-gray-200': clickable,
         }
       )}
       onClick={
diff --git a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
index 82c319a49..c52b0cffd 100644
--- a/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
+++ b/frontend/app/components/shared/DevTools/JumpButton/JumpButton.tsx
@@ -8,18 +8,20 @@ interface Props {
 function JumpButton(props: Props) {
   const { tooltip = '' } = props;
   return (
-    <Tooltip title={tooltip} disabled={!!tooltip}>
-      <div
-        className="mr-2 border cursor-pointer invisible group-hover:visible rounded-lg bg-active-blue text-xs flex items-center px-2 py-1 color-teal absolute right-0 top-0 bottom-0 hover:shadow h-6 my-auto"
-        onClick={(e: any) => {
-          e.stopPropagation();
-          props.onClick();
-        }}
-      >
-        <Icon name="caret-right-fill" size="12" color="teal" />
-        <span>JUMP</span>
-      </div>
-    </Tooltip>
+    <div className="absolute right-0 top-0 bottom-0 my-auto flex items-center">
+      <Tooltip title={tooltip} disabled={!!tooltip}>
+        <div
+          className="mr-2 border cursor-pointer invisible group-hover:visible rounded-lg bg-active-blue text-xs flex items-center px-2 py-1 color-teal hover:shadow h-6"
+          onClick={(e: any) => {
+            e.stopPropagation();
+            props.onClick();
+          }}
+        >
+          <Icon name="caret-right-fill" size="12" color="teal" />
+          <span>JUMP</span>
+        </div>
+      </Tooltip>
+    </div>
   );
 }