diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html
new file mode 100644
index 0000000000000000000000000000000000000000..eeee4c09503631e4831f81841e0b24258bfe7684
--- /dev/null
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html
@@ -0,0 +1,3 @@
+<ods-open-dialog-button variant='outline_error' label="Löschen" dataTestId="delete-user" data-test-id="delete-user-button-host" >
+ <ods-delete-icon icon />
+</ods-open-dialog-button>
\ No newline at end of file
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts
new file mode 100644
index 0000000000000000000000000000000000000000..665f8a81d4037da58454e4c4de6969a9a529a510
--- /dev/null
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UserFormDeleteButtonComponent } from './user-form-delete-button.component';
+
+describe('UserFormDeleteButtonComponent', () => {
+ let component: UserFormDeleteButtonComponent;
+ let fixture: ComponentFixture<UserFormDeleteButtonComponent>;
+
+ beforeEach(async () => {
+ await TestBed.configureTestingModule({
+ imports: [UserFormDeleteButtonComponent]
+ })
+ .compileComponents();
+
+ fixture = TestBed.createComponent(UserFormDeleteButtonComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts
new file mode 100644
index 0000000000000000000000000000000000000000..57b701448666a3ffa14013990fbc1797f9041611
--- /dev/null
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { OpenDialogButtonComponent } from '@ods/component';
+import { DeleteIconComponent } from '@ods/system';
+
+@Component({
+ selector: 'admin-user-form-delete-button',
+ standalone: true,
+ imports: [DeleteIconComponent, OpenDialogButtonComponent],
+ templateUrl: './user-form-delete-button.component.html',
+})
+export class UserFormDeleteButtonComponent {}
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html
index 33e600ca06996f160ef265262bfba2a749e6a2c4..4f866f2631992b052b054baeedaa80520d7bfac6 100644
--- a/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html
@@ -1,13 +1,16 @@
-<p>Sind Sie sicher, dass sie {{ username }} löschen möchten? Hinweis: Die zugewiesenen Vorgänge bleiben bestehen.</p>
+<div class="block bg-background-100 flex flex-col gap-4 p-8">
+ <p>Sind Sie sicher, dass sie {{ username }} löschen möchten?</p>
+ <p>Hinweis: Die zugewiesenen Vorgänge bleiben bestehen.</p>
-<div class="flex justify-between">
- <ods-cancel-dialog-button data-test-id="dialog-cancel-button-host" />
- <ods-button-with-spinner
- [stateResource]="deleteUserStateResource"
- (clickEmitter)="delete.emit()"
- variant="outline"
- text="Löschen"
- dataTestId="dialog-delete"
- data-test-id="dialog-delete-button-host"
- />
+ <div class="flex justify-between">
+ <ods-cancel-dialog-button data-test-id="dialog-cancel-button-host" />
+ <ods-button-with-spinner
+ [stateResource]="deleteUserStateResource"
+ (clickEmitter)="delete.emit()"
+ variant="outline"
+ text="Löschen"
+ dataTestId="dialog-delete"
+ data-test-id="dialog-delete-button-host"
+ />
+ </div>
</div>
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html
index 2dd292b2672fc600b501d9d4385852fc90faf8a2..cce0e1ce4982730ad5f2f8d4ed14241fbc4f7684 100644
--- a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.html
@@ -35,7 +35,7 @@
<div class="flex justify-between">
<admin-user-form-save-button />
@if (formService.isPatch()) {
- <ods-open-dialog-button label="Löschen" dataTestId="delete-user" data-test-id="delete-user-button-host" />
+ <admin-user-form-delete-button />
}
</div>
</div>
diff --git a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts
index 84b983e7b75ab270354c320373c71422d44611ad..fb16e82fa99215878ee5842217bc08330420b1d9 100644
--- a/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts
+++ b/alfa-client/libs/admin/user/src/lib/user-form/user-form.component.ts
@@ -27,9 +27,10 @@ import { DIALOG_COMPONENT } from '@alfa-client/ui';
import { AsyncPipe } from '@angular/common';
import { Component, inject, OnInit } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { OpenDialogButtonComponent, SpinnerComponent } from '@ods/component';
+import { SpinnerComponent } from '@ods/component';
import { Observable } from 'rxjs';
import { UserFormDataComponent } from './user-form-data/user-form-data.component';
+import { UserFormDeleteButtonComponent } from './user-form-delete-button/user-form-delete-button.component';
import { UserDeleteDialogContainerComponent } from './user-form-delete-dialog-container/user-delete-dialog-container.component';
import { UserFormHeadlineComponent } from './user-form-headline/user-form-headline.component';
import { UserFormOrganisationsEinheitListComponent } from './user-form-organisations-einheit-list/user-form-organisations-einheit-list.component';
@@ -52,7 +53,7 @@ import { UserFormService } from './user.formservice';
UserFormOrganisationsEinheitListComponent,
UserFormHeadlineComponent,
UserFormSaveButtonComponent,
- OpenDialogButtonComponent,
+ UserFormDeleteButtonComponent,
],
})
export class UserFormComponent implements OnInit {
diff --git a/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts b/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts
index 8d5df99f45cc8a1da0c62380afba0592fb4f0d0e..9d303e9829d9b8477540cf5833cac4691f70f768 100644
--- a/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts
+++ b/alfa-client/libs/design-component/src/lib/open-dialog-button/open-dialog-button.component.ts
@@ -2,7 +2,7 @@ import { OzgCloudComponentFactory } from '@alfa-client/tech-shared';
import { DIALOG_COMPONENT, OzgcloudDialogService } from '@alfa-client/ui';
import { ComponentType } from '@angular/cdk/portal';
import { Component, ComponentRef, EventEmitter, inject, Injector, Input, Output, ViewContainerRef } from '@angular/core';
-import { ButtonComponent } from '@ods/system';
+import { ButtonComponent, ButtonVariants } from '@ods/system';
import { first } from 'rxjs';
@Component({
@@ -11,11 +11,15 @@ import { first } from 'rxjs';
imports: [ButtonComponent],
template: `<ods-button
(clickEmitter)="open()"
- variant="outline"
- text="{{ label }}"
+ [variant]="variant"
+ [text]="label"
[dataTestId]="dataTestId"
data-test-id="open-dialog"
- />`,
+ >
+ <ng-container icon>
+ <ng-content select="[icon]" />
+ </ng-container>
+ </ods-button>`,
})
export class OpenDialogButtonComponent {
private readonly component: ComponentType<any> = inject(DIALOG_COMPONENT);
@@ -28,6 +32,7 @@ export class OpenDialogButtonComponent {
@Input() label: string;
@Input() dataTestId: string;
+ @Input() variant: ButtonVariants['variant'] = 'primary';
@Output() close: EventEmitter<void> = new EventEmitter();
diff --git a/alfa-client/libs/design-system/src/lib/button/button.component.ts b/alfa-client/libs/design-system/src/lib/button/button.component.ts
index 15a9b7efdc261b462f3dade0f93b2a6902e36507..6b43d3959fb971e40809e1007b7fb60f277a137e 100644
--- a/alfa-client/libs/design-system/src/lib/button/button.component.ts
+++ b/alfa-client/libs/design-system/src/lib/button/button.component.ts
@@ -39,6 +39,8 @@ export const buttonVariants = cva(
primary: 'bg-primary text-whitetext shadow-md hover:enabled:bg-primary-hover focus-visible:bg-primary-hover',
outline:
'border border-primary bg-background-50 text-primary shadow-md hover:enabled:bg-ghost-hover focus-visible:bg-ghost-hover focus-visible:border-background-200',
+ outline_error:
+ 'border border-error bg-background-50 text-error shadow-md hover:enabled:bg-ghost-hover focus-visible:bg-ghost-hover focus-visible:border-background-200',
ghost:
'border border-transparent hover:enabled:bg-ghost-hover text-primary focus-visible:border-background-200 focus-visible:bg-ghost-hover font-semibold [&]:focus-visible:outline-offset-1',
},