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