button styling

matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html

@@ -59,11 +59,11 @@
             </ng-container>
 
             <ng-container matColumnDef="details">
-                <th mat-header-cell *matHeaderCellDef>
+                <th mat-header-cell class="text-end" *matHeaderCellDef>
                     {{ 'overview.details' | translate }}
                 </th>
-                <td mat-cell *matCellDef="let element">
-                        <span class="btn btn-primary bi bi-zoom-in p-2-4"
+                <td mat-cell class="text-end" *matCellDef="let element">
+                        <span class="btn btn-primary spt-icon-details"
                               data-type="user-tool" data-action="edit" (click)="navigateToPartnerDetails(element)"></span>
                 </td>
             </ng-container>

matsen-tool/src/app/_views/products/product-list/product-list.component.html

@@ -57,11 +57,11 @@
             </ng-container>
 
             <ng-container matColumnDef="details">
-                <th mat-header-cell *matHeaderCellDef>
+                <th mat-header-cell class="text-end" *matHeaderCellDef>
                     {{ 'overview.details' | translate }}
                 </th>
-                <td mat-cell *matCellDef="let element">
-                        <span class="btn btn-primary bi bi-zoom-in p-2-4"
+                <td mat-cell class="text-end" *matCellDef="let element">
+                        <span class="btn btn-primary spt-icon-details"
                               data-type="user-tool" data-action="edit" (click)="navigateToProductDetails(element)"></span>
                 </td>
             </ng-container>

matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html

@@ -79,11 +79,11 @@
             </ng-container>
 
             <ng-container matColumnDef="details">
-                <th mat-header-cell *matHeaderCellDef>
+                <th mat-header-cell class="text-end" *matHeaderCellDef>
                     {{ 'overview.details' | translate }}
                 </th>
-                <td mat-cell *matCellDef="let element">
-                        <span class="btn btn-primary bi bi-zoom-in p-2-4"
+                <td mat-cell class="text-end" *matCellDef="let element">
+                        <span class="btn btn-primary spt-icon-details"
                               data-type="user-tool" data-action="edit" (click)="navigateToSaleDetails(element)"></span>
                 </td>
             </ng-container>

matsen-tool/src/assets/images/icons/details.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="27" height="27" viewBox="0 0 27 27">
+  <defs>
+    <clipPath id="clip-path">
+      <rect id="Rechteck_113" data-name="Rechteck 113" width="27" height="27" transform="translate(-0.124 -0.124)" fill="#fff"/>
+    </clipPath>
+  </defs>
+  <g id="Gruppe_508" data-name="Gruppe 508" transform="translate(0.124 0.124)">
+    <g id="Gruppe_503" data-name="Gruppe 503" clip-path="url(#clip-path)">
+      <path id="Pfad_256" data-name="Pfad 256" d="M18.611,20.024a11.337,11.337,0,1,1,1.415-1.415l6.327,6.328a1,1,0,0,1-1.415,1.413ZM11.336,2a9.335,9.335,0,1,0,9.335,9.335A9.339,9.339,0,0,0,11.336,2m.987,11.322H6.328a1,1,0,1,0,0,2h5.995a1,1,0,1,0,0-2m4-3.331H6.328a1,1,0,0,0,0,2H16.32a1,1,0,0,0,0-2m0-3.331H6.328a1,1,0,1,0,0,2H16.32a1,1,0,0,0,0-2" fill="#fff"/>
+    </g>
+  </g>
+</svg>

matsen-tool/src/assets/scss/_button.scss

@@ -44,7 +44,7 @@ body {
   }
   &.btn {
     &:hover {
-      background: $color-matsen;
+      background-color: $color-matsen;
     }
   }
 }
@@ -87,4 +87,15 @@ body {
   &:hover {
     background: #556169 !important;
   }
-}
+}
+
+.spt-icon-details {
+  width: 48px;
+  height: 48px;
+  background: #2e3a43 url("/assets/images/icons/details.svg") no-repeat center center;
+  background-size: 27px auto;
+  &:hover {
+    background-color: #6d757c !important;
+    border-color: #6d757c !important;
+  }
+}