diff --git a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/reputation/build_reputation/BuildReputationView.java b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/reputation/build_reputation/BuildReputationView.java index 93ad4abdc7..82fd899c6c 100644 --- a/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/reputation/build_reputation/BuildReputationView.java +++ b/apps/desktop/desktop/src/main/java/bisq/desktop/main/content/reputation/build_reputation/BuildReputationView.java @@ -22,9 +22,11 @@ import bisq.desktop.components.controls.BisqMenuItem; import bisq.i18n.Res; import javafx.geometry.Insets; +import javafx.geometry.Pos; import javafx.scene.control.Button; import javafx.scene.control.Label; import javafx.scene.layout.HBox; +import javafx.scene.layout.Region; import javafx.scene.layout.VBox; import lombok.extern.slf4j.Slf4j; @@ -40,6 +42,19 @@ public BuildReputationView(BuildReputationModel model, BuildReputationController headlineLabel.getStyleClass().add("reputation-headline"); Label introLabelPart1 = new Label(Res.get("reputation.buildReputation.intro.part1")); + + Label formulaOutput = new Label(Res.get("reputation.buildReputation.intro.part1.formula.output")); + Label formulaInput = new Label(Res.get("reputation.buildReputation.intro.part1.formula.input")); + Label formulaDivisor = new Label("200"); + Label formulaEquals = new Label("="); + VBox formulaQuotientVBox = new VBox(5, formulaInput, getLine(), formulaDivisor); + formulaQuotientVBox.setAlignment(Pos.CENTER); + HBox formulaHBox = new HBox(10, formulaOutput, formulaEquals, formulaQuotientVBox); + formulaHBox.setAlignment(Pos.CENTER); + formulaHBox.getStyleClass().add("max-trade-amount-formula"); + Label formulaFootnote = new Label(Res.get("reputation.buildReputation.intro.part1.formula.footnote")); + formulaFootnote.getStyleClass().add("max-trade-amount-formula-footnote"); + Label introLabelPart2 = new Label(Res.get("reputation.buildReputation.intro.part2")); Label title = new Label(Res.get("reputation.buildReputation.title")); @@ -88,10 +103,13 @@ public BuildReputationView(BuildReputationModel model, BuildReputationController learnMoreLink.getStyleClass().addAll("reputation-learn-more-link"); HBox learnMoreHBox = new HBox(4, learnMoreLabel, learnMoreLink); + VBox contentBox = new VBox(20); - contentBox.getChildren().addAll(headlineLabel, introLabelPart1, introLabelPart2, title, burnAndBondBox, - signedAccountAndAgeBox, learnMoreHBox); + contentBox.getChildren().addAll(headlineLabel, introLabelPart1, formulaHBox, + formulaFootnote, introLabelPart2, title, burnAndBondBox, signedAccountAndAgeBox, learnMoreHBox); contentBox.getStyleClass().add("bisq-common-bg"); + VBox.setMargin(formulaFootnote, new Insets(-15, 0, 0, 0)); + VBox.setMargin(title, new Insets(25, 0, 0, 0)); root.getChildren().addAll(contentBox); root.setPadding(new Insets(0, 40, 20, 40)); root.getStyleClass().add("reputation"); @@ -129,4 +147,13 @@ private VBox createAndGetBuildReputationMethodBox(String title, String descripti vBox.getStyleClass().addAll("reputation-card-small", "bisq-card-bg"); return vBox; } + + private Region getLine() { + Region line = new Region(); + line.setMinHeight(1); + line.setMaxHeight(1); + line.setStyle("-fx-background-color: -bisq-border-color-grey"); + line.setPadding(new Insets(9, 0, 8, 0)); + return line; + } } diff --git a/apps/desktop/desktop/src/main/resources/css/application.css b/apps/desktop/desktop/src/main/resources/css/application.css index aff02ab74f..fba8862472 100644 --- a/apps/desktop/desktop/src/main/resources/css/application.css +++ b/apps/desktop/desktop/src/main/resources/css/application.css @@ -358,11 +358,13 @@ -fx-font-size: 1.15em; -fx-line-spacing: 5px; -fx-wrap-text: true; + -fx-fill: -fx-mid-text-color !important; + -fx-text-fill: -fx-mid-text-color !important; } .reputation .reputation-card-small .card-title, .reputation .reputation-card-large .card-title { - -fx-font-size: 1.7em !important; + -fx-font-size: 1.7em; } .reputation .reputation-card-large { @@ -377,23 +379,27 @@ } .reputation .reputation-headline { - -fx-font-size: 2.5em !important; + -fx-font-size: 2.5em; } .reputation .reputation-title { - -fx-font-size: 1.9em !important; + -fx-font-size: 1.9em; } -.reputation .reputation-learn-more { +.reputation .reputation-headline, +.reputation .reputation-title, +.reputation .card-title { -fx-fill: -fx-light-text-color !important; -fx-text-fill: -fx-light-text-color !important; + -fx-font-family: "IBM Plex Sans Light"; +} + +.reputation .reputation-learn-more { -fx-font-size: 1.15em; -fx-font-family: "IBM Plex Sans Light"; } .reputation .reputation-learn-more-link { - -fx-fill: -fx-light-text-color !important; - -fx-text-fill: -fx-light-text-color !important; -fx-font-size: 1.15em; -fx-font-family: "IBM Plex Sans Light"; -fx-underline: true; @@ -404,6 +410,15 @@ -fx-text-fill: -bisq2-green !important; } +.reputation .max-trade-amount-formula { + -fx-max-width: 1000; + -fx-min-width: 1000; +} + +.reputation .max-trade-amount-formula-footnote { + -fx-font-size: 1.02em; +} + .popup-bg .bisq-common-bg { -fx-padding: 10 30 30 30 !important; } diff --git a/i18n/src/main/resources/reputation.properties b/i18n/src/main/resources/reputation.properties index 6d7def50ab..88fabdf8d8 100644 --- a/i18n/src/main/resources/reputation.properties +++ b/i18n/src/main/resources/reputation.properties @@ -7,12 +7,14 @@ reputation.buildReputation=Build reputation reputation.reputationScore=Reputation score reputation.buildReputation.headline=Build reputation -reputation.buildReputation.intro.part1=Bisq Easy's security model relies on the seller's reputation.\n\ - This is because during a trade the buyer sends the fiat amount first, therefore the seller needs to provide reputation to establish some level of security. -reputation.buildReputation.intro.part2=A seller can take offers up to the amount derived from their reputation score. \ - It is calculated as follows:\n\ - 'Reputation score / 200 = max. trade amount in USD' (converted to the currency used).\n\ - If a seller posts an offer with an amount not covered by their reputation score, the buyer will see a warning about the potential risks when taking that offer. +reputation.buildReputation.intro.part1=Bisq Easy's security model relies on the seller's reputation. This is because during a trade the buyer sends the fiat amount first, \ + therefore the seller needs to provide reputation to establish some level of security.\n\ + A seller can take offers up to the amount derived from their reputation score.\n\ + It is calculated as follows: +reputation.buildReputation.intro.part1.formula.output=Maximum trade amount in USD * +reputation.buildReputation.intro.part1.formula.input=Reputation score +reputation.buildReputation.intro.part1.formula.footnote=* Converted to the currency used. +reputation.buildReputation.intro.part2=If a seller posts an offer with an amount not covered by their reputation score, the buyer will see a warning about the potential risks when taking that offer. reputation.buildReputation.title=How can sellers build up their reputation? reputation.buildReputation.burnBsq.title=Burning BSQ reputation.buildReputation.burnBsq.description=This is the strongest form of reputation.\n\