1.0.139

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-catalog",
-  "version": "1.0.138",
+  "version": "1.0.139",
   "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.138',
+  version: '1.0.139',
   description: 'website for lossless.com'
 }

ts_web/elements/dees-button.ts

@@ -181,7 +181,7 @@ export class DeesButton extends DeesElement {
         @click="${this.dispatchClick}"
       >
         ${this.status === 'normal' ? html``: html`
-          <dees-spinner status="${this.status}"></dees-spinner>
+          <dees-spinner .bnw=${true} status="${this.status}"></dees-spinner>
         `}
         <div class="textbox">${this.text ? this.text : this.textContent}</div>
       </div>

ts_web/elements/dees-icon.ts

@@ -23,6 +23,8 @@ import {
 
 import {
   faCopy as faCopyRegular,
+  faCircleCheck as faCircleCheckRegular,
+  faCircleXmark as faCircleXmarkRegular,
   faMessage as faMessageRegular,
   faPaste as faPasteRegular,
   faSun as faSunRegular,
@@ -37,6 +39,8 @@ import {
   faCaretRight as faCaretRightSolid,
   faCheck as faCheckSolid,
   faCircleInfo as faCircleInfoSolid,
+  faCircleCheck as faCircleCheckSolid,
+  faCircleXmark as faCircleXmarkSolid,
   faCopy as faCopySolid,
   faDesktop as faDesktopSolid,
   faGrip as faGripSolid,
@@ -68,8 +72,12 @@ export const faIcons = {
   caretRightSolid: faCaretRightSolid,
   check: faCheckSolid,
   checkSolid: faCheckSolid,
-  circleinfo: faCircleInfoSolid,
+  circleInfo: faCircleInfoSolid,
-  circleinfoSolid: faCircleInfoSolid,
+  circleInfoSolid: faCircleInfoSolid,
+  circleCheck: faCircleCheckRegular,
+  circleCheckSolid: faCircleCheckSolid,
+  circleXmark: faCircleXmarkRegular,
+  circleXmarkSolid: faCircleXmarkSolid,
   copy: faCopyRegular,
   copySolid: faCopySolid,
   desktop: faDesktopSolid,

ts_web/elements/dees-spinner.ts

@@ -32,6 +32,11 @@ export class DeesSpinner extends DeesElement {
   })
   public size = 20;
 
+  @property({
+    type: String,
+  })
+  public bnw: boolean = false;
+
   @property()
   public status: 'normal' | 'pending' | 'success' | 'error' = 'normal';
 
@@ -61,12 +66,14 @@ export class DeesSpinner extends DeesElement {
       }
 
       #loading.success {
+        border: none;
         border-radius: 50%;
         animation: none;
         -webkit-animation: none;
       }
 
       #loading.error {
+        border: none;
         border-radius: 50%;
         animation: none;
         -webkit-animation: none;
@@ -88,14 +95,6 @@ export class DeesSpinner extends DeesElement {
         height: 100%;
         width: 100%;
       }
-
-      #loading.success dees-icon {
-        color: #8bc34a;
-      }
-
-      #loading.error dees-icon {
-        color: #e64a19;
-      }
     `,
   ];
 
@@ -107,21 +106,22 @@ export class DeesSpinner extends DeesElement {
           height: ${this.size}px;
         }
         #loading.success {
-          border: ${Math.round(this.size * 0.08)}px solid ${cssManager.bdTheme(`#8bc34a`, '#8bc34a')}
+          color: ${cssManager.bdTheme(this.bnw ? '#333': `#8bc34a`, this.bnw ? '#fff' : `#8bc34a`)};
+          
         }
         #loading.error {
-          border: ${Math.round(this.size * 0.1)}px solid ${cssManager.bdTheme(`#e64a19`, '#e64a19')}
+          color: ${cssManager.bdTheme(this.bnw ? '#333': `#e64a19`, this.bnw ? '#fff' : `#e64a19`)};
         }
         dees-icon {
-          font-size: ${Math.round(this.size * 0.6)}px;
+          font-size: ${this.size}px;
         }
       </style>
       <div class="${this.status}" id="loading">
         ${(() => {
           if (this.status === 'success') {
-            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'check' as any}></dees-icon>`;
+            return html`<dees-icon style="transform: translateX(1%) translateY(3%);" .iconFA=${'circleCheck' as any}></dees-icon>`;
           } else if (this.status === 'error') {
-            return  html`<dees-icon .iconFA=${'xmark' as any}></dees-icon>`;
+            return  html`<dees-icon .iconFA=${'circleXmark' as any}></dees-icon>`;
           }
         })()}
       </div>