From 80355c56b8f1beadd12fb3422b965043d8ce29e1 Mon Sep 17 00:00:00 2001 From: ppel Date: Mon, 25 Nov 2024 13:34:19 +0100 Subject: [PATCH 1/7] Bump version 0.8.3 to 0.9.0-SNAPSHOT --- package-lock.json | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1713919..b699436 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "inesdata-connector-interface", - "version": "0.8.3", + "version": "0.9.0-SNAPSHOT", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "inesdata-connector-interface", - "version": "0.8.3", + "version": "0.9.0-SNAPSHOT", "dependencies": { "@angular/animations": "^17.1.2", "@angular/cdk": "~15.2.9", diff --git a/package.json b/package.json index 1f0f69f..b93ce6b 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "inesdata-connector-interface", - "version": "0.8.3", + "version": "0.9.0-SNAPSHOT", "project": "com.gmv.inesdata", "scripts": { "ng": "ng", From e9f3da6befd99b0a1145f8acf3fe3f6212b7dfcd Mon Sep 17 00:00:00 2001 From: ppel Date: Wed, 27 Nov 2024 17:19:29 +0100 Subject: [PATCH 2/7] #449972 - Changing styles --- .../components/footer/footer.component.scss | 20 +++++++--- .../navigation/navigation.component.html | 2 +- .../navigation/navigation.component.scss | 40 +++++++++++++++---- .../components/spinner/spinner.component.scss | 2 +- src/assets/config/app.config.json | 2 +- src/assets/config/app.config.template.json | 2 +- src/environments/environment.ts | 2 +- src/styles.scss | 30 +++++++++++--- src/theme.scss | 7 ++-- 9 files changed, 79 insertions(+), 28 deletions(-) diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss index 104e475..a7712ad 100644 --- a/src/app/shared/components/footer/footer.component.scss +++ b/src/app/shared/components/footer/footer.component.scss @@ -1,19 +1,24 @@ /* Custom FOOTER component styles */ .footer { - background-color: #303030; padding: 10px 20px; - border-top: solid 1px rgba(255, 255, 255, 0.12); + border-width: 1px 0px 1px 0px; + border-style: solid; + border-color: var(--Grey-500, #E6E6E6); &__company { - border-top: solid 1px rgba(255, 255, 255, 0.12); + border-top: 2px solid#E6E6E6; padding: 10px 0; font-family: "Open Sans", sans-serif; + color: var(--secondary-600); + text-align: center; font-size: 12px; - color: white; - font-weight: 500; + font-weight: 600; + line-height: 16.34px; text-align: center; - background-color: #303030; + text-underline-position: from-font; + text-decoration-skip-ink: none; + p { margin: 0; } @@ -48,6 +53,7 @@ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; } + img { max-width: 150px; } @@ -57,6 +63,7 @@ @media (max-width: 1400px) { .footer { padding: 15px; + &__logos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; @@ -67,6 +74,7 @@ @media (max-width: 1200px) { .footer { padding: 10px; + &__logos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; diff --git a/src/app/shared/components/navigation/navigation.component.html b/src/app/shared/components/navigation/navigation.component.html index a24f191..7df49b5 100644 --- a/src/app/shared/components/navigation/navigation.component.html +++ b/src/app/shared/components/navigation/navigation.component.html @@ -36,7 +36,7 @@ {{ titleService.getTitle() }}
- exit_to_app + logout
Log out
diff --git a/src/app/shared/components/navigation/navigation.component.scss b/src/app/shared/components/navigation/navigation.component.scss index 1d586c9..3045c85 100644 --- a/src/app/shared/components/navigation/navigation.component.scss +++ b/src/app/shared/components/navigation/navigation.component.scss @@ -6,18 +6,24 @@ .sidenav { width: 300px; - background-color: #202020; + box-shadow: 0.2em 0em 0.5em rgba(0, 0, 0, 0.1); } .sidenav .mat-toolbar { background: inherit; + font-size: 22px; + font-weight: 400; + line-height: 27.24px; + color: var(--secondary-600); } .mat-toolbar.mat-primary { position: sticky; top: 0; z-index: 2; + background: var(--brand-500); } + .logout { width: 100%; text-align: right; @@ -28,19 +34,25 @@ .logout span { display: flex; - align-items: center; /* Alinea verticalmente el ícono y el texto */ - cursor: pointer; /* Cursor tipo pointer solo para el span contenedor */ - transition: color 0.3s; /* Transición suave para el cambio de color */ + align-items: center; + /* Alinea verticalmente el ícono y el texto */ + cursor: pointer; + /* Cursor tipo pointer solo para el span contenedor */ + transition: color 0.3s; + /* Transición suave para el cambio de color */ } .logout span:hover { - color: #ffab40; /* Cambia el color de ambos al hacer hover */ + color: #ffab40; + /* Cambia el color de ambos al hacer hover */ } .logout mat-icon { - font-size: 24px; - margin-right: 3px; + font-size: 18px; + margin-right: 10px; + align-content: center; } + .container { display: flex; flex-direction: column; @@ -61,4 +73,18 @@ mat-sidenav-content { mat-toolbar { min-height: 64px; + font-size: 16px; +} + +:host ::ng-deep .mdc-list-item__primary-text, +:host ::ng-deep mat-nav-list mat-icon{ + color: var(--secondary-600) !important; +} + +:host ::ng-deep .mdc-list-item:focus::before { + background-color: unset; +} + +:host ::ng-deep .mdc-list-item:focus { + background-color: var(--grey-400); } diff --git a/src/app/shared/components/spinner/spinner.component.scss b/src/app/shared/components/spinner/spinner.component.scss index ad50e08..09fc079 100644 --- a/src/app/shared/components/spinner/spinner.component.scss +++ b/src/app/shared/components/spinner/spinner.component.scss @@ -14,7 +14,7 @@ .spinner { border: 8px solid #f3f3f3; - border-top: 8px solid #03a9f4; + border-top: 8px solid #EF7011; border-radius: 50%; width: 60px; height: 60px; diff --git a/src/assets/config/app.config.json b/src/assets/config/app.config.json index e61933a..ea3925b 100644 --- a/src/assets/config/app.config.json +++ b/src/assets/config/app.config.json @@ -5,7 +5,7 @@ "participantId": "connector-c1", "storageAccount": "company2assets", "storageExplorerLinkTemplate": "storageexplorer://v=1", - "theme": "theme-2", + "theme": "", "service": { "asset": { "baseUrl": "/v3/assets", diff --git a/src/assets/config/app.config.template.json b/src/assets/config/app.config.template.json index 7094dcc..7decad0 100644 --- a/src/assets/config/app.config.template.json +++ b/src/assets/config/app.config.template.json @@ -5,7 +5,7 @@ "participantId": "$PARTICIPANT_ID", "storageAccount": "$STORAGE_ACCOUNT", "storageExplorerLinkTemplate": "$STORAGE_LINK_TEMPLATE", - "theme": "$APP_THEME", + "theme": "", "service": { "asset": { "baseUrl": "/v3/assets", diff --git a/src/environments/environment.ts b/src/environments/environment.ts index 99d467f..b97475b 100644 --- a/src/environments/environment.ts +++ b/src/environments/environment.ts @@ -17,7 +17,7 @@ export const environment = { participantId: "connector-c1", storageAccount: "company2assets", storageExplorerLinkTemplate: "storageexplorer://v=1", - theme: "theme-2", + theme: "", service: { asset: { baseUrl: '/v3/assets', diff --git a/src/styles.scss b/src/styles.scss index 67d072f..61f6ca1 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -1,5 +1,22 @@ @import "./theme.scss"; +:root { + /* Mode 1 */ + /* color */ + --white: #ffffff; + --brand-500: #ef7011; + --grey-400: #eeeeee; + --grey-500: #e6e6e6; + --grey-600: #d9d8d8; + --grey-700: #b3b3b3; + --grey-800: #a3a3a3; + --secondary-500: #3c6b85; + --secondary-600: #203f57; + --secondary-700: #212529; + --secondary-red-500: #f44336; + --tertiary-500: #4dafba; +} + /* global styles */ html, @@ -131,9 +148,6 @@ mat-card:not(.dialog-card) { font-size: 14px; letter-spacing: 0.04em; } -.items-center { - align-items: center; -} .gap-4 { gap: 1rem; @@ -155,9 +169,6 @@ mat-card:not(.dialog-card) { .border-solid { border-style: solid; } -.border-l-2 { - border-left-width: 2px; -} .border-0 { border-width: 0px; } @@ -193,6 +204,13 @@ mat-card:not(.dialog-card) { .w-2 { width: 0.5rem; } +.border-l-2 { + border-left-width: 2px; +} +.items-center { + align-items: center; +} + app-json-dialog { display: block; diff --git a/src/theme.scss b/src/theme.scss index b17efaa..c723356 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -13,7 +13,7 @@ $theming-material-components-typography: mat.define-typography-config( $font-family: "Open Sans", ); -$theme1: mat-dark-theme( +$theme1: mat-light-theme( ( color: ( primary: mat-palette($mat-teal), @@ -38,7 +38,7 @@ $grey-700: #707070; $grey-800: #808080; $grey-900: #909090; -$theme2: mat-dark-theme( +$theme2: mat-light-theme( ( color: ( primary: mat-palette($mat-light-blue), @@ -50,7 +50,7 @@ $theme2: mat-dark-theme( ) ); -$theme3: mat-dark-theme( +$theme3: mat-light-theme( ( color: ( primary: mat-palette($mat-light-green), @@ -122,7 +122,6 @@ $theme3: mat-dark-theme( .mat-expansion-panel-header[_ngcontent-ng-c808659378]:hover:not( [aria-disabled="true"] ) { - background: rgb(255 171 64 / 20%); transition: 0.2s background; } From c56def0315127e915e1080d2faae43ee3e933dcf Mon Sep 17 00:00:00 2001 From: ppel Date: Fri, 20 Dec 2024 14:07:48 +0100 Subject: [PATCH 3/7] Added new styles for redesign --- .../asset-create/asset-create.component.html | 451 +++++++++--------- .../asset-create/asset-create.component.scss | 54 +-- .../asset-viewer/asset-viewer.component.html | 98 ++-- .../asset-viewer/asset-viewer.component.scss | 35 +- .../catalog-browser.component.html | 77 +-- .../catalog-browser.component.scss | 37 +- .../contract-offers-viewer.component.html | 42 +- .../contract-offers-viewer.component.scss | 56 ++- .../contract-definition-new.component.html | 81 ++-- .../contract-definition-new.component.scss | 8 - .../contract-definition-viewer.component.html | 91 ++-- .../contract-definition-viewer.component.scss | 40 +- .../contract-transfer-dialog.component.html | 21 +- .../contract-transfer-dialog.component.scss | 12 +- .../contract-viewer.component.html | 58 +-- .../contract-viewer.component.scss | 14 +- .../json-dialog/json-dialog.component.html | 21 +- .../new-policy/new-policy.component.html | 51 +- .../new-policy/new-policy.component.scss | 19 +- ...olicy-form-expression-multi.component.html | 6 +- .../policy-expression.component.html | 4 +- .../policy-view/policy-view.component.html | 64 +-- .../policy-view/policy-view.component.scss | 31 +- .../transfer-history-viewer.component.html | 8 +- .../transfer-history-viewer.component.scss | 42 +- .../vocabulary-create.component.html | 71 +-- .../vocabulary-create.component.scss | 20 - .../vocabulary-viewer.component.html | 64 +-- .../vocabulary-viewer.component.scss | 34 +- .../confirmation-dialog.component.html | 4 +- .../components/footer/footer.component.scss | 4 +- .../navigation/navigation.component.html | 2 +- .../navigation/navigation.component.scss | 23 +- .../uploader-file.component.html | 22 +- .../uploader-file.component.scss | 41 +- src/favicon.ico | Bin 948 -> 33304 bytes src/styles.scss | 419 +++++++++++++--- src/theme.scss | 136 ++---- 38 files changed, 1195 insertions(+), 1066 deletions(-) diff --git a/src/app/pages/assets/asset-create/asset-create.component.html b/src/app/pages/assets/asset-create/asset-create.component.html index 031f5e4..78fdc2a 100644 --- a/src/app/pages/assets/asset-create/asset-create.component.html +++ b/src/app/pages/assets/asset-create/asset-create.component.html @@ -1,242 +1,249 @@ -

Create an asset

- - -
-
- - Id - - - - Name - - -
-
- - Content Type - - - - - Version - - -
-
- - Short description - - -
-
- -
-
- - Asset type - - - {{ assetType[1] }} - - - - - Keywords - - -
-
- - Byte Size - - - - File format - - -
-
-
- - - - -
-
- - - - edit_note{{defaultForm.name}} - - - - -
+ + + Create an asset + + + + +
+
+ + Id + + + + Name + +
- -
- - Vocabularies - - - {{ v.name }} + + Content Type + + + + + Version + + +
+
+ + Short description + + +
+
+ +
+
+ + Asset type + + + {{ assetType[1] }} + + Keywords + +
-
-
- - - - edit_note{{selectedForm.name}} - - - - - - -
+
+ + Byte Size + + + + File format + +
- - - - - - -
-
- - Destination - - - {{storageType.name}} - - -
+ + + + + +
+
+ + + + edit_note{{defaultForm.name}} + + + + +
+
+
+ +
+ + Vocabularies + + + {{ v.name }} + + + +
+
+
+ + + + edit_note{{selectedForm.name}} + + + + + + +
+
+
+
+ +
-
+ +
- - Name - - - - - Path - - - - - Base URL - - - - - Auth Key - - - - - Auth Code - - - - - Secret Name - - - - - Content Type - - + + Destination + + + {{storageType.name}} + + +
-
- - Proxy Body - -
+
+
+ + Name + + -
- - Proxy Path - -
+ + Path + + -
- - Proxy Query Params - -
+ + Base URL + + + + + Auth Key + + -
- - Proxy Method - + + Auth Code + + + + + Secret Name + + + + + Content Type + + +
+ +
+ + Proxy Body + +
+ +
+ + Proxy Path + +
+ +
+ + Proxy Query Params + +
+ +
+ + Proxy Method + +
-
-
- - Region - - - - - Bucket Name - - - - - Key Prefix - - - - - Folder Name - - - - - Access Key Id - - - - - Secret Access Key - - - - - Endpoint Override - - -
+
+ + Region + + -
- - Folder - - - -
-
- - + + Bucket Name + + + + + Key Prefix + + + + + Folder Name + + - + + Access Key Id + + + + + Secret Access Key + + - + + Endpoint Override + + +
+ +
+ + Folder + + + +
+
+ + + +
+ + + +
+ diff --git a/src/app/pages/assets/asset-create/asset-create.component.scss b/src/app/pages/assets/asset-create/asset-create.component.scss index 9d7063f..f66eec1 100644 --- a/src/app/pages/assets/asset-create/asset-create.component.scss +++ b/src/app/pages/assets/asset-create/asset-create.component.scss @@ -1,7 +1,3 @@ -mat-dialog-content { - width: 1000px; -} - .form-field:nth-child(odd) { margin-right: 10px; width: calc(50% - 10px); @@ -11,9 +7,6 @@ mat-dialog-content { width: calc(50% - 1px); } -mat-card-actions { - margin-left: 0; -} .form-field-stretch{ box-sizing: border-box; @@ -21,8 +14,9 @@ mat-card-actions { } :host ::ng-deep .ck-editor__editable_inline { + border-color: var(--secondary-600) !important; min-height: 300px; - color: black; + color: var(--secondary-600); box-sizing: border-box; width: 100%; margin-bottom: 1.5em; @@ -36,39 +30,37 @@ mat-card-actions { width: 100% !important; } -.p-15{ - padding:15px; +.form-field-full{ + width:100% !important; + margin-top: 15px; } -.full-width{ - width: 95%; +.mat-mdc-tab-group { + background-color: white; } -.form-field-full{ - width:100% !important; - margin-top: 15px; +.mat-mdc-tab-group .mat-mdc-tab-group { + background-color: var(--grey-400); } -.custom-expansion{ - border: 1px solid #b2b2b2; - margin-bottom: 10px; +:host ::ng-deep .mat-mdc-tab-group .mat-mdc-tab-group mat-form-field .mat-mdc-text-field-wrapper{ + background-color: white; } -.mat-mdc-dialog-content { - max-height: 85vh; + +mat-panel-title, +:host ::ng-deep th { + color: var(--secondary-600); } -:host ::ng-deep .mat-expansion-indicator { - display: none; + +:host ::ng-deep .mat-column-action { + text-align: center; } -.toggle { - margin-bottom: 22px; - --mat-mdc-form-field-floating-label-scale: 0.75; - display: inline-flex; - flex-direction: column; - min-width: 0; - text-align: left; +:host ::ng-deep .ck-reset_all :not(.ck-reset_all-excluded *) { + color: var(--secondary-500); } -:host ::ng-deep .toggle .mdc-form-field{ - font-size: 16px; +:host ::ng-deep .ck.ck-editor__top .ck-sticky-panel .ck-sticky-panel__content { + border-color: var(--secondary-500); } + diff --git a/src/app/pages/assets/asset-viewer/asset-viewer.component.html b/src/app/pages/assets/asset-viewer/asset-viewer.component.html index 5ef543f..33f2e55 100644 --- a/src/app/pages/assets/asset-viewer/asset-viewer.component.html +++ b/src/app/pages/assets/asset-viewer/asset-viewer.component.html @@ -1,59 +1,63 @@
-
+ +
+ + +
-
- - - upload - {{asset.id}} - - - - - info -
Name
-
{{asset.properties.optionalValue('edc','name')}}
-
- - category -
Content Type
-
{{asset.properties.optionalValue('edc','contenttype')}}
-
- - file_copy -
Version
-
{{asset.properties.optionalValue('edc','version')}}
-
-
-
+
+
+ + + upload + {{asset.id}} + + + + + info +
Name
+
{{asset.properties.optionalValue('edc','name')}}
+
+ + category +
Content Type
+
{{asset.properties.contenttype ? asset.properties.contenttype : 'Not available'}}
+
+ + file_copy +
Version
+
{{asset.properties.optionalValue('edc','version')}}
+
+
+
- - - - - - - - -
+ + + + + + + + +
-
- - +
+ There are no assets created.
diff --git a/src/app/pages/assets/asset-viewer/asset-viewer.component.scss b/src/app/pages/assets/asset-viewer/asset-viewer.component.scss index 3d5f1fe..7d1fd48 100644 --- a/src/app/pages/assets/asset-viewer/asset-viewer.component.scss +++ b/src/app/pages/assets/asset-viewer/asset-viewer.component.scss @@ -1,35 +1,8 @@ -#wrapper { +mat-card-actions { + padding-right: 15px !important; + padding-bottom: 20px !important; } -.main-property-icon { - font-size: 12px; -} - -.search-form-field { - min-width: 200px; - width: 30%; - margin-top: 18px; -} - -.card-actions { - margin-left: 0; -} - -.asset-property { - font-weight: bold !important; -} - -mat-paginator { - display: inline-block; - background-color: transparent; -} - -.container { - display: flex; - align-items: center; - gap: 10px; /* Adjust the gap between elements */ -} - -.card-actions button { +.card-actions button:first-child { margin-right: 10px; } diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.html b/src/app/pages/catalog/catalog-browser/catalog-browser.component.html index 862f517..f9eb90e 100644 --- a/src/app/pages/catalog/catalog-browser/catalog-browser.component.html +++ b/src/app/pages/catalog/catalog-browser/catalog-browser.component.html @@ -1,44 +1,45 @@
-
- - - sim_card - {{dataOffer.assetId}} - - - - - category -
Type
-
{{dataOffer.properties.type}}
-
- - link -
Originator
-
{{dataOffer.originator}}
-
-
-
+
+ + +
- - - - - - -
+
+
+ + + sim_card + {{dataOffer.assetId}} + + + + + category +
Type
+
{{dataOffer.properties.type}}
+
+ + link +
Originator
+
{{dataOffer.originator}}
+
+
+
+ + + + + + +
+
-
- - +
+ There are no offerings in the catalog.
diff --git a/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss b/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss index 3bc32e4..df2c432 100644 --- a/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss +++ b/src/app/pages/catalog/catalog-browser/catalog-browser.component.scss @@ -1,36 +1,3 @@ -#wrapper { -} - -.main-property-icon { - font-size: 12px; -} - -:host ::ng-deep div.mat-expansion-panel-body { - padding-left: 0 !important; -} - -.search-form-field { - min-width: 200px; - width: 30%; - margin-top: 18px; -} - -.card-actions { - margin-left: 0; - display: flex; - justify-content: center; -} - -.asset-property-name { - font-weight: bold !important; -} - -.container { - display: flex; - align-items: center; - gap: 10px; -} - -mat-expansion-panel { - margin-bottom: 10px !important; +mat-card-actions { + padding-bottom: 5px !important; } diff --git a/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.html b/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.html index 469bae6..cc5fdf0 100644 --- a/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.html +++ b/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.html @@ -1,4 +1,8 @@ + + @@ -7,11 +11,11 @@
Id
-
{{data.properties.id}}
+

{{data.properties.id}}

Name
-
{{data.properties.name}}
+

{{data.properties.name}}

@@ -19,33 +23,33 @@
Content-Type
{{data.properties.contenttype ? data.properties.contenttype : 'Not available'}}
+ matListItemLine>

{{data.properties.contenttype ? data.properties.contenttype : 'Not available'}}

Version
-
{{data.properties.version}}
+

{{data.properties.version}}

Short description
-
{{data.properties.shortDescription}}
+

{{data.properties.shortDescription}}

- +
Description
-
+
Asset type
-
{{data.properties.assetType}}
+

{{data.properties.assetType}}

Keywords
-
{{data.properties.keywords}}
+

{{data.properties.keywords}}

@@ -53,13 +57,13 @@
Byte size
{{data.properties.byteSize ? data.properties.byteSize : 'Not available'}}
+ matListItemLine>

{{data.properties.byteSize ? data.properties.byteSize : 'Not available'}}

File format
{{data.properties.format ? data.properties.format : 'Not available'}}
+ matListItemLine>

{{data.properties.format ? data.properties.format : 'Not available'}}

@@ -69,7 +73,7 @@
- + {{item.key}} @@ -100,7 +104,7 @@ - + {{item.key}} @@ -128,14 +132,14 @@
Storage type
-
{{ dataAddressType }}
+

{{ dataAddressType }}

File
-
{{ data.dataAddress.keyName }}
+

{{ data.dataAddress.keyName }}

@@ -145,7 +149,7 @@
{{ property.key }}
-
{{ property.value }}
+

{{ property.value }}

@@ -167,7 +171,7 @@ - + diff --git a/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.scss b/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.scss index d43e47e..9bba800 100644 --- a/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.scss +++ b/src/app/pages/catalog/contract-offers-viewer/contract-offers-viewer.component.scss @@ -6,21 +6,22 @@ mat-card-title { margin-bottom: 10px; - color: white; + color: var(--secondary-600); } .property-title { font-weight: bold !important; + font-size: 14px; } mat-list-item:hover .property-title, .property-title { - color: white; + color: var(--secondary-600); } .property-value { font-size: 14px; - color: #d7d7d7; + color: var(--secondary-600); overflow-wrap: anywhere; white-space: pre-wrap; } @@ -38,7 +39,7 @@ mat-list-item:hover .property-title, } :host ::ng-deep .grey .detail-item { - background: #474747; + background: var(--grey-400); padding: 1rem 1.25rem; border-radius: 16px; } @@ -63,27 +64,25 @@ mat-list-item:hover .property-title, } .detail-title { - font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-weight: bold; - color: #333; + color: var(--secondary-600); display: block; &-inline { - font-family: "Baloo 2", Helvetica, Arial, sans-serif; font-weight: bold; - color: #333; + color: var(--secondary-600); display: inline; } } .detail-value { font-size: 14px; - color: #555; + color: var(--secondary-600); display: block; &-inline { font-size: 14px; - color: #555; + color: var(--secondary-600); display: inline; } } @@ -92,6 +91,10 @@ ul { margin: 0px; } +li::marker { + color: var(--secondary-500); +} + .property-value.description { white-space: normal; } @@ -114,6 +117,7 @@ mat-expansion-panel-header { .contract-offer { margin-bottom: 20px; + background-color: white; } .value-not-available { @@ -125,7 +129,7 @@ mat-expansion-panel-header { } :host ::ng-deep a { - color: white; + color: var(--grey-400); } .mat-mdc-card-actions { @@ -140,10 +144,34 @@ mat-expansion-panel-header { margin-top: var(--mdc-linear-progress-track-height, -4px); } -:host ::ng-deep .bg-white { - background-color: rgb(71 71 71); +:host ::ng-deep policy-expression { + font-size: 14px; } -:host ::ng-deep policy-expression { +.property-value:before { + content: unset; +} + +.mat-expansion-panel{ + background-color: var(--grey-400); + box-shadow: unset !important; +} + +:host ::ng-deep .mat-expansion-indicator:after{ + color: var(--secondary-600); +} + +.contract-offer mat-card-title { + letter-spacing: 1.25px; font-size: 14px; + font-weight: bold; +} + +:host ::ng-deep policy-expression { + color: var(--secondary-500); +} + +mat-card-actions { + padding-right: 10px !important; + padding-bottom: 15px !important; } diff --git a/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.html b/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.html index 2b48a08..1ea2a13 100644 --- a/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.html +++ b/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.html @@ -1,46 +1,53 @@ - - Id - - + + + + + Create a contract definition + -
- - Access policy - - - {{policy['@id']}} - - - + + Id + + - - Contract policy - - - {{policy['@id']}} - - - +
+ + Access policy + + + {{policy['@id']}} + + + - - Assets - - - {{asset.id}} - - - -
+ + Contract policy + + + {{policy['@id']}} + + + + + Assets + + + {{asset.id}} + + + +
- - - +
+ diff --git a/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.scss b/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.scss index c4c8397..e53ebd1 100644 --- a/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.scss +++ b/src/app/pages/contract-definitions/contract-definition-new/contract-definition-new.component.scss @@ -1,7 +1,3 @@ -mat-dialog-content { - width: 800px; -} - .form-field { width: 300px; } @@ -28,7 +24,3 @@ mat-dialog-content { .form-field-operator { width: 90px; } - -mat-card-actions { - margin-left: 0; -} diff --git a/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.html b/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.html index 7115ac6..83965e2 100644 --- a/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.html +++ b/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.html @@ -1,60 +1,59 @@
-
+ +
+ +
-
- - - - policy - {{contractDefinition.id}} - - - - - policy -
Access policy
-
{{contractDefinition.accessPolicyId}}
-
- - policy -
Contract policy
-
{{contractDefinition.contractPolicyId}}
-
- -
Assets
- policy +
+
+ + + policy + {{contractDefinition.id}} + + + + + policy +
Access policy
+
{{contractDefinition.accessPolicyId}}
+
+ + policy +
Contract policy
+
{{contractDefinition.contractPolicyId}}
+
+ +
Assets
+ policy -
All assets
- -
{{getCriterionFormat(criterion)}}
-
-
-
+
All assets +
+ +
+ {{getCriterionFormat(criterion)}}
+
+ + +
- - - - - - -
+ + + + +
-
- - +
+ There are no contract definitions created.
diff --git a/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.scss b/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.scss index 456e2ae..8058895 100644 --- a/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.scss +++ b/src/app/pages/contract-definitions/contract-definition-viewer/contract-definition-viewer.component.scss @@ -1,39 +1,7 @@ -#wrapper { -} - -.main-property-icon { - font-size: 12px; -} - -:host ::ng-deep div.mat-expansion-panel-body { - padding-left: 0 !important; -} - -.search-form-field { - min-width: 200px; - width: 30%; - margin-top: 18px; -} - -.card-actions { - margin-left: 0; -} - -.bold-text { - font-weight: bold !important; -} - -mat-paginator { - display: inline-block; - background-color: transparent; -} - -.container { - display: flex; - align-items: center; - gap: 10px; -} - .contract-assets .mdc-list-item__secondary-text{ white-space: break-spaces; } + +mat-card-actions { + padding-right: 15px !important; +} diff --git a/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.html b/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.html index 52c9de7..fdc71d6 100644 --- a/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.html +++ b/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.html @@ -1,3 +1,16 @@ +
+
+
+
+ Transfer +
+
+
+ +
+ @@ -109,13 +122,7 @@ -
- - -
diff --git a/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.scss b/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.scss index 497ae82..778bf6a 100644 --- a/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.scss +++ b/src/app/pages/contracts/contract-transfer-dialog/contract-transfer-dialog.component.scss @@ -11,6 +11,14 @@ mat-dialog-content { width: 50% } -mat-card-actions { - margin-left: 0; +:host ::ng-deep .mdc-dialog .mdc-dialog__content { + margin-bottom: 0; +} + +:host ::ng-deep .mdc-dialog__title::before{ + height: 0; +} + +.mat-mdc-dialog-actions { + justify-content: end; } diff --git a/src/app/pages/contracts/contract-viewer/contract-viewer.component.html b/src/app/pages/contracts/contract-viewer/contract-viewer.component.html index 130e36c..fdc2d2c 100644 --- a/src/app/pages/contracts/contract-viewer/contract-viewer.component.html +++ b/src/app/pages/contracts/contract-viewer/contract-viewer.component.html @@ -1,7 +1,17 @@
-
-
- +
+ + +
+ +
+
+ attachment {{contract.id}} @@ -14,51 +24,35 @@
Asset
{{contract.assetId}}
- person
Provider
{{contract.providerId}}
- draw
Signing date
-
{{asDate(contract.mandatoryValue('edc', - 'contractSigningDate'))}}
+
{{asDate(contract.mandatoryValue('edc', 'contractSigningDate'))}}
- -
- - - - -
- - - - - - +
+ + + +
+ + +
-
- - +
+ There are no contracts negotiated.
diff --git a/src/app/pages/contracts/contract-viewer/contract-viewer.component.scss b/src/app/pages/contracts/contract-viewer/contract-viewer.component.scss index ca0dd6f..916f572 100644 --- a/src/app/pages/contracts/contract-viewer/contract-viewer.component.scss +++ b/src/app/pages/contracts/contract-viewer/contract-viewer.component.scss @@ -1,12 +1,4 @@ -#wrapper { -} - -.container { - display: flex; - align-items: center; - gap: 10px; -} - -.contract-property-header { - font-weight: bold !important; +mat-card-actions { + padding-right: 15px !important; + padding-bottom: 15px !important; } diff --git a/src/app/pages/json-dialog/json-dialog/json-dialog.component.html b/src/app/pages/json-dialog/json-dialog/json-dialog.component.html index fea9cce..f2e8780 100644 --- a/src/app/pages/json-dialog/json-dialog/json-dialog.component.html +++ b/src/app/pages/json-dialog/json-dialog/json-dialog.component.html @@ -1,4 +1,4 @@ -
+
{{ data.icon }} @@ -20,6 +20,15 @@ (click)="onAction(data.toolbarButton)"> {{ data.toolbarButton.icon }} +
+ +
@@ -46,13 +55,5 @@ >Cleaned JSON
-
- -
+
diff --git a/src/app/pages/policies/new-policy/new-policy.component.html b/src/app/pages/policies/new-policy/new-policy.component.html index ee8177f..b01d0cb 100644 --- a/src/app/pages/policies/new-policy/new-policy.component.html +++ b/src/app/pages/policies/new-policy/new-policy.component.html @@ -1,34 +1,29 @@ - -
-
Policy Metadata
- - - ID - - {{ - validationMessages.invalidSpecialCharactersMessage + + + Create a new policy + + + + + ID + + {{ + validationMessages.invalidSpecialCharactersMessage }} - + -
Policy Expression
+
Policy Expression
- + +
+ +
- - - - - - + diff --git a/src/app/pages/policies/new-policy/new-policy.component.scss b/src/app/pages/policies/new-policy/new-policy.component.scss index 92ca160..f6bf28e 100644 --- a/src/app/pages/policies/new-policy/new-policy.component.scss +++ b/src/app/pages/policies/new-policy/new-policy.component.scss @@ -1,18 +1,3 @@ -mat-dialog-content { - min-width: 1500px; +:host ::ng-deep policy-form-expression-constraint { + color: var(--secondary-600); } - -.form-field-half{ - box-sizing: border-box; - width: calc(50% - 2px); - margin: 1px; -} -.form-field-stretch{ - box-sizing: border-box; - width: 100%; -} -.mat-mdc-dialog-content { - max-height: 85vh; - min-height: 65vh; -} - diff --git a/src/app/pages/policies/policy-editor/editor/policy-form-expression-multi/policy-form-expression-multi.component.html b/src/app/pages/policies/policy-editor/editor/policy-form-expression-multi/policy-form-expression-multi.component.html index dc5543e..d94516d 100644 --- a/src/app/pages/policies/policy-editor/editor/policy-form-expression-multi/policy-form-expression-multi.component.html +++ b/src/app/pages/policies/policy-editor/editor/policy-form-expression-multi/policy-form-expression-multi.component.html @@ -7,7 +7,7 @@
+ class="border-solid border-0 border-l-2 border-secondary-600 flex flex-col gap-1 ml-2 pl-4">
+ class="border-solid border-0 border-l-2 border-secondary-600 flex flex-col gap-1 ml-2 pl-4">
diff --git a/src/app/pages/policies/policy-view/policy-view.component.html b/src/app/pages/policies/policy-view/policy-view.component.html index 379b659..266193a 100644 --- a/src/app/pages/policies/policy-view/policy-view.component.html +++ b/src/app/pages/policies/policy-view/policy-view.component.html @@ -1,43 +1,47 @@
-
+ +
+ + +
-
- - - policy - {{policyCard.id}} - +
+
+ + + policy + {{policyCard.id}} + - - - + + + - - - - - - + + + + + +
-
- - +
+ There are no policies created.
diff --git a/src/app/pages/policies/policy-view/policy-view.component.scss b/src/app/pages/policies/policy-view/policy-view.component.scss index d705c22..c6f3a82 100644 --- a/src/app/pages/policies/policy-view/policy-view.component.scss +++ b/src/app/pages/policies/policy-view/policy-view.component.scss @@ -2,37 +2,17 @@ padding-left: 0 !important; } -.search-form-field { - min-width: 200px; - width: 30%; - margin-top: 18px; -} - mat-card-content { margin: 1em 0em; } -.container { - display: flex; - align-items: center; - gap: 10px; -} - -button { - --mdc-protected-button-container-color: #3b3939 !important; -} - .mat-mdc-card-avatar { height: 24px; } -mat-card { - font-family: "Open Sans", sans-serif; - place-self: normal; -} - :host ::ng-deep policy-expression { font-size: 14px; + color: var(--secondary-500); } .card-actions button { @@ -54,3 +34,12 @@ mat-card { :host ::ng-deep .mat-mdc-card-header-text{ width: 100%; } + +mat-card-actions { + padding-right: 5px !important; + padding-bottom: 15px !important; +} + +.mat-mdc-card-content { + padding-left: 32px; +} diff --git a/src/app/pages/transfer-history/transfer-history-viewer.component.html b/src/app/pages/transfer-history/transfer-history-viewer.component.html index d5761af..4ba4b9f 100644 --- a/src/app/pages/transfer-history/transfer-history-viewer.component.html +++ b/src/app/pages/transfer-history/transfer-history-viewer.component.html @@ -1,7 +1,7 @@
-
+
diff --git a/src/app/pages/transfer-history/transfer-history-viewer.component.scss b/src/app/pages/transfer-history/transfer-history-viewer.component.scss index a610d41..4c31b0c 100644 --- a/src/app/pages/transfer-history/transfer-history-viewer.component.scss +++ b/src/app/pages/transfer-history/transfer-history-viewer.component.scss @@ -1,14 +1,11 @@ -#wrapper { +table { + margin-top: 20px; } .transfer-history-table { width: 100%; } -.transfer-history-table-header th { - font-weight: bold; -} - .mat-table { overflow-x: scroll; } @@ -22,11 +19,6 @@ white-space: nowrap; } -mat-paginator { - display: inline-block; - background-color: transparent; -} - .info-box { display: flex; align-items: center; @@ -44,12 +36,30 @@ mat-paginator { margin-right: 5px; } -.table-header-container { - gap: 10px; - display: flex; - align-items: center; -} - .table-header-container button { align-self: center; } + +:host ::ng-deep thead { + background-color: var(--grey-400) !important; +} + +:host ::ng-deep thead th { + color: var(--secondary-600) !important; + font-weight: normal !important; + font-size: 16px !important; + letter-spacing: 0.5px !important; +} + +:host ::ng-deep tbody td { + color: var(--secondary-500) !important; +} + +:host ::ng-deep table tr { + height: 56px !important; +} + +:host ::ng-deep table button { + color: var(--secondary-500) !important; + border-color: var(--secondary-500) !important; +} diff --git a/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.html b/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.html index f49340e..f7b90f1 100644 --- a/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.html +++ b/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.html @@ -1,39 +1,42 @@ + + + Create a vocabulary + +
+ + Id + + -

Create a vocabulary

-
-
- - Id - - - - Name - - -
-
- - Asset category - - - {{ cat[1] }} - - - - - - - Schema (JSON) - - -
+ + Name + +
- + + Asset category + + + {{ cat[1] }} + + + + + + + Schema (JSON) + + - +
+ + + +
+ diff --git a/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.scss b/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.scss index d3e2acb..33c0abe 100644 --- a/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.scss +++ b/src/app/pages/vocabularies/vocabulary-create/vocabulary-create.component.scss @@ -1,7 +1,3 @@ -mat-dialog-content { - width: 800px; -} - .form-field:nth-child(odd) { margin-right: 10px; width: calc(50% - 10px); @@ -11,23 +7,7 @@ mat-dialog-content { width: calc(50% - 1px); } -mat-card-actions { - margin-left: 0; -} - .form-field-stretch{ box-sizing: border-box; width: 100%; } - -:host ::ng-deep .ck-editor__editable_inline { - min-height: 300px; - color: black; - box-sizing: border-box; - width: 100%; - margin-bottom: 1.5em; -} - -.short-description { - width: 100%; -} diff --git a/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.html b/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.html index 15961f4..f4a9488 100644 --- a/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.html +++ b/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.html @@ -1,39 +1,45 @@
-
+ +
-
- - - book - {{vocabulary.name}} - - - - - info -
Connector
-
{{vocabulary.connectorId}}
-
-
-
+
+
+ + + book + {{vocabulary.name}} + + + + + info +
Connector
+
{{vocabulary.connectorId}}
+
+
+
+ + + + + + + + +
+
+
- - - - - - - - -
+
+ There are no vocabularies created.
diff --git a/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.scss b/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.scss index eea6f4a..d52bf05 100644 --- a/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.scss +++ b/src/app/pages/vocabularies/vocabulary-viewer/vocabulary-viewer.component.scss @@ -1,31 +1,13 @@ -.main-property-icon { - font-size: 12px; +mat-card-actions { + padding-right: 15px !important; + padding-bottom: 20px !important; } -.search-form-field { - min-width: 200px; - width: 30%; - margin-top: 18px; +button:not(:first-child) { + margin-left: 10px; } -.card-actions { - margin-left: 0; -} - -.main-property { - font-weight: bold !important; -} - -mat-paginator { - display: inline-block; - background-color: transparent; -} - -.container { - display: flex; - align-items: center; - gap: 10px; /* Adjust the gap between elements */ -} -.card-actions button { - margin-right: 10px; +.section-header button{ + margin-bottom: 10px; + margin-top: 10px; } diff --git a/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html b/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html index 77ebd46..c4b2148 100644 --- a/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html +++ b/src/app/shared/components/confirmation-dialog/confirmation-dialog.component.html @@ -7,6 +7,6 @@

- - + +
diff --git a/src/app/shared/components/footer/footer.component.scss b/src/app/shared/components/footer/footer.component.scss index a7712ad..b39b60f 100644 --- a/src/app/shared/components/footer/footer.component.scss +++ b/src/app/shared/components/footer/footer.component.scss @@ -5,6 +5,7 @@ border-width: 1px 0px 1px 0px; border-style: solid; border-color: var(--Grey-500, #E6E6E6); + background-color: white; &__company { border-top: 2px solid#E6E6E6; @@ -12,12 +13,13 @@ font-family: "Open Sans", sans-serif; color: var(--secondary-600); text-align: center; - font-size: 12px; + font-size: 16px; font-weight: 600; line-height: 16.34px; text-align: center; text-underline-position: from-font; text-decoration-skip-ink: none; + background-color: white; p { margin: 0; diff --git a/src/app/shared/components/navigation/navigation.component.html b/src/app/shared/components/navigation/navigation.component.html index 7df49b5..0a3bbd2 100644 --- a/src/app/shared/components/navigation/navigation.component.html +++ b/src/app/shared/components/navigation/navigation.component.html @@ -1,4 +1,4 @@ -
+