[ACS-7414] - Manage versions dialog

lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.html

@@ -13,7 +13,7 @@
   </adf-version-upload>
 </section>
 <ng-container *ngIf="data.showVersionsOnly">
-  <section mat-dialog-content>
+  <section class="adf-new-version-uploader-dialog-content" mat-dialog-content>
     <div class="adf-version-list-container">
       <div class="adf-version-list-table">
         <adf-version-list

lib/content-services/src/lib/new-version-uploader/new-version-uploader.dialog.scss

@@ -24,7 +24,7 @@
         height: 500px;
     }
 
-    &-title {
+    .adf-new-version-uploader-dialog-title {
         flex: 0 0 auto;
         font-size: 20px;
         font-weight: 600;
@@ -36,12 +36,12 @@
         color: var(--adf-theme-foreground-text-color-087);
     }
 
-    &-content {
+    .adf-new-version-uploader-dialog-content {
+        padding: 0;
         flex: 1 1 auto;
         position: relative;
         max-height: 100vh;
         overflow: hidden;
-        padding: 2px 26px;
     }
 
     &-actions {

lib/content-services/src/lib/version-manager/version-list.component.html

@@ -2,22 +2,23 @@
 <mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
     <cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport">
         <mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
-            <mat-icon matListItemLine>insert_drive_file</mat-icon>
+            <mat-icon class="adf-version-list-item-icon" matListItemIcon>insert_drive_file</mat-icon>
-            <p matListItemLine class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
+            <div class="adf-version-list-content" matListItemLine>
-            <p matListItemLine>
+                <div class="adf-version-list-item-details">
+                    <p class="adf-version-list-item-line adf-version-list-item-name" [id]="'adf-version-list-item-name-' + version.entry.id" >{{version.entry.name}}</p>
+                    <p class="adf-version-list-item-line">
                         <span class="adf-version-list-item-line adf-version-list-item-version" [id]="'adf-version-list-item-version-' + version.entry.id" >{{version.entry.id}}</span> -
                         <span class="adf-version-list-item-line adf-version-list-item-date" [id]="'adf-version-list-item-date-' + version.entry.id" >{{version.entry.modifiedAt | date}}</span>
                     </p>
                     <p
-                matListItemLine
                         [id]="'adf-version-list-item-comment-' + version.entry.id"
                         class="adf-version-list-item-comment"
                         *ngIf="showComments"
                         [title]="version.entry.versionComment">
                         {{ version.entry.versionComment }}
                     </p>
-
+                </div>
-            <div *ngIf="showActions">
+                <div *ngIf="true">
                     <mat-menu [id]="'adf-version-list-action-menu-' + version.entry.id"
                               #versionMenu="matMenu"
                               yPosition="below"
@@ -59,6 +60,7 @@
                         <mat-icon>more_vert</mat-icon>
                     </button>
                 </div>
+            </div>
         </mat-list-item>
     </cdk-virtual-scroll-viewport>
 </mat-list>

lib/content-services/src/lib/version-manager/version-list.component.scss

@@ -1,17 +1,53 @@
 /* stylelint-disable selector-class-pattern */
+/* stylelint-disable no-descending-specificity */
+
 @import 'styles/mat-selectors';
 
 .adf-version-list {
+    .adf-version-list-element {
+        .adf-version-list-item {
+            border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
+            height: 88px;
+            padding: 0 16px;
+
+            .adf-version-list-item-details {
+                display: flex;
+                flex-direction: column;
+                flex: 1;
+            }
+
+            .adf-version-list-item-line {
+                margin: 0;
+                line-height: 20px;
+            }
+
+            .adf-version-list-item-name {
+                font-weight: normal;
+                color: var(--adf-theme-foreground-text-color-087);
+                font-size: 16px;
+            }
+
+            .adf-version-list-content {
+                display: flex;
+                padding-left: 16px;
+            }
+
+            .adf-version-list-item-icon {
+                color: var(--adf-theme-foreground-text-color-087);
+                margin: 4px;
+            }
+
+            .adf-version-list-item-version {
+                color: var(--adf-theme-foreground-text-color-087);
+            }
+        }
+    }
+
     .adf-version-list-viewport {
         height: 100%;
         overflow-x: hidden;
     }
 
-    .adf-version-list-item {
-        border-bottom: 1px solid var(--adf-theme-foreground-divider-color);
-        width: 100vw;
-    }
-
     &-item-version {
         font-weight: bold;
     }
@@ -21,8 +57,8 @@
     }
 
     &-item-comment {
-        width: 500px;
         opacity: 0.5;
+        margin: 0;
 
         @media screen and (width <= 629px) {
             width: 97%;

lib/core/src/lib/notifications/components/notification-history.component.html

@@ -6,7 +6,8 @@
             class="adf-notification-history-menu_button"
             id="adf-notification-history-open-button"
             (menuOpened)="onMenuOpened()">
-        <mat-icon matBadge="&#8288;"
+        <mat-icon class="adf-notification-history-menu_button-icon"
+                  matBadge="&#8288;"
                   [matBadgeHidden]="!notifications.length"
                   matBadgeColor="accent"
                   matBadgeSize="small">notifications</mat-icon>

lib/core/src/lib/notifications/components/notification-history.component.scss

@@ -2,11 +2,17 @@
 
 .adf {
     &-notification-history-menu_button#{$mat-button} {
-        margin-right: 0;
+        margin-right: 8px;
         border-radius: 90%;
         padding: 0;
         min-width: 40px;
         height: 40px;
+
+        .adf-notification-history-menu_button-icon {
+            font-size: 24px;
+            height: 24px;
+            width: 24px;
+        }
     }
 
     &-notification-history-list #{$mat-subheader} {