--- a/client/src/components/systemconfiguration/Systemconfiguration.vue	Fri Feb 15 09:47:57 2019 +0100
+++ b/client/src/components/systemconfiguration/Systemconfiguration.vue	Fri Feb 15 10:44:45 2019 +0100
@@ -9,29 +9,8 @@
         <translate class="headline">Systemconfiguration</translate>
       </h6>
       <div class="card-body text-left">
-        <h5 class="border-bottom pb-3 mb-3">
-          <translate>Color settings</translate>
-        </h5>
-        <div class="d-flex">
-          <div>
-            <h6 class="card-title">
-              <translate>Bottleneck Areas fill-color</translate>
-            </h6>
-            <chrome-picker v-model="fillColor" />
-          </div>
-          <div class="ml-4">
-            <h6 class="card-title">
-              <translate>Bottleneck Areas stroke-color</translate>
-            </h6>
-            <compact-picker v-model="strokeColor" />
-          </div>
-        </div>
-        <div class="mt-4">
-          <a @click.prevent="submit" class="btn btn-info text-white">
-            <translate>Send</translate>
-          </a>
-        </div>
         <PDFTemplates />
+        <ColorSettings />
       </div>
       <!-- card-body -->
     </div>
@@ -60,100 +39,14 @@
  * Author(s):
  * Thomas Junk <thomas.junk@intevation.de>
  * Bernhard Reiter <bernhard@intevation.de>
+ * Markus Kottländer <markus@intevation.de>
  */
-import { Chrome } from "vue-color";
-import { Compact } from "vue-color";
-
-import { HTTP } from "@/lib/http";
-import { displayError } from "@/lib/errors.js";
-import { mapState } from "vuex";
-
 export default {
   name: "systemconfiguration",
-  data() {
-    return {
-      sent: false,
-      strokeColor: { r: 0, g: 0, b: 0, a: 1.0 },
-      fillColor: { r: 0, g: 0, b: 0, a: 1.0 },
-      currentConfig: null
-    };
-  },
   components: {
-    "chrome-picker": Chrome,
-    "compact-picker": Compact,
     Spacer: () => import("../Spacer"),
-    PDFTemplates: () => import("./PDFTemplates")
-  },
-  computed: {
-    ...mapState("application", ["showSidebar"])
-  },
-  methods: {
-    submit() {
-      HTTP.put("/system/style/Bottlenecks/stroke", this.strokeColor.rgba, {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "application/json"
-        }
-      })
-        .then()
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-
-      HTTP.put("/system/style/Bottlenecks/fill", this.fillColor.rgba, {
-        headers: {
-          "X-Gemma-Auth": localStorage.getItem("token"),
-          "Content-type": "application/json"
-        }
-      })
-        .then()
-        .catch(error => {
-          const { status, data } = error.response;
-          displayError({
-            title: this.$gettext("Backend Error"),
-            message: `${status}: ${data.message || data}`
-          });
-        });
-    }
-  },
-  mounted() {
-    HTTP.get("/system/style/Bottlenecks/stroke", {
-      headers: {
-        "X-Gemma-Auth": localStorage.getItem("token"),
-        "Content-type": "application/json"
-      }
-    })
-      .then(response => {
-        this.strokeColor = response.data.colour;
-      })
-      .catch(error => {
-        const { status, data } = error.response;
-        displayError({
-          title: this.$gettext("Backend Error"),
-          message: `${status}: ${data.message || data}`
-        });
-      });
-
-    HTTP.get("/system/style/Bottlenecks/fill", {
-      headers: {
-        "X-Gemma-Auth": localStorage.getItem("token"),
-        "Content-type": "application/json"
-      }
-    })
-      .then(response => {
-        this.fillColor = response.data.colour;
-      })
-      .catch(error => {
-        const { status, data } = error.response;
-        displayError({
-          title: this.$gettext("Backend Error"),
-          message: `${status}: ${data.message || data}`
-        });
-      });
+    PDFTemplates: () => import("./PDFTemplates"),
+    ColorSettings: () => import("./ColorSettings")
   }
 };
 </script>