OZG-7971 replace forwarding buttons

alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.html

@@ -41,14 +41,13 @@
   >
   </ozgcloud-text-editor>
 
-  <ozgcloud-stroked-button-with-spinner
+  <ods-button-with-spinner
     dataTestId="forward-button"
-    toolTip="Vorgang weiterleiten"
-    tooltipAriaType="aria-labelledby"
-    icon="forward"
+    variant="outline"
     type="submit"
     text="Weiterleiten"
     [stateResource]="forwardStateResource"
   >
-  </ozgcloud-stroked-button-with-spinner>
+    <ods-icon icon name="forward-vorgang" />
+  </ods-button-with-spinner>
 </form>

alfa-client/libs/forwarding/src/lib/forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component.spec.ts

@@ -22,7 +22,7 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { mock } from '@alfa-client/test-utils';
-import { OzgcloudStrokedButtonWithSpinnerComponent, OzgcloudTextEditorComponent } from '@alfa-client/ui';
+import { OzgcloudTextEditorComponent } from '@alfa-client/ui';
 import { VorgangWithEingangResource } from '@alfa-client/vorgang-shared';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule, UntypedFormControl, UntypedFormGroup } from '@angular/forms';
@@ -30,6 +30,8 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIcon } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { IconComponent } from '@ods/system';
 import { createVorgangWithEingangResource } from 'libs/vorgang-shared/test/vorgang';
 import { MockComponent } from 'ng-mocks';
 import { ForwardingByEmailFormComponent } from './forwarding-by-email-form.component';
@@ -53,7 +55,8 @@ describe('ForwardingByEmailFormComponent', () => {
       declarations: [
         ForwardingByEmailFormComponent,
         MatIcon,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(IconComponent),
         MockComponent(OzgcloudTextEditorComponent),
       ],
       imports: [MatFormFieldModule, MatInputModule, ReactiveFormsModule, BrowserAnimationsModule],

alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.html

@@ -23,46 +23,39 @@
     unter der Lizenz sind dem Lizenztext zu entnehmen.
 
 -->
-<p *ngIf="forwarding | hasLink: linkRel.MARK_AS_SUCCESS">
-  Wurde die Weiterleitung des Vorgangs bestätigt?
-</p>
+<p *ngIf="forwarding | hasLink: linkRel.MARK_AS_SUCCESS">Wurde die Weiterleitung des Vorgangs bestätigt?</p>
 
-<div
-  *ngIf="forwarding | hasLink: linkRel.SUCCESSFUL"
-  class="confirmation"
-  data-test-id="successfull-message"
->
+<div *ngIf="forwarding | hasLink: linkRel.SUCCESSFUL" class="confirmation" data-test-id="successfull-message">
   <span>Die Weiterleitung des Vorgangs wurde bestätigt.</span>
   <mat-icon>check_circle_outline</mat-icon>
 </div>
 
-<div
-  *ngIf="forwarding | hasLink: linkRel.FAILED"
-  class="confirmation"
-  data-test-id="failed-message"
->
+<div *ngIf="forwarding | hasLink: linkRel.FAILED" class="confirmation" data-test-id="failed-message">
   <span>Die Weiterleitung des Vorgangs war nicht erfolgreich.</span>
   <mat-icon>info_outline</mat-icon>
 </div>
 
-<div class="buttons">
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="forwarding | hasLink: linkRel.MARK_AS_SUCCESS"
-    data-test-id="mark-as-success-button"
+<div class="flex gap-2">
+  @if (forwarding | hasLink: linkRel.MARK_AS_SUCCESS) {
+    <ods-button-with-spinner
+      dataTestId="mark-as-success-button"
       text="Bestätigen"
-    icon="check_circle_outline"
       [stateResource]="markAsSuccessCommandStateResource$ | async"
       (clickEmitter)="markAsSuccess()"
     >
-  </ozgcloud-stroked-button-with-spinner>
-
-  <ozgcloud-stroked-button-with-spinner
-    *ngIf="forwarding | hasLink: linkRel.MARK_AS_FAIL"
-    data-test-id="mark-as-fail-button"
+      <ods-icon icon name="check-circle" fill="whitetext" />
+    </ods-button-with-spinner>
+  }
+
+  @if (forwarding | hasLink: linkRel.MARK_AS_FAIL) {
+    <ods-button-with-spinner
+      variant="outline"
+      dataTestId="mark-as-fail-button"
       text="Widerrufen"
-    icon="info_outline"
       [stateResource]="markAsFailCommandStateResource$ | async"
       (clickEmitter)="markAsFail()"
     >
-  </ozgcloud-stroked-button-with-spinner>
+      <ods-icon icon name="info" />
+    </ods-button-with-spinner>
+  }
 </div>

alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.scss

@@ -27,15 +27,6 @@
   align-items: center;
 }
 
-.buttons {
-  margin: 16px -8px;
-  display: flex;
-
-  ozgcloud-stroked-button-with-spinner {
-    margin: 0 8px;
-  }
-}
-
 p {
   margin-top: 4px;
 }

alfa-client/libs/forwarding/src/lib/forwarding-by-email-zustellen-container/forwarding-by-email-zustellen-container.component.spec.ts

@@ -24,9 +24,10 @@
 import { ForwardingLinkRel, ForwardingResource, ForwardingService } from '@alfa-client/forwarding-shared';
 import { HasLinkPipe } from '@alfa-client/tech-shared';
 import { mock } from '@alfa-client/test-utils';
-import { OzgcloudStrokedButtonWithSpinnerComponent } from '@alfa-client/ui';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIcon } from '@angular/material/icon';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { IconComponent } from '@ods/system';
 import { createForwardingResource } from 'libs/forwarding-shared/test/forwarding';
 import { MockComponent } from 'ng-mocks';
 import { ForwardingByEmailZustellenContainerComponent } from './forwarding-by-email-zustellen-container.component';
