[HIMA-124] Button component

- Created button component in UI library - Changed all markup to use new button
2025-12-31 09:37:15 +01:00 · 2019-03-07 13:12:56 +01:00
parent 9f16eea13b
commit fd4813364f
39 changed files with 322 additions and 404 deletions
--- a/apps/sales/src/app/components/checkout/checkout.component.html
+++ b/apps/sales/src/app/components/checkout/checkout.component.html
@@ -11,8 +11,8 @@
            <h2 class="title-take-now">Jetzt mitnehmen</h2>
            <span class="description description-take-now">Möchten Sie den Artikel jetzt gleich mit nach Hause nehmen?</span>
            <span class="price price-take-now">{{ currentPrice }} {{ currency }}</span>
-            <!-- <a class="btn btn-active" (click)="selectedAction('mitnehmen')">Auswählen</a> -->
-            <a class="btn">Auswählen</a>
+            <!-- <app-button class="modal-btn" (action)="selectedAction('mitnehmen')">Auswählen</app-button> -->
+            <app-button class="modal-btn">Auswählen</app-button>
        </div>
        <div class="option">
            <img class="img" src="../../../assets/images/Package_Icon.svg" alt="package">
@@ -32,8 +32,8 @@
              </ul>
            </div>
            <span class="price price-take-away">{{ currentPrice }} {{ currency }}</span>
-            <!-- <a class="btn" (click)="selectedAction('abholung')">Auswählen</a> -->
-            <a class="btn">Auswählen</a>
+            <!-- <app-button class="modal-btn" (action)="selectedAction('abholung')">Auswählen</app-button> -->
+            <app-button class="modal-btn">Auswählen</app-button>
        </div>
        <div class="option">
            <img class="img" src="../../../assets/images/truck_Icon.svg" alt="truck">
@@ -42,7 +42,7 @@
            <div class="delivery" (click)="openDropdown(dropdown)"><img class="check" src="../../../assets/images/Check-green.svg" alt="arrow">Versandkostenfrei</div>
            <span class="delivery-date">Lieferdatum {{ currentPickUpDate }}</span>
            <span class="price price-order">{{ currentPrice }} {{ currency }}</span>
-            <a class="btn btn-active" (click)="selectedAction('versand')">Auswählen</a>
+            <app-button [primary]="true" class="modal-btn" (action)="selectedAction('versand')">Auswählen</app-button>
        </div>
      </div>
  </div>
@@ -78,7 +78,7 @@
                    </ul>
                </div>
            </div>
-            <a class="btn" (click)="switchSteps(true)">Ändern</a>
+            <app-button (action)="switchSteps(true)">Ändern</app-button>
        </div>
        <div class="line bottom-line"></div>
        <div class="overview">
@@ -90,8 +90,8 @@
        </div>
      </div>
      <div class="modal-footer">
-        <a class="btn secondary" (click)="updateCart()">Weiter einkaufen</a>
-        <a class="btn active" (click)="itemsConfirmed()">Bezahlen</a>
+        <app-button (action)="updateCart()">Weiter einkaufen</app-button>
+        <app-button [primary]="true" (action)="itemsConfirmed()">Bezahlen</app-button>
      </div>
  </div>

--- a/apps/sales/src/app/components/checkout/checkout.component.scss
+++ b/apps/sales/src/app/components/checkout/checkout.component.scss
@@ -123,24 +123,9 @@
        }
      }

-      .btn {
-        font-family: 'Open Sans';
-        font-size: 18px;
-        font-weight: bold;
-        color: #f70400;
-        width: 149px;
-        padding: 12px;
-        cursor: pointer;
+      .modal-btn {
        position: absolute;
        bottom: 25px;
-        
-
-        &-active {
-          background-color: #f70400;
-          border: none;
-          border-radius: 25px;
-          color: #ffffff;
-        }
      }

      .delivery {
@@ -430,13 +415,6 @@
        }
      }
    }
-
-    .btn {
-      font-size: 18px;
-      font-weight: bold;
-      color: #f70400;
-      cursor: pointer;
-    }
  }

  .bottom-line {
@@ -482,35 +460,5 @@
    align-items: center;
    width: 93%;
    margin-top: 30px;
-
-    .btn {
-      font-family: 'Open Sans';
-      font-size: 18px;
-      font-weight: bold;
-      color: #f70400;
-      cursor: pointer;
-      padding: 14px;
-      text-align: center;
-    }
-
-    .secondary {
-      width: 160px;
-
-      &:hover {
-        background-color: #f70400;
-        border: none;
-        border-radius: 25px;
-        color: #ffffff;
-      }
-    }
-
-    .active {
-      background-color: #f70400;
-      border: none;
-      border-radius: 25px;
-      color: #ffffff;
-      margin-left: 30px;
-      width: 121px;
-    }
  }
 }
--- a/apps/sales/src/app/components/process-header/process-header.component.html
+++ b/apps/sales/src/app/components/process-header/process-header.component.html
@@ -19,11 +19,9 @@
          >{{ startProcessLabel }}</span
        >
      </div>
