fix: connector element text color, icon-only connected icon

getAlby · Aug 24, 2023 · f70ded0 · f70ded0
1 parent 0482321
commit f70ded0
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 44 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@getalby/lightning-wallet-connect",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "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/connectors/lwc-connector.ts b/src/components/connectors/lwc-connector.ts
@@ -2,6 +2,7 @@ import {TemplateResult, html} from 'lit';
 import {LwcElement} from '../lwc-element';
 import {withTwind} from '../twind/withTwind';
 import {ConnectorType} from '../../types/ConnectorType';
+import {color} from '../utils/colors';
 
 export abstract class LwcConnector extends withTwind(LwcElement) {
   private _background: string;
@@ -33,7 +34,11 @@ export abstract class LwcConnector extends withTwind(LwcElement) {
       >
         ${this._icon}
       </div>
-      <span class="text-sm font-sans font-medium">${this._title}</span>
+      <span
+        class="text-sm font-sans font-medium"
+        style="color: ${color('text-secondary')}"
+        >${this._title}</span
+      >
     </div>`;
   }
 }
diff --git a/src/components/icons/lwcConnectedIcon.ts b/src/components/icons/lwcConnectedIcon.ts
@@ -1,31 +1,10 @@
 import {svg} from 'lit';
+import {color} from '../utils/colors';
 
-export const lwcConnectedIcon = svg`<svg width="34" height="28" viewBox="0 0 34 28" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M28.6408 16.9031C27.0379 23.3317 20.5261 27.2441 14.096 25.641C7.66859 24.0382 3.75579 17.5267 5.35946 11.0985C6.96163 4.6691 13.4735 0.756349 19.9016 2.3591C26.3313 3.96185 30.2437 10.4741 28.6408 16.9031Z" fill="white"/>
-<path d="M19.2466 16.5429C18.8191 18.1726 16.0776 17.254 15.188 17.0211L15.9476 14.1321C16.8373 14.3661 19.6934 14.8433 19.2466 16.5429ZM19.7076 12.3064C19.3175 13.7888 17.036 13.0043 16.2952 12.8096L16.9839 10.1894C17.7247 10.384 20.1138 10.76 19.7076 12.3064Z" fill="url(#paint0_linear_204_1440)"/>
-<path d="M19.7076 12.3064C19.3175 13.7888 17.036 13.0043 16.2952 12.8096L16.9839 10.1894C17.7247 10.384 20.1138 10.76 19.7076 12.3064Z" fill="url(#paint1_linear_204_1440)"/>
-<path d="M19.2466 16.5429C18.8191 18.1726 16.0776 17.254 15.188 17.0211L15.9476 14.1321C16.8373 14.3661 19.6934 14.8433 19.2466 16.5429Z" fill="url(#paint2_linear_204_1440)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M22.308 12.3629C22.5671 10.7693 21.3623 9.89565 19.7073 9.30203L20.2739 7.14602L18.9615 6.80126L18.4099 8.90045C18.0649 8.80982 17.7105 8.72396 17.3583 8.63887L17.9138 6.52585L16.6022 6.1811L16.0353 8.33634C15.7496 8.26747 15.4692 8.19942 15.1971 8.1281L15.1987 8.12137L13.3888 7.64504L13.0208 9.04674C13.0208 9.04674 13.9947 9.28297 13.9739 9.29658C14.5055 9.43644 14.5974 9.79051 14.5777 10.07L13.9323 12.5262L13.9299 12.5355L13.0253 15.9762C12.958 16.1374 12.7896 16.3783 12.418 16.2813C12.4309 16.3006 11.4641 16.0304 11.4641 16.0304L10.7915 17.5291L12.4993 17.9779C12.817 18.0618 13.1283 18.1493 13.4348 18.232L12.8623 20.4127L14.1731 20.7574L14.7401 18.5999C15.0981 18.7019 15.4457 18.7963 15.7858 18.8854L15.2209 21.0328L16.5332 21.3776L17.1057 19.201C19.3453 19.6543 21.0356 19.5043 21.7718 17.4828C22.3651 15.8552 21.776 14.9045 20.6026 14.2746C21.4653 14.0872 22.1204 13.5295 22.308 12.3629ZM15.188 17.0211C16.0776 17.254 18.8191 18.1726 19.2466 16.5429C19.6934 14.8433 16.8373 14.3661 15.9476 14.1321L15.188 17.0211ZM16.2952 12.8096C17.036 13.0043 19.3175 13.7888 19.7076 12.3064C20.1138 10.76 17.7247 10.384 16.9839 10.1894L16.2952 12.8096Z" fill="url(#paint3_linear_204_1440)"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M16.6222 11.4222L16.8009 10.7412C16.8842 10.424 17.2088 10.2344 17.5259 10.3177C17.843 10.4009 18.0326 10.7255 17.9494 11.0426L17.7706 11.7237L18.4516 11.9025C18.7687 11.9857 18.9583 12.3103 18.8751 12.6274C18.7918 12.9446 18.4673 13.1342 18.1501 13.0509L17.4691 12.8722L17.2903 13.5533C17.2071 13.8704 16.8825 14.06 16.5654 13.9767C16.2482 13.8935 16.0586 13.5689 16.1419 13.2518L16.3207 12.5707L15.6395 12.3919C15.3224 12.3086 15.1328 11.9841 15.216 11.6669C15.2993 11.3498 15.6239 11.1602 15.941 11.2434L16.6222 11.4222Z" fill="#aaffaa"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M18.0479 15.2504L18.2267 14.5693C18.31 14.2522 18.6345 14.0626 18.9517 14.1458C19.2688 14.2291 19.4584 14.5536 19.3752 14.8708L19.1964 15.5518L19.8774 15.7306C20.1945 15.8139 20.3841 16.1384 20.3009 16.4556C20.2176 16.7727 19.893 16.9623 19.5759 16.879L18.8949 16.7003L18.7161 17.3814C18.6329 17.6985 18.3083 17.8881 17.9912 17.8049C17.674 17.7216 17.4844 17.397 17.5677 17.0799L17.7465 16.3988L17.0653 16.22C16.7482 16.1368 16.5586 15.8122 16.6418 15.495C16.7251 15.1779 17.0496 14.9883 17.3668 15.0716L18.0479 15.2504Z" fill="#aaffaa"/>
-<defs>
-<linearGradient id="paint0_linear_204_1440" x1="16.6757" y1="6.18203" x2="16.4834" y2="21.3769" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2EA7FF"/>
-<stop offset="1" stop-color="#0045B1"/>
-</linearGradient>
-<linearGradient id="paint1_linear_204_1440" x1="16.6757" y1="6.18203" x2="16.4834" y2="21.3769" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2EA7FF"/>
-<stop offset="1" stop-color="#0045B1"/>
-</linearGradient>
-<linearGradient id="paint2_linear_204_1440" x1="16.6757" y1="6.18203" x2="16.4834" y2="21.3769" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2EA7FF"/>
-<stop offset="1" stop-color="#0045B1"/>
-</linearGradient>
-<linearGradient id="paint3_linear_204_1440" x1="16.6757" y1="6.18203" x2="16.4834" y2="21.3769" gradientUnits="userSpaceOnUse">
-<stop stop-color="#2EA7FF"/>
-<stop offset="1" stop-color="#0045B1"/>
-</linearGradient>
-</defs>
-</svg>
+export const lwcConnectedIcon = svg`
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
-`;
+<path stroke-width="1.5" stroke="${color(
+  'text-primary'
+)}" stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+</svg>`;
diff --git a/src/components/lwc-button.ts b/src/components/lwc-button.ts
@@ -94,15 +94,15 @@ export class LwcButton extends withTwind(LwcElement) {
               ? lwcConnectedIcon
               : null
             : lwcIcon}
