refactor styles, remove ids

public/css/offers.css

@@ -15,7 +15,7 @@
     width: 80px;
   }
 
-  #amount-area-content {
+  .amount-area-content {
     width: 50%;
   }
 
@@ -54,7 +54,7 @@
     width: 100px;
   }
 
-  #amount-area-content {
+  .amount-area-content {
     width: 33%;
   }
 
@@ -314,7 +314,7 @@
   font-size: 0.8em;
 }
 
-#amount-area-content {
+.amount-area-content {
   margin-left: auto;
   margin-right: auto;
 }

src/front/components/AmountInput.js

@@ -13,24 +13,21 @@ class AmountInput {
   render() {
     const amountArea = document.createElement('div');
     amountArea.id = this.id;
+    amountArea.className = 'amount-area-content';
 
     const eurAmount = document.createElement('div');
-    eurAmount.id = 'eur-amount';
     eurAmount.className = 'money-amount-input-area';
 
     this.eurInput = document.createElement('input');
-    this.eurInput.id = 'input-eur-amount';
     this.eurInput.type = 'text';
     this.eurInput.className = 'money-input input-money-amount';
     this.eurInput.value = '100';
     this.eurInput.required = true;
 
     const eurSymbol = document.createElement('div');
-    eurSymbol.id = 'eur-symbol';
     eurSymbol.className = 'curr-symbol';
 
     const eurCharacter = document.createElement('span');
-    eurCharacter.id = 'eur-character';
     eurCharacter.className = 'curr-character';
     eurCharacter.textContent = '€';
 
@@ -39,21 +36,17 @@ class AmountInput {
     eurAmount.appendChild(eurSymbol);
 
     const btcAmount = document.createElement('div');
-    btcAmount.id = 'btc-amount';
     btcAmount.className = 'money-amount-input-area';
 
     this.btcInput = document.createElement('input');
-    this.btcInput.id = 'input-btc-amount';
     this.btcInput.type = 'text';
     this.btcInput.className = 'money-input input-money-amount';
     this.btcInput.disabled = true;
 
     const satsSymbol = document.createElement('div');
-    satsSymbol.id = 'sats-symbol';
     satsSymbol.className = 'curr-symbol';
 
     const satsCharacter = document.createElement('span');
-    satsCharacter.id = 'sats-character';
     satsCharacter.className = 'curr-character';
     satsCharacter.textContent = 'SAT';
 

src/front/pages/offers.js

@@ -92,7 +92,6 @@ class CreateOfferModal {
       priceDisplay.updatePrices();
     });
 
-    //Continue moving components up here
     const amountDiv = document.createElement('div');
     amountDiv.id = 'amount-area';
     amountDiv.className = 'create-offer-step';
@@ -101,6 +100,12 @@ class CreateOfferModal {
     amountDiv.appendChild(amountHeading);
     controls.appendChild(amountDiv);
 
+    this.amountInput = new AmountInput({
+      parentElement: amountDiv,
+    });
+
+    //Continue moving components up here
+
     const placeTimeDiv = document.createElement('div');
     placeTimeDiv.id = 'place-and-time-area';
     placeTimeDiv.className = 'create-offer-step';
@@ -171,11 +176,6 @@ class CreateOfferModal {
 
     this.parentElement.appendChild(this.element);
 
-    this.amountInput = new AmountInput({
-      parentElement: document.getElementById('amount-area'),
-      id: 'amount-area-content',
-    });
-
     this.amountInput.render();
 
     this.placeInput = new PlaceInput({