-      <div class="add-process">
-        <a (click)="addProcess()"
-          ><img class="process-icon" src="/assets/images/add-red.svg"
-        /></a>
-      </div>
+      <app-button (action)="addProcess()" class="add-process" [type]="'small'">
+        <img class="process-icon" src="/assets/images/add-red.svg"/>
+      </app-button>
    </div>
  </div>
 </div>
--- a/apps/sales/src/app/components/process-header/process-header.component.scss
+++ b/apps/sales/src/app/components/process-header/process-header.component.scss
@@ -18,6 +18,7 @@

 .process-icon {
    width: 34px;
+    height: 35px;
 }

 .process-grid-container {
@@ -28,8 +29,8 @@

 .add-process {
    position: absolute;
-    top: 102px;
-    right: 15px;
+    top: 97px;
+    right: 8px;
 }

 .add-process-label {
--- a/apps/sales/src/app/components/process-tab/process-tab.component.html
+++ b/apps/sales/src/app/components/process-tab/process-tab.component.html
@@ -24,9 +24,9 @@
      </div>
    </ng-container>
    <div>
-      <a (click)="openDeleteConfirmationDialog()">
-        <img class="process-delete-icon" src="/assets/images/close.svg" />
-      </a>
+      <app-button [type]="'small'" (action)="openDeleteConfirmationDialog()">
+        <img class="process-delete-icon" src="/assets/images/close.svg" alt="x"/>
+      </app-button>
    </div>
  </div>
  <app-process-delete-dialog #deleteporcessdialog (deleted)="deleteProcess($event)" [process]='process'></app-process-delete-dialog>
--- a/apps/sales/src/app/components/process-tab/process-tab.component.scss
+++ b/apps/sales/src/app/components/process-tab/process-tab.component.scss
@@ -9,25 +9,31 @@
  flex-direction: row;
  height: 36px;
  padding-top: 2px;
-  & > * {
-    margin-left: 3px;
-    margin-right: 3px;
-  }
+}
+
+app-button {
+  position: relative;
+  bottom: 2px;
 }

 .process-delete-icon {
-  width: 14px;
-  margin-left: 5px;
-  margin-top: 6px;
+  width: 15px;
+  height: 15px;
+  position: relative;
+  left: 6px;
 }

 .process-cart-icon {
  margin-top: 6px;
  width: 19px;
+  margin-left: 10px;
 }

 .process-leading-icon {
-  width: 25px;
+  width: 24px;
+  height: 24px;
+  position: relative;
+  top: 3px;
 }

 .grid-item {
@@ -44,10 +50,11 @@
 }

 .process-name {
-  font-size: 15px;
+  font-size: 16px;
  font-weight: bold;
  color: $color-active;
  margin-top: 5px;
+  margin-left: 7px;
 }

 .process-cart-number {
--- a/apps/sales/src/app/components/product-details/product-details.component.html
+++ b/apps/sales/src/app/components/product-details/product-details.component.html
@@ -98,8 +98,8 @@
      </div>
    </ng-template>
    <div class="actions align-right">
-        <button class="btn align-right reserve">Reservieren</button>
-        <button class="btn btn-active align-right" (click)="openModal()">Kaufoptionen</button>
+        <app-button>Reservieren</app-button>
+        <app-button [primary]="true" (action)="openModal()">Kaufoptionen</app-button>
    </div>
  </div>
  <div class="other-formats">
--- a/apps/sales/src/app/components/product-details/product-details.component.scss
+++ b/apps/sales/src/app/components/product-details/product-details.component.scss
@@ -182,33 +182,6 @@
    padding-top: 20px;
 }

-.btn {
-    font-family: 'Open Sans';
-    font-size: 18px;
-    font-weight: bold;
-    color: #f70400;
-    width: 149px;
-    padding: 12px;
-    cursor: pointer;
-    
-
-    &-active {
-      background-color: #f70400;
-      border: none;
-      border-radius: 25px;
-      color: #ffffff;
-      width: 174px;
-      text-align: center;
-    }
-}
-
-.reserve {
-    padding-right: 150px;
-    background-color: transparent;
-    outline: none;
-    border: none;
-}
-
 .other-formats {
    display: grid;
    grid-template-columns: max-content max-content auto;
--- a/apps/sales/src/app/modules/cart/cart-module.ts
+++ b/apps/sales/src/app/modules/cart/cart-module.ts
@@ -7,7 +7,7 @@ import { CartReviewComponent } from './components/cart-review/cart-review.compon
 import { PayMethodComponent } from './components/pay-method/pay-method.component';
 import { CartConfirmationComponent } from './components/cart-confirmation/cart-confirmation.component';
 import { RouterModule } from '@angular/router';
-import { CardModule, ModalModule } from '@libs/ui';
+import { CardModule, ModalModule, ButtonModule } from '@libs/ui';

@NgModule({
  declarations: [
@@ -23,7 +23,8 @@ import { CardModule, ModalModule } from '@libs/ui';
    SharedModule,
    RouterModule,
    CardModule,
-    ModalModule
+    ModalModule,
+    ButtonModule
  ]
 })
 export class CartModule {}
--- a/apps/sales/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.html
+++ b/apps/sales/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.html
@@ -1,7 +1,7 @@
 <div class="cart-confirmation-container">
  <div class="header">
    <div class="print">
-      <a>Drucken</a>
+      <app-button [type]="'small'">Drucken</app-button>
    </div>
    <div class="heading">
      <img src="../../../../../assets/images/Check_green_circle.svg" alt="check">
--- a/apps/sales/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.scss
+++ b/apps/sales/src/app/modules/cart/components/cart-confirmation/cart-confirmation.component.scss
@@ -20,15 +20,7 @@
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
-      height: 40px;
-
-      a {
-        font-size: 18px;
-        font-weight: bold;
-        color: $hima-button-color;
-        text-align: left;
-        line-height: 21px;
-      }
+      height: 50px;
    }

    .heading {
--- a/apps/sales/src/app/modules/cart/components/cart-review/cart-review.component.html
+++ b/apps/sales/src/app/modules/cart/components/cart-review/cart-review.component.html
@@ -14,7 +14,7 @@
          <div class="form-group">
            <label class="placeholder form-control-placeholder" for="invoice_addrees">Rechnungsadresse</label>
            <input type="text" id="invoice_addrees" class="input form-control" formControlName="invoice_addrees" required #invoicelInput>
-            <a class="inline-btn" (click)="redirectToBilling()">Ändern</a>
+            <app-button (action)="redirectToBilling()">Ändern</app-button>
          </div>

          <div class="line"></div>
@@ -22,7 +22,7 @@
          <div class="form-group">
            <label class="placeholder form-control-placeholder" for="notification_type">Benachrichtigung</label>
            <input type="text" id="notification_type" class="input form-control" formControlName="notification_type" required #notificationInput>
-            <a class="inline-btn" (click)="redirecrtToUserDetails()">Ändern</a>
+            <app-button (action)="redirecrtToUserDetails()">Ändern</app-button>
          </div>
        </form>
        <div class="line"></div>
@@ -36,7 +36,7 @@
          <div class="form-group">
              <label class="placeholder form-control-placeholder" for="delivery_addrees">Lieferadresse</label>
              <input type="text" id="delivery_addrees" class="input form-control" formControlName="delivery_addrees" required #deliveryInput>
-              <a class="inline-btn">Ändern</a>
+              <app-button>Ändern</app-button>
          </div>
        </form>
        <div class="cart-row" *ngFor="let book of books; let i = index">
@@ -60,7 +60,7 @@
                </ul>
              </div>
            </div>
-            <a class="btn" (click)="recalculate()">Ändern</a>
+            <app-button (action)="recalculate()" class="book-quantity-btn">Ändern</app-button>
          </div>
        </div>
      </div>
@@ -72,7 +72,7 @@
            <span class="overview-price">Zwischensumme {{ booksTotalSumString }} {{ currency }}</span>
            <span class="overview-tax">ohne Versandkosten</span>
          </div>
-          <a class="btn" (click)="next()">Weiter</a>
+          <app-button (action)="next()" [primary]="true">Weiter</app-button>
        </div>
      </div>
 </div>
--- a/apps/sales/src/app/modules/cart/components/cart-review/cart-review.component.scss
+++ b/apps/sales/src/app/modules/cart/components/cart-review/cart-review.component.scss
@@ -46,6 +46,10 @@
    .row-content {
      margin-bottom: 20px;
      margin-top: 5px;
+
+      .book-quantity-btn {
+        margin-right: 15px;
+      }
    }
  }

@@ -153,19 +157,6 @@
    white-space: nowrap;
  }

