Comment old css in monitor-custom.css. Change contact-us base on new mocks.

src/app/contact/contact.component.html

@@ -1,25 +1,28 @@
 <schema2jsonld *ngIf="url" [URL]="url" [name]="pageTitle" type="other" [description]="description"></schema2jsonld>
-<div class="uk-section">
+<div class="uk-container uk-container-large uk-section uk-padding-remove-bottom">
-    <div class="uk-align-center">
+  <div class="uk-padding-small">
-      <div *ngIf="showLoading" class="uk-margin-large">
+    <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
-        <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
+  </div>
-            class="loading-gif  uk-align-center"></span></div>
+</div>
-      </div>
+<div class="uk-section uk-padding-remove-top uk-container uk-container-large">
-      <div *ngIf="!showLoading" class="uk-container uk-container-large">
+  <div class="uk-padding-small uk-width-1-2@l uk-width-2-3@m uk-width-1-1">
-        <div class="uk-grid-divider uk-grid uk-flex-center" uk-grid>
+    <div class="uk-position-relative">
-          <div class="uk-width-1-1 uk-width-1-2@m">
+      <contact-us *ngIf="!showLoading" [organizationTypes]="organizationTypes"
-            <div class="uk-text-center uk-margin-medium-bottom">
+                  [properties]="properties" [errorMessage]="errorMessage"
-              <h1 class="uk-h2">Contact us to learn more</h1>
+                  [contactForm]="contactForm" (sendEmitter)="send($event)">
-              <h6 class="uk-text-muted uk-margin-remove-top">
+        <h1 page-title class="uk-margin-auto">
-                We’d be happy to provide more information on OpenAIRE Monitor – please fill in your details below to send your questions to our team.
+          Contact us<span class="uk-text-primary">.</span>
-              </h6>
+        </h1>
-            </div>
+        <div page-description class="uk-text-large uk-width-2-3@s">
-            <contact-us [properties]="properties" [errorMessage]="errorMessage" [organizationTypes]="organizationTypes"
+          We would be happy to open a discussion with you to better understand your needs and share examples of how OpenAIRE MONITOR
-                        [contactForm]="contactForm" (sendEmitter)="send($event)"></contact-us>
+          can help your organization in your open science needs.
-          </div>
         </div>
+      </contact-us>
+      <div *ngIf="showLoading" class="uk-position-center uk-margin-medium-top">
+        <loading></loading>
       </div>
     </div>
+  </div>
 </div>
 <modal-alert #AlertModal (alertOutput)="goToHome()">
   <div class="uk-text-center">

src/app/contact/contact.component.ts

@@ -12,6 +12,7 @@ import {SEOService} from "../openaireLibrary/sharedComponents/SEO/SEO.service";
 import {AbstractControl, FormBuilder, FormGroup, ValidatorFn, Validators} from "@angular/forms";
 import {Subscriber} from "rxjs";
 import {properties} from "../../environments/environment";
