From f0b41f3468eba927ef4af752b9e4f04b83527088 Mon Sep 17 00:00:00 2001
From: dominikiwanekhyland
 <141320833+dominikiwanekhyland@users.noreply.github.com>
Date: Tue, 28 May 2024 15:16:27 +0200
Subject: [PATCH] [ACS-8052] inputs for general info for libraries (#3863)

* [ACS-8052] Inputs for general info for libraries

* Fix after CR
---
 .../library-metadata-form.component.html      |  4 ++
 .../library-metadata-form.component.scss      | 46 +++++++++++++++++++
 2 files changed, 50 insertions(+)

diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
index b374adbba9..0112a1cb67 100644
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html
@@ -2,6 +2,7 @@
   <mat-card-content>
     <form [formGroup]="form" autocomplete="off">
       <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
         <input
           matInput
           [cdkTrapFocusAutoCapture]="form.enabled"
@@ -18,10 +19,12 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
         <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
         <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
           <mat-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
@@ -30,6 +33,7 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label class="app-library-metadata-form-field-label">{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
         <textarea
           matInput
           placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
diff --git a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
index bd3a219353..63dc09e2eb 100644
--- a/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
+++ b/projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.scss
@@ -1,5 +1,51 @@
+/* stylelint-disable selector-class-pattern */
+
 app-library-metadata-form {
   .app-library-metadata-form-field {
     width: 100%;
+
+    .mat-mdc-form-field-flex {
+      border-bottom: 1px solid;
+
+      .mat-mdc-form-field-infix {
+        padding-bottom: 3px;
+      }
+    }
+
+    &.mat-form-field-disabled {
+      .mat-mdc-form-field-flex {
+        border-bottom: 1px dotted var(--theme-text-disabled-color);
+      }
+    }
+
+    &.mat-focused {
+      .mat-mdc-form-field-flex {
+        border-bottom: 2px solid var(--theme-blue-button-color);
+      }
+    }
+  }
+
+  .mdc-text-field--disabled.mdc-text-field--filled {
+    background: transparent;
+  }
+
+  .mat-mdc-card-content:first-child {
+    padding: 8px 16px;
+  }
+
+  .app-library-metadata-form-field-label {
+    color: var(--theme-text-color);
+  }
+
+  .mdc-text-field {
+    padding: 0;
+  }
+
+  .mdc-line-ripple {
+    display: none;
+  }
+
+  .mat-mdc-form-field-subscript-wrapper {
+    height: 10px;
   }
 }