Revisit styles of Bisq Easy offer messages

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

@@ -493,7 +493,7 @@ private VBox createAndGetBottomBar(UserProfileSelection userProfileSelection) {
 
         private HBox createAndGetSendMessageBox() {
             inputField.setPromptText(Res.get("chat.message.input.prompt"));
-            inputField.getStyleClass().addAll("chat-input-field", "normal-text");
+            inputField.getStyleClass().addAll("chat-input-field", "medium-text");
             inputField.setPadding(new Insets(5, 0, 5, 5));
             HBox.setMargin(inputField, new Insets(0, 0, 1.5, 0));
             HBox.setHgrow(inputField, Priority.ALWAYS);

apps/desktop/desktop/src/main/java/bisq/desktop/main/content/components/chatMessages/messages/BisqEasy/MyOfferMessage.java

@@ -29,6 +29,7 @@
 import de.jensd.fx.fontawesome.AwesomeIcon;
 import javafx.geometry.Insets;
 import javafx.geometry.Pos;
+import javafx.scene.control.Control;
 import javafx.scene.control.Label;
 import javafx.scene.control.ListView;
 import javafx.scene.layout.HBox;
@@ -44,32 +45,30 @@ public MyOfferMessage(ChatMessageListItem<? extends ChatMessage, ? extends ChatC
         super(item, list, controller, model);
 
         // Message
-        message.setAlignment(Pos.CENTER_RIGHT);
-        message.maxWidthProperty().bind(list.widthProperty().subtract(160));
-        VBox messageVBox = new VBox(message);
-        HBox.setMargin(messageVBox, new Insets(0, -10, 0, 0));
+        message.getStyleClass().add("chat-my-offer-message");
 
         // User profile icon
-        userProfileIcon.setSize(60);
-        userProfileIconVbox.setAlignment(Pos.CENTER_LEFT);
-        HBox.setMargin(userProfileIconVbox, new Insets(0, 0, 10, 0));
+        userProfileIcon.setSize(OFFER_MESSAGE_USER_ICON_SIZE);
 
         // Dropdown menu
         DropdownMenu dropdownMenu = createAndGetDropdownMenu();
 
+        // Wrappers
+        HBox hBox = new HBox(15, message, userProfileIconVbox);
+        hBox.setAlignment(Pos.CENTER);
+        VBox vBox = new VBox(5, hBox, dropdownMenu);
+        vBox.setAlignment(Pos.CENTER_RIGHT);
+
         // Message background
-        HBox hBox = new HBox(15, messageVBox, userProfileIconVbox);
-        HBox dropdownMenuHBox = new HBox(Spacer.fillHBox(), dropdownMenu);
-        VBox vBox = new VBox(hBox, dropdownMenuHBox);
+        messageBgHBox.getStyleClass().add("chat-my-offer-message-bg");
         messageBgHBox.getChildren().setAll(vBox);
-        messageBgHBox.getStyleClass().add("chat-message-bg-my-message");
-        messageHBox.getChildren().setAll(Spacer.fillHBox(), messageBgHBox);
+        messageBgHBox.setMaxWidth(Control.USE_PREF_SIZE);
 
         // Reactions
         reactionsHBox.getChildren().setAll(Spacer.fillHBox(), supportedLanguages, copyIcon);
-        reactionsHBox.setAlignment(Pos.CENTER_RIGHT);
 
-        contentVBox.getChildren().setAll(userNameAndDateHBox, messageHBox, reactionsHBox);
+        contentVBox.setAlignment(Pos.CENTER_RIGHT);
+        contentVBox.getChildren().setAll(userNameAndDateHBox, messageBgHBox, reactionsHBox);
     }
 
     @Override
@@ -78,7 +77,7 @@ protected void setUpUserNameAndDateTime() {
 
         userNameAndDateHBox = new HBox(10, dateTime, userName);
         userNameAndDateHBox.setAlignment(Pos.CENTER_RIGHT);
-        VBox.setMargin(userNameAndDateHBox, new Insets(-5, 10, -5, 0));
+        VBox.setMargin(userNameAndDateHBox, new Insets(0, 10, 5, 0));
     }
 
     @Override

apps/desktop/desktop/src/main/java/bisq/desktop/main/content/components/chatMessages/messages/BisqEasy/PeerOfferMessage.java

@@ -51,36 +51,38 @@ public PeerOfferMessage(ChatMessageListItem<? extends ChatMessage, ? extends Cha
 
     @Override
     protected void setUpPeerMessage() {
-        super.setUpPeerMessage();
-
         // User profile icon
-        userProfileIconVbox.setAlignment(Pos.CENTER_LEFT);
-        HBox.setMargin(userProfileIconVbox, new Insets(-5, 0, -5, 0));
-
-        // Message
-        message.maxWidthProperty().bind(list.widthProperty().subtract(430));
-        VBox messageVBox = new VBox(quotedMessageVBox, message);
-        HBox.setMargin(messageVBox, new Insets(0, 0, 0, -10));
+        userProfileIcon.setSize(OFFER_MESSAGE_USER_ICON_SIZE);
 
         // Reputation
         Label reputationLabel = new Label(Res.get("chat.message.reputation").toUpperCase());
-        reputationLabel.getStyleClass().add("bisq-text-7");
         ReputationScoreDisplay reputationScoreDisplay = new ReputationScoreDisplay();
         reputationScoreDisplay.setReputationScore(item.getReputationScore());
         VBox reputationVBox = new VBox(4, reputationLabel, reputationScoreDisplay);
-        reputationVBox.setAlignment(Pos.CENTER_LEFT);
-        HBox.setMargin(reputationVBox, new Insets(-5, 10, 0, 0));
+        reputationVBox.setAlignment(Pos.CENTER);
+        reputationVBox.getStyleClass().add("reputation");
 
         // Take offer button
         takeOfferButton = new Button(Res.get("offer.takeOffer"));
         BisqEasyOfferbookMessage bisqEasyOfferbookMessage = (BisqEasyOfferbookMessage) item.getChatMessage();
         takeOfferButton.setOnAction(e -> controller.onTakeOffer(bisqEasyOfferbookMessage));
         takeOfferButton.setDefaultButton(!item.isOfferAlreadyTaken());
-        takeOfferButton.setMinWidth(Control.USE_PREF_SIZE);
-        HBox.setMargin(takeOfferButton, new Insets(0, 10, 0, 0));
+        takeOfferButton.getStyleClass().add("take-offer-button");
+
+        // Message
+        message.getStyleClass().add("chat-peer-offer-message");
+
+        // Wrappers
+        HBox hBox = new HBox(15, userProfileIconVbox, reputationVBox, message);
+        hBox.setAlignment(Pos.CENTER);
+        VBox vBox = new VBox(5, hBox, takeOfferButton);
+        vBox.setAlignment(Pos.CENTER_RIGHT);
 
         // Message background
-        messageBgHBox.getChildren().setAll(userProfileIconVbox, messageVBox, Spacer.fillHBox(), reputationVBox, takeOfferButton);
+        messageBgHBox.getStyleClass().add("chat-peer-offer-message-bg");
+        messageBgHBox.getChildren().setAll(vBox);
+        messageBgHBox.setAlignment(Pos.CENTER_LEFT);
+        messageBgHBox.setMaxWidth(Control.USE_PREF_SIZE);
     }
 
     @Override

apps/desktop/desktop/src/main/java/bisq/desktop/main/content/components/chatMessages/messages/BubbleMessage.java

@@ -41,7 +41,8 @@
 import java.util.Optional;
 
 public abstract class BubbleMessage extends Message {
-    protected final static double CHAT_MESSAGE_BOX_MAX_WIDTH = 630;
+    protected static final double CHAT_MESSAGE_BOX_MAX_WIDTH = 630;
+    protected static final double OFFER_MESSAGE_USER_ICON_SIZE = 70;
 
     protected final ChatMessageListItem<? extends ChatMessage, ? extends ChatChannel<? extends ChatMessage>> item;
     protected final ListView<ChatMessageListItem<? extends ChatMessage, ? extends ChatChannel<? extends ChatMessage>>> list;
@@ -182,7 +183,7 @@ private Label createAndGetMessage() {
         label.maxWidthProperty().unbind();
         label.setWrapText(true);
         label.setPadding(new Insets(10));
-        label.getStyleClass().addAll("text-fill-white", "normal-text", "font-default");
+        label.getStyleClass().addAll("text-fill-white", "medium-text", "font-default");
         label.setText(item.getMessage());
         return label;
     }

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

@@ -155,16 +155,54 @@
     -fx-font-family: "IBM Plex Sans Light";
 }
 
-.chat-message-bg-my-message {
+/* Peer Message Background */
+.chat-message-bg-peer-message,
+.chat-peer-offer-message-bg {
     -fx-background-color: -bisq-dark-grey-40;
     -fx-background-radius: 8;
 }
 
-.chat-message-bg-peer-message {
-    -fx-background-color: -bisq-dark-grey-40;
+/* Peer Offer Message */
+.chat-peer-offer-message-bg {
+    -fx-padding: 20 30 20 20;
+}
+
+.chat-peer-offer-message-bg .reputation .label {
+    -fx-font-size: 0.9em;
+}
+
+.chat-peer-offer-message {
+    -fx-padding: 0 0 0 7;
+    -fx-line-spacing: 7px;
+}
+
+.chat-peer-offer-message-bg .take-offer-button {
+    -fx-padding: 5 30 5 30;
+}
+
+.chat-peer-offer-message-bg .take-offer-button .text {
+    -fx-font-size: 0.8em;
+}
+/* ... */
+
+/* My Message Background */
+.chat-message-bg-my-message,
+.chat-my-offer-message-bg {
+    -fx-background-color: #2c372b; /* -bisq2-green; saturation -70; lightness -60 */
     -fx-background-radius: 8;
 }
 
+/* My Offer Message */
+.chat-my-offer-message {
+    -fx-padding: 0;
+    -fx-line-spacing: 7px;
+}
+
+.chat-my-offer-message-bg {
+    -fx-padding: 20 20 15 30;
+}
+/* ... */
+
 .create-offer-message-my-offer {
     -fx-background-color: -bisq-dark-grey-10;
     -fx-background-radius: 8;

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

@@ -12,6 +12,10 @@
     -fx-font-size: 0.769em;
 }
 
+.medium-text {
+    -fx-font-size: 1.02em !important;
+}
+
 .normal-text {
     -fx-font-size: 1.1em !important;
 }