-  .inline-btn {
-    padding-right: 5px;
-    width: 100px;
-    font-size: 18px;
-    font-weight: bold;
-    color: $hima-button-color;
-    text-align: left;
-    line-height: 21px;
-    text-align: right;
-    display: block;
-    padding-right: 20px;
-  }
-
  .delivery-title{
    padding: 25px 15px 10px 15px;
    text-align: left;
@@ -331,13 +322,6 @@
      }
    }
  }
-
-  .btn {
-    font-size: 18px;
-    font-weight: bold;
-    color: #f70400;
-    cursor: pointer;
-  }
 }


@@ -370,20 +354,6 @@
      text-align: right;
    }
  }
-
-  .btn {
-    font-family: 'Open Sans';
-    font-size: 18px;
-    font-weight: bold;
-    background-color: $hima-button-color;
-    cursor: pointer;
-    text-align: center;
-    border-radius: 25px;
-    color: #ffffff;
-    width: 111px;
-    border: none;
-    padding: 14px 5px 14px 5px;
-  }
 }

 // OLD IPADS
@@ -396,10 +366,6 @@
  .row-content {
    margin-left: 15px;
    justify-content: space-between;
-
-    .btn {
-      margin-right: 36px;
-    }
  }
 }

@@ -408,10 +374,6 @@
  .row-content {
    margin-left: 15px;
    justify-content: space-between;
-
-    .btn {
-      margin-right: 36px;
-    }
  }
 }

@@ -420,9 +382,5 @@
  .row-content {
    margin-left: 15px;
    justify-content: space-between;
-
-    .btn {
-      margin-right: 36px;
-    }
  }
 }