@@ -51,7 +52,8 @@ describe('ForwardingByEmailZustellenContainerComponent', () => {
         HasLinkPipe,
         ForwardingByEmailZustellenContainerComponent,
         MatIcon,
-        MockComponent(OzgcloudStrokedButtonWithSpinnerComponent),
+        MockComponent(ButtonWithSpinnerComponent),
+        MockComponent(IconComponent),
       ],
       providers: [
         {

alfa-client/libs/forwarding/src/lib/forwarding.module.ts

@@ -24,11 +24,13 @@
 import { CommandSharedModule } from '@alfa-client/command-shared';
 import { ForwardingSharedModule } from '@alfa-client/forwarding-shared';
 import { FormatDateWithTimePipe, HasLinkPipe, ToEmbeddedResourcesPipe } from '@alfa-client/tech-shared';
-import { ExpansionPanelComponent, OzgcloudStrokedButtonWithSpinnerComponent, OzgcloudTextEditorComponent, SpinnerComponent, } from '@alfa-client/ui';
+import { ExpansionPanelComponent, OzgcloudTextEditorComponent, SpinnerComponent } from '@alfa-client/ui';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatIcon } from '@angular/material/icon';
+import { ButtonWithSpinnerComponent } from '@ods/component';
+import { IconComponent } from '@ods/system';
 import { ForwardingByEmailContainerComponent } from './forwarding-by-email-container/forwarding-by-email-container.component';
 import { ForwardingByEmailFormComponent } from './forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-form/forwarding-by-email-form.component';
 import { ForwardingByEmailFormularComponent } from './forwarding-by-email-container/forwarding-by-email-formular/forwarding-by-email-formular.component';
@@ -42,7 +44,6 @@ import { ForwardingByEmailZustellenContainerComponent } from './forwarding-by-em
     ForwardingSharedModule,
     CommandSharedModule,
     OzgcloudTextEditorComponent,
-    OzgcloudStrokedButtonWithSpinnerComponent,
     SpinnerComponent,
     FormatDateWithTimePipe,
     MatIcon,
@@ -50,6 +51,8 @@ import { ForwardingByEmailZustellenContainerComponent } from './forwarding-by-em
     ToEmbeddedResourcesPipe,
     ExpansionPanelComponent,
     ReactiveFormsModule,
+    ButtonWithSpinnerComponent,
+    IconComponent,
   ],
   declarations: [
     ForwardingByEmailZustellenContainerComponent,