diff --git a/src/main/java/io/bitsquare/gui/bitsquare.css b/src/main/java/io/bitsquare/gui/bitsquare.css
index 53142cdcce..844de01512 100644
--- 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;
-}
\ No newline at end of file
diff --git a/src/main/java/io/bitsquare/gui/components/TitledGroupBg.java b/src/main/java/io/bitsquare/gui/components/TitledGroupBg.java
new file mode 100644
index 0000000000..97ae34eddf
--- /dev/null
+++ 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 .
+ */
+
+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);
+ }
+
+
+}
diff --git 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
index 9c5c736ca2..a796afdda6 100644
--- 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 @@
-->
+
@@ -27,29 +28,7 @@
AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0"
xmlns:fx="http://javafx.com/fxml">
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+