move secondary tabs to same line as sub-tabs

desktop/src/main/java/haveno/desktop/haveno.css

@@ -729,17 +729,22 @@ tree-table-view:focused {
     -fx-border-insets: 0 0 0 1;
 }
 
+.nav-logo {
+    -fx-max-width: 180;
+    -fx-min-width: 180;
+}
+
 .nav-primary {
     -fx-background-color: -bs-rd-nav-primary-background;
     -fx-border-width: 0 0 0 0;
     -fx-border-color: -bs-rd-nav-primary-border;
     -fx-background-radius: 999;
     -fx-border-radius: 999;
-    -fx-padding: 9 9 9 11;
+    -fx-padding: 9 0 9 11;
 }
 
 .nav-secondary {
-    -fx-padding: 9 0 9 9;
+    -fx-padding: 9 9 9 9;
 }
 
 .nav-separator {
@@ -776,7 +781,8 @@ tree-table-view:focused {
     -fx-pref-height: 0px;
 }
 
-.jfx-badge > .nav-button {
+.jfx-badge > .nav-button,
+.jfx-badge > .secondary-nav-button {
     -fx-translate-y: 1;
 }
 
@@ -789,8 +795,8 @@ tree-table-view:focused {
 }
 
 .nav-button .text {
-    -fx-font-size: 0.769em;
-    -fx-font-weight: bold;
+    -fx-font-size: 0.93em;
+    -fx-font-weight: medium;
     -fx-fill: -bs-rd-nav-deselected;
 }
 
@@ -815,6 +821,36 @@ tree-table-view:focused {
     -fx-fill: -bs-rd-nav-selected;
 }
 
+.secondary-nav-button {
+    -fx-cursor: hand;
+    -fx-background-color: transparent;
+    -fx-padding: 9 15;
+    -fx-border-color: transparent;
+    -fx-border-width: 0 0 1px 0;
+}
+
+.secondary-nav-button .text {
+    -fx-font-size: 0.93em;
+    -fx-font-weight: medium;
+    -fx-fill: -bs-rd-nav-secondary-deselected;
+}
+
+.secondary-nav-button-japanese .text {
+    -fx-font-size: 1em;
+}
+
+.secondary-nav-button:selected {
+    -fx-border-color: transparent transparent -bs-rd-nav-secondary-selected transparent;
+    -fx-border-width: 0 0 1px 0;
+}
+
+.secondary-nav-button:hover {
+}
+
+.secondary-nav-button:selected .text {
+    -fx-fill: -bs-rd-nav-secondary-selected;
+}
+
 .nav-balance-display {
     -fx-alignment: center-left;
     -fx-text-fill: -bs-rd-font-balance;

desktop/src/main/java/haveno/desktop/images.css

@@ -301,6 +301,18 @@
     -fx-image: url("../../images/new_trade_protocol_screenshot.png");
 }
 
+#image-support {
+    -fx-image: url("../../images/support.png");
+}
+
+#image-account {
+    -fx-image: url("../../images/account.png");
+}
+
+#image-settings {
+    -fx-image: url("../../images/settings.png");
+}
+
 /**
  * Crypto logos.
  */

desktop/src/main/java/haveno/desktop/main/MainView.java

@@ -92,6 +92,7 @@ import static javafx.scene.layout.AnchorPane.setRightAnchor;
 import static javafx.scene.layout.AnchorPane.setTopAnchor;
 import javafx.scene.layout.BorderPane;
 import javafx.scene.layout.HBox;
+import javafx.scene.layout.Pane;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.StackPane;
@@ -165,15 +166,15 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         if (LanguageUtil.isDefaultLanguageRTL())
             MainView.rootContainer.setNodeOrientation(NodeOrientation.RIGHT_TO_LEFT);
 
-        ToggleButton marketButton = new NavButton(MarketView.class, Res.get("mainView.menu.market").toUpperCase());
-        ToggleButton buyButton = new NavButton(BuyOfferView.class, Res.get("mainView.menu.buyXmr").toUpperCase());
-        ToggleButton sellButton = new NavButton(SellOfferView.class, Res.get("mainView.menu.sellXmr").toUpperCase());
-        ToggleButton portfolioButton = new NavButton(PortfolioView.class, Res.get("mainView.menu.portfolio").toUpperCase());
-        ToggleButton fundsButton = new NavButton(FundsView.class, Res.get("mainView.menu.funds").toUpperCase());
+        ToggleButton marketButton = new NavButton(MarketView.class, Res.get("mainView.menu.market"));
+        ToggleButton buyButton = new NavButton(BuyOfferView.class, Res.get("mainView.menu.buyXmr"));
+        ToggleButton sellButton = new NavButton(SellOfferView.class, Res.get("mainView.menu.sellXmr"));
+        ToggleButton portfolioButton = new NavButton(PortfolioView.class, Res.get("mainView.menu.portfolio"));
+        ToggleButton fundsButton = new NavButton(FundsView.class, Res.get("mainView.menu.funds"));
 
