Fix layout of the artifacts icons

Signed-off-by: Aleksandra Maciaga <aleksandra.maciaga@nokia.com>
Issue-ID: SDC-2095
Change-Id: Ib5bbb214b1b25604db643a0c220aff5a97e7afd6

2 files changed, 20 insertions, 11 deletions

diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.html b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.html
index 35592d846a..1df318e4a5 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.html
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.html
@@ -39,15 +39,15 @@
         <ngx-datatable-column [resizeable]="false" [flexGrow]="0.6">
             <ng-template ngx-datatable-cell-template let-row="row">
                 <div class="download-artifact-button">
-                    <svg-icon *ngIf="!row.heatParameters?.length && !state.isViewOnly" class="action-icon" [mode]="'primary2'" [name]="'edit-o'"
+                    <svg-icon *ngIf="!row.heatParameters?.length && !state.isViewOnly" class="action-icon action-icon-1" [mode]="'primary2'" [name]="'edit-o'"
                               testId="edit_{{row.artifactDisplayName}}" clickable="true" size="medium"
                               (click)="addOrUpdateArtifact(row, state.isViewOnly)"></svg-icon>
-                    <svg-icon *ngIf="row.heatParameters?.length && !state.isViewOnly" class="action-icon" [mode]="'primary2'" [name]="'indesign_status'"
+                    <svg-icon *ngIf="row.heatParameters?.length && !state.isViewOnly" class="action-icon action-icon-2" [mode]="'primary2'" [name]="'indesign_status'"
                               testId="update_heat_params_{{row.artifactDisplayName}}" clickable="true" size="medium"
                               (click)="updateEnvParams(row, state.isViewOnly)"></svg-icon>
-                    <svg-icon *ngIf="!row.isFromCsar && !state.isViewOnly" class="action-icon" [mode]="'primary2'" [name]="'trash-o'"
+                    <svg-icon *ngIf="!row.isFromCsar && !state.isViewOnly" class="action-icon action-icon-3" [mode]="'primary2'" [name]="'trash-o'"
                               testId="delete_{{row.artifactDisplayName}}" clickable="true" size="medium" (click)="deleteArtifact(row)"></svg-icon>
-                    <svg-icon *ngIf="row.isGenericBrowseable()" class="action-icon" [mode]="'primary2'" [name]="'search-o'"
+                    <svg-icon *ngIf="row.isGenericBrowseable()" class="action-icon action-icon-4" [mode]="'primary2'" [name]="'search-o'"
                               testId="gab-{{row.artifactDisplayName}}" clickable="true" size="medium" (click)="openGenericArtifactBrowserModal(row)"></svg-icon>
 
                     <!--Download-->
diff --git a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.less b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.less
index 22ceb96653..725081c3c0 100644
--- a/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.less
+++ b/catalog-ui/src/app/ng2/pages/workspace/deployment-artifacts/deployment-artifacts-page.component.less
@@ -1,6 +1,4 @@
 .deployment-artifact-page {
-
-
   .env-artifact-container {
     margin-left: -25px;
     margin-top: -21px;
@@ -15,7 +13,6 @@
       border-bottom: 1px #848586 solid;
       width: 10px;
       float: left;
-
     }
   }
   .add-artifact-btn {
@@ -25,12 +22,25 @@
     margin-bottom: 10px;
   }
   .download-artifact-button {
-    display: flex;
-    justify-content: center;
+    display: grid;
+    justify-content: start;
+    grid-template-columns: 20px 20px 20px 20px;
 
     .action-icon {
       margin-right: 10px;
     }
+    .action-icon-1 {
+      grid-column-start: 1;
+    }
+    .action-icon-2 {
+      grid-column-start: 2;
+    }
+    .action-icon-3 {
+      grid-column-start: 3;
+    }
+    .action-icon-4 {
+      grid-column-start: 4;
+    }
   }
 
   .table-footer-container {
@@ -43,7 +53,6 @@
 }
 
 :host ::ng-deep {
-
   .ngx-datatable {
     //border: 1px solid red;
     .datatable-body-cell {
@@ -52,4 +61,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}