@nectary/labs 2.1.3 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/labs",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -17,7 +17,7 @@
   },
   "dependencies": {
     "@lit-labs/scoped-registry-mixin": "^1.0.3",
-    "@nectary/components": "3.3.5",
+    "@nectary/components": "4.0.0",
     "solid-element": "1.8.1",
     "solid-js": "1.8.19"
   },

package/phone-preview-rcs-channel.js

@@ -103,7 +103,7 @@ const style = `
     word-break: break-all;
     text-decoration: none;
 
-    & > sinch-icon {
+    & > .icon-link {
       grid-area: icon;
     }
 
@@ -186,15 +186,15 @@ const Actions = (props) => {
     return html `
     <section class="actions">
       <a inert=${() => number() === ''} target="_blank" href=${numberHref}>
-        <sinch-icon name="call" />
+        <sinch-icon name="fa-phone" class="icon-link" />
         Call
       </a>
       <a inert=${() => url() === ''} target="_blank" href=${urlHref}>
-        <sinch-icon name="public" />
+        <sinch-icon name="fa-earth-americas" name="public" class="icon-link" />
         Website
       </a>
       <a inert=${() => email() === ''} target="_blank" href=${emailHref}>
-        <sinch-icon name="mail" />
+        <sinch-icon name="envelope" name="mail" class="icon-link" />
         Email
       </a>
     </section>
@@ -219,7 +219,7 @@ const Info = (props) => {
             target="_blank"
             href=${`tel:${number}`}
           >
-            <sinch-icon name="call" />
+            <sinch-icon name="fa-phone" class="icon-link" />
             <span>${number}</span>
             <p>${label}</p>
           </a>
@@ -228,7 +228,7 @@ const Info = (props) => {
       <${For} each=${websites}>
         ${({ label, url }) => html `
           <a inert=${() => props.websites.length === 0} target="_blank" href=${url}>
-            <sinch-icon name="public" />
+            <sinch-icon name="fa-earth-americas" name="public" class="icon-link" />
             <span>${url}</span>
             <p>${label}</p>
           </a>
@@ -241,7 +241,7 @@ const Info = (props) => {
             target="_blank"
             href=${`mailto:${address}`}
           >
-            <sinch-icon name="mail" />
+            <sinch-icon name="envelope" name="mail" class="icon-link" />
             <span>${address}</span>
             <p>${label}</p>
           </a>

package/phone-preview-rcs-chat.js

@@ -121,14 +121,14 @@ export const RcsChatPreview = (props) => {
     </style>
     <section class="root">
       <header>
-        <sinch-icon name="arrow_back" />
+        <sinch-icon name="fa-arrow-left"></sinch-icon>
         <img
           src=${() => (props.logo !== '' ? props.logo : transparentIcon)}
           alt=""
         />
         <h1>${() => (props.name !== '' ? props.name : 'Brand name')}</h1>
-        <sinch-icon name="verified_user" />
-        <sinch-icon name="more_vert" />
+        <sinch-icon name="fa-shield-check" name="verified_user" />
+        <sinch-icon name="fa-ellipsis-vertical" name="more_vert" />
       </header>
       <div>
         <img
@@ -144,12 +144,12 @@ export const RcsChatPreview = (props) => {
         <//>
       </div>
       <footer>
-        <sinch-icon name="add_circle" />
-        <sinch-icon name="photo_camera" />
+        <sinch-icon name="fa-circle-plus" />
+        <sinch-icon name="fa-camera" />
         <div>
           <span>RCS Message</span>
-          <sinch-icon name="sentiment_satisfied" />
-          <sinch-icon name="mic" />
+          <sinch-icon name="fa-face-smile" />
+          <sinch-icon name="microphone" name="mic" />
         </div>
       </footer>
     </section>`;