+import {Breadcrumb} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.component";
 
 @Component({
     selector: 'contact',
@@ -28,6 +29,7 @@ export class ContactComponent implements OnInit {
     public properties: EnvProperties = null;
     public pageContents = null;
     public divContents = null;
+    public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Contact us'}];
     public organizationTypes: string[] = [
         'Funding agency', 'University / Research Center',
         'Research Infrastructure', 'Government',

src/app/contact/contact.module.ts

@@ -13,14 +13,16 @@ import {IsRouteEnabled} from "../openaireLibrary/error/isRouteEnabled.guard";
 import {Schema2jsonldModule} from "../openaireLibrary/sharedComponents/schema2jsonld/schema2jsonld.module";
 import {SEOServiceModule} from "../openaireLibrary/sharedComponents/SEO/SEOService.module";
 import {ContactUsModule} from "../openaireLibrary/contact-us/contact-us.module";
+import {BreadcrumbsModule} from "../openaireLibrary/utils/breadcrumbs/breadcrumbs.module";
+import {LoadingModule} from "../openaireLibrary/utils/loading/loading.module";
 
 
 @NgModule({
-    imports: [
+  imports: [
-        ContactRoutingModule, CommonModule, RouterModule,
+    ContactRoutingModule, CommonModule, RouterModule,
-        AlertModalModule, RecaptchaModule, HelperModule,
+    AlertModalModule, RecaptchaModule, HelperModule,
-        Schema2jsonldModule, SEOServiceModule, ContactUsModule
+    Schema2jsonldModule, SEOServiceModule, ContactUsModule, BreadcrumbsModule, LoadingModule
-    ],
+  ],
   declarations: [
     ContactComponent
   ],

src/app/openaireLibrary

@@ -1 +1 @@
-Subproject commit 02a18d48d07f0aa244c886f8c765c0ec59037217
+Subproject commit f8b395dc81b06bb03cae4f8807a8a353f725c0a4

src/assets/monitor-custom.css

@@ -1,64 +1,83 @@
 :root {
-    --portal-main-color: #8DCA26;
+  --monitor-color-darken: #228001;
-    --portal-main-contrast: white;
-    --portal-dark-color: #7cb021;
 
-    --openaire-main-color: #313179;
+  /*buttons*/
+  --button-primary-background: transparent;
+  --button-primary-background-image: linear-gradient(113deg, var(--monitor-color) 0%, var(--monitor-color-darken) 100%);
+  --button-secondary-background: var(--secondary-color);
+  --button-secondary-background-image: none;
 
-    --explore-portal-color: #D95F2D;
+  /*backgrounds*/
-    --provide-portal-color: #37C7E9;
+  --primary-background: #2C2C2C;
-    --monitor-portal-color: #8DCA26;
+  --primary-background-image:none;
-    --connect-portal-color: #EBB13E;
+  --secondary-background-image:none;
-    --develop-portal-color: #DA65AB;
 
-    --explore-portal-lower-tone: #a0462c;
+  /*fonts*/
-    --provide-portal-lower-tone: #3A8FA3;
+  --font-primary-color:var(--monitor-color);
-    --monitor-portal-lower-tone: #7cb021;
+  /*--secondary-background: var(--secondary-color);*/
-    --connect-portal-lower-tone: #b48536;
-    --develop-portal-lower-tone: #9f4e7e;
 }
 
-.tm-toolbar .uk-subnav-line .custom-monitor-li {
+/*:root {*/
-  background: var(--portal-main-color);
+/*  --portal-main-color: #9ABB55;*/
-}
+/*  --portal-main-contrast: white;*/
+/*  --portal-dark-color: #7c9144;*/
 
-.monitorApp, .searchForm {
+/*  --openaire-main-color: #313179;*/
-  background: #F9F9F9 !important;
-}
 
-.monitorApp .login text {
+/*  --explore-portal-color: #D95F2D;*/
-  stroke: white;
+/*  --provide-portal-color: #37C7E9;*/
-  fill: white;
+/*  --monitor-portal-color: #9ABB55;*/
-}
+/*  --connect-portal-color: #EBB13E;*/
+/*  --develop-portal-color: #DA65AB;*/
 
-.uk-card {
+/*  --explore-portal-lower-tone: #a0462c;*/
-  color: #1a1a1a;
+/*  --provide-portal-lower-tone: #3A8FA3;*/
+/*  --monitor-portal-lower-tone: #7c9144;*/
+/*  --connect-portal-lower-tone: #b48536;*/
+/*  --develop-portal-lower-tone: #9f4e7e;*/
+/*}*/
+
+/*.tm-toolbar .uk-subnav-line .custom-monitor-li {*/
+/*  background: var(--portal-main-color);*/
+/*}*/
+
+/*.monitorApp, .searchForm {*/
+/*  background: #F9F9F9 !important;*/
+/*}*/
+
+/*.monitorApp .login text {*/
+/*  stroke: white;*/
+/*  fill: white;*/
+/*}*/
+
+/*.uk-card {*/
+/*  color: #1a1a1a;*/
+/*}*/
+
+.custom-main-content {
+  background-color: #F9F9F9 !important;
 }
 
 main {
   min-height: calc(100vh - 100px);
-  line-height: 23px;
-  font-size: 16px;
-  color: #1a1a1a;
-  font-family: "Open Sans", sans-serif;
 }
 
-.monitorApp .uk-text-small {
+/*.monitorApp .uk-text-small {*/
-  font-size: 14px;
+/*  font-size: 14px;*/
-}
+/*}*/
 
-.monitorApp .uk-text-muted {
+/*.monitorApp .uk-text-muted {*/
-  color: #4D4D4D !important;
+/*  color: #4D4D4D !important;*/
-}
+/*}*/
 
-.monitorApp .portal-button {
+/*.monitorApp .portal-button {*/
-  color: white !important;
+/*  color: white !important;*/
-  font-weight: 700;
+/*  font-weight: 700;*/
-}
+/*}*/
 
-.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {
+/*.monitorApp .uk-grid-divider>:not(.uk-first-column)::before {*/
-  border-left: 1px solid #DEDEDE;
+/*  border-left: 1px solid #DEDEDE;*/
-}
+/*}*/
 
 
 

src/assets/openaire-theme

@@ -1 +1 @@
-Subproject commit 25e2dd30e2b2eb4d274754a1120adb5dbf11e9e0
+Subproject commit 8ba04ba5f755b94b9274428b3ce80bb423c40cef