Improve build reputation page

bisq-network · Sep 29, 2024 · 22acd30 · 22acd30
1 parent 1d2a324
commit 22acd30
Show file tree

Hide file tree

Showing 4 changed files with 116 additions and 70 deletions.
diff --git a/.../main/java/bisq/desktop/main/content/reputation/build_reputation/BuildReputationView.java b/.../main/java/bisq/desktop/main/content/reputation/build_reputation/BuildReputationView.java
@@ -18,65 +18,80 @@
 package bisq.desktop.main.content.reputation.build_reputation;
 
 import bisq.desktop.common.view.View;
+import bisq.desktop.components.containers.Spacer;
+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.Hyperlink;
 import javafx.scene.control.Label;
 import javafx.scene.layout.HBox;
-import javafx.scene.layout.Priority;
 import javafx.scene.layout.VBox;
 import lombok.extern.slf4j.Slf4j;
 
 @Slf4j
 public class BuildReputationView extends View<VBox, BuildReputationModel, BuildReputationController> {
     private final Button burnBsqButton, bsqBondButton, accountAgeButton, signedAccountButton;
-    private final Hyperlink learnMore;
+    private final BisqMenuItem learnMore;
 
     public BuildReputationView(BuildReputationModel model, BuildReputationController controller) {
         super(new VBox(), model, controller);
 
-        Label headlineLabel = new Label(Res.get("reputation.headline"));
-        headlineLabel.getStyleClass().add("bisq-text-headline-5");
-
-        Label info = new Label(Res.get("reputation.info"));
-        info.setWrapText(true);
-        info.getStyleClass().addAll("bisq-text-13");
-        info.setMinHeight(220);
-
-        burnBsqButton = new Button(Res.get("reputation.burnBsq"));
-        burnBsqButton.getStyleClass().add("button-reduced-padding");
-        burnBsqButton.setPrefWidth(140);
-
-        bsqBondButton = new Button(Res.get("reputation.bond"));
-        bsqBondButton.getStyleClass().add("button-reduced-padding");
-        bsqBondButton.setPrefWidth(130);
-
-        signedAccountButton = new Button(Res.get("reputation.signedWitness"));
-        signedAccountButton.getStyleClass().add("button-reduced-padding");
-        signedAccountButton.setPrefWidth(230);
-
-        accountAgeButton = new Button(Res.get("reputation.accountAge"));
-        accountAgeButton.getStyleClass().add("button-reduced-padding");
-        accountAgeButton.setPrefWidth(140);
-
-        learnMore = new Hyperlink(Res.get("action.learnMore"));
-
-        HBox buttons = new HBox(20, burnBsqButton, bsqBondButton, signedAccountButton, accountAgeButton);
-
-        VBox.setMargin(headlineLabel, new Insets(20, 0, 0, 0));
-        VBox.setMargin(buttons, new Insets(10, 0, 0, 0));
-        VBox vBox = new VBox(10, headlineLabel, info, buttons, learnMore);
-        vBox.getStyleClass().add("bisq-box-2");
-        vBox.setPadding(new Insets(30, 30, 20, 30));
-        vBox.setAlignment(Pos.TOP_LEFT);
-
-        VBox.setMargin(vBox, new Insets(0, 0, 20, 0));
-        VBox.setVgrow(vBox, Priority.SOMETIMES);
-        root.setPadding(new Insets(0, 40, 40, 40));
-        root.getChildren().addAll(vBox);
-        root.getStyleClass().add("build-reputation");
+        Label headlineLabel = new Label(Res.get("reputation.buildReputation.headline"));
+        headlineLabel.getStyleClass().add("reputation-headline");
+
+        Label introLabelPart1 = new Label(Res.get("reputation.buildReputation.intro.part1"));
+        Label introLabelPart2 = new Label(Res.get("reputation.buildReputation.intro.part2"));
+
+        Label title = new Label(Res.get("reputation.buildReputation.title"));
+        title.getStyleClass().add("reputation-title");
+
+        // Burn BSQ
+        burnBsqButton = new Button(Res.get("reputation.buildReputation.burnBsq.button"));
+        VBox burnBsqBox = createAndGetBuildReputationMethodBox(
+                Res.get("reputation.buildReputation.burnBsq.title"),
+                Res.get("reputation.buildReputation.burnBsq.description"),
+                burnBsqButton
+        );
+
+        // BSQ Bond
+        bsqBondButton = new Button(Res.get("reputation.buildReputation.bsqBond.button"));
+        VBox bsqBondBox = createAndGetBuildReputationMethodBox(
+                Res.get("reputation.buildReputation.bsqBond.title"),
+                Res.get("reputation.buildReputation.bsqBond.description"),
+                bsqBondButton
+        );
+
+        HBox burnAndBondBox = new HBox(20, burnBsqBox, bsqBondBox);
+
+        // Signed Account
+        signedAccountButton = new Button(Res.get("reputation.buildReputation.signedAccount.button"));
+        VBox signedAccountBox = createAndGetBuildReputationMethodBox(
+                Res.get("reputation.buildReputation.signedAccount.title"),
+                Res.get("reputation.buildReputation.signedAccount.description"),
+                signedAccountButton
+        );
+
+        // Account Age
+        accountAgeButton = new Button(Res.get("reputation.buildReputation.accountAge.button"));
+        VBox accountAgeBox = createAndGetBuildReputationMethodBox(
+                Res.get("reputation.buildReputation.accountAge.title"),
+                Res.get("reputation.buildReputation.accountAge.description"),
+                accountAgeButton
+        );
+
+        HBox signedAccountAndAgeBox = new HBox(20, signedAccountBox, accountAgeBox);
+
+        learnMore = new BisqMenuItem(Res.get("reputation.buildReputation.readMore"));
+        learnMore.getStyleClass().add("reputation-learn-more");
+
+        VBox contentBox = new VBox(20);
+        contentBox.getChildren().addAll(headlineLabel, introLabelPart1, introLabelPart2, title, burnAndBondBox,
+                signedAccountAndAgeBox, learnMore);
+        contentBox.getStyleClass().add("bisq-common-bg");
+        root.getChildren().addAll(contentBox);
+        root.setPadding(new Insets(0, 40, 20, 40));
+        root.getStyleClass().add("reputation");
     }
 
     @Override
@@ -96,4 +111,17 @@ protected void onViewDetached() {
         accountAgeButton.setOnAction(null);
         learnMore.setOnAction(null);
     }
+
+    private VBox createAndGetBuildReputationMethodBox(String title, String description, Button button) {
+        Label titleLabel = new Label(title);
+        titleLabel.getStyleClass().add("card-title");
+        Label descriptionLabel = new Label(description);
+        button.getStyleClass().addAll("medium-large-button");
+        button.setMaxWidth(Double.MAX_VALUE);
+        button.setDefaultButton(true);
+        VBox vBox = new VBox(20, titleLabel, descriptionLabel, Spacer.fillVBox(), button);
+        vBox.setFillWidth(true);
+        vBox.getStyleClass().add("reputation-card-small");
+        return vBox;
+    }
 }
