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