From edc6c440854f0516db8324d72d23869fde5d2ede Mon Sep 17 00:00:00 2001
From: Roland Bewick <roland.bewick@gmail.com>
Date: Wed, 18 Oct 2023 11:54:04 +0700
Subject: [PATCH] fix: icon hover animations

---
 src/components/bc-help.ts                  |  4 ++--
 src/components/bc-start.ts                 |  9 ++++++---
 src/components/css/classes.ts              |  1 +
 src/components/icons/disconnectIcon.ts     |  7 +++++++
 src/components/icons/exitIcon.ts           | 13 -------------
 src/components/icons/linkIcon.ts           |  8 ++++----
 src/components/internal/InternalElement.ts |  8 ++++++++
 src/components/internal/bci-button.ts      | 14 --------------
 8 files changed, 28 insertions(+), 36 deletions(-)
 create mode 100644 src/components/icons/disconnectIcon.ts
 delete mode 100644 src/components/icons/exitIcon.ts

diff --git a/src/components/bc-help.ts b/src/components/bc-help.ts
index ec158ec..f7cb34c 100644
--- a/src/components/bc-help.ts
+++ b/src/components/bc-help.ts
@@ -38,7 +38,7 @@ export class Help extends withTwind()(BitcoinConnectElement) {
           <a
             href="https://getalby.github.io/bitcoin-connect"
             target="_blank"
-            class="flex-1"
+            class="${classes['hover-animation']} flex-1"
           >
             <bci-button>
               <span class="${classes['text-brand-mixed']}">Learn more</span>
@@ -48,7 +48,7 @@ export class Help extends withTwind()(BitcoinConnectElement) {
           <a
             href="https://github.com/getAlby/bitcoin-connect"
             target="_blank"
-            class="flex-1"
+            class="${classes['hover-animation']} flex-1"
           >
             <bci-button>
               <span class="${classes['text-brand-mixed']}">Use it</span>
diff --git a/src/components/bc-start.ts b/src/components/bc-start.ts
index 36c3d86..0baa570 100644
--- a/src/components/bc-start.ts
+++ b/src/components/bc-start.ts
@@ -3,7 +3,7 @@ import {BitcoinConnectElement} from './BitcoinConnectElement';
 import {withTwind} from './twind/withTwind';
 import store from '../state/store';
 import {html} from 'lit';
-import {exitIcon} from './icons/exitIcon';
+import {disconnectIcon} from './icons/disconnectIcon';
 import {hr} from './templates/hr';
 import './internal/bci-button';
 import {classes} from './css/classes';
@@ -67,8 +67,11 @@ export class Start extends withTwind()(BitcoinConnectElement) {
               <span class="font-medium">${this._connectorName}</span></span
             >
 
-            <bci-button @click=${this._handleDisconnect}>
-              ${exitIcon}
+            <bci-button
+              @click=${this._handleDisconnect}
+              class=${classes['hover-animation']}
+            >
+              ${disconnectIcon}
               <span>Disconnect</span>
             </bci-button>`
         : html`
diff --git a/src/components/css/classes.ts b/src/components/css/classes.ts
index 2d99172..3c9f7bd 100644
--- a/src/components/css/classes.ts
+++ b/src/components/css/classes.ts
@@ -1,6 +1,7 @@
 export const classes = {
   interactive:
     'transition-all hover:brightness-90 dark:hover:brightness-110 active:scale-95 cursor-pointer',
+  'hover-animation': 'hover-animation',
 
   // text colors
   'text-brand': 'text-brand-light dark:text-brand-dark',
diff --git a/src/components/icons/disconnectIcon.ts b/src/components/icons/disconnectIcon.ts
new file mode 100644
index 0000000..c71f178
--- /dev/null
+++ b/src/components/icons/disconnectIcon.ts
@@ -0,0 +1,7 @@
+import {svg} from 'lit';
+
+export const disconnectIcon = svg`
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 20.25H4.75C4.19772 20.25 3.75 19.8023 3.75 19.25L3.75 4.75C3.75 4.19772 4.19772 3.75 4.75 3.75L11.25 3.75" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.25 12L9 12M20.25 12L15.75 16.5M20.25 12L15.75 7.5" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="hover-right"/>
+</svg>`;
diff --git a/src/components/icons/exitIcon.ts b/src/components/icons/exitIcon.ts
deleted file mode 100644
index db555ba..0000000
--- a/src/components/icons/exitIcon.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {svg} from 'lit';
-
-export const exitIcon = svg`
-<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="hover-right">
-<path d="M14 7.99999L6.5 7.99999M14 7.99999L11 11M14 7.99999L11 5M8 13.5H3.66667C3.29848 13.5 3 13.2015 3 12.8333L3 3.16667C3 2.79848 3.29848 2.5 3.66667 2.5L8 2.5" stroke="url(#paint0_linear_204_1760)" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<defs>
-<linearGradient id="paint0_linear_204_1760" x1="8.5" y1="2.5" x2="8.5" y2="13.5" gradientUnits="userSpaceOnUse">
-<stop stop-color="currentColor"/>
-<stop offset="1" stop-color="currentColor"/>
-</linearGradient>
-</defs>
-</svg>
-`;
diff --git a/src/components/icons/linkIcon.ts b/src/components/icons/linkIcon.ts
index e052097..c124a4b 100644
--- a/src/components/icons/linkIcon.ts
+++ b/src/components/icons/linkIcon.ts
@@ -1,6 +1,6 @@
 import {svg} from 'lit';
 
-export const linkIcon = svg`<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 hover-right-up">
-<path d="M6.00008 4.50008H3.73341C3.36005 4.50008 3.17336 4.50008 3.03075 4.57274C2.90531 4.63666 2.80333 4.73865 2.73941 4.86409C2.66675 5.0067 2.66675 5.19338 2.66675 5.56675V12.7667C2.66675 13.1401 2.66675 13.3268 2.73941 13.4694C2.80333 13.5949 2.90531 13.6968 3.03075 13.7608C3.17336 13.8334 3.36005 13.8334 3.73342 13.8334H10.9334C11.3068 13.8334 11.4935 13.8334 11.6361 13.7608C11.7615 13.6968 11.8635 13.5949 11.9274 13.4694C12.0001 13.3268 12.0001 13.1401 12.0001 12.7667V10.5001M9.33341 3.16675H13.3334M13.3334 3.16675V7.16675M13.3334 3.16675L7.33341 9.16675" stroke="currentColor" stroke-width="1.33333" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>
-`;
+export const linkIcon = svg`<svg width="25" height="24" viewBox="0 0 25 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 6H6.1C5.53995 6 5.25992 6 5.04601 6.10899C4.85785 6.20487 4.70487 6.35785 4.60899 6.54601C4.5 6.75992 4.5 7.03995 4.5 7.6V18.4C4.5 18.9601 4.5 19.2401 4.60899 19.454C4.70487 19.6422 4.85785 19.7951 5.04601 19.891C5.25992 20 5.53995 20 6.1 20H16.9C17.4601 20 17.7401 20 17.954 19.891C18.1422 19.7951 18.2951 19.6422 18.391 19.454C18.5 19.2401 18.5 18.9601 18.5 18.4V15" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.5 4H20.5M20.5 4V10M20.5 4L11.5 13" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round" class="hover-right-up"/>
+</svg>`;
diff --git a/src/components/internal/InternalElement.ts b/src/components/internal/InternalElement.ts
index 38fb5ec..acdcd3f 100644
--- a/src/components/internal/InternalElement.ts
+++ b/src/components/internal/InternalElement.ts
@@ -8,6 +8,14 @@ export class InternalElement extends LitElement {
         all: initial;
         font-variant-numeric: slashed-zero;
       }
+      .hover-animation:hover .hover-right-up {
+        transform: translateX(2px) translateY(-2px);
+        transition: all 0.3s;
+      }
+      .hover-animation:hover .hover-right {
+        transform: translateX(3px);
+        transition: all 0.3s;
+      }
     `,
   ];
 
diff --git a/src/components/internal/bci-button.ts b/src/components/internal/bci-button.ts
index 1b08742..f1276ae 100644
--- a/src/components/internal/bci-button.ts
+++ b/src/components/internal/bci-button.ts
@@ -6,20 +6,6 @@ import {classes} from '../css/classes';
 
 @customElement('bci-button')
 export class Button extends withTwind()(InternalElement) {
-  static override styles = [
-    ...super.styles,
-    css`
-      :hover ::slotted(.hover-right) {
-        transform: translateX(4px);
-        transition: all 0.5s;
-      }
-      :hover ::slotted(.hover-right-up) {
-        transform: translateX(4px) translateY(-4px);
-        transition: all 0.5s;
-      }
-    `,
-  ];
-
   override render() {
     return html`<button
       class="relative h-10 px-3 font-semibold font-sans shadow rounded-lg w-full ${classes.interactive}"