Merge pull request 'OZG-6676 OZG-7035 Adjust styling' (#800) from...

Merge pull request 'OZG-6676 OZG-7035 Adjust styling' (#800) from OZG-6676-OZG-7035-styling into master

Reviewed-on: https://git.ozg-sh.de/ozgcloud-app/alfa/pulls/800


Reviewed-by: OZGCloud <ozgcloud@mgm-tp.com>

alfa-client/libs/zustaendige-stelle/src/lib/search-externe-fachstelle-container/search-externe-fachstelle-container.component.html

 <ng-container *ngIf="externeFachstelleResource$ | async as externeFachstelleResource; else searchButton">
-  <alfa-zustaendige-stelle-header title="Externe Fachstelle" [subTitle]="externeFachstelleResource.name">
+  <alfa-zustaendige-stelle-header title="Externe Fachstelle" [subTitle]="externeFachstelleResource.name" [isSubTitleBold]="true">
     <ods-external-unit-icon icon />
-    <div class="flex flex-col text-sm text-text" info>
+    <div class="flex flex-1 flex-col text-sm text-text" info>
       <p>{{ externeFachstelleResource.anschrift }}</p>
       <p>{{ 'Email: ' + externeFachstelleResource.email }}</p>
     </div>

alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/organisations-einheit/organisations-einheit.component.html

-<p class="text-base text-text">{{ address }}</p>
+<p class="text-sm text-text">{{ address }}</p>

alfa-client/libs/zustaendige-stelle/src/lib/search-organisations-einheit-container/search-organisations-einheit-container.component.html

 <ng-container *ngIf="organisationsEinheitResource$ | async as organisationsEinheitResource; else searchButton">
-  <alfa-zustaendige-stelle-header title="Öffentliche Verwaltung" [subTitle]="organisationsEinheitResource.name">
+  <alfa-zustaendige-stelle-header
+    title="Öffentliche Verwaltung"
+    [subTitle]="organisationsEinheitResource.name"
+    [isSubTitleBold]="true"
+  >
     <ods-public-administration-icon icon />
     <alfa-organisations-einheit
       data-test-id="organisations-einheit-in-collaboration"
       [organisationsEinheitResource]="organisationsEinheitResource"
+      class="flex-1"
       info
     />
     <alfa-edit-zustaendige-stelle-button title="Zuständige Stelle auswählen" dataTestId="edit-organisations-einheit-button" />

alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.html

-<div class="flex justify-between">
-  <div class="flex gap-3">
+<div class="flex">
+  <div class="flex flex-1 gap-3">
     <ng-content select="[icon]" />
-    <div class="flex flex-col text-base">
+    <div class="flex flex-1 flex-col text-base">
       <p class="text-primary" data-test-id="zustaendige-stelle-header-title">{{ title }}</p>
-      <p class="text-text" data-test-id="zustaendige-stelle-header-sub-title">{{ subTitle }}</p>
+      <p class="text-text" [class.font-medium]="isSubTitleBold" data-test-id="zustaendige-stelle-header-sub-title">
+        {{ subTitle }}
+      </p>
     </div>
     <ng-content select="[info]" />
   </div>

alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.spec.ts

@@ -45,5 +45,27 @@ describe('ZustaendigeStelleHeaderComponent', () => {
         expect(subTitleElement.innerHTML).toContain('I am test sub title');
       });
     });
+
+    describe('isSubTitleBold', () => {
+      it('should add class if true', () => {
+        component.subTitle = 'I am test sub title';
+        component.isSubTitleBold = true;
+        fixture.detectChanges();
+
+        const subTitleElement: HTMLElement = getElementFromFixture(fixture, subTitleSelector);
+
+        expect(subTitleElement.classList).toContain('font-medium');
+      });
+
+      it('should not add class if false', () => {
+        component.subTitle = 'I am test sub title';
+        component.isSubTitleBold = false;
+        fixture.detectChanges();
+
+        const subTitleElement: HTMLElement = getElementFromFixture(fixture, subTitleSelector);
+
+        expect(subTitleElement.classList).not.toContain('font-medium');
+      });
+    });
   });
 });

alfa-client/libs/zustaendige-stelle/src/lib/zustaendige-stelle-header/zustaendige-stelle-header.component.ts

@@ -7,4 +7,5 @@ import { Component, Input } from '@angular/core';
 export class ZustaendigeStelleHeaderComponent {
   @Input() title: string;
   @Input() subTitle: string;
+  @Input() isSubTitleBold: boolean = false;
 }