Improve new feature popup for ntp and account signing (#3453)

bisq-network · Oct 24, 2019 · cd4cd39 · cd4cd39
1 parent ea94cf0
commit cd4cd39
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 35 deletions.
diff --git a/core/src/main/resources/i18n/displayStrings.properties b/core/src/main/resources/i18n/displayStrings.properties
@@ -2532,11 +2532,11 @@ popup.attention.forTradeWithId=Attention required for trade with ID {0}
 popup.info.multiplePaymentAccounts.headline=Multiple payment accounts available
 popup.info.multiplePaymentAccounts.msg=You have multiple payment accounts available for this offer. Please make sure you've picked the right one.
 
-popup.news.launch.headline=Two Critical Updates
+popup.news.launch.headline=Two Major Updates
 popup.news.launch.accountSigning.headline=ACCOUNT SIGNING
 popup.news.launch.accountSigning.description=Lift 0.01 BTC fiat trading limits by buying BTC from a signed peer.
 popup.news.launch.ntp.headline=NEW TRADE PROTOCOL
-popup.news.launch.ntp.description=Multisig escrows are now 2-of-2 with a new dispute resolution system.
+popup.news.launch.ntp.description=New two level dispute resolution system to make Bisq more secure, scalable and censorship resistant.
 
 popup.accountSigning.selectAccounts.headline=Select payment accounts
 popup.accountSigning.selectAccounts.description=Based on the payment method and point of time all payment accounts that are connected to a dispute where a payout to the buyer occurred will be selected for you to sign.

diff --git a/desktop/src/main/java/bisq/desktop/bisq.css b/desktop/src/main/java/bisq/desktop/bisq.css
@@ -782,6 +782,14 @@ tree-table-view:focused {
     -fx-padding: 27 2 0 2;
 }
 
+.close-icon {
+    -fx-text-fill: -bs-text-color;
+}
+
+.close-icon:hover {
+    -fx-text-fill: -fx-accent;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Tooltip                                                                     *
@@ -838,6 +846,12 @@ textfield */
     -fx-underline: false;
 }
 
+.hyperlink.highlight,
+.hyperlink.highlight .text.hyperlink.no-underline {
+    -fx-text-fill: -fx-accent;
+    -fx-fill: -fx-accent;
+}
+
 /*******************************************************************************
  *                                                                             *
  * Table                                                                       *
@@ -1984,26 +1998,19 @@ textfield */
  ********************************************************************************************************************/
 
 .news-version {
-    -fx-alignment: center;
-    -fx-font-size: 1.077em;
-}
-
-.news-headline {
-    -fx-font-size: 2.154em;
-    -fx-text-fill: -bs-rd-font-dark-gray;
-    -fx-font-family: "IBM Plex Sans Light";
+    -fx-alignment: center-left;
+    -fx-font-size: 1em;
 }
 
 .news-feature-headline {
-    -fx-font-size: 1.462em;
+    -fx-font-size: 1.077em;
     -fx-text-fill: -bs-rd-font-dark-gray;
-    -fx-font-family: "IBM Plex Sans Light";
+    -fx-font-family: "IBM Plex Sans Medium";
 }
 
 .news-feature-description {
-    -fx-font-size: 1.231em;
+    -fx-font-size: 1em;
     -fx-text-fill: -bs-rd-font-dark-gray;
-    -fx-font-family: "IBM Plex Sans Light";
 }
 /********************************************************************************************************************
  *                                                                                                                  *

diff --git a/desktop/src/main/java/bisq/desktop/components/HyperlinkWithIcon.java b/desktop/src/main/java/bisq/desktop/components/HyperlinkWithIcon.java
@@ -52,11 +52,21 @@ public HyperlinkWithIcon(String text, AwesomeIcon awesomeIcon) {
     }
 
     public HyperlinkWithIcon(String text, GlyphIcons icon) {
+        this(text, icon, null);
+    }
+
+    public HyperlinkWithIcon(String text, GlyphIcons icon, String style) {
         super(text);
 
         Text textIcon = FormBuilder.getIcon(icon);
         textIcon.setOpacity(0.7);
         textIcon.getStyleClass().addAll("hyperlink", "no-underline");
+
+        if (style != null) {
+            textIcon.getStyleClass().add(style);
+            getStyleClass().add(style);
+        }
+
         setPadding(new Insets(0));
 
         setIcon(textIcon);

diff --git a/desktop/src/main/java/bisq/desktop/main/overlays/windows/NewTradeProtocolLaunchWindow.java b/desktop/src/main/java/bisq/desktop/main/overlays/windows/NewTradeProtocolLaunchWindow.java
@@ -17,8 +17,8 @@
 
 package bisq.desktop.main.overlays.windows;
 
-import bisq.desktop.components.AutoTooltipButton;
 import bisq.desktop.components.AutoTooltipLabel;
+import bisq.desktop.components.HyperlinkWithIcon;
 import bisq.desktop.main.overlays.Overlay;
 import bisq.desktop.util.FormBuilder;
 import bisq.desktop.util.GUIUtil;
@@ -27,10 +27,12 @@
 import bisq.core.locale.Res;
 import bisq.core.user.DontShowAgainLookup;
 
+import de.jensd.fx.fontawesome.AwesomeIcon;
 import de.jensd.fx.glyphs.materialdesignicons.MaterialDesignIcon;
 
 import javafx.scene.control.Button;
 import javafx.scene.control.Label;
+import javafx.scene.control.Separator;
 import javafx.scene.image.ImageView;
 import javafx.scene.layout.GridPane;
 import javafx.scene.layout.HBox;
@@ -40,6 +42,7 @@
 
 import javafx.geometry.HPos;
 import javafx.geometry.Insets;
+import javafx.geometry.Orientation;
 import javafx.geometry.Pos;
 
 import lombok.extern.slf4j.Slf4j;
@@ -58,7 +61,7 @@ public class NewTradeProtocolLaunchWindow extends Overlay<NewTradeProtocolLaunch
 
     @Override
     public void show() {
-        width = 700;
+        width = 680;
         hideCloseButton();
         super.show();
     }
@@ -71,9 +74,9 @@ public void show() {
     @Override
     protected void createGridPane() {
         super.createGridPane();
-        gridPane.setVgap(20);
+        gridPane.setVgap(10);
         gridPane.getColumnConstraints().get(0).setHalignment(HPos.CENTER);
-        gridPane.setPadding(new Insets(74, 64, 74, 64));
+        gridPane.setPadding(new Insets(84));
     }
 
     @Override
@@ -84,7 +87,8 @@ protected void addHeadLine() {
         HBox.setHgrow(versionNumber, Priority.ALWAYS);
         versionNumber.setMaxWidth(Double.MAX_VALUE);
 
-        Button closeButton = FormBuilder.getIconButton(MaterialDesignIcon.CLOSE);
+        Button closeButton = FormBuilder.getIconButton(MaterialDesignIcon.CLOSE,
+                "close-icon", "1.231em");
         closeButton.setOnAction(event -> hide());
         HBox.setHgrow(closeButton, Priority.NEVER);
 
@@ -94,10 +98,17 @@ protected void addHeadLine() {
         GridPane.setColumnSpan(header, 2);
         gridPane.getChildren().add(header);
 
-        Label headlineLabel = addLabel(gridPane, ++rowIndex, headLine);
-        headlineLabel.getStyleClass().add("news-headline");
-        GridPane.setMargin(headlineLabel, new Insets(10, 0, 0, 0));
-        GridPane.setColumnSpan(headlineLabel, 2);
+        headLineLabel = addLabel(gridPane, ++rowIndex, headLine);
+        headLineLabel.getStyleClass().add("popup-headline-information");
+        headlineIcon = new Label();
+        headlineIcon.getStyleClass().add("popup-icon-information");
+        headlineIcon.setManaged(true);
+        headlineIcon.setVisible(true);
+        FormBuilder.getIconForLabel(AwesomeIcon.INFO_SIGN, headlineIcon, "1em");
+
+        headLineLabel.setGraphic(headlineIcon);
+        GridPane.setHalignment(headLineLabel, HPos.LEFT);
+        GridPane.setColumnSpan(headLineLabel, 2);
     }
 
     @Override
@@ -116,9 +127,9 @@ protected void onShow() {
 
     private void createContent() {
         HBox content = new HBox();
-        content.setMinWidth(700);
-        content.setAlignment(Pos.CENTER);
-        content.setSpacing(20);
+        content.setMinWidth(680);
+        content.setAlignment(Pos.CENTER_LEFT);
+        content.setSpacing(40);
 
         VBox accountSigning = getFeatureBox(Res.get("popup.news.launch.accountSigning.headline"),
                 Res.get("popup.news.launch.accountSigning.description"),
@@ -130,8 +141,9 @@ private void createContent() {
                 "image-new-trade-protocol-screenshot",
                 "https://docs.bisq.network/trading-rules");
 
-        content.getChildren().addAll(accountSigning, newTradeProtocol);
+        content.getChildren().addAll(accountSigning, new Separator(Orientation.VERTICAL), newTradeProtocol);
 
+        GridPane.setMargin(content, new Insets(40, 0, 0, 0));
         GridPane.setRowIndex(content, ++rowIndex);
         GridPane.setColumnSpan(content, 2);
         GridPane.setHgrow(content, Priority.ALWAYS);
@@ -141,20 +153,19 @@ private void createContent() {
     @NotNull
     private VBox getFeatureBox(String title, String description, String imageId, String url) {
         Label featureTitle = new Label(title);
-        featureTitle.setTextAlignment(TextAlignment.CENTER);
+        featureTitle.setTextAlignment(TextAlignment.LEFT);
         featureTitle.getStyleClass().add("news-feature-headline");
 
         ImageView sectionScreenshot = new ImageView();
         sectionScreenshot.setId(imageId);
 
         Label featureDescription = new Label(description);
-        featureDescription.setTextAlignment(TextAlignment.CENTER);
+        featureDescription.setTextAlignment(TextAlignment.LEFT);
         featureDescription.getStyleClass().add("news-feature-description");
         featureDescription.setWrapText(true);
 
-        AutoTooltipButton learnMoreButton = new AutoTooltipButton(Res.get("shared.learnMore"));
-        learnMoreButton.getStyleClass().add("action-button");
-        learnMoreButton.setOnAction(event -> {
+        HyperlinkWithIcon learnMore = new HyperlinkWithIcon(Res.get("shared.learnMore"), MaterialDesignIcon.LINK, "highlight");
+        learnMore.setOnAction(event -> {
 
             if (DontShowAgainLookup.showAgain(GUIUtil.OPEN_WEB_PAGE_KEY)) {
                 hide();
@@ -167,8 +178,8 @@ private VBox getFeatureBox(String title, String description, String imageId, Str
             }
         });
 
-        VBox vBox = new VBox(featureTitle, sectionScreenshot, featureDescription, learnMoreButton);
-        vBox.setAlignment(Pos.CENTER);
+        VBox vBox = new VBox(featureTitle, sectionScreenshot, featureDescription, learnMore);
+        vBox.setAlignment(Pos.CENTER_LEFT);
         vBox.setSpacing(20);
         vBox.setMaxWidth(300);
         return vBox;

diff --git a/desktop/src/main/java/bisq/desktop/util/FormBuilder.java b/desktop/src/main/java/bisq/desktop/util/FormBuilder.java
@@ -2102,8 +2102,13 @@ public static Button getIconButton(GlyphIcons icon) {
     }
 
     public static Button getIconButton(GlyphIcons icon, String styleClass) {
+        return getIconButton(icon, styleClass, "2em");
+    }
+
+    public static Button getIconButton(GlyphIcons icon, String styleClass, String iconSize) {
         if (icon.fontFamily().equals(MATERIAL_DESIGN_ICONS)) {
-            Button textIcon = MaterialDesignIconFactory.get().createIconButton(icon, "", "2em", null, ContentDisplay.CENTER);
+            Button textIcon = MaterialDesignIconFactory.get().createIconButton(icon,
+                    "", iconSize, null, ContentDisplay.CENTER);
             textIcon.setId("icon-button");
             textIcon.getGraphic().getStyleClass().add(styleClass);
             textIcon.setPrefWidth(20);