Merge branch '25-button-colors' into 'master'

Resolve "button colors"

Closes #25

See merge request troebs/pycs!14

webui/src/components/base/button-input.vue

@@ -1,12 +1,18 @@
 <template>
-  <button @click="$emit('click', $event)">
+  <button @click="$emit('click', $event)"
+          :class="{
+            error: type === 'error',
+            primary: type === 'primary',
+            secondary: type === 'secondary'
+          }">
     <slot/>
   </button>
 </template>
 
 <script>
 export default {
-  name: "button-input"
+  name: "button-input",
+  props: ['type']
 }
 </script>
 
@@ -17,4 +23,18 @@ button {
   border-radius: 0.75rem;
   cursor: pointer;
 }
+
+.error {
+  background-color: var(--error);
+  color: white;
+}
+
+.primary {
+  background-color: var(--primary);
+  color: white;
+}
+
+.secondary {
+  background-color: var(--secondary);
+}
 </style>

webui/src/components/projects/project-creation-dialog.vue

@@ -24,7 +24,7 @@
     </div>
 
     <div class="footer">
-      <button-input @click="create">
+      <button-input @click="create" type="primary">
         Anlegen
       </button-input>
 

webui/src/components/projects/project-main-window-settings.vue

@@ -19,6 +19,7 @@
         Description
       </textarea-input>
 
+      <div class="text">Delete Project</div>
       <confirmed-button-input @click="deleteProject">
         <template v-slot:first>
           <button-input>
@@ -26,8 +27,9 @@
           </button-input>
         </template>
         <template v-slot:second>
-          <button-input>
-            Do you really want to delete this project?
+          <button-input type="error">
+            Do you really want to delete this project? <br>
+            This cannot be undone.
           </button-input>
         </template>
       </confirmed-button-input>
@@ -109,7 +111,11 @@ h1 {
   margin-bottom: 0.6rem;
 }
 
+.content > div.text {
+  margin-bottom: 0.2rem;
+}
+
 /deep/ .content textarea {
   height: 4rem;
 }
-</style>
+</style>

webui/src/components/projects/project-open-dialog.vue

@@ -24,7 +24,7 @@
     </div>
 
     <div class="footer">
-      <button-input @click="$emit('create', null)">
+      <button-input @click="$emit('create', null)" type="primary">
         new project
       </button-input>
     </div>