diff --git a/...desktop/src/main/java/bisq/desktop/main/content/reputation/score/ReputationScoreView.java b/...desktop/src/main/java/bisq/desktop/main/content/reputation/score/ReputationScoreView.java
@@ -35,7 +35,7 @@ public ReputationScoreView(ReputationScoreModel model, ReputationScoreController
         super(new VBox(), model, controller);
 
         Label headlineLabel = new Label(Res.get("reputation.reputationScore.headline"));
-        headlineLabel.getStyleClass().add("reputation-score-headline");
+        headlineLabel.getStyleClass().add("reputation-headline");
 
         Label introLabel = new Label(Res.get("reputation.reputationScore.intro"));
 
@@ -45,20 +45,20 @@ public ReputationScoreView(ReputationScoreModel model, ReputationScoreController
         VBox offerBox = new VBox(offerImage);
         offerBox.setAlignment(Pos.BOTTOM_CENTER);
         HBox sellerReputationBox = new HBox(sellerReputationLabel, Spacer.fillHBox(), offerBox);
-        sellerReputationBox.getStyleClass().add("reputation-score-card-large");
+        sellerReputationBox.getStyleClass().add("reputation-card-large");
 
         Label explanationIntroLabel = new Label(Res.get("reputation.reputationScore.explanation.intro"));
 
         Label scoreTitleLabel = new Label(Res.get("reputation.reputationScore.explanation.score.title"));
         scoreTitleLabel.getStyleClass().add("card-title");
         Label scoreDescriptionLabel = new Label(Res.get("reputation.reputationScore.explanation.score.description"));
         VBox scoreBox = new VBox(20, scoreTitleLabel, scoreDescriptionLabel);
-        scoreBox.getStyleClass().add("reputation-score-card-small");
+        scoreBox.getStyleClass().add("reputation-card-small");
         Label rankingTitleLabel = new Label(Res.get("reputation.reputationScore.explanation.ranking.title"));
         rankingTitleLabel.getStyleClass().add("card-title");
         Label rankingDescriptionLabel = new Label(Res.get("reputation.reputationScore.explanation.ranking.description"));
         VBox rankingBox = new VBox(20, rankingTitleLabel, rankingDescriptionLabel);
-        rankingBox.getStyleClass().add("reputation-score-card-small");
+        rankingBox.getStyleClass().add("reputation-card-small");
         HBox scoreAndReputationBox = new HBox(20, scoreBox, rankingBox);
 
         Label starsTitleLabel = new Label(Res.get("reputation.reputationScore.explanation.stars.title"));
@@ -68,7 +68,7 @@ public ReputationScoreView(ReputationScoreModel model, ReputationScoreController
         VBox starsTableBox = new VBox(starsTableImage);
         starsTableBox.setAlignment(Pos.CENTER);
         VBox starsBox = new VBox(20, starsTitleLabel, starsDescriptionLabel, starsTableBox);
-        starsBox.getStyleClass().add("reputation-score-card-large");
+        starsBox.getStyleClass().add("reputation-card-large");
 
         Label closingLabel = new Label(Res.get("reputation.reputationScore.closing"));
 
@@ -78,7 +78,7 @@ public ReputationScoreView(ReputationScoreModel model, ReputationScoreController
         contentBox.getStyleClass().add("bisq-common-bg");
         root.getChildren().addAll(contentBox);
         root.setPadding(new Insets(0, 40, 20, 40));
-        root.getStyleClass().add("reputation-score");
+        root.getStyleClass().add("reputation");
     }
 
     @Override

diff --git a/apps/desktop/desktop/src/main/resources/css/application.css b/apps/desktop/desktop/src/main/resources/css/application.css
@@ -350,43 +350,48 @@
  * Reputation                                                                  *
  ******************************************************************************/
 
-.build-reputation .user-profile-selection {
+.reputation .user-profile-selection {
     -fx-padding: 0 5 0 20;
 }
 
-.reputation-score .reputation-score-card-small,
-.reputation-score .reputation-score-card-large {
+.reputation .reputation-card-small,
+.reputation .reputation-card-large {
     -fx-background-color: -bisq-dark-grey-40;
     -fx-background-radius: 8 8 8 8;
     -fx-padding: 40;
 }
 
-.reputation-score .reputation-score-card-small .label,
-.reputation-score .reputation-score-card-large .label {
+.reputation .label {
     -fx-line-spacing: 7px;
     -fx-wrap-text: true;
 }
 
-.reputation-score .reputation-score-card-small .card-title,
-.reputation-score .reputation-score-card-large .card-title {
+.reputation .reputation-card-small .card-title,
+.reputation .reputation-card-large .card-title {
     -fx-font-size: 1.7em !important;
 }
 
-.reputation-score .reputation-score-card-large {
+.reputation .reputation-card-large {
     -fx-max-width: 1000;
     -fx-min-width: 800;
 }
 
-.reputation-score .reputation-score-card-small {
+.reputation .reputation-card-small {
     -fx-max-width: 490;
-    -fx-min-width: 390;
+    -fx-pref-width: 490;
+    -fx-min-width: 490;
 }
 
-.reputation-score .reputation-score-headline {
+.reputation .reputation-headline {
     -fx-font-size: 2.5em !important;
 }
 
-.reputation-score .label {
+.reputation .reputation-title {
+    -fx-font-size: 1.9em !important;
+}
+
+.reputation .label,
+.reputation-learn-more {
     -fx-font-size: 1.15em;
     -fx-font-family: "IBM Plex Sans Light";
 }
diff --git a/i18n/src/main/resources/reputation.properties b/i18n/src/main/resources/reputation.properties
@@ -6,15 +6,28 @@ reputation=Reputation
 reputation.buildReputation=Build reputation
 reputation.reputationScore=Reputation score
 
-reputation.headline=How to build up reputation
-reputation.info=For Bitcoin sellers it's important to provide reputation to the buyer, because the buyer will send \
-  the fiat amount first and need a reason why they should trust the seller.\n\
-  Gaining reputation is intended for experienced Bisq users who are familiar with Bisq.\n\n\
-  There are multiple options how to provide reputation:\n\n\
-  1. Burning BSQ\n\
-  2. Setting up a BSQ bond\n\
-  3. Importing the signed account age witness from a Bisq 1 account\n\
-  4. Importing the account age from a Bisq 1 account
+reputation.buildReputation.headline=Build up reputation
+reputation.buildReputation.intro.part1=Bisq Easy recommendation guidelines when trading rely on the seller's reputation.\n\
+  This is because during a trade the buyer sends the fiat amount first, therefore the seller needs to have put a stake upfront.\n\
+  This stake is what effectively translates into the seller's reputation.
+reputation.buildReputation.intro.part2=The underlying heuristic is the following: the higher the reputation of a seller, the higher the amount that can be traded.\n\
+  If the seller's reputation does not meet the guidelines established at Bisq, buyers will receive a message that taking such offer warrants caution.
+reputation.buildReputation.title=How can sellers build up their reputation?
+reputation.buildReputation.burnBsq.title=Burning BSQ
+reputation.buildReputation.burnBsq.description=This is the fastest way to build up reputation.\n\
+  The score gained by burning BSQ persists over time.
+reputation.buildReputation.burnBsq.button=Learn how to burn BSQ
+reputation.buildReputation.bsqBond.title=BSQ bond
+reputation.buildReputation.bsqBond.description=Similar to Burn BSQ but using refundable BSQ bonds.\n\
+  BSQ needs to be bonded for a minimum of 50,000 blocks (about 1 year).
+reputation.buildReputation.bsqBond.button=Learn how to bond BSQ
+reputation.buildReputation.signedAccount.title=Signed account age witness
+reputation.buildReputation.signedAccount.description=Users of Bisq 1 can gain reputation by importing their signed account age from Bisq 1 into Bisq 2.
+reputation.buildReputation.signedAccount.button=Learn how to import signed account
+reputation.buildReputation.accountAge.title=Account age
+reputation.buildReputation.accountAge.description=Users of Bisq 1 can gain reputation by importing their account age from Bisq 1 into Bisq 2.
+reputation.buildReputation.accountAge.button=Learn how to import account age
+reputation.buildReputation.readMore=Click here to read more about the Bisq reputation system.
 
 # suppress inspection "UnusedProperty"
 reputation.source.BURNED_BSQ=Burned BSQ