OZG-7507-7788 ui/ux

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.html

+<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

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.spec.ts

+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();
+  });
+});

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-button/user-form-delete-button.component.ts

+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 {}

alfa-client/libs/admin/user/src/lib/user-form/user-form-delete-dialog-container/user-delete-dialog/user-delete-dialog.component.html

-<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" />
@@ -11,3 +13,4 @@
       data-test-id="dialog-delete-button-host"
     />
   </div>
+</div>

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>

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 {

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();
 

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',
       },