diff --git a/src/public/css/offers.css b/src/public/css/offers.css
index 63b2640..d25c9d1 100644
--- a/src/public/css/offers.css
+++ b/src/public/css/offers.css
@@ -127,18 +127,34 @@
text-align: left;
}
-.icon-checkboxed-field {
+.left-icon-checkboxed-field {
display: flex;
align-items: center;
+ margin-bottom: 2px;
+ font-size: 0.9em;
}
-.icon-checkboxed-field > * {
- display: inline-block;
+.left-icon-checkboxed-field > * {
margin-right: 2px;
margin-left: 2px;
- align-items: center;
}
-.icon-checkboxed-field img {
+.left-icon-checkboxed-field img {
+ height: 1.2em;
+}
+
+.right-icon-checkboxed-field {
+ display: flex;
+ align-items: center;
+ justify-content: end;
+ margin-bottom: 2px;
+ font-size: 0.9em;
+}
+
+.right-icon-checkboxed-field > * {
+ margin-right: 2px;
+ margin-left: 2px;
+}
+.right-icon-checkboxed-field img {
height: 1.2em;
}
@@ -181,11 +197,18 @@
text-align: left;
}
+.visibility-desc {
+ grid-column: 3;
+ grid-row: 5;
+ text-align: right;
+}
+
.offer-long-text {
font-size: 0.9em;
}
+
#create-offer-controls {
text-align: center;
}
diff --git a/src/public/img/many-users-gray.svg b/src/public/img/many-users-gray.svg
new file mode 100644
index 0000000..d60a47e
--- /dev/null
+++ b/src/public/img/many-users-gray.svg
@@ -0,0 +1,40 @@
+
+
+
+
diff --git a/src/public/img/many-users-lasecagold.svg b/src/public/img/many-users-lasecagold.svg
new file mode 100644
index 0000000..eed7477
--- /dev/null
+++ b/src/public/img/many-users-lasecagold.svg
@@ -0,0 +1,40 @@
+
+
+
+
diff --git a/src/public/img/many-users.svg b/src/public/img/many-users.svg
new file mode 100644
index 0000000..4add8ad
--- /dev/null
+++ b/src/public/img/many-users.svg
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/src/public/img/user-gray.svg b/src/public/img/user-gray.svg
new file mode 100644
index 0000000..d9813d5
--- /dev/null
+++ b/src/public/img/user-gray.svg
@@ -0,0 +1,40 @@
+
+
+
+
diff --git a/src/public/img/user-group-gray.svg b/src/public/img/user-group-gray.svg
new file mode 100644
index 0000000..e798ca5
--- /dev/null
+++ b/src/public/img/user-group-gray.svg
@@ -0,0 +1,40 @@
+
+
+
+
diff --git a/src/public/img/user-group-lasecagold.svg b/src/public/img/user-group-lasecagold.svg
new file mode 100644
index 0000000..bad367b
--- /dev/null
+++ b/src/public/img/user-group-lasecagold.svg
@@ -0,0 +1,40 @@
+
+
+
+
diff --git a/src/public/img/user-group.svg b/src/public/img/user-group.svg
new file mode 100644
index 0000000..a0c3ce4
--- /dev/null
+++ b/src/public/img/user-group.svg
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/src/public/img/user-lasecagold.svg b/src/public/img/user-lasecagold.svg
new file mode 100644
index 0000000..db06cb4
--- /dev/null
+++ b/src/public/img/user-lasecagold.svg
@@ -0,0 +1,40 @@
+
+
+
+
diff --git a/src/public/img/user.svg b/src/public/img/user.svg
new file mode 100644
index 0000000..7c2600b
--- /dev/null
+++ b/src/public/img/user.svg
@@ -0,0 +1,6 @@
+
+
\ No newline at end of file
diff --git a/src/public/javascript/offers.js b/src/public/javascript/offers.js
index 72da79b..795cc37 100644
--- a/src/public/javascript/offers.js
+++ b/src/public/javascript/offers.js
@@ -305,7 +305,7 @@ class Offer {
bitcoinMethodsDiv.append(bitcoinMethodsTitle);
const onchainAcceptedContainer = document.createElement('div');
- onchainAcceptedContainer.classList.add('icon-checkboxed-field');
+ onchainAcceptedContainer.classList.add('left-icon-checkboxed-field');
if (this.is_onchain_accepted) {
const onchainIcon = document.createElement('img');
onchainIcon.src = '/img/chains-lasecagold.svg';
@@ -327,7 +327,7 @@ class Offer {
}
const lightningAcceptedContainer = document.createElement('div');
- lightningAcceptedContainer.classList.add('icon-checkboxed-field');
+ lightningAcceptedContainer.classList.add('left-icon-checkboxed-field');
if (this.is_lightning_accepted) {
const lightningIcon = document.createElement('img');
lightningIcon.src = '/img/bolt-lightning-lasecagold.svg';
@@ -361,12 +361,122 @@ class Offer {
lightningAcceptedContainer
);
+ const visibilityDiv = document.createElement('div');
+ visibilityDiv.classList.add('visibility-desc');
+ visibilityDiv.classList.add('subtle-box');
+
+ const visibilityTitle = document.createElement('p');
+ visibilityTitle.classList.add('offer-card-content-title');
+ visibilityTitle.innerText = 'Visibilidad';
+ visibilityDiv.append(visibilityTitle);
+
+ const showOfferToTrustedContainer = document.createElement('div');
+ showOfferToTrustedContainer.classList.add('right-icon-checkboxed-field');
+
+ if (this.show_offer_to_trusted) {
+ const showOfferToTrustedIcon = document.createElement('img');
+ showOfferToTrustedIcon.src = '/img/user-lasecagold.svg';
+ const showOfferToTrustedText = document.createElement('p');
+ showOfferToTrustedText.innerText = 'Confiados';
+ const checkIcon = document.createElement('img');
+ checkIcon.src = '/img/circle-check-green.svg';
+
+ showOfferToTrustedContainer.append(
+ showOfferToTrustedIcon,
+ showOfferToTrustedText,
+ checkIcon
+ );
+ } else {
+ const showOfferToTrustedIcon = document.createElement('img');
+ showOfferToTrustedIcon.src = '/img/user-gray.svg';
+ const showOfferToTrustedText = document.createElement('p');
+ showOfferToTrustedText.innerText = 'Confiados';
+ const checkIcon = document.createElement('img');
+ checkIcon.src = '/img/circle-xmark-gray.svg';
+
+ showOfferToTrustedContainer.append(
+ showOfferToTrustedIcon,
+ showOfferToTrustedText,
+ checkIcon
+ );
+ }
+
+ const showOfferToTrustedTrustedContainer = document.createElement('div');
+ showOfferToTrustedTrustedContainer.classList.add(
+ 'right-icon-checkboxed-field'
+ );
+
+ if (this.show_offer_to_trusted_trusted) {
+ const showOfferToTrustedTrustedIcon = document.createElement('img');
+ showOfferToTrustedTrustedIcon.src = '/img/user-group-lasecagold.svg';
+ const showOfferToTrustedTrustedText = document.createElement('p');
+ showOfferToTrustedTrustedText.innerText = 'Sus confiados';
+ const checkIcon = document.createElement('img');
+ checkIcon.src = '/img/circle-check-green.svg';
+
+ showOfferToTrustedTrustedContainer.append(
+ showOfferToTrustedTrustedIcon,
+ showOfferToTrustedTrustedText,
+ checkIcon
+ );
+ } else {
+ const showOfferToTrustedTrustedIcon = document.createElement('img');
+ showOfferToTrustedTrustedIcon.src = '/img/user-group-gray.svg';
+ const showOfferToTrustedTrustedText = document.createElement('p');
+ showOfferToTrustedTrustedText.innerText = 'Sus confiados';
+ const checkIcon = document.createElement('img');
+ checkIcon.src = '/img/circle-xmark-gray.svg';
+
+ showOfferToTrustedTrustedContainer.append(
+ showOfferToTrustedTrustedIcon,
+ showOfferToTrustedTrustedText,
+ checkIcon
+ );
+ }
+
+ const showOfferToAllMembersContainer = document.createElement('div');
+ showOfferToAllMembersContainer.classList.add('right-icon-checkboxed-field');
+
+ if (this.show_offer_to_all_members) {
+ const showOfferToAllMembersIcon = document.createElement('img');
+ showOfferToAllMembersIcon.src = '/img/many-users-lasecagold.svg';
+ const showOfferToAllMembersText = document.createElement('p');
+ showOfferToAllMembersText.innerText = 'Todos';
+ const checkIcon = document.createElement('img');
+ checkIcon.src = '/img/circle-check-green.svg';
+
+ showOfferToAllMembersContainer.append(
+ showOfferToAllMembersIcon,
+ showOfferToAllMembersText,
+ checkIcon
+ );
+ } else {
+ const showOfferToAllMembersIcon = document.createElement('img');
+ showOfferToAllMembersIcon.src = '/img/many-users-gray.svg';
+ const showOfferToAllMembersText = document.createElement('p');
+ showOfferToAllMembersText.innerText = 'Todos';
+ const checkIcon = document.createElement('img');
+ checkIcon.src = '/img/circle-xmark-gray.svg';
+
+ showOfferToAllMembersContainer.append(
+ showOfferToAllMembersIcon,
+ showOfferToAllMembersText,
+ checkIcon
+ );
+ }
+ visibilityDiv.append(
+ showOfferToTrustedContainer,
+ showOfferToTrustedTrustedContainer,
+ showOfferToAllMembersContainer
+ );
+
offerCard.append(
tradeDescDiv,
premiumDescDiv,
whereDescDiv,
whenDescDiv,
- bitcoinMethodsDiv
+ bitcoinMethodsDiv,
+ visibilityDiv
);
return offerCard;