From b0e6658409cdd558f3066fefa65f6c21c453991f Mon Sep 17 00:00:00 2001
From: Florian Eisenmenger <floeis@MBP-von-Florian.fritz.box>
Date: Thu, 16 May 2024 17:37:30 +0200
Subject: [PATCH] button styling

---
 .../partner-list/partner-list.component.html      |  6 +++---
 .../product-list/product-list.component.html      |  6 +++---
 .../sales/sale-list/sale-list.component.html      |  6 +++---
 matsen-tool/src/assets/images/icons/details.svg   | 12 ++++++++++++
 matsen-tool/src/assets/scss/_button.scss          | 15 +++++++++++++--
 5 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 matsen-tool/src/assets/images/icons/details.svg

diff --git a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html b/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html
index 7f87bb5..741297b 100644
--- a/matsen-tool/src/app/_views/partners/partner-list/partner-list.component.html
+++ b/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>
diff --git a/matsen-tool/src/app/_views/products/product-list/product-list.component.html b/matsen-tool/src/app/_views/products/product-list/product-list.component.html
index 4c39ad8..0007d38 100644
--- a/matsen-tool/src/app/_views/products/product-list/product-list.component.html
+++ b/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>
diff --git a/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html b/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html
index 47323fb..927ec85 100644
--- a/matsen-tool/src/app/_views/sales/sale-list/sale-list.component.html
+++ b/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>
diff --git a/matsen-tool/src/assets/images/icons/details.svg b/matsen-tool/src/assets/images/icons/details.svg
new file mode 100644
index 0000000..abd34a0
--- /dev/null
+++ b/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>
diff --git a/matsen-tool/src/assets/scss/_button.scss b/matsen-tool/src/assets/scss/_button.scss
index 930596d..033a2e8 100644
--- a/matsen-tool/src/assets/scss/_button.scss
+++ b/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;
   }
-}
\ No newline at end of file
+}
+
+.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;
+  }
+}