Use TitledGroupBg component

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 */
+/* TitledGroupBg */
-#splash {
+#titled-group-bg-label {
-    -fx-background-color: #ffffff;
-}
-
-/* Main UI */
-#logo-sub-title-label {
     -fx-font-weight: bold;
-    -fx-font-size: 24;
+    -fx-font-size: 14;
-}
+    -fx-text-fill: #333;
-
-#base-content-container {
-    -fx-background-color: #dddddd;
-}
-
-#content-pane {
     -fx-background-color: #f4f4f4;
 }
-
+#titled-group-bg-label-active {
-#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 {
     -fx-font-weight: bold;
     -fx-font-size: 14;
     -fx-text-fill: #0096c9;
     -fx-background-color: #f4f4f4;
 }
-
+#titled-group-bg {
-#form-group-background {
     -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;
-}

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);
+    }
+
+
+}

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>
+    <TitledGroupBg text="Change password" GridPane.rowSpan="5"/>
-        <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>
 
     <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>
 

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">
+    <TitledGroupBg text="Setup your payments account" 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>
 
     <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">
+    <TitledGroupBg text="Manage payments accounts" GridPane.rowIndex="9" GridPane.rowSpan="4">
-        <GridPane.margin>
-            <Insets bottom="-10" left="-10" right="-10" top="20"/>
-        </GridPane.margin>
         <padding>
             <Insets top="40.0"/>
         </padding>
-        <Label id="form-group-title-active" text="Manage payments accounts" layoutX="8" layoutY="-8">
+        <GridPane.margin>
-            <padding>
+            <Insets bottom="-10" left="-10" right="-10" top="20"/>
-                <Insets left="5" right="7"/>
+        </GridPane.margin>
-            </padding>
+    </TitledGroupBg>
-        </Label>
-    </Pane>
 
     <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>

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>
+    <TitledGroupBg text="Setup password" GridPane.rowSpan="4"/>
-        <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>
 
     <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>
 

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>
+    <TitledGroupBg text="Fund the registration fee" GridPane.rowSpan="4"/>
-        <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>
 
     <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>

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">
+    <TitledGroupBg text="Add languages" 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>
 
     <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">
+    <TitledGroupBg text="Add countries" GridPane.rowIndex="3" GridPane.rowSpan="3">
-        <GridPane.margin>
-            <Insets bottom="-10" left="-10" right="-10" top="30"/>
-        </GridPane.margin>
         <padding>
             <Insets top="50.0"/>
         </padding>
-        <Label id="form-group-title-active" text="Add countries" layoutX="8" layoutY="-8">
+        <GridPane.margin>
-            <padding>
+            <Insets bottom="-10" left="-10" right="-10" top="30"/>
-                <Insets left="5" right="7"/>
+        </GridPane.margin>
-            </padding>
+    </TitledGroupBg>
-        </Label>
+
-    </Pane>
     <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">
+    <TitledGroupBg text="Add arbitrators" GridPane.rowIndex="6" GridPane.rowSpan="3">
-        <GridPane.margin>
-            <Insets bottom="-10" left="-10" right="-10" top="30"/>
-        </GridPane.margin>
         <padding>
             <Insets top="50.0"/>
         </padding>
-        <Label id="form-group-title-active" text="Add arbitrators" layoutX="8" layoutY="-8">
+        <GridPane.margin>
-            <padding>
+            <Insets bottom="-10" left="-10" right="-10" top="30"/>
-                <Insets left="5" right="7"/>
+        </GridPane.margin>
-            </padding>
+    </TitledGroupBg>
-        </Label>
-    </Pane>
     <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>

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>
+    <TitledGroupBg text="Backup your wallet seed words" GridPane.rowSpan="4"/>
-        <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>
 
     <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>

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>
+   

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 TitledGroupBg priceAmountPane, payFundsPane, showDetailsPane;
-    @FXML private Label buyLabel, priceAmountTitleLabel, addressLabel,
+    @FXML private Label buyLabel, addressLabel,
-            balanceLabel, payFundsTitleLabel, totalToPayLabel, totalToPayInfoIconLabel,
+            balanceLabel, totalToPayLabel, totalToPayInfoIconLabel,
-            showDetailsTitleLabel, bankAccountTypeLabel, bankAccountCurrencyLabel, bankAccountCountyLabel,
+            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");
+        priceAmountPane.setInactive();
-        priceAmountTitleLabel.setId("form-group-title");
 
         showPaymentInfoScreenButton.setVisible(false);
 
@@ -397,8 +397,8 @@ public class CreateOfferViewCB extends CachedViewCB<CreateOfferPM> {
     }
 
     private void showDetailsScreen() {
-        payFundsPane.setId("form-group-background");
+        payFundsPane.setInactive();
-        payFundsTitleLabel.setId("form-group-title");
+
         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");
+        payFundsPane.setActive();
-        payFundsTitleLabel.setId("form-group-title-active");
         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);