styling thingies

src/public/css/offers.css

@@ -1,3 +1,38 @@
+@media (max-width: 768px) {
+  #offers-root {
+    width: 100%;
+    margin: 10px 10px;
+  }
+
+  #close-offer-controls-x {
+    width: 25px;
+  }
+}
+
+@media (min-width: 769px) {
+  #offers-root {
+    width: 75%;
+    margin: 20px auto;
+  }
+
+  #close-offer-controls-x {
+    width: 50px;
+  }
+}
+
+
+#create-offer-controls > * {
+  text-align: center;
+  margin-left: 15%;
+  margin-right: 15%;
+  width: 70%
+}
+
+#close-offer-controls-area {
+  display: flex;
+  justify-content: end;
+}
+
 .money-amount-input-area {
   padding: 0;
   width: 10em;

src/public/css/seca.css

@@ -3,6 +3,38 @@
   box-sizing: border-box;
 }
 
+@media (max-width: 768px) {
+  html {
+    font-size: 16px;
+  }
+
+  .font-medium {
+    font-size: 0.7rem;
+  }
+
+  .button-medium {
+    height: 3em;
+    padding: 1em;
+    border-radius: 10px;
+  }
+}
+
+@media (min-width: 769px) {
+  html {
+    font-size: 20px;
+  }
+
+  .font-medium {
+    font-size: 0.9rem;
+  }
+
+  .button-medium {
+    height: 3em;
+    padding: 1em;
+    border-radius: 10px; 
+  }
+}
+
 .badges {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
@@ -106,10 +138,8 @@ h1 {
 
 .button-primary {
   background: #e1c300;
-  border-radius: 1vw;
   border: 0;
   color: white;
-  padding: 1%;
   cursor: pointer;
 }
 

src/public/javascript/offers.js

@@ -1,7 +1,7 @@
 const buttonStartCreateOffer = document.getElementById(
   'button-start-create-offer'
 );
-const closeOfferControls = document.getElementById('close-order-controls-x');
+const closeOfferControls = document.getElementById('close-offer-controls-x');
 const createOfferControls = document.getElementById('create-offer-controls');
 
 const buyOrSellButtonGroup = document.getElementById(
@@ -32,7 +32,9 @@ const btcMethodCheckboxes = [onchainCheckbox, lightningCheckbox];
 function toggleCreateOfferControls() {
   createOfferControls.style.display =
     createOfferControls.style.display === 'block' ? 'none' : 'block';
-  buttonStartCreateOffer.disabled = !buttonStartCreateOffer.disabled;
+
+  buttonStartCreateOffer.style.display =
+    buttonStartCreateOffer.style.display === 'block' ? 'none' : 'block';
 }
 
 function modifyPremiumValue(delta) {