From 2db3d4f3815997bad821291b2d278f80fde7c74d Mon Sep 17 00:00:00 2001
From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com>
Date: Mon, 20 May 2024 09:26:41 +0200
Subject: [PATCH] [ACS-7768] unify inputs and selects across the app - revert
 (#9699)

* Revert "[ACS-7768] unify inputs and selects across the app (#9687)"

This reverts commit 7cfb5ea64a0bd3b9d462b4bd18c57abd0251d9df.

* ACS-7768 Little correction
---
 .../categories-management.component.html      |   6 +-
 .../categories-management.component.scss      |  12 ++
 .../content-metadata.component.scss           |  25 +++
 ...content-node-selector-panel.component.html |   1 +
 .../content-node-share.dialog.html            |   8 +-
 .../content-node-share.dialog.scss            |  46 +++---
 .../src/lib/dialogs/folder.dialog.html        |  10 +-
 .../lib/dialogs/library/library.dialog.html   |   6 +-
 lib/content-services/src/lib/i18n/en.json     |   5 +-
 .../add-permission-panel.component.html       |   4 +-
 .../permission-container.component.scss       |   4 -
 .../user-role-column.component.ts             |   5 +
 ...rch-chip-autocomplete-input.component.html |   4 +-
 ...rch-chip-autocomplete-input.component.scss |  22 ++-
 .../search-date-range.component.html          |  17 +-
 .../search-date-range.component.scss          |  21 ++-
 .../search-input/search-input.component.html  |   2 +-
 .../search-logical-filter.component.html      |  10 +-
 .../search-logical-filter.component.scss      |  10 ++
 .../search-properties.component.html          |  25 ++-
 .../search-properties.component.scss          | 111 ++++++++++++-
 .../search-text/search-text.component.html    |   2 +-
 .../search-text/search-text.component.scss    |  30 +++-
 .../sites-dropdown.component.html             |   2 +-
 .../tags-creator/tags-creator.component.html  |   6 +-
 .../tags-creator/tags-creator.component.scss  |   8 +-
 .../card-view-dateitem.component.html         |  57 +++----
 .../card-view-dateitem.component.scss         |  49 +++---
 .../card-view-selectitem.component.html       |  63 +++----
 .../card-view-selectitem.component.scss       |  23 +--
 .../card-view-textitem.component.html         |   1 +
 .../card-view-textitem.component.scss         |  13 +-
 .../card-view/card-view.component.scss        |  70 ++++++++
 .../src/lib/comments/comments.component.scss  |   1 -
 .../components/login/login.component.scss     |  29 +++-
 .../src/lib/styles/_components-variables.scss |   7 -
 lib/core/src/lib/styles/_mat-selectors.scss   |  11 --
 .../src/lib/styles/_reference-variables.scss  |   6 -
 lib/core/src/lib/styles/material.theme.scss   | 155 ------------------
 39 files changed, 487 insertions(+), 400 deletions(-)

diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.html b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
index 42351c7b430..1f67b7bccc8 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.html
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.html
@@ -1,15 +1,15 @@
 <div class="adf-categories-management">
-    <mat-form-field *ngIf="categoryNameControlVisible" class="adf-category-name-field">
-        <mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
+    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
         <input #categoryNameInput
             matInput
             autocomplete="off"
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
+            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
             adf-auto-focus
             />
         <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
-    </mat-form-field>
+    </div>
     <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span
             *ngFor="let category of categories"
diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
index f9362772d38..eaf93e97a2c 100644
--- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
+++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss
@@ -1,6 +1,18 @@
 .adf-categories-management {
     .adf-category-name-field {
+        justify-content: space-between;
         width: 100%;
+        color: var(--adf-metadata-property-panel-text-color);
+        background: var(--adf-metadata-buttons-background-color);
+        height: 32px;
+        border-radius: 12px;
+        align-items: center;
+
+        input {
+            background-color: transparent;
+            padding: 7px 8px 8px;
+            width: 100%;
+        }
     }
 
     .adf-assigned-categories {
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
index 3664085ab04..f71648c9337 100644
--- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
+++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -9,6 +9,22 @@ $panel-properties-height: 56px !default;
             border: 1px solid var(--adf-metadata-property-panel-border-color);
             border-radius: 12px;
             margin: 12px;
+
+            .adf-property-list .adf-property .adf-property-field {
+                .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
+                    margin-top: 10px;
+                    height: 32px;
+
+                    &:is(textarea) {
+                        padding-top: 6px;
+                    }
+                }
+
+                label {
+                    font-size: 19px;
+                    line-height: 20px;
+                }
+            }
         }
 
         .adf-metadata-properties-header {
@@ -23,6 +39,15 @@ $panel-properties-height: 56px !default;
 
         #{$mat-expansion-panel-body} {
             padding-top: 16px;
+
+            input {
+                border-color: transparent;
+                width: 100%;
+
+                &:focus-visible {
+                    outline: none;
+                }
+            }
         }
 
         .adf-edit-icon-buttons {
diff --git a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
index 575cde7b354..c4e196d26f9 100644
--- a/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
+++ b/lib/content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
@@ -1,5 +1,6 @@
 <div class="adf-content-node-selector-content">
     <mat-form-field floatPlaceholder="never"
+                    appearance="outline"
                     class="adf-content-node-selector-content-input"
                     subscriptSizing="dynamic"
                     *ngIf="showSearch">
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
index f9373d276b0..35775a2787f 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
@@ -31,13 +31,13 @@
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
                     data-automation-id="adf-slide-toggle-checked"
                     class="adf-share-link__date-time-container">
-                    <mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
+                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
                         <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
                         <mat-datepicker-toggle
                             [disabled]="time.disabled"
                             [for]="datePicker"
                             matSuffix
-                            class="adf-share-link__icon">
+                            class="adf-share-link__icon adf-share-link__calender-icon">
                         </mat-datepicker-toggle>
                         <mat-datepicker
                             #datePicker
@@ -75,16 +75,16 @@
                 <mat-form-field
                     subscriptSizing="dynamic"
                     floatLabel="always"
-                    class="adf-full-width"
+                    class="adf-full-width adf-share-link__form--field"
                     data-automation-id="adf-content-share-public-link-field"
                     [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
-                    <mat-label>{{ 'SHARE.PUBLIC-LINK' | translate }}</mat-label>
                     <input
                         #sharedLinkInput
                         data-automation-id="adf-share-link"
                         class="adf-share-link__input"
                         matInput
                         cdkFocusInitial
+                        placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
                         [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
                         formControlName="sharedUrl"
                         readonly="readonly">
diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
index 1b98fe43886..1e755c46a65 100644
--- a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
+++ b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
@@ -34,6 +34,15 @@
 
         &__form {
             padding-top: 8px;
+
+            #{$mat-form-field-infix}:has(.adf-share-link__input) {
+                border-top: 0.9375em solid transparent;
+                height: 16px;
+            }
+
+            &--field {
+                padding-bottom: 16px;
+            }
         }
 
         &__public-content {
@@ -55,12 +64,12 @@
             margin: 8px 0;
 
             &-sharable {
-                margin-bottom: 14px;
+                margin-bottom: 0;
             }
         }
 
         &--sharable-container {
-            margin-bottom: 14px;
+            margin-bottom: 0;
         }
 
         &--header {
@@ -107,30 +116,23 @@
             font-size: 22px;
         }
 
+        &__calender-icon {
+            top: 12px;
+            position: relative;
+            right: -6px;
+
+            svg {
+                height: 18px;
+                width: 18px;
+            }
+        }
+
         &__date-time-container {
-            padding-bottom: 2px;
+            padding-bottom: 20px;
         }
 
         &__border-color {
-            &.adf-full-width {
-                &#{$mat-form-field} {
-                    &#{$mat-form-field-label-always-float} {
-                        &#{$mat-form-field-appearance-outline} {
-                            #{$mat-text-field-outlined}, #{$mat-text-field-outlined}:hover {
-                                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                                    border-color: var(--theme-warn-color-a700);
-                                    border-width: 2px;
-                                }
-
-                                #{$mat-notched-outline-notch} {
-                                    border-left: none;
-                                    border-left-width: 0;
-                                }
-                            }
-                        }
-                    }
-                }
-            }
+            border: 1px solid var(--theme-warn-color-a700);
         }
     }
 
diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.html b/lib/content-services/src/lib/dialogs/folder.dialog.html
index 7a8d44cb3ae..943cf924af5 100644
--- a/lib/content-services/src/lib/dialogs/folder.dialog.html
+++ b/lib/content-services/src/lib/dialogs/folder.dialog.html
@@ -4,7 +4,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
 
 <mat-dialog-content class="adf-folder-dialog-content">
     <form [formGroup]="form" (submit)="submit()">
-        <mat-form-field class="adf-full-width">
+        <mat-form-field class="adf-full-width" appearance="outline">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-name-input"
@@ -15,7 +15,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
                 adf-auto-focus
             />
 
-            <mat-error *ngIf="form.controls['name'].dirty">
+            <mat-hint *ngIf="form.controls['name'].dirty">
                 <span *ngIf="form.controls['name'].errors?.required">
                     {{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
                 </span>
@@ -23,10 +23,10 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
                 <span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
                     {{ form.controls['name'].errors?.message | translate }}
                 </span>
-            </mat-error>
+            </mat-hint>
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width">
+        <mat-form-field class="adf-full-width" appearance="outline">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-title-input"
@@ -36,7 +36,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
             />
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width">
+        <mat-form-field class="adf-full-width" appearance="outline">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
             <textarea
                 id="adf-folder-description-input"
diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.html b/lib/content-services/src/lib/dialogs/library/library.dialog.html
index 090b7a0bb10..12bb2d28aaf 100644
--- a/lib/content-services/src/lib/dialogs/library/library.dialog.html
+++ b/lib/content-services/src/lib/dialogs/library/library.dialog.html
@@ -2,7 +2,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
 
 <mat-dialog-content class="adf-library-dialog-content">
   <form novalidate [formGroup]="form" (submit)="submit()">
-    <mat-form-field class="adf-library-dialog-form-field">
+    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
       <input
         required
@@ -28,7 +28,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field">
+    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
       <input
         required
@@ -46,7 +46,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field">
+    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
       <textarea
         matInput
diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
index 8d31bd33831..df03cb26bcd 100644
--- a/lib/content-services/src/lib/i18n/en.json
+++ b/lib/content-services/src/lib/i18n/en.json
@@ -437,7 +437,10 @@
         "WEEKS": "In the last {{value}} weeks",
         "MONTHS": "In the last {{value}} months"
       },
-      "BETWEEN_PLACEHOLDER": "Start Date - End Date",
+      "BETWEEN_PLACEHOLDERS": {
+        "START_DATE": "Start Date",
+        "END_DATE": "End Date"
+      },
       "ERROR": {
         "IN_LAST": "Value required",
         "START_DATE": {
diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
index 32e8ae486a5..29f1497699a 100644
--- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
+++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
@@ -1,11 +1,11 @@
-<mat-form-field class="adf-permission-search-input">
-    <mat-label>{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}</mat-label>
+<mat-form-field appearance="outline" floatPlaceholder="never" class="adf-permission-search-input">
     <input
         matInput
         id="searchInput"
         [formControl]="searchInput"
         type="text"
         title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
+        placeholder="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
         [value]="searchedWord"
     />
 
diff --git a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss
index 1f4d17be961..4d537fca8e2 100644
--- a/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss
+++ b/lib/content-services/src/lib/permission-manager/components/permission-container/permission-container.component.scss
@@ -10,10 +10,6 @@
             position: relative;
         }
 
-        .adf-datatable-row {
-            min-height: 85px;
-        }
-
         .adf-delete-permission-column {
             min-width: 80px;
 
diff --git a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
index 35d34c6f170..f782216af12 100644
--- a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
+++ b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
@@ -45,8 +45,13 @@ import { RoleModel } from '../../models/role.model';
         `
             .adf-role-selector-field.mat-mdc-form-field {
                 width: 100%;
+                height: 40px;
                 max-width: 200px;
 
+                .mat-mdc-form-field-infix {
+                    padding-top: 8px;
+                }
+
                 .mat-mdc-form-field-subscript-wrapper {
                     display: none;
                 }
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
index 8ef6c65e2dc..4e1b4cfaa4f 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -1,5 +1,4 @@
-<mat-form-field class="adf-chip-list">
-    <mat-label>{{ placeholder | translate }}</mat-label>
+<mat-form-field class="adf-chip-list" appearance="outline">
     <mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
         <mat-chip-row
             class="adf-option-chips adf-autocomplete-added-option-chips"
@@ -17,6 +16,7 @@
             </button>
         </mat-chip-row>
         <input
+            placeholder="{{ placeholder | translate }}"
             aria-controls="adf-search-chip-autocomplete"
             #optionInput
             [formControl]="formCtrl"
diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
index 23f1780d3d0..62ed507e8ad 100644
--- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
+++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
@@ -4,24 +4,28 @@
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
-
-        mat-chip-grid {
-            padding-left: 9px;
-        }
-
-        .adf-search-properties-file-input {
-            margin-left: 0;
-        }
     }
 
     .adf-chip-list:has(#{$mat-notched-outline}) {
-        margin-top: 2px;
+        margin-top: 4px;
     }
 
     #{$mat-form--text-field-infix} {
         border: none;
     }
 
+    .adf-chip-list#{$mat-form-field} {
+        #{$mat-form-field-infix} {
+            padding-top: 14px;
+            padding-bottom: 14px;
+            min-height: unset;
+        }
+    }
+
+    .adf-search-properties-file-input {
+        margin-left: 3px;
+    }
+
     .adf-autocomplete-added-option-chips.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;
diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
index 6bc69dda38a..961d22ffbe8 100644
--- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
+++ b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
@@ -28,19 +28,12 @@
       <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field">
-        <mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDER' | translate }}</mat-label>
+      <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic">
         <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
-          <input
-              matStartDate
-              data-automation-id="date-range-between-start-input"
-              [formControl]="betweenStartDateFormControl"
-              (change)="dateChanged($event, betweenStartDateFormControl)">
-          <input
-              matEndDate
-              data-automation-id="date-range-between-end-input"
-              [formControl]="betweenEndDateFormControl"
-              (change)="dateChanged($event, betweenEndDateFormControl)">
+          <input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
+                 data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
+          <input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
+                 data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
         </mat-date-range-input>
         <mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
         <mat-date-range-picker #picker></mat-date-range-picker>
diff --git a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
index 2dce2f053b4..4e43f9271e4 100644
--- a/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
+++ b/lib/content-services/src/lib/search/components/search-date-range-tabbed/search-date-range/search-date-range.component.scss
@@ -1,9 +1,14 @@
 @import 'styles/mat-selectors';
 
 adf-search-date-range {
+    #{$mat-icon-button}:is(button),
+    #{$mat-icon-button}#{$mat-button-base} {
+        height: 24px;
+    }
+
     .adf-search-date-range-container {
         margin-top: 20px;
-        padding: 10px 10px 0;
+        padding: 10px;
 
         .adf-search-date-range-form-field-select {
             width: 180px;
@@ -18,11 +23,10 @@ adf-search-date-range {
 
             &-date {
                 margin-top: 8px;
-                align-items: flex-start;
+            }
 
-                mat-radio-button {
-                    margin-top: 19px;
-                }
+            #{$mat-select-arrow-wrapper} {
+                height: unset;
             }
 
             .adf-search-date-range-input-field {
@@ -32,9 +36,12 @@ adf-search-date-range {
             .adf-search-date-range-form-field {
                 padding-left: 10px;
                 flex: 1;
+                margin-bottom: 12px;
 
-                #{$mat-date-range-input-container} {
-                    justify-content: space-between;
+                #{$mat-form-field-flex} {
+                    #{$mat-form-field-infix} {
+                        padding: 0.375em 0 4px;
+                    }
                 }
             }
         }
diff --git a/lib/content-services/src/lib/search/components/search-input/search-input.component.html b/lib/content-services/src/lib/search/components/search-input/search-input.component.html
index 2a7141d6486..2adba706036 100644
--- a/lib/content-services/src/lib/search/components/search-input/search-input.component.html
+++ b/lib/content-services/src/lib/search/components/search-input/search-input.component.html
@@ -1,5 +1,5 @@
 <div class="adf-search-input-container">
-    <mat-form-field>
+    <mat-form-field appearance="outline">
         <mat-label *ngIf="label">{{ label | translate }}</mat-label>
         <input matInput [placeholder]="placeholder | translate" [value]="value" (change)="onSearchInputChanged($event)" />
     </mat-form-field>
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
index 73f07bf540f..4ba39e54bcc 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.html
@@ -1,12 +1,10 @@
 <div class="adf-search-logical-filter-container">
-    <mat-form-field *ngFor="let field of fields" class="adf-search-input">
+    <div *ngFor="let field of fields" class="adf-search-input">
         <mat-label data-automation-id="adf-search-input-label">{{('SEARCH.LOGICAL_SEARCH.' + field + '_LABEL') | translate}}</mat-label>
-        <input
-            type="text"
-            matInput
+        <input type="text"
             [(ngModel)]="searchCondition[LogicalSearchFields[field]]"
+            placeholder="{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}"
             [attr.aria-label]="('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate"
             (change)="onInputChange()"/>
-        <mat-hint>{{ ('SEARCH.LOGICAL_SEARCH.' + field + '_HINT') | translate }}</mat-hint>
-    </mat-form-field>
+    </div>
 </div>
diff --git a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss
index 97a69dd33c5..a467b7e956d 100644
--- a/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss
+++ b/lib/content-services/src/lib/search/components/search-logical-filter/search-logical-filter.component.scss
@@ -7,5 +7,15 @@
         &:last-child {
             padding: 0;
         }
+
+        input {
+            height: 25px;
+            border: 1px solid var(--adf-theme-mat-grey-color-a400);
+            border-radius: 5px;
+            margin-top: 5px;
+            padding: 5px;
+            font-size: 14px;
+            color: var(--adf-theme-foreground-text-color);
+        }
     }
 }
diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html
index 739ee4e0dce..37e8ce454f9 100644
--- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html
+++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.html
@@ -20,20 +20,17 @@
                 </mat-option>
             </mat-select>
         </mat-form-field>
-        <mat-form-field subscriptSizing="dynamic" class="adf-search-properties-file-size">
-            <mat-label>{{ 'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate }}</mat-label>
-            <input
-                matInput
-                [formControl]="form.controls.fileSize"
-                type="number"
-                min="0"
-                step="any"
-                (input)="narrowDownAllowedCharacters($event)"
-                (keydown)="preventIncorrectNumberCharacters($event)"
-                id="adf-search-properties-file-size"
-                (blur)="clearNumberFieldWhenInvalid($event)"
-                data-automation-id="adf-search-properties-file-size-input" />
-        </mat-form-field>
+        <input
+            [formControl]="form.controls.fileSize"
+            type="number"
+            min="0"
+            step="any"
+            (input)="narrowDownAllowedCharacters($event)"
+            (keydown)="preventIncorrectNumberCharacters($event)"
+            id="adf-search-properties-file-size"
+            [placeholder]="'SEARCH.SEARCH_PROPERTIES.FILE_SIZE_PLACEHOLDER' | translate"
+            (blur)="clearNumberFieldWhenInvalid($event)"
+            data-automation-id="adf-search-properties-file-size-input" />
         <mat-form-field class="adf-search-properties-file-size-unit" subscriptSizing="dynamic">
             <mat-select
                 [formControl]="form.controls.fileSizeUnit"
diff --git a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
index b1d9bd79fee..4cc4126ba76 100644
--- a/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
+++ b/lib/content-services/src/lib/search/components/search-properties/search-properties.component.scss
@@ -7,16 +7,115 @@ adf-search-properties {
             .adf-search-properties-file-size-label {
                 margin-top: 4px;
                 display: block;
-                margin-bottom: 3px;
             }
 
-            .adf-search-properties-file-size {
-                margin-left: 8px;
-                margin-right: 8px;
+            #{$mat-text-field--no-label} {
+                #{$mat-form-field-infix} {
+                    padding-top: 9px;
+                    padding-bottom: 9px;
+                    display: inline-block;
+                }
             }
 
-            .adf-search-properties-file-size-operator {
-                min-width: 100px;
+            #{$mat-form-field-infix} {
+                height: 37.5px;
+                min-height: 37.5px;
+                display: inline-block;
+            }
+
+            #{$mat-select-trigger} {
+                height: 17.5px;
+            }
+
+            #{$mat-select-arrow-wrapper} {
+                width: 16px;
+            }
+
+            #{$mat-form-field-underline} {
+                &::before {
+                    display: none;
+                }
+            }
+
+            #{$mat-select-arrow} {
+                margin-left: 5px;
+            }
+
+            #{$mat-form-field} {
+                margin-bottom: 18px;
+            }
+        }
+
+        adf-search-chip-autocomplete-input {
+            display: block;
+
+            #{$mat-text-field-outlined} {
+                &-start,
+                &-end {
+                    border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
+                    border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400);
+                }
+
+                &-start {
+                    border-left: 1px solid var(--adf-theme-mat-grey-color-a400);
+                }
+
+                &-end {
+                    border-right: 1px solid var(--adf-theme-mat-grey-color-a400);
+                }
+            }
+
+            #{$mat-focused} {
+                #{$mat-text-field-outlined} {
+                    outline: 2px auto -webkit-focus-ring-color;
+                }
+            }
+
+            #{$mat-form-field-appearance-outline} {
+                #{$mat-text-field-outlined-thick} {
+                    #{$mat-text-field-outlined} {
+                        &-start,
+                        &-end {
+                            border-width: 1px;
+                        }
+                    }
+                }
+            }
+
+            #{$mat-notched-outline-leading} {
+                border-color: var(--adf-theme-foreground-text-color-027);
+            }
+
+            #{$mat-notched-outline-trailing} {
+                border-color: var(--adf-theme-foreground-text-color-027);
+            }
+        }
+    }
+
+    input,
+    .mat-form-field-infix.mat-form-field-infix {
+        height: 25px;
+        border: 1px solid var(--adf-theme-mat-grey-color-a400);
+        border-radius: 5px;
+        margin-top: 5px;
+        padding: 5px;
+        font-size: 14px;
+        color: var(--adf-theme-foreground-text-color);
+        margin-left: 8px;
+        margin-right: 8px;
+    }
+
+    .adf-search-properties-file-size-operator,
+    .adf-search-properties-file-size-unit {
+        #{$mat-form-field-infix} {
+            border: 1px solid var(--adf-theme-mat-grey-color-a400);
+            border-radius: 5px;
+            padding: 9px;
+        }
+
+        &#{$mat-focused} {
+            #{$mat-form-field-infix} {
+                outline: 2px auto -webkit-focus-ring-color;
             }
         }
     }
diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.html b/lib/content-services/src/lib/search/components/search-text/search-text.component.html
index 48869ad06a0..3b97888693e 100644
--- a/lib/content-services/src/lib/search/components/search-text/search-text.component.html
+++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.html
@@ -1,6 +1,6 @@
 <mat-form-field
     class="adf-search-text-form-field"
-    subscriptSizing="dynamic">
+    appearance="outline">
     <mat-label>{{ settings?.placeholder | translate }}</mat-label>
     <input
         matInput
diff --git a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
index f3e0e593b84..919d87d4493 100644
--- a/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
+++ b/lib/content-services/src/lib/search/components/search-text/search-text.component.scss
@@ -1,8 +1,34 @@
 @import 'styles/mat-selectors';
 
 .adf-search-text {
-    display: block;
-    padding-bottom: 10px;
+    padding: 0;
+
+    #{$mat-form-field-wrapper} {
+        margin-top: -5px;
+        padding: 0;
+
+        #{$mat-form-field-infix} {
+            padding-bottom: 6px;
+        }
+    }
+
+    #{$mat-notched-outline} {
+        #{$mat-notched-outline-trailing},
+        #{$mat-notched-outline-notch} {
+            border-top: 0 solid;
+            border-left: 0 solid;
+            border-right: 0 solid;
+            border-bottom: 1px solid var(--adf-theme-foreground-secondary-text-color);
+
+            #{$mat-floating-label} {
+                left: 0;
+            }
+        }
+    }
+
+    #{$mat-notched-outline-leading}  {
+        display: none;
+    }
 
     .adf-search-text-form-field {
         width: 100%;
diff --git a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
index de5a9f1b715..c4e853c17f3 100644
--- a/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
+++ b/lib/content-services/src/lib/site-dropdown/sites-dropdown.component.html
@@ -1,5 +1,5 @@
 <div id="site-dropdown-container" class="adf-site-dropdown-container">
-    <mat-form-field class="adf-sites-dropdown-form-field" subscriptSizing="dynamic">
+    <mat-form-field class="adf-sites-dropdown-form-field" appearance="outline" subscriptSizing="dynamic">
         <mat-label>{{ 'NODE_SELECTOR.LOCATION' | translate }}</mat-label>
         <mat-select
             adf-infinite-select-scroll
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
index 0fc0cb2ba04..9e5ff198449 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.html
@@ -1,6 +1,5 @@
 <div class="adf-tags-creation">
-    <mat-form-field *ngIf="tagNameControlVisible" class="adf-tag-name-field">
-        <mat-label>{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}</mat-label>
+    <div *ngIf="tagNameControlVisible" class="adf-tag-name-field">
         <input
             #tagNameInput
             class="adf-tag-search-field"
@@ -9,9 +8,10 @@
             [formControl]="tagNameControl"
             (keyup.enter)="addTag()"
             adf-auto-focus
+            placeholder="{{ 'TAG.TAGS_CREATOR.TAG_SEARCH_PLACEHOLDER' | translate }}"
         />
         <mat-error *ngIf="tagNameControl.invalid && tagNameControl.touched">{{ tagNameErrorMessageKey | translate }} </mat-error>
-    </mat-form-field>
+    </div>
     <p class="adf-no-tags-message" *ngIf="showEmptyTagMessage">
         {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
     </p>
diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
index 2ad79784642..741f236b1e0 100644
--- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
+++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss
@@ -29,7 +29,13 @@ adf-tags-creator {
     .adf-tag-name-field[hidden] {
         padding-top: 10px;
         margin-right: 12px;
-        width: 100%;
+    }
+
+    .adf-tag-search-field {
+        background: var(--adf-metadata-buttons-background-color);
+        height: 32px;
+        border-radius: 12px;
+        padding: 0 6px;
     }
 
     .adf-create-tag-label {
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
index 4bd016e7d41..71677b55d70 100644
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.html
@@ -1,14 +1,24 @@
+<label
+    class="adf-property-label"
+    [attr.data-automation-id]="'card-dateitem-label-' + property.key"
+    *ngIf="showProperty || isEditable"
+    [attr.for]="'card-view-dateitem-' + property.key"
+    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
+>
+    {{ property.label | translate }}
+</label>
 <div class="adf-property-value" [ngClass]="{ 'adf-property-value-editable': editable, 'adf-property-readonly-value': isReadonlyProperty }">
-    <mat-form-field *ngIf="!property.multivalued" class="adf-dateitem-editable">
-        <mat-label
-            class="adf-property-label"
-            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-            *ngIf="showProperty || isEditable"
-            [attr.for]="'card-view-dateitem-' + property.key"
-            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
+    <span *ngIf="!isEditable && !property.multivalued" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+        <span
+            *ngIf="showProperty"
+            [attr.data-automation-id]="'card-dateitem-' + property.key"
+            (dblclick)="copyToClipboard(property.displayValue)"
+            matTooltipShowDelay="1000"
+            [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
+            >{{ property.displayValue }}</span
         >
-            {{ property.label | translate }}
-        </mat-label>
+    </span>
+    <div *ngIf="isEditable && !property.multivalued" class="adf-dateitem-editable">
         <div class="adf-dateitem-editable-controls">
             <span
                 class="adf-datepicker-toggle"
@@ -18,18 +28,13 @@
                 role="button"
                 (keyup.enter)="showDatePicker()"
             >
-                <span
-                    (dblclick)="copyToClipboard(property.displayValue)"
-                    matTooltipShowDelay="1000"
-                    [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
-                    *ngIf="showProperty; else elseEmptyValueBlock"
-                    [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
+                <span *ngIf="showProperty; else elseEmptyValueBlock" [attr.data-automation-id]="'card-' + property.type + '-value-' + property.key">
                     {{ property.displayValue }}</span
                 >
             </span>
 
             <mat-icon
-                *ngIf="showClearAction && isEditable"
+                *ngIf="showClearAction"
                 class="adf-date-reset-icon"
                 (click)="onDateClear()"
                 [attr.title]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
@@ -39,7 +44,6 @@
             </mat-icon>
 
             <mat-datetimepicker-toggle
-                *ngIf="isEditable"
                 [attr.tabindex]="-1"
                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                 [attr.data-automation-id]="'datepickertoggle-' + property.key"
@@ -49,11 +53,9 @@
         </div>
 
         <input
-            matInput
             class="adf-invisible-date-input"
             [attr.tabIndex]="-1"
             [matDatetimepicker]="datetimePicker"
-            [disabled]="!isEditable"
             [value]="valueDate"
             (dateChange)="onDateChanged($event)"
             [attr.id]="'card-view-dateitem-' + property.key"
@@ -67,12 +69,12 @@
             [startAt]="valueDate"
         >
         </mat-datetimepicker>
-    </mat-form-field>
+    </div>
     <ng-template #elseEmptyValueBlock>
         {{ property.default | translate }}
     </ng-template>
 
-    <mat-form-field *ngIf="property.multivalued"
+    <div *ngIf="property.multivalued"
          class="adf-property-field adf-dateitem-chip-list-container adf-dateitem-editable">
         <mat-chip-listbox #chipList class="adf-textitem-chip-list">
             <mat-chip-option
@@ -83,15 +85,7 @@
                 <mat-icon *ngIf="isEditable" matChipRemove>cancel</mat-icon>
             </mat-chip-option>
         </mat-chip-listbox>
-        <mat-label
-            class="adf-property-label"
-            [attr.data-automation-id]="'card-dateitem-label-' + property.key"
-            *ngIf="showProperty || isEditable"
-            [attr.for]="'card-view-dateitem-' + property.key"
-            [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty, 'adf-property-value-editable': editable }"
-        >
-            {{ property.label | translate }}
-        </mat-label>
+
         <div
             *ngIf="isEditable"
             class="adf-property-field adf-dateitem-editable-controls"
@@ -101,7 +95,6 @@
             (keyup.enter)="showDatePicker()"
         >
             <input
-                matInput
                 class="adf-invisible-date-input"
                 [attr.tabIndex]="-1"
                 [matDatetimepicker]="datetimePicker"
@@ -125,5 +118,5 @@
             >
             </mat-datetimepicker>
         </div>
-    </mat-form-field>
+    </div>
 </div>
diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
index 05f9cce4120..94b09fc6ce4 100644
--- a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -9,33 +9,28 @@
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         margin-top: 10px;
 
-        &:not(.adf-property-readonly-value) {
-            #{$mat-text-field-disabled} {
-                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                    border: none;
-                    background-color: inherit;
-                }
+        &.adf-property-value-editable {
+            display: flex;
+            align-items: center;
+            border-radius: 6px;
+            border-bottom: inherit;
+            margin-bottom: 18px;
+        }
 
-                #{$mat-select-arrow-wrapper} {
-                    display: none;
-                }
-            }
+        &.adf-property-readonly-value {
+            padding: 0 0 0 12px;
         }
     }
 
-    #{$mat-form-field-wrapper} {
-        #{$mat-form-field-input-control} {
-            &.adf-invisible-date-input {
-                height: 0;
-                width: 0;
-                overflow: hidden;
-                opacity: 0;
-                border: none;
-                margin: 0;
-                padding: 0;
-                float: right;
-            }
-        }
+    .adf-invisible-date-input {
+        height: 2px;
+        width: 0;
+        overflow: hidden;
+        opacity: 0;
+        border: none;
+        margin: 0;
+        padding: 0;
+        float: right;
     }
 
     .adf-dateitem-chip-list-container.adf-property-field {
@@ -45,7 +40,8 @@
     }
 
     .adf-dateitem-editable {
-        width: 100%;
+        cursor: pointer;
+        padding: 0 12px;
 
         /* stylelint-disable-next-line no-descending-specificity */
         &-controls {
@@ -61,6 +57,8 @@
             }
 
             #{$mat-icon} {
+                width: 16px;
+                height: 16px;
                 opacity: 0.5;
 
                 &:hover {
@@ -73,6 +71,9 @@
             }
 
             .adf-date-reset-icon {
+                line-height: 10px;
+                position: relative;
+                top: 4px;
                 padding: 0 8px;
             }
         }
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
index b57af7907ee..8aeacf38062 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html
@@ -1,34 +1,37 @@
 <ng-container *ngIf="!property.isEmpty() || isEditable">
-    <div class="adf-property-field">
-        <mat-form-field class="adf-property-value" [ngClass]="{
+    <div
+        [attr.data-automation-id]="'card-select-label-' + property.key"
+        class="adf-property-label"
+        [ngClass]="{
             'adf-property-value-editable': isEditable,
-            'adf-property-read-only': !isEditable
-        }">
-            <mat-label
-                [attr.data-automation-id]="'card-select-label-' + property.key"
-                class="adf-property-label adf-property-value-editable"
-                [ngClass]="{
-                    'adf-property-readonly-value': isReadonlyProperty
-                }">
-                {{ property.label | translate }}
-            </mat-label>
-            <mat-select
-                [attr.data-automation-id]="'select-readonly-value-' + property.key"
-                [(value)]="value"
-                [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
-                panelClass="adf-select-filter"
-                (selectionChange)="onChange($event)"
-                data-automation-class="select-box"
-                [aria-label]="property.label | translate"
-                [disabled]="!isEditable">
-                <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
-                <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
-                <mat-option
-                    *ngFor="let option of list$ | async"
-                    [value]="option.key">
-                    {{ option.label | translate }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
+            'adf-property-readonly-value': isReadonlyProperty
+        }"
+    >{{ property.label | translate }}</div>
+    <div class="adf-property-field">
+        <div
+            *ngIf="!isEditable"
+            class="adf-property-value adf-property-read-only"
+            [attr.data-automation-id]="'select-readonly-value-' + property.key"
+            data-automation-class="read-only-value">{{ (property.displayValue | async) | translate }}
+        </div>
+        <div *ngIf="isEditable">
+            <mat-form-field class="adf-property-value" [ngClass]="{'adf-property-value-editable': isEditable}">
+                <mat-select
+                    [(value)]="value"
+                    [ngClass]="{ 'adf-property-readonly-value': isReadonlyProperty }"
+                    panelClass="adf-select-filter"
+                    (selectionChange)="onChange($event)"
+                    data-automation-class="select-box"
+                    [aria-label]="property.label | translate">
+                    <adf-select-filter-input *ngIf="showInputFilter" (change)="onFilterInputChange($event)"></adf-select-filter-input>
+                    <mat-option *ngIf="displayNoneOption">{{ 'CORE.CARDVIEW.NONE' | translate }}</mat-option>
+                    <mat-option
+                        *ngFor="let option of list$ | async"
+                        [value]="option.key">
+                        {{ option.label | translate }}
+                    </mat-option>
+                </mat-select>
+            </mat-form-field>
+        </div>
     </div>
 </ng-container>
diff --git a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
index b5f4c7b7393..0c53a6f0471 100644
--- a/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
@@ -24,6 +24,17 @@
         #{$mat-form-field-wrapper} {
             background-color: initial;
         }
+
+        /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
+        mat-select {
+            padding: 6px 0 8px 12px;
+            margin-top: 0;
+            border-radius: 6px;
+
+            #{$mat-select-value} {
+                color: var(--adf-metadata-action-button-clear-color);
+            }
+        }
     }
 
     #{$mat-form-field-subscript-wrapper} {
@@ -31,19 +42,9 @@
     }
 
     .adf-property-read-only {
+        padding: 6px 0;
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         color: var(--adf-metadata-property-panel-title-color);
-
-        #{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
-            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                border: none;
-                background-color: inherit;
-            }
-
-            #{$mat-select-arrow-wrapper} {
-                display: none;
-            }
-        }
     }
 
     .mdc-line-ripple {
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
index ccd3ca6c958..90d368cc1ce 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
@@ -5,6 +5,7 @@
             [ngClass]="{
                 'adf-property-read-only': !isEditable
             }"
+            [floatLabel]="'always'"
         >
             <mat-label
                 *ngIf="showProperty || isEditable"
diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
index 8976db42684..de645e85466 100644
--- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -55,17 +55,8 @@
         color: var(--adf-theme-foreground-text-color-054);
     }
 
-    .adf-property-read-only {
-        &:not(:has(.adf-property-readonly-value)) {
-            border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
-        }
-
-        #{$mat-text-field-disabled}:not(:has(.adf-property-readonly-value)) {
-            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                border: none;
-                background-color: inherit;
-            }
-        }
+    .adf-property-read-only:not(:has(.adf-property-readonly-value)) {
+        border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
     }
 
     .adf-property-readonly-value {
diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
index 2b4810ba582..f5c463f67bc 100644
--- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
+++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
@@ -6,11 +6,32 @@
     border-color: var(--adf-card-view-border-color);
     border-radius: var(--adf-card-view-border-radius);
 
+    .adf-property-label {
+        color: var(--adf-metadata-property-panel-text-color);
+        display: flex;
+        padding: 3px 0;
+        line-height: 20px;
+
+        &.adf-property-value-editable {
+            color: var(--adf-metadata-property-panel-title-color);
+        }
+
+        &.adf-property-readonly-value {
+            color: var(--adf-metadata-property-panel-label-color);
+        }
+    }
+
     .adf-property-container {
         margin-bottom: 12px;
     }
 
     .adf-property {
+        .adf-card-view-textitem {
+            .adf-property-field {
+                padding-top: 0;
+            }
+        }
+
         .adf-property-field {
             width: 100%;
 
@@ -20,6 +41,7 @@
 
             #{mat-input-element} {
                 text-overflow: ellipsis;
+                color: var(--adf-metadata-property-panel-title-color);
                 padding: 6px 0;
                 line-height: 20px;
             }
@@ -38,11 +60,59 @@
             #{$mat-form-field-flex} {
                 padding-top: 0;
             }
+
+            #{$mat-form-field-wrapper} {
+                background-color: inherit;
+                padding-bottom: 0;
+                padding-left: 0;
+                padding-right: 0;
+            }
+
+            #{$mat-form-field-label} {
+                padding: 0;
+                justify-content: center;
+                display: flex;
+                flex-direction: column;
+                height: 20px;
+
+                &.adf-property-field-label--empty {
+                    transform: translateY(-1.3437em) scale(1);
+             }
+            }
         }
     }
 
     .adf-property-value {
+        color: var(--adf-metadata-property-panel-title-color);
+
+        &.adf-property-value-editable {
+            color: var(--adf-metadata-property-panel-title-color);
+            background-color: var(--adf-metadata-buttons-background-color);
+            border-radius: 6px;
+            height: 32px;
+            padding-left: 10px;
+
+            #{$mat-input-element} {
+                color: var(--adf-metadata-action-button-clear-color);
+                padding: 5px 0 6px 12px;
+                margin: 5px 0 0;
+            }
+        }
+
+        &.adf-property-readonly-value {
+            color: var(--adf-metadata-property-panel-label-color);
+
+            #{$mat-input-element} {
+                color: var(--adf-metadata-property-panel-label-color);
+            }
+        }
+
+        &-has-error {
+            border: 1px solid var(--theme-warn-color);
+        }
+
         &-input {
+            background-color: var(--adf-metadata-buttons-background-color);
             border-radius: 6px;
             padding: 6px 0;
             margin: 0;
diff --git a/lib/core/src/lib/comments/comments.component.scss b/lib/core/src/lib/comments/comments.component.scss
index 74a897e9aef..789edbe4ba8 100644
--- a/lib/core/src/lib/comments/comments.component.scss
+++ b/lib/core/src/lib/comments/comments.component.scss
@@ -9,7 +9,6 @@ adf-comments {
         .adf-comments-input-container {
             width: 100%;
             padding-bottom: 8px;
-            padding-top: 8px;
 
             textarea {
                 resize: vertical;
diff --git a/lib/core/src/lib/login/components/login/login.component.scss b/lib/core/src/lib/login/components/login/login.component.scss
index 2eb9da6f22d..d3093ea47f7 100644
--- a/lib/core/src/lib/login/components/login/login.component.scss
+++ b/lib/core/src/lib/login/components/login/login.component.scss
@@ -183,6 +183,10 @@
 
     .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
         color: var(--adf-theme-foreground-text-color);
+        font-size: var(--theme-subheading-2-font-size);
+        top: 9px;
+        position: relative;
+        left: 7px;
     }
 
     .adf-login-controls:has(div) {
@@ -200,6 +204,26 @@
             padding-bottom: 16px;
             font-size: var(--theme-subheading-2-font-size);
 
+            #{$mat-form-field-infix} {
+                min-height: 0;
+                padding-bottom: 3px;
+                padding-top: 20px;
+
+                .adf-login-form-input-label {
+                    font-size: var(--theme-subheading-2-font-size);
+                }
+
+                #{$mat-floating-label-float-above} {
+                    padding-bottom: 6px;
+                }
+
+                #{$mat-floating-label--required} {
+                    &::after {
+                        font-size: var(--theme-subheading-2-font-size);
+                    }
+                }
+            }
+
             & input:-webkit-autofill {
                 /* stylelint-disable */
                 -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
@@ -211,17 +235,16 @@
 
     .adf-login-validation {
         background-color: transparent;
-        color: var(--adf-error-input-color);
+        color: var(--theme-warn-color);
         font-size: var(--theme-caption-font-size);
     }
 
     .adf-login-error {
-        color: var(--adf-error-input-color);
+        color: var(--theme-warn-color);
         position: absolute;
         font-size: var(--theme-caption-font-size);
         margin-top: -12px;
         display: block;
-        padding-left: 12px;
     }
 
     .adf-full-width {
diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
index e61fa9e33fc..06e7cc9ec54 100644
--- a/lib/core/src/lib/styles/_components-variables.scss
+++ b/lib/core/src/lib/styles/_components-variables.scss
@@ -89,13 +89,6 @@
         --adf-danger-button-background: $adf-danger-button-background,
         --adf-secondary-button-background: $adf-secondary-button-background,
 
-        --adf-input-text-color: $adf-input-text-color,
-        --adf-input-border-color: $adf-input-border-color,
-        --adf-focused-input-color: $adf-focused-input-color,
-        --adf-error-input-color: $adf-error-input-color,
-        --adf-hint-input-color: $adf-hint-input-color,
-        --adf-disabled-input-color: $adf-disabled-input-color,
-
         --adf-display-external-property-widget-preview-selection-color: mat.get-color-from-palette($foreground, secondary-text)
     );
 
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
index 78645df52c3..edf6467b46d 100644
--- a/lib/core/src/lib/styles/_mat-selectors.scss
+++ b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -51,12 +51,7 @@ $mat-form--text-field-infix: '.mat-mdc-form-text-infix';
 $mat-form-field-label: '.mat-mdc-floating-label';
 $mat-form-field-invalid: '.mat-form-field-invalid';
 $mat-form-field-appearance-outline: '.mat-form-field-appearance-outline';
-$mat-form-field-label-always-float: '.mat-mdc-form-field-label-always-float';
-$mat-form-field-input-control: '.mat-mdc-form-field-input-control';
 $mat-text-field-outlined: '.mdc-text-field--outlined';
-$mat-text-field-disabled: '.mdc-text-field--disabled';
-$mat-text-field-focused: '.mdc-text-field--focused';
-$mat-text-field-invalid: '.mdc-text-field--invalid';
 $mat-text-field-outlined-thick: '.mdc-text-field--outlined-thick';
 $mat-dialog-actions: '.mat-mdc-dialog-actions';
 $mat-dialog-container: '.mdc-dialog__container';
@@ -79,7 +74,6 @@ $mat-header-row: '.mat-mdc-header-row';
 $mat-row: '.mat-mdc-row';
 $mat-select: '.mat-mdc-select';
 $mat-select-value: '.mat-select-value';
-$mat-select-invalid: '.mat-mdc-select-invalid';
 $mat-select-value-text: '.mat-mdc-select-value-text';
 $mat-select-panel: '.mat-mdc-select-panel';
 $mat-grid-tile: '.mat-grid-tile';
@@ -119,10 +113,6 @@ $mat-standard-chip: '.mat-mdc-standard-chip';
 $mat-evolution-chip-action: '.mdc-evolution-chip__action';
 $mat-evolution-chip-text-label: '.mdc-evolution-chip__text-label';
 $mat-notched-outline: '.mdc-notched-outline';
-$mat-notched-outline-notched: '.mdc-notched-outline--notched';
-$mat-form-field-hint-wrapper: '.mat-mdc-form-field-hint-wrapper';
-$mat-form-field-error-wrapper: '.mat-mdc-form-field-error-wrapper';
-$mat-form-field-icon-suffix: '.mat-mdc-form-field-icon-suffix';
 $mat-evolution-chip-graphic: '.mdc-evolution-chip__graphic';
 $mat-select-trigger: '.mat-mdc-select-trigger';
 $mat-select-arrow: '.mat-mdc-select-arrow';
@@ -136,4 +126,3 @@ $cdk-overlay-pane: '.cdk-overlay-pane';
 $mat-snackbar: '.mdc-snackbar';
 $mat-snack-bar-container: '.mat-mdc-snack-bar-container';
 $mat-snackbar-label: '.mdc-snackbar__label';
-$mat-date-range-input-container: '.mat-date-range-input-container';
diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss
index 85c8501cbab..6f72688cbeb 100644
--- a/lib/core/src/lib/styles/_reference-variables.scss
+++ b/lib/core/src/lib/styles/_reference-variables.scss
@@ -27,9 +27,3 @@ $adf-ref-header-icon-color: inherit;
 $adf-ref-header-icon-border-radius: 50%;
 $adf-danger-button-background: #ba1b1b;
 $adf-secondary-button-background: #2121210d;
-$adf-input-text-color: rgb(33, 33, 33);
-$adf-input-border-color: rgba(33, 33, 33, 0.24);
-$adf-focused-input-color: rgb(0, 133, 53);
-$adf-error-input-color: rgb(186, 27, 27);
-$adf-hint-input-color: rgba(33, 33, 33, 0.7);
-$adf-disabled-input-color: rgba(33, 33, 33, 0.12);
diff --git a/lib/core/src/lib/styles/material.theme.scss b/lib/core/src/lib/styles/material.theme.scss
index a2428ada41e..c6ecb06ddbe 100644
--- a/lib/core/src/lib/styles/material.theme.scss
+++ b/lib/core/src/lib/styles/material.theme.scss
@@ -68,159 +68,4 @@
             }
         }
     }
-
-    #{$mat-form-field-appearance-outline} {
-        #{$mat-text-field-outlined} {
-            padding-top: 14px;
-            padding-left: 12px;
-
-            &#{$mat-text-field--no-label} {
-                #{$mat-form-field-infix} {
-                    top: -9px;
-                }
-
-                #{$mat-form-field-icon-suffix} {
-                    #{$mat-icon} {
-                        padding-top: 12px;
-                    }
-                }
-            }
-
-            #{$mat-notched-outline} {
-                padding-bottom: 2px;
-
-                &#{$mat-notched-outline-notched} {
-                    #{$mat-notched-outline-notch} {
-                        top: 15px;
-                        position: absolute;
-                        border: none;
-                        left: 9px
-                    }
-                }
-
-                &:not(#{$mat-notched-outline-notched}) {
-                    #{$mat-notched-outline-notch} {
-
-                        #{$mat-form-field-label} {
-                            top: 30px;
-                            left: -5px;
-                            padding-left: 5px;
-                        }
-                    }
-                }
-
-
-                #{$mat-form-field-label} {
-                    color: var(--adf-input-text-color);
-                }
-            }
-
-            #{$mat-form-field-icon-suffix} {
-                #{$mat-icon} {
-                    padding-top: 0;
-                }
-            }
-
-            #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                border-color: var(--adf-input-border-color);
-            }
-
-            &:not(#{$mat-text-field-disabled}) {
-                &:hover, &#{$mat-text-field-focused}, &#{$mat-text-field-invalid} {
-                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                        border-width: 2px;
-                    }
-                }
-
-                &#{$mat-text-field-focused} {
-                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
-                        border-color: var(--adf-focused-input-color);
-                    }
-                }
-
-                &:hover {
-                    #{$mat-notched-outline} {
-                        &:not(#{$mat-notched-outline-notched}) {
-                            #{$mat-notched-outline-notch} {
-                                #{$mat-form-field-label} {
-                                    top: 29px;
-                                }
-                            }
-                        }
-                    }
-                }
-
-                &#{$mat-text-field-invalid} {
-                    #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
-                        border-color: var(--adf-error-input-color);
-                    }
-                }
-            }
-
-            &#{$mat-text-field-disabled} {
-                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing} {
-                    background-color: var(--adf-disabled-input-color);
-                }
-
-                #{$mat-notched-outline}:not(#{$mat-notched-outline-notched}) {
-                    #{$mat-notched-outline-notch} {
-                        background-color: var(--adf-disabled-input-color);
-                    }
-                }
-
-                #{$mat-text-filed-input} {
-                    color: var(--adf-input-text-color);
-                }
-
-                #{$mat-select-value-text} {
-                    color: var(--adf-input-text-color);
-                }
-            }
-
-            #{$mat-select} {
-
-                #{$mat-select-arrow-wrapper} {
-                    height: 0;
-                }
-            }
-
-            &:not(#{$mat-text-field--no-label}) {
-                #{$mat-select} {
-                    #{$mat-select-arrow-wrapper} {
-                        margin-top: -6px;
-                        align-items: end;
-                    }
-                }
-            }
-        }
-
-        #{$mat-form-field-hint-wrapper}, #{$mat-form-field-error-wrapper} {
-            padding-left: 9px;
-            margin-top: -5px;
-        }
-
-        #{$mat-form-field-hint-wrapper} {
-            color: var(--adf-hint-input-color);
-        }
-
-        #{$mat-form-field-error-wrapper} {
-            color: var(--adf-error-input-color);
-        }
-
-        &#{$mat-focused} {
-            #{$mat-select} {
-                #{$mat-select-arrow} {
-                    color: var(--adf-focused-input-color);
-                }
-            }
-        }
-
-        &#{$mat-focused}#{$mat-select}, #{$mat-select} {
-            &#{$mat-select-invalid} {
-                #{$mat-select-arrow} {
-                    color: var(--adf-error-input-color);
-                }
-            }
-        }
-    }
 }