[ACS-7531] - Search page (#3816)

projects/aca-content/src/lib/components/info-drawer/comments-tab/comments-tab.component.ts

@@ -32,7 +32,9 @@ import { NodeCommentsModule } from '@alfresco/adf-content-services';
   standalone: true,
   imports: [MatCardModule, NodeCommentsModule],
   selector: 'app-comments-tab',
-  template: `<mat-card class="adf-comments-tab-container" appearance="raised"><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments></mat-card>`,
+  template: `<mat-card class="adf-comments-tab-container" appearance="raised"
+    ><adf-node-comments [readOnly]="!canUpdateNode" [nodeId]="node?.id"></adf-node-comments
+  ></mat-card>`,
   styles: ['app-comments-tab mat-card { padding: 16px }'],
   encapsulation: ViewEncapsulation.None,
   styleUrls: ['./comments-tab.component.scss']

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss

@@ -1,5 +1,3 @@
-$top-margin: 12px;
-
 .app-suffix-search-icon-wrapper {
   display: flex;
   align-items: center;
@@ -19,12 +17,11 @@ $top-margin: 12px;
 }
 
 .app-search-container {
-  margin-top: -$top-margin;
-  padding-top: 2px;
+  position: relative;
+  top: -5px;
   font-size: 16px;
-  padding-left: 15px;
+  padding-left: 19px;
   box-sizing: border-box;
-  margin-bottom: 12px;
 
   .app-input-form-field-input + span {
     cursor: text;
@@ -33,6 +30,7 @@ $top-margin: 12px;
 
   .app-input-form-field {
     letter-spacing: -0.7px;
+    font-size: 16px;
     width: calc(100% - 56px);
 
     &-input {
@@ -46,6 +44,12 @@ $top-margin: 12px;
         display: none;
       }
     }
+
+    /* stylelint-disable selector-class-pattern */
+    .mat-mdc-form-field-icon-suffix {
+      position: relative;
+      right: -14px;
+    }
   }
 
   .mat-mdc-form-field-flex {
@@ -65,8 +69,7 @@ $top-margin: 12px;
   }
 
   .app-search-button {
-    top: 2px;
-    left: -8px;
+    left: -12px;
 
     &-icon {
       font-size: 24px;

projects/aca-content/src/lib/components/search/search-input/search-input.component.html

@@ -18,7 +18,7 @@
       [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
     />
 
-    <div matSuffix class="app-suffix-search-icon-wrapper">
+    <div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">
       <mat-icon>arrow_drop_down</mat-icon>
     </div>
 

projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

@@ -10,7 +10,7 @@ $top-margin: 12px;
   max-width: $search-width;
   height: $search-height + $top-margin;
 
-  .app-search-button {
+  .app-search-button:is(button) {
     width: 32px;
     height: 32px;
     margin-left: 0;
@@ -19,6 +19,10 @@ $top-margin: 12px;
   }
 
   .app-input-form-field {
+    .app-suffix-search-icon-wrapper.app-icon-arrow {
+      margin-top: 16px;
+    }
+
     .app-suffix-search-icon-wrapper.app-close-button {
       height: 6px;
 
@@ -42,11 +46,19 @@ $top-margin: 12px;
 
 /* stylelint-disable-next-line */
 .app-search-options-menu.mat-mdc-menu-panel {
+  position: relative;
+  top: -5px;
+  margin-top: 2px;
   background-color: var(--theme-dialog-background-color);
   width: $search-width;
   max-width: unset;
   border-radius: $search-border-radius;
-  margin-top: 3px;
+
+  /* stylelint-disable-next-line */
+  .mdc-list {
+    padding-top: 10px;
+    padding-right: 10px;
+  }
 }
 
 .aca-search-input {
@@ -59,7 +71,7 @@ $top-margin: 12px;
   padding-bottom: 26px;
 
   .app-search-container {
-    margin: 0;
+    margin: 10px 0 0 0;
   }
 }
 
@@ -70,19 +82,35 @@ $top-margin: 12px;
 .app-search-options {
   color: var(--theme-text-color);
   border-top: 1px solid var(--theme-divider-color);
-  padding: 20px 0;
+  padding: 20px 10px;
   font-size: 16px;
   letter-spacing: -0.7px;
   margin-bottom: -8px;
 
-  .app-search-options-checkbox label {
-    max-width: 155px;
-  }
+  /* stylelint-disable-next-line */
+ .mat-mdc-checkbox {
+   .mdc-form-field {
+     .mdc-checkbox {
+       .mdc-checkbox__background {
+         height: 18px;
+         width: 18px;
+       }
+     }
+   }
+ }
 
-  &-checkbox {
-    padding: 3px 24px 3px 19px;
+ .app-search-options-checkbox label {
+   max-width: 155px;
+   font-size: 16px;
+   padding-left: 6px;
+   padding-top: 2px;
+   letter-spacing: -1px;
+ }
 
-    /* stylelint-disable-next-line no-descending-specificity */
+ &-checkbox {
+   padding: 3px 36px 3px 20px;
+
+   /* stylelint-disable-next-line no-descending-specificity */
     label {
       padding: 0 0 0 11px;
       overflow: hidden;

projects/aca-content/src/lib/components/search/search-results/search-results.component.scss

@@ -30,8 +30,15 @@ aca-search-results {
       border-bottom: 1px solid var(--theme-border-color);
 
       .aca-content__advanced-filters {
+        /* stylelint-disable-next-line */
+        .mat-mdc-chip-action {
+          padding-left: 10px;
+          padding-right: 10px;
+        }
+
         /* stylelint-disable-next-line */
         .mdc-evolution-chip__text-label {
+          padding-top: 4px;
           color: var(--theme-selected-text-color);
         }
 
@@ -39,6 +46,9 @@ aca-search-results {
         .adf-search-filter-chip-tabbed {
           background-color: var(--theme-dropdown-color);
           color: var(--theme-selected-text-color);
+          height: 32px;
+          margin-top: 0;
+          box-sizing: border-box;
 
           &:hover,
           &:focus {
@@ -137,6 +147,8 @@ aca-search-results {
       }
 
       &__reset-action {
+        margin-top: 5px;
+        margin-right: 2px;
         line-height: 33px;
         font-weight: lighter;
       }

projects/aca-content/src/lib/ui/theme.scss

@@ -124,6 +124,12 @@ mat-slide-toggle {
   }
 }
 
+.mdc-evolution-chip__action.mat-mdc-chip-action {
+  .mdc-evolution-chip__graphic.mat-mdc-chip-graphic {
+    padding: 0;
+  }
+}
+
 .mdc-dialog {
   .mdc-dialog__title {
     margin-bottom: 20px;

projects/aca-shared/src/lib/components/page-layout/page-layout.component.html

@@ -1,6 +1,7 @@
 <div class="aca-content-header">
     <button *ngIf="(appNavNarMode$ | async) === 'collapsed'"
       mat-icon-button
+      class="aca-content-header-button"
       (click)="toggleClick()"
       title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
       <mat-icon>keyboard_double_arrow_right</mat-icon>

projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss

@@ -9,6 +9,10 @@
     padding: 0 24px;
     display: flex;
     align-items: center;
+
+    &-button {
+      margin-top: -1px;
+    }
   }
 
   .aca-page-layout-header {