OZG-6305 OZG-6463 apply styling

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/collaboration-request-form.component.html

@@ -2,7 +2,7 @@
   [fieldControl]="formService.form.controls.organisationseinheit"
 ></alfa-organisations-einheit-container>
 
-<form [formGroup]="formService.form" class="flex flex-col gap-2">
+<form [formGroup]="formService.form" class="mt-4 flex flex-col gap-2">
   <ods-text-editor
     label="Titel"
     [formControlName]="formServiceClass.FIELD_TITLE"
@@ -15,7 +15,7 @@
   ></ods-textarea-editor>
 </form>
 
-<div class="flex items-center gap-6">
+<div class="mt-4 flex items-center gap-6">
   <ods-button
     text="Zuarbeit anfragen"
     dataTestId="collaboration-request-send-button"

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.html

-<ods-search-icon />
 <ng-container *ngIf="organisationsEinheitResource; else searchButton">
+  <div class="flex items-center gap-3">
+    <ods-search-icon class="flex-none" />
     <alfa-organisations-einheit
       data-test-id="organisations-einheit-in-collaboration"
       [organisationsEinheitResource]="organisationsEinheitResource"
     ></alfa-organisations-einheit>
+  </div>
 </ng-container>
 <ng-template #searchButton>
   <div class="flex items-center gap-3">

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component.ts

@@ -3,13 +3,17 @@ import {
   OrganisationsEinheitService,
 } from '@alfa-client/collaboration-shared';
 import { OzgcloudDialogService } from '@alfa-client/ui';
-import { DialogRef } from '@angular/cdk/dialog';
+import { DialogConfig, DialogRef } from '@angular/cdk/dialog';
 import { Component, Input, ViewContainerRef } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { ResourceUri, getUrl } from '@ngxp/rest';
 import { first } from 'rxjs';
 import { SearchOrganisationsEinheitContainerComponent } from '../../../search-organisations-einheit-container/search-organisations-einheit-container.component';
 
+const DIALOG_CONFIG: DialogConfig = {
+  backdropClass: ['backdrop-blur-1', 'bg-greybackdrop'],
+};
+
 @Component({
   selector: 'alfa-organisations-einheit-container',
   templateUrl: './organisations-einheit-container.component.html',
@@ -32,6 +36,8 @@ export class OrganisationsEinheitContainerComponent {
       this.dialogService.openInCallingComponentContext<SearchOrganisationsEinheitContainerComponent>(
         SearchOrganisationsEinheitContainerComponent,
         this.viewContainerRef,
+        null,
+        DIALOG_CONFIG,
       );
     this.listenToDialogClose();
   }

alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit/organisations-einheit.component.html

-<p>{{ name }}</p>
+<p class="font-bold">{{ name }}</p>
 <p>{{ address }}</p>

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

@@ -10,8 +10,8 @@ import {
   CollaborationIconComponent,
   InstantSearchComponent,
   SaveIconComponent,
+  SearchIconComponent,
 } from '@ods/system';
-import { SearchIconComponent } from 'libs/design-system/src/lib/icons/search-icon/search-icon.component';
 import { CollaborationInVorgangContainerComponent } from './collaboration-in-vorgang-container/collaboration-in-vorgang-container.component';
 import { CollaborationRequestFormComponent } from './collaboration-in-vorgang-container/collaboration-request-form/collaboration-request-form.component';
 import { OrganisationsEinheitContainerComponent } from './collaboration-in-vorgang-container/collaboration-request-form/organisations-einheit-container/organisations-einheit-container.component';

alfa-client/libs/collaboration/src/lib/search-organisations-einheit-container/search-organisations-einheit-form/search-organisations-einheit-form.component.ts

 import { OrganisationsEinheitResource } from '@alfa-client/collaboration-shared';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { InstantSearchResult } from 'libs/design-system/src/lib/instant-search/instant-search/instant-search.model';
+import { InstantSearchResult } from '@ods/system';
 import { SearchOrganisationsEinheitFormService } from '../search-organisations-einheit.formservice';
 
 @Component({

alfa-client/libs/design-system/src/index.ts

@@ -19,8 +19,10 @@ export * from './lib/icons/exclamation-icon/exclamation-icon.component';
 export * from './lib/icons/file-icon/file-icon.component';
 export * from './lib/icons/iconVariants';
 export * from './lib/icons/save-icon/save-icon.component';
+export * from './lib/icons/search-icon/search-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';
 export * from './lib/icons/spinner-icon/spinner-icon.component';
 export * from './lib/icons/stamp-icon/stamp-icon.component';
 export * from './lib/instant-search/instant-search/instant-search.component';
+export * from './lib/instant-search/instant-search/instant-search.model';
 export * from './lib/testbtn/testbtn.component';

alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js

@@ -100,6 +100,12 @@ module.exports = {
         error: 'hsl(var(--color-error))',
         focus: 'hsl(var(--color-focus))',
       },
+      backgroundColor: {
+        greybackdrop: 'rgb(229, 229, 229, 0.95)',
+      },
+      backdropBlur: {
+        1: '1px',
+      },
     },
   },
   plugins: [],