From 82778b91ca9588ec6c74c801c5f3741f834d7a42 Mon Sep 17 00:00:00 2001
From: counterweight <counterweightoperator@protonmail.com>
Date: Sat, 5 Apr 2025 12:41:28 +0200
Subject: [PATCH] move premium selector

---
 public/css/offers.css                   |  6 +--
 src/front/components/PremiumSelector.js |  1 +
 src/front/pages/offers.js               | 54 ++++++++++++-------------
 3 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/public/css/offers.css b/public/css/offers.css
index 54ecefa..a0d9705 100644
--- a/public/css/offers.css
+++ b/public/css/offers.css
@@ -11,7 +11,7 @@
     max-width: 30%;
   }
 
-  #premium-selector-area {
+  .premium-selector-area {
     width: 80px;
   }
 
@@ -50,7 +50,7 @@
     width: 50px;
   }
 
-  #premium-selector-area {
+  .premium-selector-area {
     width: 100px;
   }
 
@@ -261,7 +261,7 @@
   display: flex;
 }
 
-#premium-selector-area {
+.premium-selector-area {
   margin-left: auto;
   margin-right: 5%;
   display: flex;
diff --git a/src/front/components/PremiumSelector.js b/src/front/components/PremiumSelector.js
index d2defdd..a1b1f4e 100644
--- a/src/front/components/PremiumSelector.js
+++ b/src/front/components/PremiumSelector.js
@@ -11,6 +11,7 @@ class PremiumSelector {
   render() {
     const premiumSelectorArea = document.createElement('div');
     premiumSelectorArea.id = this.id;
+    premiumSelectorArea.classList = 'premium-selector-area';
 
     const premiumValue = document.createElement('div');
     premiumValue.id = 'premium-value';
diff --git a/src/front/pages/offers.js b/src/front/pages/offers.js
index 45686ed..fd73a64 100644
--- a/src/front/pages/offers.js
+++ b/src/front/pages/offers.js
@@ -57,8 +57,6 @@ class CreateOfferModal {
     this.buyOrSellButtonGroup.render();
     controls.appendChild(buyOrSellDiv);
 
-    breaks();
-    //Continue moving components up here
     const premiumDiv = document.createElement('div');
     premiumDiv.id = 'premium-area';
     premiumDiv.className = 'create-offer-step';
@@ -70,6 +68,32 @@ class CreateOfferModal {
     premiumDiv.appendChild(premiumContentDiv);
     controls.appendChild(premiumDiv);
 
+    const createOfferEventBus = new EventTarget();
+
+    const mockPriceProvidingCallback = () => {
+      return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
+    };
+
+    this.premiumSelector = new PremiumSelector({
+      parentElement: premiumContentDiv,
+      eventSink: createOfferEventBus,
+    });
+    this.premiumSelector.render();
+
+    const priceDisplay = new PriceDisplay({
+      parentElement: premiumContentDiv,
+      id: 'premium-price-display-area',
+      premiumProvidingCallback: () => {
+        return this.premiumSelector.getPremium();
+      },
+      priceProvidingCallback: mockPriceProvidingCallback,
+    });
+    priceDisplay.render();
+    createOfferEventBus.addEventListener('premium-changed', () => {
+      priceDisplay.updatePrices();
+    });
+
+    //Continue moving components up here
     const amountDiv = document.createElement('div');
     amountDiv.id = 'amount-area';
     amountDiv.className = 'create-offer-step';
@@ -148,32 +172,6 @@ class CreateOfferModal {
 
     this.parentElement.appendChild(this.element);
 
-    const createOfferEventBus = new EventTarget();
-
-    const mockPriceProvidingCallback = () => {
-      return Math.floor(Math.random() * (95000 - 70000 + 1) + 70000);
-    };
-
-    this.premiumSelector = new PremiumSelector({
-      parentElement: document.getElementById('premium-content-area'),
-      id: 'premium-selector-area',
-      eventSink: createOfferEventBus,
-    });
-    this.premiumSelector.render();
-
-    const priceDisplay = new PriceDisplay({
-      parentElement: document.getElementById('premium-content-area'),
-      id: 'premium-price-display-area',
-      premiumProvidingCallback: () => {
-        return this.premiumSelector.getPremium();
-      },
-      priceProvidingCallback: mockPriceProvidingCallback,
-    });
-    priceDisplay.render();
-    createOfferEventBus.addEventListener('premium-changed', () => {
-      priceDisplay.updatePrices();
-    });
-
     this.amountInput = new AmountInput({
       parentElement: document.getElementById('amount-area'),
       id: 'amount-area-content',