--- a/apps/sales/src/app/modules/cart/components/pay-method/pay-method.component.html
+++ b/apps/sales/src/app/modules/cart/components/pay-method/pay-method.component.html
@@ -7,15 +7,17 @@
    </div>
    <div class="body">
      <div class="actions">
-        <a class="active">
-          <img src="../../../../../assets/images/Empfehlungen_Icon.svg" alt="megafon">
-          Kundenkarte anlegen
-        </a>
-        <!-- <a (click)="confirmOrder()">Paypal</a> -->
-        <a>Karte</a>
-        <a>Kasse</a>
-        <!-- <a (click)="confirmOrder()">Gutschein</a> -->
-        <a (click)="confirmOrder()">Rechnung</a>
+        <app-button [primary]="true">
+          <div>
+              <img src="../../../../../assets/images/Empfehlungen_Icon.svg" alt="megafon">
+              <span>Kundenkarte anlegen</span>
+          </div>
+        </app-button>
+        <!-- <app-button (action)="confirmOrder()">Paypal</app-button> -->
+        <app-button>Karte</app-button>
+        <app-button>Kasse</app-button>
+        <!-- <app-button (action)="confirmOrder()">Gutschein</app-button> -->
+        <app-button (action)="confirmOrder()">Rechnung</app-button>
      </div>
      <div class="descriptions">
        <div>
--- a/apps/sales/src/app/modules/cart/components/pay-method/pay-method.component.scss
+++ b/apps/sales/src/app/modules/cart/components/pay-method/pay-method.component.scss
@@ -31,6 +31,22 @@
    }
  }

