[Explore | Trunk]: Change home page graph section base on mocks

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-portal/trunk@59893 d315682c-612b-4755-9ff5-7f18f6832af3

explore/src/app/home/home.component.html

@@ -168,21 +168,26 @@
 <!--               [logoURL]="properties.baseLink+'/assets/common-assets/logo-small-explore.png'" type="home"-->
 <!--               name="OpenAIRE Explore"></schema2jsonld>-->
 <div *ngIf="pageContents && pageContents['right'] && pageContents['right'].length > 0"
-     class="uk-section uk-section-small graph-background uk-margin-top">
-  <div class="uk-container uk-container-large uk-margin-medium-top">
-    <div class="uk-flex uk-flex-top uk-child-width-1-1@s uk-child-width-1-2@m" uk-grid>
-      <div>
-        <img src="assets/explore-banner.png">
-      </div>
-      <div>
+     class="uk-section graph-background uk-margin-top">
+  <div class="uk-container">
+    <div class="uk-flex uk-flex-top uk-child-width-1-1 uk-child-width-1-2@m" uk-grid>
+      <div class="uk-flex-last@m">
         <div [class.lines-10]="!readMore" class="uk-margin-bottom multi-line-ellipsis">
           <helper [texts]="pageContents['right']"></helper>
         </div>
         <div *ngIf="!readMore" class="uk-text-center clickable" (click)="readMore = true">
-          <a class="custom-explore-toggle">Read more<span uk-icon="chevron-down"></span></a>
+          <span>Read more<span class="space" uk-icon="chevron-down"></span></span>
         </div>
         <div *ngIf="readMore" class="uk-text-center clickable" (click)="readMore = false">
-          <a class="custom-explore-toggle">Read less<span uk-icon="chevron-up"></span></a>
+          <span>Read less<span class="space" uk-icon="chevron-up"></span></span>
+        </div>
+      </div>
+      <div class="uk-flex uk-flex-bottom">
+        <div class="uk-width-1-3 uk-width-1-2@m">
+          <img src="assets/explore-assets/graph.svg">
+        </div>
+        <div class="uk-padding uk-width-1-2">
+          <img src="assets/common-assets/logo-large-graph.png">
         </div>
       </div>
     </div>

explore/src/assets/curved-bottom.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="1367" height="90.052" viewBox="0 0 1367 90.052"><defs><style>.a{fill:#fafafa;}.b{fill:#d95f2d;}</style></defs><g transform="translate(11962 8145.052)"><rect class="a" width="1367" height="90" transform="translate(-11962 -8145)"/><path class="b" d="M1367,5S1215.409-18.052,965.38-18.052,590.781,18,350.769,18,0-10.052,0-10.052v-13H1367Z" transform="translate(-11962 -8122)"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="1367" height="90.052" viewBox="0 0 1367 90.052"><defs><style>.a{fill:#fafafa;}.b{fill: #f4f4f4;}</style></defs><g transform="translate(11962 8145.052)"><rect class="a" width="1367" height="90" transform="translate(-11962 -8145)"/><path class="b" d="M1367,5S1215.409-18.052,965.38-18.052,590.781,18,350.769,18,0-10.052,0-10.052v-13H1367Z" transform="translate(-11962 -8122)"/></g></svg>

explore/src/assets/explore-custom.css

@@ -148,8 +148,7 @@
 }
 
 .graph-background {
-  background: var(--portal-main-color) 0 0 no-repeat padding-box;
-  color: white;
+  background: #F4F4F4 0 0 no-repeat padding-box;
 }
 
 .graph-background-bottom {
@@ -158,14 +157,6 @@
   height: 170px;
 }
 
-.custom-explore-toggle {
-  color: white;
-}
-
-.custom-explore-toggle:hover {
-  color: rgba(255, 255, 255, 0.71);
-}
-
 .trello-image {
     margin-top: -3px;
 }