Merge pull request #119 from getAlby/feat/update-connector-icons-copy

feat: update connector icons and copy

src/components/connectors/ConnectorElement.ts

@@ -39,7 +39,7 @@ export abstract class ConnectorElement extends withTwind()(
         ${this._icon}
       </div>
       <span
-        class="mt-2 text-sm font-sans font-medium ${classes[
+        class="text-sm mt-3 font-sans font-medium text-center w-28 h-7 flex justify-center items-center ${classes[
           'text-neutral-secondary'
         ]}"
       >

src/components/connectors/bc-alby-nwc-connector.ts

@@ -8,7 +8,7 @@ export class AlbyNWCConnector extends ConnectorElement {
   constructor() {
     super(
       'nwc.alby',
-      'Alby',
+      'Alby Account',
       'linear-gradient(180deg, #FFDE6E 63.72%, #F8C455 95.24%)',
       albyIcon
     );

src/components/connectors/bc-extension-connector.ts

@@ -1,16 +1,11 @@
 import {customElement} from 'lit/decorators.js';
-import {puzzleIcon} from '../icons/connectors/puzzleIcon';
+import {extensionIcon} from '../icons/connectors/extensionIcon';
 import {ConnectorElement} from './ConnectorElement';
 
 @customElement('bc-extension-connector')
 export class ExtensionConnector extends ConnectorElement {
   constructor() {
-    super(
-      'extension.generic',
-      'Extension',
-      'linear-gradient(180deg, #E7E7E7 63.72%, #D1D1D1 95.24%)',
-      puzzleIcon
-    );
+    super('extension.generic', 'Extension Wallets', '#ffffff', extensionIcon);
   }
 
   protected _onClick() {

src/components/connectors/bc-generic-nwc-connector.ts

@@ -3,12 +3,12 @@ import {nwcIcon} from '../icons/connectors/nwcIcon';
 import {ConnectorElement} from './ConnectorElement';
 import store from '../../state/store';
 
-export const genericConnectorTitle = 'NWC Generic';
+export const genericConnectorTitle = 'Nostr Wallet Connect';
 
 @customElement('bc-nwc-connector')
 export class GenericNWCConnector extends ConnectorElement {
   constructor() {
-    super('nwc.generic', genericConnectorTitle, '#7E22CD', nwcIcon);
+    super('nwc.generic', genericConnectorTitle, '#ffffff', nwcIcon);
   }
 
   protected async _onClick() {

src/components/connectors/bc-lnc-connector.ts

@@ -6,7 +6,7 @@ import {getLNC} from '../../connectors/LNCConnector';
 @customElement('bc-lnc-connector')
 export class LNCConnector extends ConnectorElement {
   constructor() {
-    super('lnc', 'LNC', '#101727', lncIcon);
+    super('lnc', 'Lightning Node Connect', '#101727', lncIcon);
   }
 
   protected async _onClick() {

src/components/connectors/bc-mutiny-nwc-connector.ts

@@ -8,7 +8,12 @@ export const mutinyNWCConnectorTitle = 'Mutiny';
 @customElement('bc-mutiny-nwc-connector')
 export class MutinyNWCConnector extends ConnectorElement {
   constructor() {
-    super('nwc.mutiny', mutinyNWCConnectorTitle, '#000000', mutinyIcon);
+    super(
+      'nwc.mutiny',
+      mutinyNWCConnectorTitle,
+      'linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(3,33,93,1) 100%)',
+      mutinyIcon
+    );
   }
 
   protected async _onClick() {

src/components/icons/connectors/mutinyIcon.ts

@@ -4,5 +4,5 @@ import {svg} from 'lit';
 // - set class="w-10 h-10"
 
 export const mutinyIcon = svg`<svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-10 h-10">
-<path d="M2.5 28.4H5.08333V29.7H8.95833V28.4H10.25V15.4H11.5417V12.8H10.25V11.5H7.66667V12.8H6.375V14.1H5.08333V15.4H8.95833V18H7.66667V19.3H5.08333V18H3.79167V12.8H5.08333V11.5H6.375V10.2H14.125V11.5H15.4167V12.8H16.7083V15.4H18V18H19.2917V19.3H20.5833V16.7H21.875V15.4H23.1667V12.8H24.4583V10.2H25.75V8.9H27.0417V6.3H29.625V5H32.2083V6.3H33.5V7.6H30.9167V6.3H29.625V7.6H28.3333V23.2H29.625V29.7H30.9167V31H25.75V29.7H24.4583V16.7H23.1667V18H21.875V20.6H20.5833V23.2H19.2917V25.8H16.7083V23.2H15.4167V20.6H14.125V16.7H12.8333V24.5H11.5417V28.4H10.25V29.7H8.95833V31H3.79167V29.7H2.5V28.4Z" fill="white"/>
+<path d="M2.5 28.4H5.08333V29.7H8.95833V28.4H10.25V15.4H11.5417V12.8H10.25V11.5H7.66667V12.8H6.375V14.1H5.08333V15.4H8.95833V18H7.66667V19.3H5.08333V18H3.79167V12.8H5.08333V11.5H6.375V10.2H14.125V11.5H15.4167V12.8H16.7083V15.4H18V18H19.2917V19.3H20.5833V16.7H21.875V15.4H23.1667V12.8H24.4583V10.2H25.75V8.9H27.0417V6.3H29.625V5H32.2083V6.3H33.5V7.6H30.9167V6.3H29.625V7.6H28.3333V23.2H29.625V29.7H30.9167V31H25.75V29.7H24.4583V16.7H23.1667V18H21.875V20.6H20.5833V23.2H19.2917V25.8H16.7083V23.2H15.4167V20.6H14.125V16.7H12.8333V24.5H11.5417V28.4H10.25V29.7H8.95833V31H3.79167V29.7H2.5V28.4Z" fill="#f42058"/>
 </svg>`;

src/components/icons/connectors/nwcIcon.ts

@@ -3,18 +3,13 @@ import {svg} from 'lit';
 // WARNING: if replacing this icon make sure to:
 // - set class="w-10 h-10"
 
-export const nwcIcon = svg`<svg
-  width="25"
-  height="24"
-  viewBox="0 0 25 24"
-  fill="none"
-  xmlns="http://www.w3.org/2000/svg"
-  class="w-10 h-10"
-  >
-  <path
-    fill-rule="evenodd"
-    clip-rule="evenodd"
-    d="M14.1287 5.03035L21.4952 12.43L21.4962 12.431C21.9034 12.84 22.3607 13.0639 22.7796 13.1062C23.1718 13.1459 23.5673 13.0322 23.9225 12.6949L19.9036 2.22631C19.4497 1.2345 18.1428 0.998839 17.3711 1.7739L14.1287 5.03035ZM21.0966 12.8275L21.0967 12.8277L21.0965 12.8278C22.0558 13.7912 23.3871 14.021 24.3507 13.062L21.0884 16.3089L19.5591 17.8311L18.4915 18.8936L16.6182 17.0135C17.526 15.6331 17.3781 13.7598 16.1662 12.5404L14.8908 11.2571C14.7095 11.0747 14.4176 11.0738 14.2351 11.2551L13.6055 11.8808L12.0093 10.2746C11.7323 9.99591 11.2744 10.0124 11.0176 10.3194C10.7928 10.5905 10.8315 10.9904 11.0786 11.239L12.6549 12.8251L11.4035 14.0683L9.8073 12.4622C9.53028 12.1835 9.07051 12.1979 8.81561 12.507C8.5928 12.7762 8.63155 13.1761 8.87864 13.4247L10.4549 15.0107L9.82725 15.6344C9.64479 15.8157 9.64392 16.1076 9.82523 16.29L11.1006 17.5733C12.3123 18.7926 14.1847 18.9525 15.5709 18.0538L17.4452 19.9349L16.8577 20.5195L14.8527 22.5151C13.8889 23.4742 12.3301 23.4706 11.3708 22.507L1.21706 12.3075C0.257903 11.3438 0.261373 9.78528 1.22516 8.82609L7.46087 2.61976C8.42465 1.66071 9.9834 1.66432 10.9427 2.62785L21.0966 12.8275Z"
-    fill="white"
-  />
+export const nwcIcon = svg`<svg class="w-10 h-10" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M43.7274 23.9471C41.9608 25.7054 39.52 25.284 37.7615 23.5178C37.7615 23.5178 37.7615 23.5178 37.7613 23.5175L23.53 9.22225L30.1989 2.52452C32.1302 0.584715 35.4069 1.18529 36.5245 3.68405L43.9437 23.0097C44.0657 23.3272 43.9888 23.6869 43.7476 23.927L39.0614 28.5911L43.7272 23.9471H43.7274Z" fill="#472459"/>
+<path d="M37.7607 24.8117C37.7607 24.8117 37.7607 24.8117 37.7604 24.8114L19.145 6.11204C17.3862 4.34557 14.5285 4.33895 12.7616 6.0972L1.32946 17.4755C-0.437483 19.234 -0.443845 22.0913 1.31462 23.8581L19.9298 42.5572C21.6886 44.3237 24.5463 44.3303 26.3132 42.572L29.9892 38.9135L31.0661 37.8417L27.6301 34.393C25.0886 36.0405 21.656 35.7473 19.4344 33.512L17.0962 31.1593C16.7639 30.8248 16.7654 30.2897 17.1 29.9574L18.2506 28.814L15.3608 25.9063C14.9078 25.4504 14.8368 24.7173 15.2453 24.2238C15.7126 23.6572 16.5555 23.6307 17.0634 24.1417L19.9897 27.0862L22.2839 24.8069L19.3941 21.8992C18.9411 21.4433 18.8701 20.7102 19.2823 20.2133C19.753 19.6504 20.5925 19.6201 21.1004 20.1311L24.0267 23.0757L25.1811 21.9286C25.5156 21.5963 26.0508 21.5978 26.3832 21.9323L28.7213 24.2851C30.9432 26.5206 31.2143 29.955 29.55 32.4858L32.9844 35.9326L34.9417 33.9846L37.7453 31.194L43.7263 25.2413C41.9597 26.9996 39.5189 26.5781 37.7602 24.8119L37.7607 24.8117Z" fill="url(#paint0_linear_856_1234)"/>
+<defs>
+<linearGradient id="paint0_linear_856_1234" x1="21.8632" y1="4.78284" x2="21.8632" y2="43.8864" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFCA4A"/>
+<stop offset="1" stop-color="#F7931A"/>
+</linearGradient>
+</defs>
 </svg>`;