Use TitledGroupBg component

2025-01-19 05:44:05 +01:00 · 2014-09-11 11:58:49 +02:00 · 2014-09-11 11:58:49 +02:00 · f2b5d7670f
commit f2b5d7670f
parent bd5f8d0020
10 changed files with 482 additions and 470 deletions
--- a/src/main/java/io/bitsquare/gui/bitsquare.css
+++ b/src/main/java/io/bitsquare/gui/bitsquare.css
@ -12,12 +12,244 @@ upper border on tab: cfcfcf
 lower border on tab: b5b5b5
 upper gradient color on tab: d3d3d3
 lower gradient color on tab: dddddd
-
-
 */

-/* Account */

+/* Splash */
+#splash {
+    -fx-background-color: #ffffff;
+}
+
+/* Main UI */
+#logo-sub-title-label {
+    -fx-font-weight: bold;
+    -fx-font-size: 24;
+}
+
+#base-content-container {
+    -fx-background-color: #dddddd;
+}
+
+#content-pane {
+    -fx-background-color: #f4f4f4;
+}
+
+#headline-label {
+    -fx-font-weight: bold;
+    -fx-font-size: 18;
+}
+
+#info-label {
+    -fx-font-size: 14;
+}
+
+#online-label {
+    -fx-fill: green;
+}
+
+#offline-label {
+    -fx-fill: red;
+}
+
+/* main nav */
+
+#nav-button {
+    -fx-cursor: hand;
+    -fx-background-color: transparent;
+}
+
+#nav-button .text {
+    -fx-font-size: 10; 
+}
+
+#nav-button:selected .text {
+   -fx-font-size: 11; 
+    -fx-font-weight: bold;
+}
+
+#nav-alert-button {
+    -fx-background-color: transparent;
+    -fx-cursor: hand;
+    -fx-border-style: none;
+}
+
+#nav-button-label {
+    -fx-font-size: 10;  
+}
+
+#nav-balance-label {
+    -fx-font-weight: bold;
+    -fx-alignment: center;
+}
+
+.text-field:readonly {
+    -fx-text-fill: #000000;
+    -fx-background-color: #FAFAFA;
+}
+
+#feedback-text {
+    -fx-font-size: 10;
+}
+
+#label-url {
+    -fx-cursor: hand;
+    -fx-text-fill: blue;
+    -fx-underline: true;
+}
+
+#icon-button {
+    -fx-cursor: hand;
+    -fx-background-color: transparent;
+}
+
+.copy-icon {
+    -fx-text-fill: #0096c9;
+    -fx-cursor: hand;
+}
+
+.copy-icon:hover {
+    -fx-text-fill: black;
+}
+
+/* Same style like non editable textfield. But textfield spans a whole column in a grid, so we use generally 
+textfield */
+#label-with-background {
+    -fx-background-color: #FAFAFA;
+    -fx-border-radius: 4;
+    -fx-padding: 4 4 4 4;
+}
+
+#address-text-field {
+    -fx-cursor: hand;
+    -fx-text-fill: #0096c9;
+}
+#address-text-field:hover {
+    -fx-text-fill: black;
+}
+
+#funds-confidence {
+    -fx-progress-color: dimgrey;
+}
+
+/* .table-view */
+.table-view .table-cell {
+    -fx-alignment: center;
+}
+
+.table-view .column-header .label {
+    -fx-alignment-alignment: center;
+}
+
+.table-view .focus {
+    -fx-alignment: center;
+}
+
+.table-view .text {
+    -fx-fill: black;
+}
+
+.table-view .table-row-cell:selected .table-row-cell:row-selection .table-row-cell:cell-selection .text {
+    -fx-fill: white;
+}
+
+.table-view .table-row-cell:selected .button .text {
+    -fx-fill: black;
+}
+
+.table-view .table-row-cell .copy-icon .text {
+    -fx-fill: #0096c9;
+}
+
+.table-view .table-row-cell .copy-icon .text:hover {
+    -fx-fill: black;
+}
+
+.table-view .table-row-cell:selected .copy-icon .text {
+    -fx-fill: white;
+}
+
+.table-view .table-row-cell:selected .copy-icon .text:hover {
+    -fx-fill: black;
+}
+
+.table-view .table-row-cell .hyperlink .text {
+    -fx-fill: #0096c9;
+}
+
+.table-view .table-row-cell .hyperlink .text:hover {
+    -fx-fill: black;
+}
+
+.table-view .table-row-cell:selected .hyperlink .text {
+    -fx-fill: white;
+}
+
+.table-view .table-row-cell:selected .hyperlink .text:hover {
+    -fx-fill: black;
+}
+
+#form-header-text {
+    -fx-font-weight: bold;
+    -fx-font-size: 14;
+}
+
+#clickable-icon {
+    -fx-text-fill: #0096c9;
+    -fx-cursor: hand;
+}
+
+#clickable-icon:hover {
+    -fx-text-fill: #666;
+}
+
+#form-title {
+    -fx-font-weight: bold;
+}
+
+/* tab pane */
+.tab-pane .tab-label {
+    -fx-font-size: 15;
+}
+
+.tab-pane:focused {
+    -fx-background-color: transparent;
+}
+
+.tab-header-area:focused {
+    -fx-background-color: transparent;
+}
+
+.tab:focused {
+    -fx-background-color: transparent;
+}
+
+/* table-view */
+.table-view:focused {
+    -fx-background-color: transparent;
+}
+
+/* scroll-pane */
+
+.scroll-pane {
+    -fx-background-insets: 0;
+    -fx-padding: 0;
+}
+
+.scroll-pane:focused {
+    -fx-background-insets: 0;
+}
+
+.scroll-pane .corner {
+    -fx-background-insets: 0;
+}
+
+/* validation */
+#validation-error {
+    -fx-text-fill: red;
+}
+
+
+/* Account */

 #content-pane-top {
    -fx-background-color:
