fix: loading icon color

getAlby · Aug 25, 2023 · ff34af7 · ff34af7
1 parent 73fa2d0
commit ff34af7
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 22 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/lightning-wallet-connect",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "Web components to connect to a lightning wallet and power a website with WebLN",
   "type": "module",
   "source": "src/index.ts",

diff --git a/src/components/icons/loadingIcon.ts b/src/components/icons/loadingIcon.ts
@@ -1,20 +1,24 @@
 import {svg} from 'lit';
 import {color} from '../css/colors';
 
-export const loadingIcon = svg`
-<svg class="animate-spin h-5 w-5 ${color(
-  'text-primary'
-)}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+export const loadingIconPrimary = svg`
+<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="${color(
+        'text-primary'
+      )}" stroke-width="4"></circle>
+      <path class="opacity-75" fill="${color(
+        'text-primary'
+      )}" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>
 `;
 
-export const loadingIcon2 = svg`
-<svg class="animate-spin h-5 w-5 ${color(
-  'primary'
-)}" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-      <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+export const loadingIconSecondary = svg`
+<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+      <circle class="opacity-25" cx="12" cy="12" r="10" stroke="${color(
+        'text-secondary'
+      )}" stroke-width="4"></circle>
+      <path class="opacity-75" fill="${color(
+        'text-secondary'
+      )}" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
     </svg>
 `;
diff --git a/src/components/lwc-button.ts b/src/components/lwc-button.ts
@@ -4,7 +4,7 @@ import './lwc-modal.js';
 import {LwcElement} from './lwc-element.js';
 import {lwcIcon} from './icons/lwcIcon.js';
 import {withTwind} from './twind/withTwind.js';
-import {loadingIcon} from './icons/loadingIcon.js';
+import {loadingIconPrimary} from './icons/loadingIcon.js';
 import {satIcon} from './icons/satIcon.js';
 import {lwcConnectedIcon} from './icons/lwcConnectedIcon.js';
 import {color} from './css/colors';
@@ -81,7 +81,7 @@ export class LwcButton extends withTwind()(LwcElement) {
         >
           ${innerBorder()}
           ${isLoading
-            ? loadingIcon
+            ? loadingIconPrimary
             : this._connected
             ? iconOnly
               ? lwcConnectedIcon

diff --git a/src/components/lwc-modal-content.ts b/src/components/lwc-modal-content.ts
@@ -4,7 +4,7 @@ import {LwcElement} from './lwc-element';
 import './lwc-connector-list.js';
 import {withTwind} from './twind/withTwind';
 import store from '../state/store';
-import {loadingIcon2} from './icons/loadingIcon';
+import {loadingIconSecondary} from './icons/loadingIcon';
 import {exitIcon} from './icons/exitIcon';
 import {color} from './css/colors';
 import {gradientText} from './css/gradientText';
@@ -18,7 +18,7 @@ export class LwcModalContent extends withTwind()(LwcElement) {
       class="flex flex-col justify-center items-center w-full"
     >
       ${this._connecting
-        ? html`<div class="py-32">${loadingIcon2}</div>`
+        ? html`<div class="py-32">${loadingIconSecondary}</div>`
         : this._connected
         ? html` <h1 class="font-sans text-lg my-8" style="color: ${color(
             'text-secondary'

diff --git a/website/package.json b/website/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@getalby/lightning-wallet-connect": "^1.0.11",
+    "@getalby/lightning-wallet-connect": "^1.0.13",
     "@heroicons/react": "^2.0.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

diff --git a/website/yarn.lock b/website/yarn.lock
@@ -154,10 +154,10 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.47.0.tgz#5478fdf443ff8158f9de171c704ae45308696c7d"
   integrity sha512-P6omY1zv5MItm93kLM8s2vr1HICJH8v0dvddDhysbIuZ+vcjOHg5Zbkf1mTkcmi2JA9oBG2anOkRnW8WJTS8Og==
 
-"@getalby/lightning-wallet-connect@^1.0.11":
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/@getalby/lightning-wallet-connect/-/lightning-wallet-connect-1.0.11.tgz#d3585a74e42702116cdc2e3203cfebe0b2e5c965"
-  integrity sha512-UT1fMsScir6Zmwk7xbJxrE6QCHM8H7LdAbmi6mkSxF54El4RInW+RKZ9w8e3wVIFteJzqDZ8auzCR2rRzM7AOw==
+"@getalby/lightning-wallet-connect@^1.0.13":
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/@getalby/lightning-wallet-connect/-/lightning-wallet-connect-1.0.13.tgz#28f59232b8dc6c624ecc311857fa4704ed1c723a"
+  integrity sha512-RsPma/v2t+QyK5QX652AJGBYttfLbYN5J3rmzIq37Nek0WvUbQyi1lsfTpkELQrXzaoRWO80PgsnjLb6+/W10g==
   dependencies:
     "@getalby/sdk" "^2.2.3"
     lit "^2.2.4"