+  app-button {
+    div {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      width: 230px;
+    }
+    
+    img {
+      padding-right: 5px;
+      height: 18px;
+      width: 26px;
+      color: #fff;
+    }
+  }
+
  .body {
    margin-top: 40px;
    width: 88%;
@@ -41,29 +57,29 @@
      align-items: center;
      padding-right: 75px;

-      a {
-        font-size: 18px;
-        font-weight: bold;
-        color: $hima-button-color;
+      // a {
+      //   font-size: 18px;
+      //   font-weight: bold;
+      //   color: $hima-button-color;

-        &.active {
-          background-color: $hima-button-color;
-          color: #fff;
-          border-radius: 25px;
-          outline: none;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          padding: 14px 20px;
+      //   &.active {
+      //     background-color: $hima-button-color;
+      //     color: #fff;
+      //     border-radius: 25px;
+      //     outline: none;
+      //     display: flex;
+      //     justify-content: center;
+      //     align-items: center;
+      //     padding: 14px 20px;

-          img {
-            padding-right: 5px;
-            height: 18px;
-            width: 26px;
-            color: #fff;
-          }
-        }
-      }
+      //     img {
+      //       padding-right: 5px;
+      //       height: 18px;
+      //       width: 26px;
+      //       color: #fff;
+      //     }
+      //   }
+      // }
    }

    .descriptions {
--- a/apps/sales/src/app/modules/components.module.ts
+++ b/apps/sales/src/app/modules/components.module.ts
@@ -27,7 +27,7 @@ import { ProcessModule } from './process/process.module';
 import { ProductCardLoadingComponent } from '../components/product-card-loading/product-card-loading.component';
 import { ScrollingModule } from '@angular/cdk/scrolling';
 import { RecommendationsdModule } from './recommendations/recommendations.module';
-import { LoadingModule, ModalModule } from '@libs/ui';
+import { LoadingModule, ModalModule, ButtonModule } from '@libs/ui';

@NgModule({
  declarations: [
@@ -59,7 +59,8 @@ import { LoadingModule, ModalModule } from '@libs/ui';
    ProcessModule,
    RecommendationsdModule,
    LoadingModule,
-    ModalModule
+    ModalModule,
+    ButtonModule
  ],
  exports: [
    HeaderComponent,
--- a/apps/sales/src/app/modules/customer-search/components/billing-address/billing-address.component.html
+++ b/apps/sales/src/app/modules/customer-search/components/billing-address/billing-address.component.html
@@ -33,10 +33,10 @@
    />
    <span class="button">
      <ng-container *ngIf="!entry.editing">
-        <a class="inline-btn" (click)="entry.editing = true">Ändern</a>
+        <app-button (action)="entry.editing = true">Ändern</app-button>
      </ng-container>
      <ng-container *ngIf="entry.editing">
-        <a class="inline-btn" (click)="save(entry)">Speichern</a>
+        <app-button (action)="save(entry)">Speichern</app-button>
      </ng-container>
    </span>
  </app-card>
@@ -58,5 +58,5 @@
 </div>

 <div class="btn-container">
-  <a class="btn active" (click)="continue()">Weiter</a>
+  <app-button [primary]="true" (action)="continue()">Weiter</app-button>
 </div>
--- a/apps/sales/src/app/modules/customer-search/components/billing-address/billing-address.component.scss
+++ b/apps/sales/src/app/modules/customer-search/components/billing-address/billing-address.component.scss
@@ -120,19 +120,6 @@ input {
  line-height: 21px;
 }

-.inline-btn {
-  padding-right: 5px;
-  width: 100px;
-  font-size: 18px;
-  font-weight: bold;
-  color: $hima-button-color;
-  text-align: left;
-  line-height: 21px;
-  text-align: right;
-  display: inline-block;
-  padding-right: 20px;
-}
-
 .clear-icon {
  width: 23px;
  height: 23px;
@@ -143,23 +130,4 @@ input {
  text-align: center;
  margin-top: 4rem;
  margin-bottom: 3rem;
-
-  a:hover {
-    cursor: pointer;
-  }
-
-  a.active {
-    background-color: $hima-button-color;
-    border: none;
-    border-radius: 25px;
-    color: #ffffff;
-    padding: 14px 30px;
-    width: 144px;
-    font-size: 18px;
-    font-weight: bold;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
 }
--- a/apps/sales/src/app/modules/customer-search/components/create-customer-card/create-customer-card.component.html
+++ b/apps/sales/src/app/modules/customer-search/components/create-customer-card/create-customer-card.component.html
@@ -89,7 +89,7 @@
        </div>
      </div>
      <div class="form-group btn-container">
-        <a class="btn" (click)="createUser()">Speichern</a>
+        <app-button [primary]="true" (action)="createUser()">Speichern</app-button>
      </div>
    </form>
  </div>
--- a/apps/sales/src/app/modules/customer-search/components/search-customer-result/search-customer-result.component.html
+++ b/apps/sales/src/app/modules/customer-search/components/search-customer-result/search-customer-result.component.html
@@ -27,8 +27,8 @@
        </div>
      </div>
      <div class="user-actions">
-        <a (click)="details(user)">Details</a>
-        <a (click)="approve(user)" class="active">Vorgang zuweisen</a>
+        <app-button (action)="details(user)">Details</app-button>
+        <app-button [primary]="true" (action)="approve(user)">Vorgang zuweisen</app-button>
      </div>
    </div>
  </div>
--- a/apps/sales/src/app/modules/customer-search/components/search-customer-result/search-customer-result.component.scss
+++ b/apps/sales/src/app/modules/customer-search/components/search-customer-result/search-customer-result.component.scss
@@ -64,30 +64,11 @@
    }

    .user-actions {
-      width: 330px;
+      width: 340px;
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-top: 20px;
-
-      a {
-        font-size: 18px;
-        font-weight: bold;
-        color: $hima-button-color;
-        padding: 15px 25px;
-        text-decoration: none;
-
-        &.active {
-          color: #fff;
-          background-color: $hima-button-color;
-          border-radius: 30px;
-          outline: none;
-        }
-
-        &:hover {
-          cursor: pointer;
-        }
-      }
    }
  }

--- a/apps/sales/src/app/modules/customer-search/customer-search.module.ts
+++ b/apps/sales/src/app/modules/customer-search/customer-search.module.ts
@@ -13,7 +13,13 @@ import { SearchCustomerResultComponent } from './components/search-customer-resu
 import { EditBillingAddressComponent } from './pages/edit-billing-address/edit-billing-address.component';
 import { NewsletterSignupModule } from '../newsletter-signup/newsletter-signup.module';
 import { RouterModule } from '@angular/router';
-import { CardModule, SearchInputModule, InputModule, LoadingModule } from '@libs/ui';
+import { 
+  CardModule,
+  SearchInputModule,
+  InputModule,
+  LoadingModule,
+  ButtonModule 
+} from '@libs/ui';

@NgModule({
  declarations: [
@@ -44,7 +50,8 @@ import { CardModule, SearchInputModule, InputModule, LoadingModule } from '@libs
    CardModule,
    SearchInputModule,
    InputModule,
-    LoadingModule
+    LoadingModule,
+    ButtonModule
  ]
 })
 export class CustomerSearchModule {}
--- a/apps/sales/src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.html
+++ b/apps/sales/src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.html
@@ -21,11 +21,11 @@
  
            <div class="line-actions">
              <ng-container *ngIf="f.name.disabled">
-                <a class="inline-btn" (click)="enableInput('name', nameInput)">Ändern</a>
+                <app-button (action)="enableInput('name', nameInput)">Ändern</app-button>
              </ng-container>
              <ng-container *ngIf="!f.name.disabled">
                <img (click)="clear('name')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.name.errors">
-                <a class="inline-btn save-btn" (click)="enableInput('name', nameInput)">Speichern</a>
+                <app-button (action)="enableInput('name', nameInput)">Ändern</app-button>
              </ng-container>
      
              <div *ngIf="f.name.errors" class="invalid-feedback">
@@ -43,11 +43,11 @@
            </div>
            <div class="line-actions">
              <ng-container *ngIf="f.email.disabled">
-                <a class="inline-btn" (click)="enableInput('email', emailInput)">Ändern</a>
+                <app-button (action)="enableInput('email', emailInput)">Ändern</app-button>
              </ng-container>
              <ng-container *ngIf="!f.email.disabled">
                <img (click)="clear('email')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.email.errors">
-                <a class="inline-btn save-btn" (click)="enableInput('email', emailInput)">Speichern</a>
+                <app-button (action)="enableInput('email', emailInput)">Speichern</app-button>
              </ng-container>
              
              <div *ngIf="f.email.errors" class="invalid-feedback">
@@ -65,11 +65,11 @@
            </div>
            <div class="line-actions">
              <ng-container *ngIf="f.phone_number.disabled">
-                <a class="inline-btn" (click)="enableInput('phone_number', phoneInput)">Ändern</a>
+                <app-button (action)="enableInput('phone_number', phoneInput)">Ändern</app-button>
              </ng-container>
              <ng-container *ngIf="!f.phone_number.disabled">
                <img (click)="clear('phone_number')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.phone_number.errors">
-                <a class="inline-btn save-btn" (click)="enableInput('phone_number', phoneInput)">Speichern</a>
+                <app-button (action)="enableInput('phone_number', phoneInput)">Speichern</app-button>
              </ng-container>
    
              <div *ngIf="f.phone_number.errors" class="invalid-feedback">
@@ -88,11 +88,11 @@
            </div>
            <div class="line-actions">
              <ng-container *ngIf="f.pay.disabled">
-                <a class="inline-btn" (click)="enableInput('pay', payInput)">Ändern</a>
+                <app-button (action)="enableInput('pay', payInput)">Ändern</app-button>
              </ng-container>
              <ng-container *ngIf="!f.pay.disabled">
                <img (click)="clear('pay')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.pay.errors">
-                <a class="inline-btn save-btn" (click)="enableInput('pay', payInput)">Speichern</a>
+                <app-button (action)="enableInput('pay', payInput)">Speichern</app-button>
              </ng-container>
    
              <div *ngIf="f.pay.errors" class="invalid-feedback">
@@ -109,7 +109,7 @@
              <input type="text" id="invoice_addrees" class="input form-control" formControlName="invoice_addrees" [ngClass]="{ 'error-visible': f.invoice_addrees.errors }" required #invoiceInput>
            </div>
            <div class="line-actions">
-              <a class="inline-btn" (click)="navigateToBillingAddress()">Ändern</a>
+              <app-button (action)="navigateToBillingAddress()">Ändern</app-button>
            </div>
          </div>
  
@@ -122,11 +122,11 @@
            </div>
            <div class="line-actions">
              <ng-container *ngIf="f.delivery_address.disabled">
-                <a class="inline-btn" (click)="enableInput('delivery_address', deliveryInput)">Ändern</a>
+                <app-button (action)="enableInput('delivery_address', deliveryInput)">Ändern</app-button>
              </ng-container>
              <ng-container *ngIf="!f.delivery_address.disabled">
                <img (click)="clear('delivery_address')" class="clear-icon" src="../../../assets/images/close.svg" alt="close" *ngIf="!f.delivery_address.errors">
-                <a class="inline-btn save-btn" (click)="enableInput('delivery_address', deliveryInput)">Speichern</a>
+                <app-button (action)="enableInput('delivery_address', deliveryInput)">Speichern</app-button>
              </ng-container>
              
              <div *ngIf="f.delivery_address.errors" class="invalid-feedback">
@@ -138,8 +138,8 @@
          <div class="line"></div>
  
          <div class="btn-container">
-              <a class="btn back" (click)="back()">Zurück </a>
-              <a class="btn active" (click)="approve()">Vorgang zuweisen</a>
+              <app-button (action)="back()">Zurück</app-button>
+              <app-button [primary]="true" (action)="approve()">Vorgang zuweisen</app-button>
          </div>
        </form>
      </div>
--- a/apps/sales/src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.scss
+++ b/apps/sales/src/app/modules/customer-search/pages/edit-customer-card/edit-customer-card.component.scss
@@ -194,19 +194,19 @@
    padding-right: 15px;
  }

-  .inline-btn {
-    padding-right: 5px;
-    width: 100px;
-    font-size: 18px;
-    font-weight: bold;
-    color: $hima-button-color;
-    text-align: left;
-    line-height: 21px;
-    text-align: right;
-    display: block;
-    padding-right: 20px;
-    text-decoration: none;
-  }
+  // .inline-btn {
+  //   padding-right: 5px;
+  //   width: 100px;
+  //   font-size: 18px;
+  //   font-weight: bold;
+  //   color: $hima-button-color;
+  //   text-align: left;
+  //   line-height: 21px;
+  //   text-align: right;
+  //   display: block;
+  //   padding-right: 20px;
+  //   text-decoration: none;
+  // }

  .clear-icon {
    height: 23px;
@@ -218,33 +218,6 @@
    text-align: center;
    margin-top: 4rem;
    margin-bottom: 2rem;
-
-    a:hover {
-      cursor: pointer;
-    }
-
-    a.active {
-      background-color: $hima-button-color;
-      border: none;
-      border-radius: 25px;
-      color: #ffffff;
-      padding: 14px 30px;
-      width: 144px;
-      font-size: 18px;
-      font-weight: bold;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    a.back {
-      color: $hima-button-color;
-      padding: 14px 30px;
-      width: 144px;
-      font-size: 18px;
-      font-weight: bold;
-    }
  }
 }

--- a/apps/sales/src/app/modules/newsletter-signup/newsletter-signup.component.html
+++ b/apps/sales/src/app/modules/newsletter-signup/newsletter-signup.component.html
@@ -51,5 +51,5 @@
    widerrufen.
  </p>

-  <a class="btn active" (click)="confirm()" *ngIf="changes">Abonnieren</a>
+  <app-button [primary]="true" (action)="confirm()" *ngIf="changes">Abonnieren</app-button>
 </div>
--- a/apps/sales/src/app/modules/newsletter-signup/newsletter-signup.component.scss
+++ b/apps/sales/src/app/modules/newsletter-signup/newsletter-signup.component.scss
@@ -114,18 +114,3 @@
  width: 550px;
  opacity: 0.2;
 }
-
-.btn {
-  font-family: 'Open Sans';
-  font-size: 18px;
-  font-weight: bold;
-  text-align: center;
-  border: none;
-  border-radius: 25px;
-  color: #ffffff;
-  background-color: #f70400;
-  width: 149px;
-  padding: 12px;
-  cursor: pointer;
-  bottom: 25px;
-}
--- a/apps/sales/src/app/modules/newsletter-signup/newsletter-signup.module.ts
+++ b/apps/sales/src/app/modules/newsletter-signup/newsletter-signup.module.ts
@@ -3,9 +3,10 @@ import { NgModule } from '@angular/core';
 import { NewsletterSignupComponent } from './newsletter-signup.component';
 import { CommonModule } from '@angular/common';
 import { SharedLibModule } from 'shared/public_api';
+import { ButtonModule } from '@libs/ui';

@NgModule({
-  imports: [CommonModule, SharedLibModule],
+  imports: [CommonModule, SharedLibModule, ButtonModule],
  exports: [NewsletterSignupComponent],
  declarations: [NewsletterSignupComponent],
  providers: []
--- a/apps/sales/src/app/modules/process/process-delete-dialog/process-delete-dialog.component.html
+++ b/apps/sales/src/app/modules/process/process-delete-dialog/process-delete-dialog.component.html
@@ -18,10 +18,10 @@
    </div>
    <div class="actions">
      <div class="align-right">
-        <a class="btn" (click)="closeModal()">Abbrechen</a>
+        <app-button (action)="closeModal()">Abbrechen</app-button>
      </div>
      <div class="align-right">
-        <a class="btn-active" (click)="delete()">Löschen</a>
+        <app-button [primary]="true" (action)="delete()">Löschen</app-button>
      </div>
    </div>
  </div>
--- a/apps/sales/src/app/modules/process/process-delete-dialog/process-delete-dialog.component.scss
+++ b/apps/sales/src/app/modules/process/process-delete-dialog/process-delete-dialog.component.scss
@@ -5,7 +5,7 @@
  display: flex;
  text-align: center;
  flex-direction: column;
-  height: 188px;
+  height: 228px;
  width: 728px;
  justify-content: center;

@@ -35,59 +35,37 @@
    justify-content: space-around;
    text-align: center;

-        .body-content {
-            display: grid;
-            grid-template-columns: auto;
-
-            .process {
-                display: grid;
-                grid-template-columns: min-content auto;
-                padding-top: 25px;
-            }
-
-            .icon img {
-                    width: 32px;
-            }
-
-            .process-name {
-                padding-top: 6px;
-                padding-left: 10px;
-                span {
-                    font-size: 20px;
-                    font-weight: bold;
-                    color: #172062;
-                }
-            }
-        }
-
-    }
-
-    .actions {
+    .body-content {
        display: grid;
-        grid-template-columns: auto min-content;
-        grid-gap: 2vh;
-        padding-bottom: 15px;
-        padding-right: 25px;
+        grid-template-columns: auto;

-        .btn {
-            font-size: 18px;
-            font-weight: bold;
-            color: #f70400;
-            width: 121px;
-            height: 48px;
-            padding: 11px;
-            cursor: pointer;
-            
-    
-            &-active {
-              background-color: #f70400;
-              border: none;
-              border-radius: 25px;
-              color: #ffffff;
-              padding: 11px;
-              padding-right: 25px;
-              padding-left: 25px;
+        .process {
+            display: grid;
+            grid-template-columns: min-content auto;
+            padding-top: 25px;
+        }
+
+        .icon img {
+                width: 32px;
+        }
+
+        .process-name {
+            padding-top: 6px;
+            padding-left: 10px;
+            span {
+                font-size: 20px;
+                font-weight: bold;
+                color: #172062;
            }
        }
    }
+  }
+
+  .actions {
+      display: grid;
+      grid-template-columns: auto min-content;
+      grid-gap: 2vh;
+      padding-bottom: 15px;
+      padding-right: 25px;
+  }
 }
--- a/apps/sales/src/app/modules/process/process.module.ts
+++ b/apps/sales/src/app/modules/process/process.module.ts
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { ProcessDeleteDialogComponent } from './process-delete-dialog/process-delete-dialog.component';
 import { SharedModule } from 'apps/sales/src/app/shared/shared.module';
-import { ModalModule } from '@libs/ui';
+import { ModalModule, ButtonModule } from '@libs/ui';

@NgModule({
  declarations: [ProcessDeleteDialogComponent],
-  imports: [CommonModule, SharedModule, ModalModule],
+  imports: [CommonModule, SharedModule, ModalModule, ButtonModule],
  exports: [ProcessDeleteDialogComponent]
 })
 export class ProcessModule {}
--- a/libs/swagger/src/lib/api/models/item-dto.ts
+++ b/libs/swagger/src/lib/api/models/item-dto.ts
@@ -1,22 +1,22 @@
 /* tslint:disable */
 import { EntityDTO } from './entity-dto';
-import { SpecDTO } from './spec-dto';
 import { TextDTO } from './text-dto';
+import { SpecDTO } from './spec-dto';
 import { AvailabilityDTO } from './availability-dto';
 import { StockInfoDTO } from './stock-info-dto';
 import { ShelfInfoDTO } from './shelf-info-dto';
 export interface ItemDTO extends EntityDTO {

+  /**
+   * Texte
+   */
+  te?: Array<TextDTO>;
+
  /**
   * Rang
   */
  ra?: number;

-  /**
-   * Artikel / Produkttyp
-   */
-  tp?: any;
-
  /**
   * Ist
   */
@@ -33,9 +33,9 @@ export interface ItemDTO extends EntityDTO {
  sp?: Array<SpecDTO>;

  /**
-   * Texte
+   * Artikel / Produkttyp
   */
-  te?: Array<TextDTO>;
+  tp?: any;

  /**
   * Verfügbarkeit
--- a/libs/swagger/src/lib/api/models/query-token-dto.ts
+++ b/libs/swagger/src/lib/api/models/query-token-dto.ts
@@ -6,16 +6,16 @@ import { OrderByDTO } from './order-by-dto';
 */
 export interface QueryTokenDTO {

+  /**
+   * Katalogbereich
+   */
+  catalogType?: any;
+
  /**
   * Lager PK
   */
  stockId?: number;

-  /**
-   * Bezeichner
-   */
-  friendlyName?: string;
-
  /**
   * Eingabewerte z.B. ("qs", "heller süden")
   */
@@ -32,9 +32,9 @@ export interface QueryTokenDTO {
  fuzzy?: number;

  /**
-   * Katalogbereich
+   * Bezeichner
   */
-  catalogType?: any;
+  friendlyName?: string;

  /**
   * Filter
--- a/libs/ui/src/lib/button/button.component.html
+++ b/libs/ui/src/lib/button/button.component.html
@@ -0,0 +1,13 @@
+<button 
+  [ngClass]="{ 
+    'btn-active': primary,
+    'round': round,
+    'small': type == 'small',
+    'medium': type == 'medium', 
+    'big': type == 'big' 
+  }" 
+  (click)="onAction()" 
+  id="{{ id }}"
+>
+  <ng-content></ng-content>
+</button>
--- a/libs/ui/src/lib/button/button.component.scss
+++ b/libs/ui/src/lib/button/button.component.scss
@@ -0,0 +1,52 @@
+button {
+  font-family: 'Open Sans';
+  font-size: 18px;
+  font-weight: bold;
+  color: #f70400;
+  cursor: pointer;
+  background-color: transparent;
+  outline: none;
+  border: none;
+  
+  &.btn-active {
+    background-color: #f70400;
+    border: none;
+    border-radius: 25px;
+    color: #fff;
+    text-align: center;
+
+    &.round {
+      border-radius: 50%;
+      line-height: 21px;
+      padding: 6px 10px;
+
+      &.small {
+        padding:2px 5px;
+      }
+  
+      &.medium {
+        padding: 12px 15px;
+      }
+  
+      &.big {
+        padding: 17px 22px;
+      }
+    }
+  }
+
+  &:focus, &:active {
+    outline: none;
+  }
+
+  &.small {
+    padding: 5px 8px;
+  }
+
+  &.medium {
+    padding: 12px 25px;
+  }
+
+  &.big {
+    padding: 22px 32px;
+  }
+}
--- a/libs/ui/src/lib/button/button.component.spec.ts
+++ b/libs/ui/src/lib/button/button.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ButtonComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/libs/ui/src/lib/button/button.component.ts
+++ b/libs/ui/src/lib/button/button.component.ts
@@ -0,0 +1,25 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter
+} from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  templateUrl: './button.component.html',
+  styleUrls: ['./button.component.scss']
+})
+export class ButtonComponent {
+  @Input() id: string;
+  @Input() primary: boolean;
+  @Input() round: boolean;
+  @Input() type: string = 'medium';
+  @Output() action: EventEmitter<boolean> = new EventEmitter();
+
+  constructor() {}
+
+  onAction() {
+    this.action.emit(true);
+  }
+}
--- a/libs/ui/src/lib/button/button.module.ts
+++ b/libs/ui/src/lib/button/button.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { ButtonComponent } from './button.component';
+import { CommonModule } from '@angular/common';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ButtonComponent],
+  exports: [ButtonComponent]
+})
+export class ButtonModule {}
--- a/libs/ui/src/lib/button/index.ts
+++ b/libs/ui/src/lib/button/index.ts
@@ -0,0 +1,2 @@
+export * from './button.module';
+export * from './button.component';
--- a/libs/ui/src/public_api.ts
+++ b/libs/ui/src/public_api.ts
@@ -7,3 +7,4 @@ export * from './lib/search-input';
 export * from './lib/input';
 export * from './lib/loading';
 export * from './lib/modal';
+export * from './lib/button';