split card

src/public/css/offers.css

@@ -67,6 +67,10 @@
   }
 }
 
+#create-offer-root {
+  display: none;
+}
+
 #create-offer-controls {
   text-align: center;
 }

src/public/javascript/offers.js

@@ -2,8 +2,7 @@ const buttonStartCreateOffer = document.getElementById(
   'button-start-create-offer'
 );
 const closeOfferControls = document.getElementById('close-offer-controls-x');
-const createOfferControls = document.getElementById('create-offer-controls');
-
+const createOfferRoot = document.getElementById('create-offer-root');
 const buyOrSellButtonGroup = document.getElementById(
   'button-group-buy-or-sell'
 );
@@ -46,11 +45,8 @@ const publishOfferButton = document.getElementById('button-submit-offer');
 const offerCreatedPopup = document.getElementById('offer-created-confirmation');
 
 function toggleCreateOfferControls() {
-  createOfferControls.style.display =
-    createOfferControls.style.display === 'block' ? 'none' : 'block';
-
-  buttonStartCreateOffer.style.display =
-    buttonStartCreateOffer.style.display === 'block' ? 'none' : 'block';
+  createOfferRoot.style.display =
+    createOfferRoot.style.display === 'block' ? 'none' : 'block';
 }
 
 function modifyPremiumValue(delta) {

src/views/offers.ejs

@@ -19,8 +19,9 @@
       >
         Crear nueva oferta
       </button>
-
-      <div id="create-offer-controls" style="display: none">
+    </div>
+    <div class="over-background" id="create-offer-root">
+      <div id="create-offer-controls">
         <div id="close-offer-controls-area">
           <img
             id="close-offer-controls-x"