From dcc274256ddc32b2cb58c9dffeacd4231b30b151 Mon Sep 17 00:00:00 2001
From: Olfa <61057075+OlfaBensoussia@users.noreply.github.com>
Date: Fri, 18 Aug 2023 16:08:02 +0100
Subject: [PATCH] style: fix gap and margin top values (#44)

---
 .../asset-viewer/asset-viewer.component.html          |  4 ++--
 .../asset-viewer/asset-viewer.component.scss          |  7 +++++--
 .../catalog-browser/catalog-browser.component.html    |  2 +-
 .../catalog-browser/catalog-browser.component.scss    |  7 +++++++
 .../contract-definition-viewer.component.html         |  4 ++--
 .../contract-definition-viewer.component.scss         |  9 ++++++---
 .../components/policy-view/policy-view.component.html |  4 ++--
 .../components/policy-view/policy-view.component.scss | 11 +++++++----
 .../transfer-history-viewer.component.html            |  4 +++-
 .../transfer-history-viewer.component.scss            |  5 +++++
 10 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.html b/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.html
index 1d44c9edf..4f9389387 100644
--- a/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.html
+++ b/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="filteredAssets$ | async as assets" id="wrapper">
-  <div>
+  <div class="container">
     <mat-form-field appearance="fill" appearance="outline" class="search-form-field" color="accent">
       <mat-label>Search assets</mat-label>
       <input (input)="onSearch()" [(ngModel)]="searchText" matInput>
@@ -12,7 +12,7 @@
     <mat-paginator [length]="assets.length" hidePageSize="true" pageSize="contractDefinitions.length">
     </mat-paginator>
 
-    <button (click)="onCreate()" color="accent" id="create-button" mat-stroked-button>
+    <button (click)="onCreate()" color="accent" mat-stroked-button>
       <mat-icon>add_circle_outline</mat-icon>
       Create asset
     </button>
diff --git a/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.scss b/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.scss
index 1804494c5..e11f220e7 100644
--- a/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.scss
+++ b/src/modules/edc-demo/components/asset-viewer/asset-viewer.component.scss
@@ -15,6 +15,7 @@
 .search-form-field {
   min-width: 200px;
   width: 30%;
+  margin-top: 18px;
 }
 
 .card-actions {
@@ -30,6 +31,8 @@ mat-paginator {
   background-color: transparent;
 }
 
-#create-button {
-  margin-left: 10px;
+.container {
+  display: flex;
+  align-items: center;
+  gap: 10px; /* Adjust the gap between elements */
 }
diff --git a/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.html b/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.html
index 81be9917e..232e83398 100644
--- a/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.html
+++ b/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="filteredContractOffers$ | async as filteredContractOffers" id="wrapper">
-  <div>
+  <div class="container">
     <mat-form-field class="search-form-field" color="accent">
       <mat-label>Search catalog</mat-label>
       <input (input)="onSearch()" [(ngModel)]="searchText" matInput>
diff --git a/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.scss b/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.scss
index e3fa7d109..a1a86353b 100644
--- a/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.scss
+++ b/src/modules/edc-demo/components/catalog-browser/catalog-browser.component.scss
@@ -19,6 +19,7 @@
 .search-form-field {
   min-width: 200px;
   width: 30%;
+  margin-top: 18px;
 }
 
 .card-actions {
@@ -35,3 +36,9 @@ mat-paginator {
   display: inline-block;
   background-color: transparent;
 }
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
diff --git a/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.html b/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.html
index 2aa994991..f499b67e5 100644
--- a/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.html
+++ b/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="filteredContractDefinitions$ | async as contractDefinitions" id="wrapper">
-    <div>
+    <div class="container">
         <mat-form-field appearance="outline" class="search-form-field" color="accent">
             <mat-label>Search definitions</mat-label>
             <input (input)="onSearch()" [(ngModel)]="searchText" matInput>
@@ -12,7 +12,7 @@
         <mat-paginator [length]="contractDefinitions.length" hidePageSize="true" pageSize="contractDefinitions.length">
         </mat-paginator>
 
-        <button (click)="onCreate()" color="accent" id="create-button" mat-stroked-button>
+        <button (click)="onCreate()" color="accent" mat-stroked-button>
           <mat-icon>add_circle_outline</mat-icon>
           Create contract definition
         </button>
diff --git a/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.scss b/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.scss
index e8326ac75..a9a950312 100644
--- a/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.scss
+++ b/src/modules/edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.scss
@@ -19,6 +19,7 @@
 .search-form-field {
     min-width: 200px;
     width: 30%;
+    margin-top: 18px;
 }
 
 .card-actions {
@@ -34,6 +35,8 @@ mat-paginator {
     background-color: transparent;
 }
 
-#create-button {
-    margin-left: 10px;
-}
\ No newline at end of file
+.container {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
diff --git a/src/modules/edc-demo/components/policy-view/policy-view.component.html b/src/modules/edc-demo/components/policy-view/policy-view.component.html
index 557113fb2..2f278600c 100644
--- a/src/modules/edc-demo/components/policy-view/policy-view.component.html
+++ b/src/modules/edc-demo/components/policy-view/policy-view.component.html
@@ -1,6 +1,6 @@
 <div id="wrapper" *ngIf="filteredPolicies$ | async as policyDefinitions">
 <!--    entry fields for new policy-->
-  <div>
+  <div class="container">
     <mat-form-field appearance="outline" class="search-form-field" color="accent">
       <mat-label>Search policies</mat-label>
       <input (input)="onSearch()" [(ngModel)]="searchText" matInput>
@@ -12,7 +12,7 @@
 
     <mat-paginator [length]="policyDefinitions?.length" hidePageSize="true" pageSize="10"></mat-paginator>
 
-    <button (click)="onCreate()" color="accent" id="create-button" mat-stroked-button>
+    <button (click)="onCreate()" color="accent" mat-stroked-button>
       <mat-icon>add_circle_outline</mat-icon>
       Create policy
     </button>
diff --git a/src/modules/edc-demo/components/policy-view/policy-view.component.scss b/src/modules/edc-demo/components/policy-view/policy-view.component.scss
index 6eb272b83..a49e83103 100644
--- a/src/modules/edc-demo/components/policy-view/policy-view.component.scss
+++ b/src/modules/edc-demo/components/policy-view/policy-view.component.scss
@@ -11,10 +11,6 @@
   width: 50%;
 }
 
-#create-button {
-  margin-left: 10px;
-}
-
 mat-paginator {
   display: inline-block;
   background-color: transparent;
@@ -23,4 +19,11 @@ mat-paginator {
 .search-form-field {
   min-width: 200px;
   width: 30%;
+  margin-top: 18px;
+}
+
+.container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
diff --git a/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.html b/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.html
index 27b900f8b..dfadcf608 100644
--- a/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.html
+++ b/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.html
@@ -10,12 +10,14 @@
     </mat-card>
 
     <div *ngIf="transferProcesses$ | async as transferProcesses">
+      <div class="table-header-container">
       <button mat-stroked-button (click)="loadTransferProcesses()" color="accent">
         <mat-icon>cached</mat-icon>
         Refresh
       </button>
       <mat-paginator [length]="transferProcesses.length" pageSize="transferProcesses.length" hidePageSize="true"></mat-paginator>
-
+    </div>
+    
       <table mat-table [dataSource]="transferProcesses" class="transfer-history-table">
 
           <ng-container matColumnDef="id">
diff --git a/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.scss b/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.scss
index 66f394fbb..23b42d02d 100644
--- a/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.scss
+++ b/src/modules/edc-demo/components/transfer-history/transfer-history-viewer.component.scss
@@ -44,4 +44,9 @@ mat-paginator {
   margin-right: 5px;
 }
 
+.table-header-container{
+  gap: 10px;
+  display: flex;
+  align-items: center;
+}