Merge pull request #2896 from axpoems/unify-bg-trade-protocols

Unify background of compare trade protocols
bisq-network · Oct 1, 2024 · 1f642a8 · 1f642a8
2 parents e490a17 + 7e010af
commit 1f642a8
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 28 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
@@ -126,7 +126,7 @@ private VBox createAndGetBuildReputationMethodBox(String title, String descripti
         button.setMaxWidth(Double.MAX_VALUE);
         VBox vBox = new VBox(20, titleLabel, descriptionLabel, Spacer.fillVBox(), button);
         vBox.setFillWidth(true);
-        vBox.getStyleClass().add("reputation-card-small");
+        vBox.getStyleClass().addAll("reputation-card-small", "bisq-card-bg");
         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
@@ -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-card-large");
+        sellerReputationBox.getStyleClass().addAll("reputation-card-large", "bisq-card-bg");
 
         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-card-small");
+        scoreBox.getStyleClass().addAll("reputation-card-small", "bisq-card-bg");
         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-card-small");
+        rankingBox.getStyleClass().addAll("reputation-card-small", "bisq-card-bg");
         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-card-large");
+        starsBox.getStyleClass().addAll("reputation-card-large", "bisq-card-bg");
 
         Label closingLabel = new Label(Res.get("reputation.reputationScore.closing"));
 

diff --git a/...esktop/src/main/java/bisq/desktop/main/content/trade_apps/overview/TradeOverviewView.java b/...esktop/src/main/java/bisq/desktop/main/content/trade_apps/overview/TradeOverviewView.java
@@ -33,43 +33,49 @@
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
 import javafx.scene.control.Tooltip;
-import javafx.scene.layout.*;
+import javafx.scene.layout.GridPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Pane;
+import javafx.scene.layout.Priority;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.VBox;
 import javafx.scene.text.TextFlow;
 import lombok.extern.slf4j.Slf4j;
 
 @Slf4j
-public class TradeOverviewView extends View<GridPane, TradeOverviewModel, TradeOverviewController> {
+public class TradeOverviewView extends View<VBox, TradeOverviewModel, TradeOverviewController> {
     private static final int VERTICAL_MARGIN = 30;
     private static final int VERTICAL_GAP = 25;
     private static final int HORIZONTAL_GAP = 25;
 
     public TradeOverviewView(TradeOverviewModel model, TradeOverviewController controller) {
-        super(new GridPane(), model, controller);
+        super(new VBox(), model, controller);
 
-        root.setHgap(HORIZONTAL_GAP);
-        root.setVgap(VERTICAL_GAP);
-        root.setPadding(new Insets(0, 40, 40, 40));
+        GridPane contentBox = new GridPane();
+        contentBox.getStyleClass().add("bisq-common-bg");
+        contentBox.setHgap(HORIZONTAL_GAP);
+        contentBox.setVgap(VERTICAL_GAP);
 
-        GridPaneUtil.setGridPaneTwoColumnsConstraints(root);
-        root.getColumnConstraints().get(0).setMinWidth(450);
-        root.getColumnConstraints().get(1).setMinWidth(450);
+        GridPaneUtil.setGridPaneTwoColumnsConstraints(contentBox);
+        contentBox.getColumnConstraints().get(0).setMinWidth(450);
+        contentBox.getColumnConstraints().get(1).setMinWidth(450);
 
         Label headline = new Label(Res.get("tradeApps.overview.headline"));
         headline.setWrapText(true);
         headline.getStyleClass().add("trade-protocols-overview-headline");
         headline.setMinHeight(55);
-        root.add(headline, 0, 0, 2, 1);
+        contentBox.add(headline, 0, 0, 2, 1);
 
         Label subHeadline = new Label(Res.get("tradeApps.overview.subHeadline"));
         subHeadline.setWrapText(true);
         subHeadline.getStyleClass().add("trade-protocols-overview-sub-headline");
         GridPane.setMargin(subHeadline, new Insets(-10, 0, 0, 0));
-        root.add(subHeadline, 0, 1, 2, 1);
+        contentBox.add(subHeadline, 0, 1, 2, 1);
 
         Insets protocolsInset = new Insets(0, 0, 0, 0);
         GridPane mainProtocolsPane = GridPaneUtil.getGridPane(25, 25, protocolsInset);
         GridPaneUtil.setGridPaneMultiColumnsConstraints(mainProtocolsPane, 6);
-        root.add(mainProtocolsPane, 0, 2, 2, 1);
+        contentBox.add(mainProtocolsPane, 0, 2, 2, 1);
 
         mainProtocolsPane.getRowCount();
         int rowCount;
@@ -89,11 +95,11 @@ public TradeOverviewView(TradeOverviewModel model, TradeOverviewController contr
         more.setWrapText(true);
         more.getStyleClass().add("trade-protocols-overview-sub-headline");
         GridPane.setMargin(more, new Insets(20, 0, 10, 0));
-        root.add(more, 0, root.getRowCount(), 2, 1);
+        contentBox.add(more, 0, contentBox.getRowCount(), 2, 1);
 
         GridPane moreProtocolsPane = GridPaneUtil.getGridPane(25, 25, protocolsInset);
         GridPaneUtil.setGridPaneMultiColumnsConstraints(moreProtocolsPane, 6);
-        root.add(moreProtocolsPane, 0, root.getRowCount(), 2, 1);
+        contentBox.add(moreProtocolsPane, 0, contentBox.getRowCount(), 2, 1);
 
         moreProtocolsPane.getRowCount();
         index = 0;
@@ -107,6 +113,9 @@ public TradeOverviewView(TradeOverviewModel model, TradeOverviewController contr
             getProtocolBox(moreProtocolsPane, protocol, columnIndex * 3, rowCount);
             index++;
         }
+
+        root.getChildren().addAll(contentBox);
+        root.setPadding(new Insets(0, 40, 20, 40));
     }
 
     @Override
@@ -124,7 +133,7 @@ private void getProtocolBox(GridPane gridPane,
         int rowIndex = rowCount;
 
         Pane group = new Pane();
-        group.getStyleClass().add("bisq-box-2");
+        group.getStyleClass().add("bisq-card-bg");
         group.setCursor(Cursor.HAND);
         group.setOnMouseClicked(e -> controller.onSelect(protocolListItem));
         gridPane.add(group, columnIndex, rowIndex, 3, 6);
@@ -198,7 +207,7 @@ private void getProtocolBox(GridPane gridPane,
             button.setDefaultButton(true);
         } else {
             button.setText(Res.get("action.learnMore"));
-            button.getStyleClass().addAll("outlined-button", "grey-outlined-button");
+            button.getStyleClass().add("outlined-button");
         }
         GridPane.setMargin(button, new Insets(7, VERTICAL_MARGIN, HORIZONTAL_GAP, VERTICAL_MARGIN));
         gridPane.add(button, columnIndex, ++rowIndex, 3, 1);

diff --git a/apps/desktop/desktop/src/main/resources/css/application.css b/apps/desktop/desktop/src/main/resources/css/application.css
@@ -354,13 +354,6 @@
     -fx-padding: 0 5 0 20;
 }
 
-.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 .label {
     -fx-font-size: 1.15em;
     -fx-line-spacing: 5px;
@@ -405,6 +398,7 @@
     -fx-font-family: "IBM Plex Sans Light";
     -fx-underline: true;
 }
+
 .reputation .reputation-learn-more-link:hover {
     -fx-fill: -bisq2-green !important;
     -fx-text-fill: -bisq2-green !important;

diff --git a/apps/desktop/desktop/src/main/resources/css/containers.css b/apps/desktop/desktop/src/main/resources/css/containers.css
@@ -601,6 +601,12 @@
     -fx-padding: 50;
 }
 
+.bisq-card-bg {
+    -fx-background-color: -bisq-dark-grey-40;
+    -fx-background-radius: 8 8 8 8;
+    -fx-padding: 40;
+}
+
 .common-line-spacing .label {
     -fx-line-spacing: 5px;
     -fx-wrap-text: true;