-          <span class="font-semibold">
-            ${iconOnly
-              ? null
-              : isLoading
-              ? html`Connecting...`
-              : this._connected
-              ? html`${this._alias || 'Connected'}`
-              : html`Connect Wallet`}
-          </span>
+          ${!iconOnly
+            ? html`<span class="font-semibold">
+                ${isLoading
+                  ? html`Connecting...`
+                  : this._connected
+                  ? html`${this._alias || 'Connected'}`
+                  : html`Connect Wallet`}
+              </span>`
+            : null}
         </button>
         ${this._connected && !iconOnly && this._balance !== undefined
           ? html`<span

diff --git a/website/package.json b/website/package.json
@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@getalby/lightning-wallet-connect": "^1.0.10",
+    "@getalby/lightning-wallet-connect": "^1.0.11",
     "@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.10":
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/@getalby/lightning-wallet-connect/-/lightning-wallet-connect-1.0.10.tgz#7488eedaf04ecb5ecc9a8683cdd4889d26a3d193"
-  integrity sha512-eTQbKgH1FvtgcP0JL64GTr/DHjnqyU4470TtireHavyhf70we58AhuxXf45bHOWRXPRfCjVMbqK0I9PYZUt0TQ==
+"@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==
   dependencies:
     "@getalby/sdk" "^2.2.3"
     lit "^2.2.4"