Merge pull request #212 from csfloat/feature/auto-fill-notice

Adds Notice that you need to use auto-fill for csfloat market

Author: Step7750

src/lib/components/trade_offer/auto_fill.ts

@@ -39,10 +39,27 @@ export class AutoFill extends FloatElement {
                 background-color: rgb(179, 0, 0);
             }
 
+            .notice {
+                background-color: #6775e1;
+                padding: 6px;
+                border-radius: 6px;
+                display: flex;
+                gap: 10px;
+                align-items: center;
+                margin-top: 10px;
+                margin-bottom: 10px;
+                font-size: 15px;
+                color: white;
+            }
+
             .float-icon {
                 float: left;
             }
 
+            .float-icon > img {
+                border-radius: 5px;
+            }
+
             .item-name {
                 font-size: 18px;
                 margin-left: 15px;
@@ -228,6 +245,22 @@ export class AutoFill extends FloatElement {
         `;
     }
 
+    showAutoFillInfoDialog(tradesToBuyer: Trade[]): HTMLTemplateResult {
+        if (tradesToBuyer.length === 0) {
+            return html``;
+        }
+
+        return html`
+            <div class="notice">
+                <img
+                    src="https://avatars.cloudflare.steamstatic.com/6ab5219d0bbcce1300a2c6d7cbc638da52edda48_full.jpg"
+                    style="height: 32px; border-radius: 5px;"
+                />
+                <div>You must use auto-fill in order to send trades on CSFloat Market.</div>
+            </div>
+        `;
+    }
+
     protected render(): HTMLTemplateResult {
         if (!this.pendingTradesResponse) return html``;
 
@@ -240,8 +273,9 @@ export class AutoFill extends FloatElement {
         }
 
         return html`
-            ${this.showPermissionWarningDialog(tradesToBuyer)} ${this.renderBulkAutoFillDialog(tradesToBuyer)}
-            ${tradesToBuyer.map((e) => this.renderAutoFillDialog(e))} ${this.showWarningDialog()}
+            ${this.showAutoFillInfoDialog(tradesToBuyer)} ${this.showPermissionWarningDialog(tradesToBuyer)}
+            ${this.renderBulkAutoFillDialog(tradesToBuyer)} ${tradesToBuyer.map((e) => this.renderAutoFillDialog(e))}
+            ${this.showWarningDialog()}
         `;
     }