fix: icon hover animations

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>

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`

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',

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>`;

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>`;

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;
+      }
     `,
   ];
 

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}"