Adjust layout of "add relation" button in relation picker group

Author: tkleinke

desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.html

@@ -10,6 +10,8 @@
      class="circular-button add-relation"
      [class.with-margin]="relations[relationDefinition.name]?.length > 0"
      type="button"
-     (click)="createRelation()">+</div>
+     (click)="createRelation()">
+     <span class="mdi mdi-plus"></span>
+</div>
 <div *ngIf="!isPlusButtonAvailable() && relations[relationDefinition.name]?.length > 1"
      class="relation-picker-group-space"></div>

desktop/src/app/components/docedit/widgets/relationpicker/relation-picker-group.scss

@@ -9,24 +9,33 @@ relation-picker-group {
 
   .add-relation {
     display: block;
-
-    &:hover {
-      color: #fff !important;
-      background-color: #28a745;
-      transition: color .3s ease, background-color .3s ease;
-    }
-  }
-
-  .add-relation {
+    width: 35px;
+    height: 35px;
     position: relative !important;
-    color: #555 !important;
-    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.14) !important;
     user-select: none;
     scroll-margin: 10px;
+    background-color: white;
+    transition: none !important;
 
     &.with-margin {
       margin-top: 5px;
     }
+
+    .mdi {
+      position: relative;
+      bottom: 4px;
+      font-size: 20px;
+      color: black;
+      transition: none !important;
+    }
+
+    &:hover {
+      background-color: $greenbgr;
+
+      .mdi {
+        color: white;
+      }
+    }
   }
 
   .relation-picker-group-space {