From aaf6e9db214c181094bacc197cb7af527a8c8844 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Fri, 9 Aug 2024 12:24:47 +0200
Subject: [PATCH] OZG-6302 OZG-6409 Add styling

---
 ...aboration-request-container.component.html | 42 +++++++++++--------
 ...ration-request-container.component.spec.ts |  5 ++-
 .../collaboration-request-form.component.html |  2 +-
 .../src/lib/collaboration.module.ts           |  2 +
 .../form/text-input/text-input.component.ts   |  5 ++-
 .../lib/form/textarea/textarea.component.ts   |  5 ++-
 6 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.html b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.html
index 953df16edd..8d63c6a04b 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.html
+++ b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.html
@@ -1,20 +1,26 @@
-ICON_PLATZHALTER
-<ods-button
-  variant="outline"
-  text="Zuständige Stelle auswählen"
-  dataTestId="zustaendige-stelle-search-button"
->
-  <ods-save-icon icon class="fill-text"></ods-save-icon>
-</ods-button>
+<div class="flex items-center gap-3">
+  <ods-search-icon />
+  <ods-button
+    variant="outline"
+    text="Zuständige Stelle auswählen"
+    dataTestId="zustaendige-stelle-search-button"
+  >
+    <ods-search-icon icon />
+  </ods-button>
+</div>
 
-<alfa-collaboration-request-form></alfa-collaboration-request-form>
+<div class="my-6">
+  <alfa-collaboration-request-form></alfa-collaboration-request-form>
+</div>
 
-<ods-button text="Zuarbeit anfragen" data-test-id="zuarbeit-anfragen-button"></ods-button>
-<ods-button
-  variant="outline"
-  text="Abbrechen"
-  data-test-id="collaboration-request-abbrechen-button"
-  (clickEmitter)="hideFormular.emit()"
->
-  <ods-close-icon icon class="fill-text"></ods-close-icon>
-</ods-button>
+<div class="flex items-center gap-6">
+  <ods-button text="Zuarbeit anfragen" data-test-id="zuarbeit-anfragen-button"></ods-button>
+  <ods-button
+    variant="outline"
+    text="Abbrechen"
+    data-test-id="collaboration-request-abbrechen-button"
+    (clickEmitter)="hideFormular.emit()"
+  >
+    <ods-close-icon icon class="fill-primary"></ods-close-icon>
+  </ods-button>
+</div>
diff --git a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.spec.ts b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.spec.ts
index 0b547d6ce9..df86804749 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.spec.ts
+++ b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component.spec.ts
@@ -1,6 +1,7 @@
 import { dispatchEventFromFixture } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ButtonComponent, CloseIconComponent, SaveIconComponent } from '@ods/system';
+import { ButtonComponent, CloseIconComponent } from '@ods/system';
+import { SearchIconComponent } from 'libs/design-system/src/lib/icons/search-icon/search-icon.component';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
 import { CollaborationRequestContainerComponent } from './collaboration-request-container.component';
@@ -17,7 +18,7 @@ describe('CollaborationRequestContainerComponent', () => {
       imports: [ButtonComponent],
       declarations: [
         CollaborationRequestContainerComponent,
-        MockComponent(SaveIconComponent),
+        MockComponent(SearchIconComponent),
         MockComponent(CloseIconComponent),
         MockComponent(CollaborationRequestFormComponent),
       ],
diff --git a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.html b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.html
index 440c5df943..4a0fc17572 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.html
+++ b/alfa-client/libs/collaboration/src/lib/collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component.html
@@ -1,4 +1,4 @@
-<form [formGroup]="formService.form">
+<form [formGroup]="formService.form" class="flex flex-col gap-2">
   <ods-text-editor
     label="Titel"
     [formControlName]="formServiceClass.FIELD_TITLE"
diff --git a/alfa-client/libs/collaboration/src/lib/collaboration.module.ts b/alfa-client/libs/collaboration/src/lib/collaboration.module.ts
index 86d5bf7073..89b35e5e87 100644
--- a/alfa-client/libs/collaboration/src/lib/collaboration.module.ts
+++ b/alfa-client/libs/collaboration/src/lib/collaboration.module.ts
@@ -9,6 +9,7 @@ import {
   CollaborationIconComponent,
   SaveIconComponent,
 } 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 { CollaborationRequestContainerComponent } from './collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-container.component';
 import { CollaborationRequestFormComponent } from './collaboration-in-vorgang-container/collaboration-request-container/collaboration-request-form/collaboration-request-form.component';
@@ -19,6 +20,7 @@ import { CollaborationRequestFormComponent } from './collaboration-in-vorgang-co
     ButtonComponent,
     SaveIconComponent,
     CloseIconComponent,
+    SearchIconComponent,
     CollaborationSharedModule,
     CollaborationIconComponent,
     TextEditorComponent,
diff --git a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts
index a374f53e94..b476cb65e8 100644
--- a/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts
+++ b/alfa-client/libs/design-system/src/lib/form/text-input/text-input.component.ts
@@ -6,7 +6,10 @@ import { cva, VariantProps } from 'class-variance-authority';
 import { ErrorMessageComponent } from '../error-message/error-message.component';
 
 const textInputVariants = cva(
-  'w-full h-10 rounded-lg border bg-background-50 px-3 py-2 text-base leading-5 text-text focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+  [
+    'w-full box-border rounded-lg border bg-background-50 px-3 py-2 text-base text-text leading-5',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+  ],
   {
     variants: {
       variant: {
diff --git a/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts
index da75590e40..2c4340b9f3 100644
--- a/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts
+++ b/alfa-client/libs/design-system/src/lib/form/textarea/textarea.component.ts
@@ -5,7 +5,10 @@ import { FormControl, ReactiveFormsModule } from '@angular/forms';
 import { VariantProps, cva } from 'class-variance-authority';
 
 const textareaVariants = cva(
-  'block w-full rounded-lg border bg-background-50 px-3 py-2 text-base text-text leading-5 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+  [
+    'w-full box-border rounded-lg border bg-background-50 px-3 py-2 text-base text-text leading-5',
+    'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2',
+  ],
   {
     variants: {
       variant: {
-- 
GitLab