Improve visibility of messages with scroll down indicator

* Apply a gradient buffer when scroll down icon is shown to make a
  smooth disappearance and improve experience.
* Change icons to better fit the scroll down icon and number of messages
  indicator in the chat window.

Resolves bisq-network#1776

apps/desktop/desktop/src/main/java/bisq/desktop/main/content/components/chatMessages/ChatMessagesListView.java

@@ -755,6 +755,7 @@ private static class View extends bisq.desktop.common.view.View<StackPane, Model
         private final BisqTooltip scrollDownTooltip;
         private final Label placeholderTitle = new Label("");
         private final Label placeholderDescription = new Label("");
+        private final Pane scrollDownBackground;
         private Optional<ScrollBar> scrollBar = Optional.empty();
         private Subscription hasUnreadMessagesPin, showScrolledDownButtonPin;
         private Timeline fadeInScrollDownBadgeTimeline;
@@ -774,22 +775,25 @@ private View(Model model, Controller controller) {
             listView.setSelectionModel(new NoSelectionModel<>());
             VBox.setVgrow(listView, Priority.ALWAYS);
 
-            scrollDownImageView = new ImageView();
+            scrollDownBackground = new Pane();
+            scrollDownBackground.getStyleClass().add("scroll-down-bg");
 
+            scrollDownImageView = new ImageView();
             scrollDownBadge = new Badge(scrollDownImageView);
             scrollDownBadge.setMaxSize(25, 25);
             scrollDownBadge.getStyleClass().add("chat-messages-badge");
             scrollDownBadge.setPosition(Pos.BOTTOM_RIGHT);
-            scrollDownBadge.setBadgeInsets(new Insets(20, 10, 0, 50));
+            scrollDownBadge.setBadgeInsets(new Insets(20, 10, -2, 55));
             scrollDownBadge.setCursor(Cursor.HAND);
 
             scrollDownTooltip = new BisqTooltip(Res.get("chat.listView.scrollDown"));
             Tooltip.install(scrollDownBadge, scrollDownTooltip);
 
             StackPane.setAlignment(scrollDownBadge, Pos.BOTTOM_CENTER);
-            StackPane.setMargin(scrollDownBadge, new Insets(0, 0, 10, 0));
+            StackPane.setAlignment(scrollDownBackground, Pos.BOTTOM_CENTER);
+            StackPane.setMargin(scrollDownBackground, new Insets(0, 15, 0, 0));
             root.setAlignment(Pos.CENTER);
-            root.getChildren().addAll(listView, scrollDownBadge);
+            root.getChildren().addAll(listView, scrollDownBackground, scrollDownBadge);
         }
 
         @Override
@@ -809,6 +813,9 @@ protected void onViewAttached() {
                 }
             });
 
+            scrollDownBackground.visibleProperty().bind(model.getShowScrolledDownButton());
+            scrollDownBackground.managedProperty().bind(model.getShowScrolledDownButton());
+
             scrollDownBadge.textProperty().bind(model.numUnReadMessages);
 
             scrollDownBadge.setOpacity(0);
@@ -853,6 +860,8 @@ protected void onViewAttached() {
         protected void onViewDetached() {
             scrollBar.ifPresent(scrollbar -> scrollbar.valueProperty().unbindBidirectional(model.getScrollValue()));
             model.scrollBarVisible.unbind();
+            scrollDownBackground.visibleProperty().unbind();
+            scrollDownBackground.managedProperty().unbind();
             scrollDownBadge.textProperty().unbind();
             hasUnreadMessagesPin.unsubscribe();
             showScrolledDownButtonPin.unsubscribe();

apps/desktop/desktop/src/main/resources/css/chat.css

@@ -473,6 +473,13 @@
     -fx-underline: true;
 }
 
+.scroll-down-bg {
+    -fx-min-height: 38;
+    -fx-max-height: 38;
+    -fx-pref-height: 38;
+    -fx-background-color: linear-gradient(to top, rgba(28, 28, 28, 1) 0%, rgba(28, 28, 28, 0.9) 40%, rgba(28, 28, 28, 0) 100%); /* -bisq-dark-grey-20 */
+}
+
 .chat-messages-badge.bisq-badge .badge-pane {
     -fx-background-color: transparent;
 }