-        ToggleButton supportButton = new NavButton(SupportView.class, Res.get("mainView.menu.support"));
-        ToggleButton accountButton = new NavButton(AccountView.class, Res.get("mainView.menu.account"));
-        ToggleButton settingsButton = new NavButton(SettingsView.class, Res.get("mainView.menu.settings"));
+        ToggleButton supportButton = new SecondaryNavButton(SupportView.class, Res.get("mainView.menu.support"), "image-support");
+        ToggleButton accountButton = new SecondaryNavButton(AccountView.class, Res.get("mainView.menu.account"), "image-account");
+        ToggleButton settingsButton = new SecondaryNavButton(SettingsView.class, Res.get("mainView.menu.settings"), "image-settings");
 
         JFXBadge portfolioButtonWithBadge = new JFXBadge(portfolioButton);
         JFXBadge supportButtonWithBadge = new JFXBadge(supportButton);
@@ -298,20 +299,13 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
             }
         });
 
-        HBox primaryNav = new HBox(marketButton, getNavigationSpacer(), buyButton, getNavigationSpacer(),
+        HBox primaryNav = new HBox(getLogoPane(), marketButton, getNavigationSpacer(), buyButton, getNavigationSpacer(),
                 sellButton, getNavigationSpacer(), portfolioButtonWithBadge, getNavigationSpacer(), fundsButton);
 
         primaryNav.setAlignment(Pos.CENTER_LEFT);
         primaryNav.getStyleClass().add("nav-primary");
         HBox.setHgrow(primaryNav, Priority.SOMETIMES);
 
-        HBox secondaryNav = new HBox(supportButtonWithBadge, getNavigationSpacer(), accountButton,
-                getNavigationSpacer(), settingsButtonWithBadge, getNavigationSpacer());
-        secondaryNav.getStyleClass().add("nav-secondary");
-        HBox.setHgrow(secondaryNav, Priority.ALWAYS);
-
-        secondaryNav.setAlignment(Pos.CENTER_LEFT);
-
         HBox priceAndBalance = new HBox(marketPriceBox.second, getNavigationSeparator(), availableBalanceBox.second,
                 getNavigationSeparator(), pendingBalanceBox.second, getNavigationSeparator(), reservedBalanceBox.second);
 
@@ -319,8 +313,7 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         priceAndBalance.setSpacing(12);
         priceAndBalance.getStyleClass().add("nav-price-balance");
 
-        HBox navPane = new HBox(primaryNav, getNavigationSeparator(), secondaryNav, getNavigationSpacer(),
-                priceAndBalance) {{
+        HBox navPane = new HBox(primaryNav, getNavigationSpacer(), priceAndBalance) {{
             setLeftAnchor(this, 25d);
             setRightAnchor(this, 25d);
             setTopAnchor(this, 20d);
@@ -329,15 +322,46 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         }};
         navPane.setAlignment(Pos.CENTER);
 
+        HBox secondaryNav = new HBox(supportButtonWithBadge, getNavigationSpacer(), accountButton,
+                getNavigationSpacer(), settingsButtonWithBadge, getNavigationSpacer());
+        secondaryNav.getStyleClass().add("nav-secondary");
+        secondaryNav.setAlignment(Pos.CENTER_RIGHT); // TODO: check for LTR language
+        secondaryNav.setMouseTransparent(false);
+        secondaryNav.setPickOnBounds(false);
+        HBox.setHgrow(secondaryNav, Priority.ALWAYS);
+        AnchorPane.setLeftAnchor(secondaryNav, 0.0);
+        AnchorPane.setRightAnchor(secondaryNav, 0.0);
+        AnchorPane.setTopAnchor(secondaryNav, 0.0);
+
+        AnchorPane secondaryNavContainer = new AnchorPane() {{
+            setId("nav-secondary-container");
+            setLeftAnchor(this, 0d);
+            setRightAnchor(this, 0d);
+            setTopAnchor(this, 95d);
+        }};
+        secondaryNavContainer.setPickOnBounds(false);
+        secondaryNavContainer.setMouseTransparent(false);
+        secondaryNavContainer.getChildren().add(secondaryNav);
+
+        // if (rootContainer.getNodeOrientation() == NodeOrientation.LEFT_TO_RIGHT) {
+        //     log.warn("CENTERING RIGHT");
+        //     rightButtons.setAlignment(Pos.CENTER_RIGHT);
+        //     StackPane.setMargin(rightButtons, new Insets(5, 10, 0, 0));
+        // } else {
+        //     rightButtons.setAlignment(Pos.CENTER_LEFT);
+        //     log.warn("CENTERING LEFT");
+        //     StackPane.setMargin(rightButtons, new Insets(5, 0, 0, 10));
+        // }
+
         AnchorPane contentContainer = new AnchorPane() {{
             getStyleClass().add("content-pane");
             setLeftAnchor(this, 0d);
             setRightAnchor(this, 0d);
-            setTopAnchor(this, 90d);
+            setTopAnchor(this, 95d);
             setBottomAnchor(this, 0d);
         }};
 
-        AnchorPane applicationContainer = new AnchorPane(navPane, contentContainer) {{
+        AnchorPane applicationContainer = new AnchorPane(navPane, contentContainer, secondaryNavContainer) {{
             setId("application-container");
         }};
 
@@ -402,6 +426,22 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         return separator;
     }
 
+    @NotNull
+    private Pane getLogoPane() {
+        ImageView logo = new ImageView();
+        logo.setId("image-logo-landscape");
+        logo.setPreserveRatio(true);
+        logo.setFitHeight(40);
+        logo.setSmooth(true);
+        logo.setCache(true);
+
+        final Pane pane = new Pane();
+        HBox.setHgrow(pane, Priority.ALWAYS);
+        pane.getStyleClass().add("nav-logo");
+        pane.getChildren().add(logo);
+        return pane;
+    }
+
     @NotNull
     private Region getNavigationSpacer() {
         final Region spacer = new Region();
@@ -839,4 +879,30 @@ public class MainView extends InitializableView<StackPane, MainViewModel>  {
         }
 
     }
+
+    private class SecondaryNavButton extends NavButton {
+
+        SecondaryNavButton(Class<? extends View> viewClass, String title, String iconId) {
+            super(viewClass, title);
+            this.getStyleClass().setAll("secondary-nav-button");
+
+            // Japanese fonts are dense, increase top nav button text size
+            if (model.getPreferences() != null && "ja".equals(model.getPreferences().getUserLanguage())) {
+                this.getStyleClass().setAll("secondary-nav-button-japanese");
+            }
+
+            // add icon
+            ImageView imageView = new ImageView();
+            imageView.setId(iconId);
+            imageView.setFitWidth(15);
+            imageView.setPreserveRatio(true);
+            setGraphicTextGap(10);
+            setGraphic(imageView);
+
+            // show cursor hand on hover
+            this.setMouseTransparent(false);
+            this.setPickOnBounds(false);
+        }
+
+    }
 }

desktop/src/main/java/haveno/desktop/theme-dark.css

@@ -20,7 +20,7 @@
     /* haveno main colors */
     -bs-color-primary: #0b65da;
     -bs-color-primary-dark: #0c59bd;
-    -bs-text-color: #dadada;
+    -bs-text-color: white;
     -bs-background-color: #29292a;
     -bs-background-gray: black;
     -bs-content-background-gray: black;
@@ -73,7 +73,9 @@
     -bs-rd-nav-background: rgb(15, 15, 15);
     -bs-rd-nav-primary-background: rgb(15, 15, 15);
     -bs-rd-nav-selected: black;
-    -bs-rd-nav-deselected: rgba(255, 255, 255, .65);
+    -bs-rd-nav-deselected: rgba(255, 255, 255, 1);
+    -bs-rd-nav-secondary-selected: rgba(255, 255, 255, 1);
+    -bs-rd-nav-secondary-deselected: -bs-rd-font-light;
     -bs-rd-nav-button-hover: derive(-bs-rd-nav-background, 10%);
     -bs-rd-nav-primary-button-hover: derive(-bs-rd-nav-primary-background, 10%);
     -bs-rd-nav-hover-text: black;
@@ -557,3 +559,7 @@
 .toggle-button-no-slider:selected {
     -fx-background-color: -bs-color-gray-bbb;
 }
+
+#image-logo-landscape {
+    -fx-image: url("../../images/logo_landscape_dark.png");
+}

desktop/src/main/java/haveno/desktop/theme-light.css

@@ -41,7 +41,9 @@
     -bs-rd-green: #0b65da;
     -bs-rd-green-dark: #3EA34A;
     -bs-rd-nav-selected: #0b65da;
-    -bs-rd-nav-deselected: rgba(255, 255, 255, 0.75);
+    -bs-rd-nav-deselected: rgba(255, 255, 255, 1);
+    -bs-rd-nav-secondary-selected: -fx-accent;
+    -bs-rd-nav-secondary-deselected: -bs-rd-font-light;
     -bs-rd-nav-background: #0b65da;
     -bs-rd-nav-primary-background: #0b65da;
     -bs-rd-nav-button-hover: derive(-bs-rd-nav-background, 10%);
@@ -133,3 +135,7 @@
     -fx-focus-color: transparent;
     -fx-faint-focus-color: transparent;
 }
+
+#image-logo-landscape {
+    -fx-image: url("../../images/logo_landscape_light.png");
+}