@ -184,199 +416,20 @@ lower gradient color on tab: dddddd
 }


-/* Splash */
-#splash {
-    -fx-background-color: #ffffff;
-}
-
-/* Main UI */
-#logo-sub-title-label {
+/* TitledGroupBg */
+#titled-group-bg-label {
    -fx-font-weight: bold;
-    -fx-font-size: 24;
-}
-
-#base-content-container {
-    -fx-background-color: #dddddd;
-}
-
-#content-pane {
+    -fx-font-size: 14;
+    -fx-text-fill: #333;
    -fx-background-color: #f4f4f4;
 }
-
-#headline-label {
-    -fx-font-weight: bold;
-    -fx-font-size: 18;
-}
-
-#info-label {
-    -fx-font-size: 14;
-}
-
-#online-label {
-    -fx-fill: green;
-}
-
-#offline-label {
-    -fx-fill: red;
-}
-
-/* main nav */
-
-#nav-button {
-    -fx-cursor: hand;
-    -fx-background-color: transparent;
-}
-
-#nav-button .text {
-    -fx-font-size: 10; 
-}
-
-#nav-button:selected .text {
-   -fx-font-size: 11; 
-    -fx-font-weight: bold;
-}
-
-#nav-alert-button {
-    -fx-background-color: transparent;
-    -fx-cursor: hand;
-    -fx-border-style: none;
-}
-
-#nav-button-label {
-    -fx-font-size: 10;  
-}
-
-#nav-balance-label {
-    -fx-font-weight: bold;
-    -fx-alignment: center;
-}
-
-.text-field:readonly {
-    -fx-text-fill: #000000;
-    -fx-background-color: #FAFAFA;
-}
-
-#feedback-text {
-    -fx-font-size: 10;
-}
-
-#label-url {
-    -fx-cursor: hand;
-    -fx-text-fill: blue;
-    -fx-underline: true;
-}
-
-#icon-button {
-    -fx-cursor: hand;
-    -fx-background-color: transparent;
-}
-
-.copy-icon {
-    -fx-text-fill: #0096c9;
-    -fx-cursor: hand;
-}
-
-.copy-icon:hover {
-    -fx-text-fill: black;
-}
-
-/* Same stlye like non editable textfield. But textfield spans a whole column in a grid, so we use generally textfield */
-#label-with-background {
-    -fx-background-color: #FAFAFA;
-    -fx-border-radius: 4;
-    -fx-padding: 4 4 4 4;
-}
-
-#address-text-field {
-    -fx-cursor: hand;
-    -fx-text-fill: #0096c9;
-}
-#address-text-field:hover {
-    -fx-text-fill: black;
-}
-
-#funds-confidence {
-    -fx-progress-color: dimgrey;
-}
-
-/* .table-view */
-.table-view .table-cell {
-    -fx-alignment: center;
-}
-
-.table-view .column-header .label {
-    -fx-alignment-alignment: center;
-}
-
-.table-view .focus {
-    -fx-alignment: center;
-}
-
-.table-view .text {
-    -fx-fill: black;
-}
-
-.table-view .table-row-cell:selected .table-row-cell:row-selection .table-row-cell:cell-selection .text {
-    -fx-fill: white;
-}
-
-.table-view .table-row-cell:selected .button .text {
-    -fx-fill: black;
-}
-
-.table-view .table-row-cell .copy-icon .text {
-    -fx-fill: #0096c9;
-}
-
-.table-view .table-row-cell .copy-icon .text:hover {
-    -fx-fill: black;
-}
-
-.table-view .table-row-cell:selected .copy-icon .text {
-    -fx-fill: white;
-}
-
-.table-view .table-row-cell:selected .copy-icon .text:hover {
-    -fx-fill: black;
-}
-
-.table-view .table-row-cell .hyperlink .text {
-    -fx-fill: #0096c9;
-}
-
-.table-view .table-row-cell .hyperlink .text:hover {
-    -fx-fill: black;
-}
-
-.table-view .table-row-cell:selected .hyperlink .text {
-    -fx-fill: white;
-}
-
-.table-view .table-row-cell:selected .hyperlink .text:hover {
-    -fx-fill: black;
-}
-
-/* forms */
-#form-header-text {
-    -fx-font-weight: bold;
-    -fx-font-size: 14;
-}
-
-#form-group-title {
-    -fx-font-weight: bold;
-    -fx-font-size: 14;
-    -fx-text-fill: #111;
-    -fx-background-color: #f4f4f4;
-}
-
-#form-group-title-active {
+#titled-group-bg-label-active {
    -fx-font-weight: bold;
    -fx-font-size: 14;
    -fx-text-fill: #0096c9;
    -fx-background-color: #f4f4f4;
 }
