Add max trade amount formula

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;
+    }
 }

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;
 }

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\