style: fix gap and margin top values (#44)

eclipse-edc · Aug 18, 2023 · dcc2742 · dcc2742
1 parent 82739c9
commit dcc2742
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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/.../edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.html b/.../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/.../edc-demo/components/contract-definition-viewer/contract-definition-viewer.component.scss b/.../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;
-}
+.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
@@ -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
@@ -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
@@ -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
@@ -44,4 +44,9 @@ mat-paginator {
   margin-right: 5px;
 }
 
+.table-header-container{
+  gap: 10px;
+  display: flex;
+  align-items: center;
+}