1.0.86

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.82",
+  "version": "1.0.86",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@designestate/dees-catalog",
-      "version": "1.0.82",
+      "version": "1.0.86",
       "license": "MIT",
       "dependencies": {
         "@designestate/dees-domtools": "^2.0.22",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.82",
+  "version": "1.0.86",
   "private": false,
   "description": "website for lossless.com",
   "main": "dist_ts_web/index.js",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@designestate/dees-catalog',
-  version: '1.0.82',
+  version: '1.0.86',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-speechbubble.ts

@@ -50,7 +50,7 @@ export class DeesSpeechbubble extends DeesElement {
         position: relative;
         display: block;
         box-sizing: border-box;
-        color: #fff;
+        color: ${cssManager.bdTheme('#333', '#fff')};
         cursor: pointer;
         user-select: none;
       }
@@ -58,23 +58,34 @@ export class DeesSpeechbubble extends DeesElement {
         display: none;
       }
 
+      .maincontainer {
+        position: relative;
+        transition: all 0.2s;
+        margin-left: 0px;
+      }
+
+      .maincontainer:hover {
+        margin-left: 3px;
+      }
+
       .arrow {
         position: absolute;
         transform: rotate(45deg);
-        background: #333;
-        height: 20px;
-        width: 20px;
-        left: 5px;
+        background: ${cssManager.bdTheme('#fff', '#333')};
+        height: 15px;
+        width: 15px;
+        left: 4px;
         top: 5px;
-        border-radius: 3px;
+        border-radius: 2px;
       }
 
-      .maincontainer {
-        background: #333;
+      .speechbubble {
+        background: ${cssManager.bdTheme('#fff', '#333')};
         padding: 0px 10px;
         border-radius: 3px;
         position: absolute;
-        line-height: 30px;
+        line-height: 25px;
+        font-size: 12px;
         top: 0px;
         left: 8px;
       }
@@ -118,24 +129,19 @@ export class DeesSpeechbubble extends DeesElement {
 
   public render(): TemplateResult {
     return html`
+      <div class="maincontainer" @click=${this.handleClick}>
         <div class="arrow"></div>
-      <div class="maincontainer"><span class="wave">👋</span> Hey! We are consulting.</div>
+        <div class="speechbubble"><span class="wave">👋</span> Hey! We are consulting.</div>
+      </div>
     `;
   }
 
-  public async dispatchClick() {
+  public async handleClick() {
     if (this.disabled) {
       return;
     }
 
-    this.dispatchEvent(
-      new CustomEvent('clicked', {
-        detail: {
-          data: null,
-        },
-        bubbles: true,
-      })
-    );
+    globalThis.location.href = "https://lossless.consulting"
   }
 
   public async firstUpdated() {