-
-#form-group-background {
+#titled-group-bg {
    -fx-body-color: linear-gradient(to bottom, #f4f4f4, #F0F0F0);
    -fx-outer-border: linear-gradient(to bottom, #ddd, #ccc);
    -fx-background-color: -fx-shadow-highlight-color,
@ -386,7 +439,7 @@ lower gradient color on tab: dddddd
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
 }
-#form-group-background-active {
+#titled-group-bg-active {
    -fx-body-color: linear-gradient(to bottom, #f4f4f4, #F0F0F0);
    -fx-outer-border: linear-gradient(to bottom, #9bbdc9, #57acc9);
    -fx-background-color: -fx-shadow-highlight-color,
@ -396,57 +449,3 @@ lower gradient color on tab: dddddd
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;
    -fx-background-radius: 3px, 3px, 2px, 1px;
 }
-#clickable-icon {
-    -fx-text-fill: #0096c9;
-    -fx-cursor: hand;
-}
-
-#clickable-icon:hover {
-    -fx-text-fill: #666;
-}
-
-#form-title {
-    -fx-font-weight: bold;
-}
-
-/* tab pane */
-.tab-pane .tab-label {
-    -fx-font-size: 15;
-}
-
-.tab-pane:focused {
-    -fx-background-color: transparent;
-}
-
-.tab-header-area:focused {
-    -fx-background-color: transparent;
-}
-
-.tab:focused {
-    -fx-background-color: transparent;
-}
-
-/* table-view */
-.table-view:focused {
-    -fx-background-color: transparent;
-}
-
-/* scroll-pane */
-
-.scroll-pane {
-    -fx-background-insets: 0;
-    -fx-padding: 0;
-}
-
-.scroll-pane:focused {
-    -fx-background-insets: 0;
-}
-
-.scroll-pane .corner {
-    -fx-background-insets: 0;
-}
-
-/* validation */
-#validation-error {
-    -fx-text-fill: red;
-}
--- a/src/main/java/io/bitsquare/gui/components/TitledGroupBg.java
+++ b/src/main/java/io/bitsquare/gui/components/TitledGroupBg.java
@ -0,0 +1,75 @@
+/*
+ * This file is part of Bitsquare.
+ *
+ * Bitsquare is free software: you can redistribute it and/or modify it
+ * under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or (at
+ * your option) any later version.
+ *
+ * Bitsquare is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
+ * License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Bitsquare. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+package io.bitsquare.gui.components;
+
+import javafx.beans.property.SimpleStringProperty;
+import javafx.beans.property.StringProperty;
+import javafx.geometry.Insets;
+import javafx.scene.control.*;
+import javafx.scene.layout.*;
+
+import org.slf4j.Logger;
+import org.slf4j.LoggerFactory;
+
+public class TitledGroupBg extends Pane {
+    private static final Logger log = LoggerFactory.getLogger(TitledGroupBg.class);
+
+    private final Label label;
+    private StringProperty text = new SimpleStringProperty();
+
+    ///////////////////////////////////////////////////////////////////////////////////////////
+    // Constructor
+    ///////////////////////////////////////////////////////////////////////////////////////////
+
+    public TitledGroupBg() {
+        GridPane.setMargin(this, new Insets(-10, -10, -10, -10));
+        GridPane.setColumnSpan(this, 2);
+
+        label = new Label();
+        label.textProperty().bind(text);
+        label.setLayoutX(8);
+        label.setLayoutY(-8);
+        label.setPadding(new Insets(0, 7, 0, 5));
+        setActive();
+        getChildren().add(label);
+    }
+
+    public void setInactive() {
+        setId("titled-group-bg");
+        label.setId("titled-group-bg-label");
+    }
+
+    public void setActive() {
+        setId("titled-group-bg-active");
+        label.setId("titled-group-bg-label-active");
+    }
+
+    public String getText() {
+        return text.get();
+    }
+
+    public StringProperty textProperty() {
+        return text;
+    }
+
+    public void setText(String text) {
+        this.text.set(text);
+    }
+
+
+}
--- a/src/main/java/io/bitsquare/gui/main/account/content/changepassword/ChangePasswordView.fxml
+++ b/src/main/java/io/bitsquare/gui/main/account/content/changepassword/ChangePasswordView.fxml
@ -18,6 +18,7 @@
  -->

 <?import io.bitsquare.gui.components.InfoDisplay?>
+<?import io.bitsquare.gui.components.TitledGroupBg?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@ -27,29 +28,7 @@
          AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
          xmlns:fx="http://javafx.com/fxml">

-    <columnConstraints>
-        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
-        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
-    </columnConstraints>
-
-    <rowConstraints>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-    </rowConstraints>
-
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowSpan="5">
-        <GridPane.margin>
-            <Insets bottom="-10.0" left="-10.0" right="-10.0" top="-10.0"/>
-        </GridPane.margin>
-        <Label id="form-group-title-active" text="Change password" layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+    <TitledGroupBg text="Change password" GridPane.rowSpan="5"/>

    <Label text="Enter old password:">
        <GridPane.margin>
@ -83,6 +62,18 @@
    <InfoDisplay gridPane="$root" onAction="#onOpenHelp" rowIndex="4"
                 text="Protect your wallet with a strong password. You need to enter the password any time you withdraw Bitcoin from your trading wallets. You can change the password later in the settings. Open the help menu for more information."/>

+    <columnConstraints>
+        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
+        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
+    </columnConstraints>
+
+    <rowConstraints>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+    </rowConstraints>

 </GridPane>

--- a/src/main/java/io/bitsquare/gui/main/account/content/fiat/FiatAccountView.fxml
+++ b/src/main/java/io/bitsquare/gui/main/account/content/fiat/FiatAccountView.fxml
@ -20,6 +20,7 @@

 <?import io.bitsquare.gui.components.InfoDisplay?>
 <?import io.bitsquare.gui.components.InputTextField?>
+<?import io.bitsquare.gui.components.TitledGroupBg?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@ -29,39 +30,10 @@
          AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
          xmlns:fx="http://javafx.com/fxml">

-    <columnConstraints>
-        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="200.0"/>
-        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
-    </columnConstraints>
-
-    <rowConstraints>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-    </rowConstraints>
-
    <!--
    Setup
    -->
-    <Pane id="form-group-background-active" GridPane.rowIndex="0" GridPane.columnSpan="2" GridPane.rowSpan="8">
-        <GridPane.margin>
-            <Insets bottom="-10.0" left="-10.0" right="-10.0" top="-10.0"/>
-        </GridPane.margin>
-        <Label id="form-group-title-active" text="Setup your payments account" layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+    <TitledGroupBg text="Setup your payments account" GridPane.rowSpan="8"/>

    <Label text="Payments method:" GridPane.rowIndex="0">
        <GridPane.margin>
@ -114,19 +86,14 @@
    <!--
    Manage
    -->
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowIndex="9" GridPane.rowSpan="4">
-        <GridPane.margin>
-            <Insets bottom="-10" left="-10" right="-10" top="20"/>
-        </GridPane.margin>
+    <TitledGroupBg text="Manage payments accounts" GridPane.rowIndex="9" GridPane.rowSpan="4">
        <padding>
            <Insets top="40.0"/>
        </padding>
-        <Label id="form-group-title-active" text="Manage payments accounts" layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+        <GridPane.margin>
+            <Insets bottom="-10" left="-10" right="-10" top="20"/>
+        </GridPane.margin>
+    </TitledGroupBg>

    <Label text="Select payments account:" GridPane.rowIndex="9">
        <GridPane.margin>
@ -147,4 +114,24 @@
    <InfoDisplay gridPane="$root" onAction="#onOpenManageAccountsHelp" rowIndex="11"
                 text="When you change your payments accounts later you need to do the renew the registration and pay the small registration fee."/>

+    <columnConstraints>
+        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="200.0"/>
+        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
+    </columnConstraints>
+
+    <rowConstraints>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+    </rowConstraints>
+
 </GridPane>
--- a/src/main/java/io/bitsquare/gui/main/account/content/password/PasswordView.fxml
+++ b/src/main/java/io/bitsquare/gui/main/account/content/password/PasswordView.fxml
@ -18,6 +18,7 @@
  -->

 <?import io.bitsquare.gui.components.InfoDisplay?>
+<?import io.bitsquare.gui.components.TitledGroupBg?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@ -27,28 +28,7 @@
          AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
          xmlns:fx="http://javafx.com/fxml">

-    <columnConstraints>
-        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
-        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
-    </columnConstraints>
-
-    <rowConstraints>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-    </rowConstraints>
-
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowSpan="4">
-        <GridPane.margin>
-            <Insets bottom="-10.0" left="-10.0" right="-10.0" top="-10.0"/>
-        </GridPane.margin>
-        <Label id="form-group-title-active" text="Setup password" layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+    <TitledGroupBg text="Setup password" GridPane.rowSpan="4"/>

    <Label text="Enter password:">
        <GridPane.margin>
@ -77,6 +57,17 @@
    <InfoDisplay gridPane="$root" onAction="#onOpenHelp" rowIndex="3"
                 text="Protect your wallet with a strong password. You need to enter the password any time you withdraw Bitcoin from your trading wallets. You can change the password later in the settings. Open the help menu for more information."/>

+    <columnConstraints>
+        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
+        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
+    </columnConstraints>
+
+    <rowConstraints>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+    </rowConstraints>

 </GridPane>

--- a/src/main/java/io/bitsquare/gui/main/account/content/registration/RegistrationView.fxml
+++ b/src/main/java/io/bitsquare/gui/main/account/content/registration/RegistrationView.fxml
@ -20,6 +20,7 @@
 <?import io.bitsquare.gui.components.btc.AddressTextField?>
 <?import io.bitsquare.gui.components.btc.BalanceTextField?>
 <?import io.bitsquare.gui.components.InfoDisplay?>
+<?import io.bitsquare.gui.components.TitledGroupBg?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@ -29,29 +30,7 @@
          AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
          xmlns:fx="http://javafx.com/fxml">

-    <columnConstraints>
-        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="200.0"/>
-        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
-    </columnConstraints>
-
-    <rowConstraints>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-    </rowConstraints>
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowSpan="4">
-        <GridPane.margin>
-            <Insets bottom="-10.0" left="-10.0" right="-10.0" top="-10.0"/>
-        </GridPane.margin>
-        <Label id="form-group-title-active" text="Fund the registration fee"
-               layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+    <TitledGroupBg text="Fund the registration fee" GridPane.rowSpan="4"/>

    <Label text="Registration fee:" GridPane.rowIndex="0">
        <GridPane.margin>
@ -94,4 +73,16 @@
        </GridPane.margin>
    </Button>

+    <columnConstraints>
+        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="200.0"/>
+        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
+    </columnConstraints>
+
+    <rowConstraints>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+    </rowConstraints>
 </GridPane>
--- a/src/main/java/io/bitsquare/gui/main/account/content/restrictions/RestrictionsView.fxml
+++ b/src/main/java/io/bitsquare/gui/main/account/content/restrictions/RestrictionsView.fxml
@ -17,6 +17,7 @@
  ~ along with Bitsquare. If not, see <http://www.gnu.org/licenses/>.
  -->
 <?import io.bitsquare.gui.components.InfoDisplay?>
+<?import io.bitsquare.gui.components.TitledGroupBg?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@ -26,41 +27,10 @@
          AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
          xmlns:fx="http://javafx.com/fxml">

-    <columnConstraints>
-        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
-        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
-    </columnConstraints>
-
-    <rowConstraints>
-        <RowConstraints vgrow="SOMETIMES"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-
-        <RowConstraints vgrow="SOMETIMES"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-
-        <RowConstraints vgrow="SOMETIMES"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-
-        <RowConstraints vgrow="NEVER"/>
-
-    </rowConstraints>
-
    <!-- 
    languages
     -->
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowSpan="3">
-        <GridPane.margin>
-            <Insets bottom="-10.0" left="-10.0" right="-10.0" top="-10.0"/>
-        </GridPane.margin>
-        <Label id="form-group-title-active" text="Add languages" layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+    <TitledGroupBg text="Add languages" GridPane.rowSpan="3"/>

    <Label text="Accepted languages:" GridPane.rowIndex="0" GridPane.valignment="TOP">
        <padding>
@ -79,19 +49,15 @@
    <!-- 
    countries
    -->
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowIndex="3" GridPane.rowSpan="3">
-        <GridPane.margin>
-            <Insets bottom="-10" left="-10" right="-10" top="30"/>
-        </GridPane.margin>
+    <TitledGroupBg text="Add countries" GridPane.rowIndex="3" GridPane.rowSpan="3">
        <padding>
            <Insets top="50.0"/>
        </padding>
-        <Label id="form-group-title-active" text="Add countries" layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+        <GridPane.margin>
+            <Insets bottom="-10" left="-10" right="-10" top="30"/>
+        </GridPane.margin>
+    </TitledGroupBg>
+
    <Label text="Accepted countries:" GridPane.rowIndex="3" GridPane.valignment="TOP">
        <GridPane.margin>
            <Insets top="50"/>
@ -121,19 +87,14 @@
    <!-- 
    arbitrators
     -->
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowIndex="6" GridPane.rowSpan="3">
-        <GridPane.margin>
-            <Insets bottom="-10" left="-10" right="-10" top="30"/>
-        </GridPane.margin>
+    <TitledGroupBg text="Add arbitrators" GridPane.rowIndex="6" GridPane.rowSpan="3">
        <padding>
            <Insets top="50.0"/>
        </padding>
-        <Label id="form-group-title-active" text="Add arbitrators" layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+        <GridPane.margin>
+            <Insets bottom="-10" left="-10" right="-10" top="30"/>
+        </GridPane.margin>
+    </TitledGroupBg>
    <Label text="Accepted arbitrators:" GridPane.rowIndex="6" GridPane.valignment="TOP">
        <GridPane.margin>
            <Insets top="50"/>
@ -158,4 +119,27 @@
            <Insets top="20.0"/>
        </GridPane.margin>
    </Button>
+
+    <columnConstraints>
+        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
+        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
+    </columnConstraints>
+
+    <rowConstraints>
+        <RowConstraints vgrow="SOMETIMES"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+
+        <RowConstraints vgrow="SOMETIMES"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+
+        <RowConstraints vgrow="SOMETIMES"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+
+        <RowConstraints vgrow="NEVER"/>
+
+    </rowConstraints>
+
 </GridPane>
--- a/src/main/java/io/bitsquare/gui/main/account/content/seedwords/SeedWordsView.fxml
+++ b/src/main/java/io/bitsquare/gui/main/account/content/seedwords/SeedWordsView.fxml
@ -18,6 +18,7 @@
  -->

 <?import io.bitsquare.gui.components.InfoDisplay?>
+<?import io.bitsquare.gui.components.TitledGroupBg?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.layout.*?>
@ -28,28 +29,7 @@
          AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
          xmlns:fx="http://javafx.com/fxml">

-    <columnConstraints>
-        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
-        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
-    </columnConstraints>
-
-    <rowConstraints>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-        <RowConstraints vgrow="NEVER"/>
-    </rowConstraints>
-    <Pane id="form-group-background-active" GridPane.columnSpan="2" GridPane.rowSpan="4">
-        <GridPane.margin>
-            <Insets bottom="-10.0" left="-10.0" right="-10.0" top="-10.0"/>
-        </GridPane.margin>
-        <Label id="form-group-title-active" text="Backup your wallet seed words"
-               layoutX="8" layoutY="-8">
-            <padding>
-                <Insets left="5" right="7"/>
-            </padding>
-        </Label>
-    </Pane>
+    <TitledGroupBg text="Backup your wallet seed words" GridPane.rowSpan="4"/>

    <Label text="Wallet seed words:" GridPane.columnIndex="0" GridPane.rowIndex="1" GridPane.valignment="TOP">
        <GridPane.margin>
@ -72,4 +52,16 @@
    <InfoDisplay gridPane="$root" onAction="#onOpenHelp" rowIndex="3"
                 text="You can recreate your wallet our of these words when you lose your wallet. Backup it on paper to have better protection against online theft. Open the help menu for more information."/>

+    <columnConstraints>
+        <ColumnConstraints hgrow="SOMETIMES" halignment="RIGHT" minWidth="140.0"/>
+        <ColumnConstraints hgrow="ALWAYS" minWidth="300.0"/>
+    </columnConstraints>
+
+    <rowConstraints>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+        <RowConstraints vgrow="NEVER"/>
+    </rowConstraints>
+
 </GridPane>
--- a/src/main/java/io/bitsquare/gui/main/trade/createoffer/CreateOfferView.fxml
+++ b/src/main/java/io/bitsquare/gui/main/trade/createoffer/CreateOfferView.fxml
@ -21,6 +21,7 @@
 <?import io.bitsquare.gui.components.btc.BalanceTextField?>
 <?import io.bitsquare.gui.components.InfoDisplay?>
 <?import io.bitsquare.gui.components.InputTextField?>
+<?import io.bitsquare.gui.components.TitledGroupBg?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.*?>
 <?import javafx.scene.image.*?>
@ -41,11 +42,12 @@
            </padding>

            <!-- 
-            
            Amount/Price group
-            
             -->
-            <Pane fx:id="priceAmountPane" id="form-group-background-active" GridPane.columnSpan="3"
+            <TitledGroupBg fx:id="priceAmountPane" text="%createOffer.amountPriceBox.title"
+                           GridPane.rowSpan="3" GridPane.columnSpan="3"/>
+
+            <!--   <Pane fx:id="priceAmountPane" id="form-group-background-active" GridPane.columnSpan="3"
                    GridPane.rowSpan="3">
                  <GridPane.margin>
                      <Insets right="-10" bottom="-10" left="-10" top="-10"/>
@ -56,7 +58,7 @@
                          <Insets left="5" right="7"/>
                      </padding>
                  </Label>
-            </Pane>
+              </Pane>  -->

            <VBox alignment="CENTER" spacing="6" GridPane.rowSpan="2">
                <GridPane.margin>
@ -151,11 +153,12 @@
            </Button>

            <!-- 
-           
            Pay funds group 
-           
            -->
-            <Pane fx:id="payFundsPane" id="form-group-background-active" GridPane.columnSpan="3"
+            <TitledGroupBg fx:id="payFundsPane" text="%createOffer.fundsBox.title" GridPane.rowIndex="4"
+                           GridPane.rowSpan="4" GridPane.columnSpan="3" visible="false"/>
+
+            <!--  <Pane fx:id="payFundsPane" id="form-group-background-active" GridPane.columnSpan="3"
                  GridPane.rowIndex="4" GridPane.rowSpan="4" visible="false">
                <GridPane.margin>
                    <Insets right="-10" bottom="-10" left="-10" top="-10"/>
@ -166,7 +169,7 @@
                        <Insets left="5" right="7"/>
                    </padding>
                </Label>
-            </Pane>
+            </Pane>  -->

            <HBox GridPane.rowIndex="4" spacing="4" alignment="CENTER_RIGHT">
                <Label fx:id="totalToPayLabel" text="%createOffer.fundsBox.totalsNeeded" visible="false"/>
@ -215,11 +218,12 @@
            </HBox>

            <!-- 
-            
            Advanced settings group
-            
            -->
-            <Pane fx:id="showDetailsPane" id="form-group-background-active" GridPane.columnSpan="3"
+            <TitledGroupBg fx:id="showDetailsPane" text="%createOffer.advancedBox.title" GridPane.columnSpan="3"
+                           GridPane.rowIndex="9" GridPane.rowSpan="7" visible="false"/>
+
+            <!--     <Pane fx:id="showDetailsPane" id="form-group-background-active" GridPane.columnSpan="3"
                     GridPane.rowIndex="9" GridPane.rowSpan="7" visible="false">
                   <GridPane.margin>
                       <Insets right="-10" bottom="-10" left="-10" top="-10"/>
@ -231,7 +235,7 @@
                           <Insets left="5" right="7"/>
                       </padding>
                   </Label>
-            </Pane>
+               </Pane> -->

            <HBox GridPane.rowIndex="9" spacing="4" alignment="CENTER_RIGHT">
                <Label fx:id="acceptedCountriesLabel" text="%createOffer.advancedBox.countries" visible="false"/>
@ -314,3 +318,4 @@
        </GridPane>
    </ScrollPane>
 </AnchorPane>
+   
--- a/src/main/java/io/bitsquare/gui/main/trade/createoffer/CreateOfferViewCB.java
+++ b/src/main/java/io/bitsquare/gui/main/trade/createoffer/CreateOfferViewCB.java
@ -24,6 +24,7 @@ import io.bitsquare.gui.OverlayController;
 import io.bitsquare.gui.components.InfoDisplay;
 import io.bitsquare.gui.components.InputTextField;
 import io.bitsquare.gui.components.Popups;
+import io.bitsquare.gui.components.TitledGroupBg;
 import io.bitsquare.gui.components.btc.AddressTextField;
 import io.bitsquare.gui.components.btc.BalanceTextField;
 import io.bitsquare.gui.main.help.Help;
@ -86,10 +87,10 @@ public class CreateOfferViewCB extends CachedViewCB<CreateOfferPM> {

    @FXML private InfoDisplay advancedInfoDisplay, fundsBoxInfoDisplay;
    @FXML private ScrollPane scrollPane;
-    @FXML private Pane priceAmountPane, payFundsPane, showDetailsPane;
-    @FXML private Label buyLabel, priceAmountTitleLabel, addressLabel,
-            balanceLabel, payFundsTitleLabel, totalToPayLabel, totalToPayInfoIconLabel,
-            showDetailsTitleLabel, bankAccountTypeLabel, bankAccountCurrencyLabel, bankAccountCountyLabel,
+    @FXML private TitledGroupBg priceAmountPane, payFundsPane, showDetailsPane;
+    @FXML private Label buyLabel, addressLabel,
+            balanceLabel, totalToPayLabel, totalToPayInfoIconLabel,
+            bankAccountTypeLabel, bankAccountCurrencyLabel, bankAccountCountyLabel,
            acceptedCountriesLabel, acceptedCountriesLabelIcon, acceptedLanguagesLabel, acceptedLanguagesLabelIcon,
            acceptedArbitratorsLabel, acceptedArbitratorsLabelIcon, amountBtcLabel,
            priceFiatLabel, volumeFiatLabel, minAmountBtcLabel, priceDescriptionLabel, volumeDescriptionLabel;
@ -177,8 +178,7 @@ public class CreateOfferViewCB extends CachedViewCB<CreateOfferPM> {

    @FXML
    private void onShowPayFundsScreen() {
-        priceAmountPane.setId("form-group-background");
-        priceAmountTitleLabel.setId("form-group-title");
+        priceAmountPane.setInactive();

        showPaymentInfoScreenButton.setVisible(false);

@ -397,8 +397,8 @@ public class CreateOfferViewCB extends CachedViewCB<CreateOfferPM> {
    }

    private void showDetailsScreen() {
-        payFundsPane.setId("form-group-background");
-        payFundsTitleLabel.setId("form-group-title");
+        payFundsPane.setInactive();
+
        scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.AS_NEEDED);
        scrollPane.layout();

@ -411,8 +411,7 @@ public class CreateOfferViewCB extends CachedViewCB<CreateOfferPM> {
    }

    private void hideDetailsScreen() {
-        payFundsPane.setId("form-group-background-active");
-        payFundsTitleLabel.setId("form-group-title-active");
+        payFundsPane.setActive();
        scrollPane.setVbarPolicy(ScrollPane.ScrollBarPolicy.NEVER);
        scrollPane.layout();
        toggleDetailsScreen(false);
@ -428,9 +427,7 @@ public class CreateOfferViewCB extends CachedViewCB<CreateOfferPM> {
        scrollPane.setVmax(visible ? scrollPane.getHeight() : 0);
        scrollPane.setVvalue(visible ? scrollPane.getHeight() : 0);

-
        showDetailsPane.setVisible(visible);
-        showDetailsTitleLabel.setVisible(visible);

        acceptedCountriesLabel.setVisible(visible);
        acceptedCountriesLabelIcon.setVisible(visible);