toggle controls

src/public/css/seca.css

@@ -24,6 +24,9 @@ h1 {
   color: #e1c300;
 }
 
+.clickable {
+  cursor: pointer;
+}
 .over-background {
   background-color: white;
   border-radius: 1vw;

src/public/img/circle-xmark.svg

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- circle-xmark icon by Free Icons (https://free-icons.github.io/free-icons/) -->
+
+<svg
+   height="1em"
+   fill="currentColor"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   sodipodi:docname="circle-xmark.svg"
+   inkscape:version="1.4 (1:1.4+202410161351+e7c3feb100)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:zoom="2.3300781"
+     inkscape:cx="255.78541"
+     inkscape:cy="256"
+     inkscape:window-width="2490"
+     inkscape:window-height="1376"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1" />
+  <path
+     d="M 256 512 Q 326 511 384 478 L 384 478 L 384 478 Q 442 444 478 384 Q 512 323 512 256 Q 512 189 478 128 Q 442 68 384 34 Q 326 1 256 0 Q 186 1 128 34 Q 70 68 34 128 Q 0 189 0 256 Q 0 323 34 384 Q 70 444 128 478 Q 186 511 256 512 L 256 512 Z M 175 175 Q 192 161 209 175 L 256 222 L 256 222 L 303 175 L 303 175 Q 320 161 337 175 Q 351 192 337 209 L 290 256 L 290 256 L 337 303 L 337 303 Q 351 320 337 337 Q 320 351 303 337 L 256 290 L 256 290 L 209 337 L 209 337 Q 192 351 175 337 Q 161 320 175 303 L 222 256 L 222 256 L 175 209 L 175 209 Q 161 192 175 175 L 175 175 Z"
+     id="path1"
+     style="fill:#e1c300;fill-opacity:1" />
+</svg>

src/public/javascript/offers.js

@@ -1,8 +1,19 @@
 const buttonStartCreateOffer = document.getElementById(
   'button-start-create-offer'
 );
+const closeOfferControls = document.getElementById('close-order-controls-x');
 const createOfferControls = document.getElementById('create-offer-controls');
 
 buttonStartCreateOffer.addEventListener('click', () => {
-  createOfferControls.style.display = 'block';
+  toggleCreateOfferControls();
 });
+
+closeOfferControls.addEventListener('click', () => {
+  toggleCreateOfferControls();
+});
+
+function toggleCreateOfferControls() {
+  createOfferControls.style.display =
+    createOfferControls.style.display === 'block' ? 'none' : 'block';
+  buttonStartCreateOffer.disabled = !buttonStartCreateOffer.disabled;
+}

src/views/offers.ejs

@@ -15,7 +15,10 @@
         Crear nueva oferta
       </button>
       <div id="create-offer-controls" style="display: none">
+        <img id="close-order-controls-x" src="/img/circle-xmark.svg" class="clickable" width="5%">
         <p>Añade los detalles de tu oferta</p>
+        <button>Quiero comprar Bitcoin</button>
+        <button>Quiero vender Bitcoin</button>
         <button id="button-submit-offer" class="button-primary" disabled>
           Publicar oferta
         </button>