From dd8011f5ffe297410a884dd0f63bb022c47936b9 Mon Sep 17 00:00:00 2001
From: "k.triantafyllou" <k.triantafyllou@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Wed, 24 Jul 2019 12:24:44 +0000
Subject: [PATCH] [Trunk|Connect]: 1. Home page: Change cards view. 2.
 Affiliations: Change view of cards, make logo take 100% of width.

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-connect-portal/trunk@56749 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../affiliations/affiliations.component.html  |  47 ++-
 .../browse-community.component.html           |  76 +++--
 .../communities/communities.component.html    | 276 ++++++++++--------
 src/app/curators/curators.component.html      |  59 ++--
 .../subscribe/invite/invite.component.html    |  82 +++---
 5 files changed, 318 insertions(+), 222 deletions(-)

diff --git a/src/app/affiliations/affiliations.component.html b/src/app/affiliations/affiliations.component.html
index 5b6f8a7..357e2de 100644
--- a/src/app/affiliations/affiliations.component.html
+++ b/src/app/affiliations/affiliations.component.html
@@ -1,13 +1,22 @@
 <ng-template #card let-organization="organization" let-fullView="fullView">
-  <div class="uk-card-media-top affiliation-logo uk-flex uk-flex-middle uk-flex-center uk-padding-small">
-    <img *ngIf= "organization.logo_url != null && organization.logo_url != '' " class="uk-text-center"
-         src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo" width="80" height="80">
-    <span  *ngIf= "organization.logo_url == null || organization.logo_url == '' "class="uk-icon uk-padding-small">
-      <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
-    </span>
+  <div class="affiliation-logo  uk-flex uk-flex-middle uk-flex-center uk-padding-remove-horizontal"
+       [ngClass]="(!fullView)?'uk-card-body':'uk-card-media-top uk-padding-small'">
+    <div class="uk-align-center">
+      <img *ngIf="organization.logo_url != null && organization.logo_url != '' "
+           src="{{organization.logo_url}}" alt="{{(organization.name)?organization.name:''}} logo">
+      <span *ngIf="organization.logo_url == null || organization.logo_url == ''" class="uk-icon">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" icon="image" ratio="2.5"><circle cx="16.1" cy="6.1"
+                                                                                                     r="1.1"></circle><rect
+          fill="none" stroke="#000" x="0.5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="#000"
+                                                                                            stroke-width="1.01"
+                                                                                            points="4,13 8,9 13,14"></polyline><polyline
+          fill="none" stroke="#000" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
+      </span>
+    </div>
   </div>
-  <div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-small">
-    <span class="uk-text-bold">{{organization.name.slice(0,100)}}</span><span *ngIf="organization.name.length > 100">...</span>
+  <div *ngIf="organization.name && fullView" class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top">
+    <span class="uk-text-bold uk-text-small">{{organization.name.slice(0, 100)}}</span><span
+    *ngIf="organization.name.length > 100">...</span>
   </div>
 </ng-template>
 
@@ -23,7 +32,7 @@
        uk-grid>
 
     <div *ngFor="let affiliation of affiliations">
-      <div class=" uk-card uk-card-default uk-padding-small">
+      <div class="uk-card uk-card-default uk-card-small uk-padding-small">
         <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
           <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: true}"></ng-container>
         </a>
@@ -34,19 +43,24 @@
     </div>
   </div>
 
-  <div *ngIf="communityFirstPage" class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
+  <div *ngIf="communityFirstPage"
+       class="uk-margin-large-top uk-margin uk-text-center uk-text-large uk-text-meta uk-text-bold">
     Related Organizations ({{affiliations.length}})
   </div>
 
-  <div *ngIf="!fullView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1" [attr.uk-slider]="sliderOptions">
-    <div [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
+  <div *ngIf="!fullView" [class]="'uk-position-relative uk-visible-toggle'" tabindex="-1"
+       [attr.uk-slider]="sliderOptions">
+    <div
+      [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
       <ul class="uk-slider-items uk-grid-small" uk-height-match="target: > li > .uk-card" uk-grid>
         <li *ngFor="let affiliation of affiliations"
             [class]="'affiliation-element uk-width-1-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)">
-          <div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center"
+          <div class="uk-card uk-card-small uk-card-default uk-flex uk-flex-middle uk-flex-center uk-padding-small"
                [attr.uk-tooltip]="(affiliation.name) ? affiliation.name : 'cls: uk-invisible'">
-            <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url" class="affiliation-content">
-              <ng-container *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
+            <a *ngIf="affiliation.website_url" target="_blank" [href]="affiliation.website_url"
+               class="affiliation-content">
+              <ng-container
+                *ngTemplateOutlet="card; context: { organization: affiliation, fullView: false}"></ng-container>
             </a>
             <span *ngIf="!affiliation.website_url" class="affiliation-content">
               <ng-container *ngTemplateOutlet="card; context: { organization: affiliation}"></ng-container>
@@ -64,7 +78,8 @@
        class="uk-position-center-right uk-padding uk-height-1-1 uk-flex"
        href="#" uk-slidenav-next uk-slider-item="next"></a>
   </div>
-  <div *ngIf="communityFirstPage" [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
+  <div *ngIf="communityFirstPage"
+       [class]="'uk-align-center uk-width-'+(affiliations.length >= affiliationsInSlider ? affiliationsInSlider : affiliations.length)+'-'+affiliationsInSlider">
     <a routerLink="/organizations" class="uk-align-right uk-link">
       View more details
     </a>
diff --git a/src/app/communities/browseCommunity/browse-community.component.html b/src/app/communities/browseCommunity/browse-community.component.html
index bd6de2f..c358f03 100644
--- a/src/app/communities/browseCommunity/browse-community.component.html
+++ b/src/app/communities/browseCommunity/browse-community.component.html
@@ -1,44 +1,60 @@
-<div class="uk-container line-height-normal uk-text-small" *ngIf="community" >
-  <div *ngIf="community.status =='manager'" class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
+<div class="uk-container line-height-normal uk-text-small" *ngIf="community">
+  <div *ngIf="community.status =='manager'"
+       class="uk-card-badge private-card-badge uk-width-1-3 uk-position-top-left uk-text-small uk-text-center">
     Private
   </div>
-  <div *ngIf="community.isSubscribed" class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
+  <div *ngIf="community.isSubscribed"
+       class="uk-position-top-right uk-card-badge portal-card-badge uk-width-1-2 uk-text-small uk-text-center">
     <span>Subscribed</span>
   </div>
-  <div class="uk-card-media-top community uk-padding-small">
+  <div class="uk-card-media-top uk-padding uk-padding-remove-vertical community uk-flex uk-flex-center uk-flex-middle">
     <a (click)="confirmModalOpen()">
-      <div class="communitiesImageBox uk-position-relative uk-align-center">
-        <img *ngIf= "community.logoUrl != null && community.logoUrl != '' " src="{{community.logoUrl}}" alt="{{(community.title)?community.title:community.shortTitle}} logo" class="uk-position-center">
-        <span  *ngIf= "community.logoUrl == null || community.logoUrl == '' "class="uk-icon uk-position-center">
-          <svg  viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000" stroke-width="1.1" cx="7.7" cy="8.6" r="3.5"></circle> <path fill="none" stroke="#000" stroke-width="1.1" d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none" stroke="#000" stroke-width="1.1" d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
+      <div>
+        <img *ngIf="community.logoUrl != null && community.logoUrl != ''" src="{{community.logoUrl}}"
+             alt="{{(community.title)?community.title:community.shortTitle}} logo">
+        <span *ngIf="community.logoUrl == null || community.logoUrl == ''" class="uk-icon">
+          <svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" ratio="2.5"> <circle fill="none" stroke="#000"
+                                                                                           stroke-width="1.1" cx="7.7"
+                                                                                           cy="8.6" r="3.5"></circle> <path
+            fill="none" stroke="#000" stroke-width="1.1"
+            d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3"></path> <path fill="none"
+                                                                                                 stroke="#000"
+                                                                                                 stroke-width="1.1"
+                                                                                                 d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"></path></svg>
         </span>
       </div>
     </a>
   </div>
-  <div class="uk-text-center uk-text-bold community" [ngClass]="(showDescription)?'uk-margin-small-bottom':'uk-margin-medium-bottom'">
-    <a (click)="confirmModalOpen()">
-      <span *ngIf="community.title" >
-        {{community.title.slice(0,thresholdTitle)}}
-        <span *ngIf="community.title.length > thresholdTitle">...</span>
-      </span>
-      <span *ngIf="!community.title && community.shortTitle" >
-        {{community.shortTitle.slice(0,thresholdTitle)}}
-        <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
-      </span>
-    </a>
+  <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-top uk-margin-small-top community">
+    <div class="uk-text-center uk-text-bold " [ngClass]="(showDescription)?'uk-margin-bottom':''">
+      <a (click)="confirmModalOpen()">
+        <span *ngIf="community.title">
+          {{community.title.slice(0, thresholdTitle)}}
+          <span *ngIf="community.title.length > thresholdTitle">...</span>
+        </span>
+        <span *ngIf="!community.title && community.shortTitle">
+          {{community.shortTitle.slice(0, thresholdTitle)}}
+          <span *ngIf="community.shortTitle.length > thresholdTitle">...</span>
+        </span>
+      </a>
+    </div>
+    <div class="uk-text-left" *ngIf="community.description != null && showDescription"
+         title="{{community.description}}">
+      <span>{{community.description.slice(0, thresholdDescription)}}<span
+        *ngIf="community.description.length > thresholdDescription">...</span></span>
+    </div>
   </div>
-  <div class="uk-text-left community uk-margin-large-bottom uk-margin-top" *ngIf="community.description != null && showDescription" title="{{community.description}}">
-      <span>{{community.description.slice(0,thresholdDescription)}}<span *ngIf="community.description.length > thresholdDescription">...</span></span>
-  </div>
-  <div class="uk-position-bottom-right uk-margin-bottom uk-margin-right">
-    <a (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold">
-      Visit
-    </a>
+  <div>
+    <div class="uk-text-right">
+      <a (click)="confirmModalOpen()" class="portal-link uk-text-uppercase uk-text-bold">
+        Visit
+      </a>
+    </div>
   </div>
 </div>
 <modal-alert #AlertModal (alertOutput)="goToCommunityPage($event)">
-    <div class="uk-text-center">
-        The profile will be presented in a new tab.<br>
-        Are you sure that you want to proceed?
-    </div>
+  <div class="uk-text-center">
+    The profile will be presented in a new tab.<br>
+    Are you sure that you want to proceed?
+  </div>
 </modal-alert>
diff --git a/src/app/communities/communities.component.html b/src/app/communities/communities.component.html
index 50af6fa..518f94f 100644
--- a/src/app/communities/communities.component.html
+++ b/src/app/communities/communities.component.html
@@ -1,25 +1,33 @@
-<div *ngIf="(managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0)" class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
+<div *ngIf="(managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0)"
+     class="banner-background image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+     tm-header-transparent="light" tm-header-transparent-placeholder="">
   <div class=" uk-section uk-padding-remove-bottom">
     <div class="uk-position-cover"></div>
     <div class="uk-position-relative uk-panel">
       <div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
-        <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
+        <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span
+          class="loading-gif  uk-align-center"></span></div>
       </div>
-      <div *ngIf="!loading" class="uk-container uk-container-large uk-section">
-        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0" class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid>
+      <div *ngIf="!loading" class="uk-container uk-container-large">
+        <div *ngIf="managerOfCommunities.length > 0 || subscriberOfCommunities.length > 0"
+             class="uk-child-width-1-1@s uk-child-width-1-2@m uk-flex uk-flex-middle" uk-grid>
           <div>
             <div *ngIf="managerOfCommunities.length > 0" class="uk-grid">
               <h5 class="uk-width-1-1 uk-text-bold">You are managing</h5>
               <div class="uk-width-1-1 uk-margin-top">
-                <div class="uk-grid-match uk-grid-small  uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
+                <div
+                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center"
+                  uk-grid uk-height-match=".community">
                   <div *ngFor="let community of managerOfCommunities.slice(0,3); let i = index">
-                    <div  class="uk-padding-small uk-card uk-card-default uk-card-small communityCard" title="{{community.description}}">
-                        <browse-community [community]=community [showDescription]=false></browse-community>
+                    <div class="uk-padding-small uk-card uk-card-default uk-card-small communityCard"
+                         title="{{community.description}}">
+                      <browse-community [community]=community [showDescription]=false></browse-community>
                     </div>
                   </div>
                 </div>
                 <div *ngIf="managerOfCommunities.length > 3" class="uk-text-right uk-width-1-1 uk-margin-top">
-                  <a [queryParams]="{role: quote('manager')}"  class="portal-link uk-text-uppercase uk-text-bold"
+                  <a [queryParams]="{role: quote('manager')}" class="portal-link uk-text-uppercase uk-text-bold"
                      routerLinkActive="router-link-active" routerLink="/search/find/communities">
                     <div>View all ({{managerOfCommunities.length | number}}) ></div>
                   </a>
@@ -36,11 +44,13 @@
             <div *ngIf="subscriberOfCommunities.length > 0" class="uk-grid">
               <h5 class="uk-width-1-1 uk-text-bold">You are subscribed to</h5>
               <div class="uk-width-1-1 uk-margin-top">
-                <div class="uk-grid-match uk-grid-small  uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
+                <div
+                  class="uk-grid-match uk-grid-small  uk-child-width-1-3@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center"
+                  uk-grid uk-height-match=".community">
                   <div *ngFor="let community of subscriberOfCommunities.slice(0,3); let i = index">
-                    <div  class="uk-padding-small  uk-card uk-card-small uk-card-default communityCard"
-                          [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
-                        <browse-community [community]=community [showDescription]=false></browse-community>
+                    <div class="uk-padding-small  uk-card uk-card-small uk-card-default communityCard"
+                         [attr.uk-tooltip]="((community.description) ? ('title: '+ community.description + '; pos: bottom-right') : 'cls: uk-invisible')">
+                      <browse-community [community]=community [showDescription]=false></browse-community>
                     </div>
                   </div>
                 </div>
@@ -63,8 +73,12 @@
     </div>
   </div>
 </div>
-<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
-<div *ngIf="(managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0)" class="home-banner image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light" tm-header-transparent-placeholder="">
+<helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+        [texts]="pageContents['top']"></helper>
+<div *ngIf="(managerOfCommunities.length == 0 && subscriberOfCommunities.length == 0)"
+     class="home-banner image-front-topbar uk-section uk-background-norepeat uk-background-bottom-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+     tm-header-transparent="light" tm-header-transparent-placeholder="">
   <div class=" uk-section uk-padding-remove-bottom">
     <div class="uk-position-cover"></div>
     <div class="uk-position-relative uk-panel">
@@ -74,10 +88,12 @@
             <div class="uk-h1">Build an Open Research <b>Gateway</b> for your <b>Community</b></div>
             <h4 class="uk-margin-remove-top">Turn Open Science into practice</h4>
             <div class="uk-h5 uk-margin-top">Share and link your research results.<br>
-              Across organizations, across borders.<br>Customized to your needs.</div>
+              Across organizations, across borders.<br>Customized to your needs.
+            </div>
           </div>
           <div class="uk-width-1-1 uk-inline uk-margin-medium-top uk-margin-medium-bottom">
-            <a class="uk-button portal-button" routerLink="/about/learn-how" routerLinkActive="router-link-active"> LEARN
+            <a class="uk-button portal-button" routerLink="/about/learn-how" routerLinkActive="router-link-active">
+              LEARN
               HOW</a>
           </div>
         </div>
@@ -87,130 +103,153 @@
 </div>
 <div>
   <div class="uk-container uk-container-large uk-margin-large-top">
-      <div class="uk-text-center uk-text-bold uk-h4">Open and FAIR science is our mission</div>
-      <div class="uk-margin-medium-top" uk-height-match=".target">
-        <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-grid>
-          <div>
-            <div class="uk-card uk-card-default connectInfoCard">
-              <div class="uk-card-media-top uk-margin-top target">
-                <img src="assets/home/1.png" class="uk-align-center" width="111" height="138">
-              </div>
-              <div class="uk-card-body uk-grid-divider uk-margin-top" uk-grid>
-                <div class="uk-width-1-1 uk-text-center target">
-                  <h5 class="uk-text-bold">A Virtual Research Environment</h5>
-                  <div>An overlay platform making it easy to share, link, disseminate and monitor all your publications, data, software, methods. In one place.</div>
-                </div>
-                <div class="uk-width-1-1">
-                  <ul class="uk-list">
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
-                      </span>
-                      Access to OpenAIRE resources
-                    </li>
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
-                      </span>
-                      Moderated, front-end linking
-                    </li>
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
-                      </span>
-                      Cross-platform search
-                    </li>
-                  </ul>
+    <div class="uk-text-center uk-text-bold uk-h4">Open and FAIR science is our mission</div>
+    <div class="uk-margin-medium-top">
+      <div class="uk-child-width-1-3@m uk-child-width-1-1@s uk-grid-match uk-grid-medium uk-grid-margin" uk-height-match=".target" uk-grid>
+        <div>
+          <div class="uk-card uk-card-default uk-padding connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center target">
+              <img src="assets/home/1.png" width="111" height="138">
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom uk-grid-divider" uk-grid>
+              <div class="uk-width-1-1 target">
+                <h5 class="uk-text-bold uk-text-center">A Virtual Research Environment</h5>
+                <div>An overlay platform making it easy to share, link, disseminate and monitor all your publications,
+                  data, software, methods. In one place.
                 </div>
               </div>
-             </div>
-          </div>
-          <div>
-            <div class="uk-card uk-card-default connectInfoCard">
-              <div class="uk-card-media-top uk-margin-top target">
-                <img src="../../assets/home/2.png" class="uk-align-center" width="127" height="138">
-              </div>
-              <div class="uk-card-body uk-grid-divider uk-margin-top" uk-grid>
-                <div class="uk-width-1-1 uk-text-center target">
-                  <h5 class="uk-text-bold">Open Science in action</h5>
-                  <div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral part of the European Open Science Cloud.</div>
-
-                </div>
-                <div class="uk-width-1-1">
-                  <ul class="uk-list">
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
+              <div class="uk-width-1-1">
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
                       </span>
-                      Use of OpenAIRE Guidelines
-                    </li>
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
+                    Access to OpenAIRE resources
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
                       </span>
-                      DOIs via Zenodo
-                    </li>
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
+                    Moderated, front-end linking
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
                       </span>
-                      EOSC Single Sign-On
-                    </li>
-                  </ul>
-                </div>
+                    Cross-platform search
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
-          <div>
-            <div class="uk-card uk-card-default connectInfoCard">
-              <div class="uk-card-media-top uk-margin-top target">
-                <img src="../../assets/home/3.png" class="uk-align-center" width="139" height="138">
+        </div>
+        <div>
+          <div class="uk-card uk-card-default uk-padding connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center target">
+              <img src="assets/home/2.png" width="127" height="138">
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom  uk-grid-divider" uk-grid>
+              <div class="uk-width-1-1 target">
+                <h5 class="uk-text-bold uk-text-center">Open Science in action</h5>
+                <div>A time-saving bundle of services for researchers to effortlessly practice open science. An integral
+                  part of the European Open Science Cloud.
+                </div>
+
               </div>
-              <div class="uk-card-body uk-grid-divider uk-margin-top" uk-grid>
-                <div class="uk-width-1-1 uk-text-center target">
-                  <h5 class="uk-text-bold">Customized to your needs</h5>
-                  <div>A Science Gateway with your own brand, rules for aggregation, text & data mining, and
-                    presentation. Run by you via a simple, yet powerful backend administration tool.</div>
+              <div class="uk-width-1-1">
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    Use of OpenAIRE Guidelines
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    DOIs via Zenodo
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
+                      </span>
+                    EOSC Single Sign-On
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div>
+          <div class="uk-card uk-card-default uk-padding connectInfoCard">
+            <div class="uk-card-media-top uk-flex uk-flex-middle uk-flex-center target">
+              <img src="assets/home/3.png" width="139" height="138">
+            </div>
+            <div class="uk-card-body uk-padding-remove-horizontal uk-padding-remove-bottom uk-grid-divider" uk-grid>
+              <div class="uk-width-1-1 target">
+                <h5 class="uk-text-bold uk-text-center">Customized to your needs</h5>
+                <div>A Science Gateway with your own brand, rules for aggregation, text & data mining, and
+                  presentation. Run by you via a simple, yet powerful backend administration tool.
                 </div>
-                <div class="uk-width-1-1">
-                  <ul class="uk-list">
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
+              </div>
+              <div class="uk-width-1-1">
+                <ul class="uk-list">
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
                       </span>
-                      Access control
-                    </li>
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
+                    Access control
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
                       </span>
-                      Analytics: rich set of indicators
-                    </li>
-                    <li>
-                      <span class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right" uk-icon="check">
+                    Analytics: rich set of indicators
+                  </li>
+                  <li>
+                      <span
+                        class="uk-border-circle uk-icon-button icon-button-small portal-icon-button uk-margin-small-right"
+                        uk-icon="check">
                       </span>
-                      Look & feel to match your brand
-                    </li>
-                  </ul>
-                </div>
+                    Look & feel to match your brand
+                  </li>
+                </ul>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div class="uk-margin-large-top home-background uk-section uk-background-norepeat uk-background-top-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
-      <div class="uk-container uk-container-large">
-        <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about/learn-how'">
-        </gif-slider>
-      </div>
+  </div>
+  <div
+    class="uk-margin-large-top home-background uk-section uk-background-norepeat uk-background-top-center uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color">
+    <div class="uk-container uk-container-large">
+      <gif-slider [gifs]="gifs" [link]="true" [linkTitle]="'learn more'" [route]="'/about/learn-how'">
+      </gif-slider>
     </div>
+  </div>
 </div>
 <div class="uk-container uk-container-large">
   <errorMessages [status]="[status]" [type]="'communities'"></errorMessages>
 </div>
-<div *ngIf="loading" class="uk-container uk-container-large uk-height-large">
-  <div class="uk-animation-fade uk-margin-top  uk-width-1-2" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
-</div>
-<div *ngIf= "!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-large-top">
+<div *ngIf="!loading && researchCommunities.length > 0" class="uk-container uk-container-large uk-margin-large-top">
   <div class="uk-text-bold uk-h4">Community Gateways in Action</div>
   <div [class]="'uk-margin-medium-top' + (researchCommunities.length <= 5 ? ' uk-margin-medium-bottom' : '')">
 
-    <div class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center" uk-grid uk-height-match=".community">
+    <div
+      class="uk-grid-match uk-grid-medium  uk-child-width-1-5@m uk-child-width-1-2@s uk-child-width-1-1@xs uk-text-center"
+      uk-grid uk-height-match=".community">
       <div *ngFor="let community of researchCommunities.slice(0, 5); let i = index">
-        <div  class="uk-padding-small uk-padding-remove-vertical uk-height-max-large uk-card uk-card-default communityCard">
+        <div class="uk-padding-small uk-card uk-card-default communityCard">
           <browse-community [community]=community></browse-community>
         </div>
       </div>
@@ -224,8 +263,10 @@
     </a>
   </div>
 </div>
-<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
-<div class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top">
+<helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
+        [texts]="pageContents['bottom']"></helper>
+<div
+  class="contact-banner uk-background-norepeat uk-background-cover uk-section-secondary uk-section-overlap uk-position-relative uk-preserve-color uk-margin-large-top">
   <div class="uk-container uk-container-large uk-section">
     <div class="uk-flex uk-flex-middle uk-padding" uk-grid>
       <div class="uk-text-center uk-width-1-1@s uk-width-1-3@m">
@@ -233,7 +274,9 @@
       </div>
       <div class="uk-width-expand">
         <div class="uk-text-bold uk-h4">
-          <div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is reliable.</div>
+          <div>Let us help you develop a collaborative Open Science Gateway for your community. It is fast. It is
+            reliable.
+          </div>
         </div>
         <div class="uk-margin-medium">Get in touch with our team to find out how.</div>
         <div class="uk-inline">
@@ -244,7 +287,8 @@
     </div>
   </div>
 </div>
-<div class="uk-section-muted" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
+<div class="uk-section-muted"
+     uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}">
   <div class="uk-container uk-container-large">
     <other-portals [properties]="properties"></other-portals>
   </div>
diff --git a/src/app/curators/curators.component.html b/src/app/curators/curators.component.html
index 56b0ef8..3b8966f 100644
--- a/src/app/curators/curators.component.html
+++ b/src/app/curators/curators.component.html
@@ -1,26 +1,35 @@
 <ng-container *ngIf="main else child">
-  <div class="image-front-topbar  uk-section-default uk-position-relative" uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}" tm-header-transparent="light">
-    <div style=" min-height: 650px;"  class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
+  <div class="image-front-topbar  uk-section-default uk-position-relative"
+       uk-scrollspy="{&quot;target&quot;:&quot;[uk-scrollspy-class]&quot;,&quot;cls&quot;:&quot;uk-animation-fade&quot;,&quot;delay&quot;:false}"
+       tm-header-transparent="light">
+    <div style=" min-height: 650px;" class="uk-section uk-padding-remove-bottom uk-flex uk-flex-middle">
       <div class="uk-margin-large-top uk-align-center">
         <div class="uk-section uk-section-small">
           <div class="uk-container">
-            <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0" [texts]="pageContents['top']"></helper>
+            <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
+                    [texts]="pageContents['top']"></helper>
             <div *ngIf="showLoading" class="uk-margin-large">
-              <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span class="loading-gif  uk-align-center" ></span></div>
+              <div class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert"><span
+                class="loading-gif  uk-align-center"></span></div>
             </div>
             <div *ngIf="!showLoading && curators.length > 0">
               <h4 class="uk-margin-top uk-h4">
                 <span class="uk-text-bold">Curators</span>
                 <span> ({{curators.length}})</span>
               </h4>
-              <div *ngFor="let curator of curators let i=index;" class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
-                <div [class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''" uk-grid>
+              <div *ngFor="let curator of curators let i=index;"
+                   class="uk-width-1-1 uk-card uk-card-default uk-card-body uk-margin-top uk-animation-slide-top">
+                <div
+                  [class]="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)?'uk-grid-divider uk-flex uk-flex-middle':''"
+                  uk-grid>
 
                   <div class="uk-width-1-2 uk-first-column">
                     <div class="uk-flex uk-flex-middle">
                       <div>
-                        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
-                        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
+                        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
+                             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
+                        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
+                             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
                       </div>
                       <div class="uk-width-expand uk-margin-left uk-text-bold">
                         {{curator.name}}
@@ -29,12 +38,15 @@
                   </div>
 
 
-                  <div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)" class="uk-width-1-2">
+                  <div *ngIf="(curator.affiliations.length > 0 && curator.affiliations.length <= 2)"
+                       class="uk-width-1-2">
                     <div class="uk-flex uk-flex-middle">
                       <div class="uk-width-expand uk-margin-left uk-text-meta uk-flex-first">
                         Affiliations
                       </div>
-                      <affiliations [fullView]="false" [affiliations]="curator.affiliations" [affiliationsInSlider]="curator.affiliations.length"></affiliations>
+                      <affiliations [fullView]="false" [affiliations]="curator.affiliations"
+                                    [affiliationsInSlider]="curator.affiliations.length"
+                                    class="uk-width-2-3"></affiliations>
                     </div>
                   </div>
 
@@ -54,17 +66,20 @@
                     </div>
                   </div>
                   <div class="uk-width-1-1 uk-margin-top uk-text-right">
-                    <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold" (click)="toggle(i)">
+                    <a *ngIf="curator.bio.length > maxCharacters && !showMore[i]" class="uk-text-bold"
+                       (click)="toggle(i)">
                       Show more
                     </a>
-                    <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold" (click)="toggle(i)">
+                    <a *ngIf="curator.bio.length > maxCharacters && showMore[i]" class="uk-text-bold"
+                       (click)="toggle(i)">
                       Show less
                     </a>
                   </div>
                 </div>
               </div>
             </div>
-            <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
+            <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
+                    [texts]="pageContents['bottom']"></helper>
           </div>
         </div>
       </div>
@@ -78,18 +93,22 @@
   <div class="uk-grid">
     <div *ngFor="let curator of curators let i=index;" class="uk-flex uk-flex-middle uk-width-1-2 uk-margin-small-top">
       <div>
-        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
-        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
+        <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
+             src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
+        <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
+             src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
       </div>
       <div class="uk-width-expand uk-margin-left">
         <a>{{curator.name}}</a>
-         <div class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
-              uk-dropdown="pos: bottom-left; mode:click; ">
+        <div class="default-dropdown uk-margin-remove-top uk-padding-medium uk-width-medium"
+             uk-dropdown="pos: bottom-left; mode:click; ">
           <div class="uk-grid uk-grid-stack">
-            <div class="uk-first-column uk-flex uk-flex-middle uk-grid" >
+            <div class="uk-first-column uk-flex uk-flex-middle uk-grid">
               <div>
-                <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo" src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
-                <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo" src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
+                <img *ngIf="curator.photo && curator.photo !== ''" class="uk-border-circle curator-photo"
+                     src="{{downloadUrl + curator.photo}}" alt="Curator Photo">
+                <img *ngIf="!curator.photo || curator.photo == ''" class="uk-border-circle curator-photo"
+                     src="../../assets/common-assets/curator-default.png" alt="Curator Photo">
               </div>
               <div class="uk-width-expand uk-h5 ignoreCommunityPanelBackground">
                 {{curator.name}}
diff --git a/src/app/utils/subscribe/invite/invite.component.html b/src/app/utils/subscribe/invite/invite.component.html
index c99fedf..794f268 100644
--- a/src/app/utils/subscribe/invite/invite.component.html
+++ b/src/app/utils/subscribe/invite/invite.component.html
@@ -3,7 +3,7 @@
 
     <div class="uk-container  uk-margin-bottom">
       <helper *ngIf="pageContents && pageContents['top'] && pageContents['top'].length > 0"
-              [texts]="pageContents['top']" styleName="uk-width-1-1"></helper>
+              [texts]="pageContents['top']"></helper>
       <div id="invite" class=" uk-card uk-card-default uk-padding uk-margin-top">
         <div class="uk-text-large uk-text-center uk-width-5-6@l uk-width ">Invite users to subscribe</div>
         <div class="uk-margin-top">
@@ -147,49 +147,51 @@
         </div>
       </div>
       <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0"
-              [texts]="pageContents['bottom']" styleName="uk-width-1-1"></helper>
+              [texts]="pageContents['bottom']"></helper>
     </div>
   </div>
 </div>
-<button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button  uk-button-primary'">
-  Invite users
-</button>
-<div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">
-  <div class="uk-margin-top">
-    <errorMessages [status]="[status]" [type]="'community'"></errorMessages>
-  </div>
-  <div *ngIf="missingCommunityId" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
-       role="alert">{{missingCommunityId}}</div>
-  <div *ngIf="successfulSentMessage" class="uk-width-large uk-text-success uk-text-small uk-margin-top"
-       role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>
-  <div *ngIf="failureSentMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
-       role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>
-  <div *ngIf="inviteErrorMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
-       role="alert">{{inviteErrorMessage}}</div>
+<div class="uk-inline">
+  <button *ngIf="!longView" [class]=" ((buttonSizeSmall)?'uk-button-small':'') + ' uk-button  uk-button-primary'">
+    Invite users
+  </button>
+  <div uk-dropdown="mode: click" class="uk-form uk-margin-small uk-alert uk-background-default" id="toggle-usage">
+    <div class="uk-margin-top">
+      <errorMessages [status]="[status]" [type]="'community'"></errorMessages>
+    </div>
+    <div *ngIf="missingCommunityId" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
+         role="alert">{{missingCommunityId}}</div>
+    <div *ngIf="successfulSentMessage" class="uk-width-large uk-text-success uk-text-small uk-margin-top"
+         role="alert">{{successfulSentMessage}} {{successfulSentRecipients}}</div>
+    <div *ngIf="failureSentMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
+         role="alert">{{failureSentMessage}} {{failureSentRecipients}}</div>
+    <div *ngIf="inviteErrorMessage" class="uk-width-large uk-text-warning uk-text-small uk-margin-top"
+         role="alert">{{inviteErrorMessage}}</div>
 
-  <div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add
-    valid email/s.
-  </div>
-  <div *ngIf="isEmpty(recipients) && showAddRecipientMessage"
-       class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.
-  </div>
-  <input (click)="resetMessages(); areValid=true" placeholder="Type e-mails" type="text"
-         class="form-control uk-input uk-form-small uk-form" [(ngModel)]="recipients" id="recipients"
-         required>
-  <div class="uk-width-medium uk-text-muted uk-text-small">separate with commas</div>
-  <div class="uk-margin-small-top uk-text-center ">
-    <button class=" uk-button portal-button ignoreCommunityPanelBackground uk-button-small " (click)="invite()">Invite</button>
-    {{" "}}
-    <a class=" uk-button uk-button-default uk-button-small ignoreCommunityPanelBackground " [queryParams]="communityIdParam"
-       routerLinkActive="router-link-active" routerLink="/invite">
-                      <span class="uk-margin-xsmall-left uk-icon">
-                          <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog"
-                               ratio="0.8"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path
-                            fill="none" stroke="#000"
-                            d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
+    <div *ngIf="recipients && !areValid" class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add
+      valid email/s.
+    </div>
+    <div *ngIf="isEmpty(recipients) && showAddRecipientMessage"
+         class="uk-width-large uk-text-danger uk-text-small uk-margin-top">Please add a recipient.
+    </div>
+    <input (click)="resetMessages(); areValid=true" placeholder="Type e-mails" type="text"
+           class="form-control uk-input uk-form-small uk-form" [(ngModel)]="recipients" id="recipients"
+           required>
+    <div class="uk-width-medium uk-text-muted uk-text-small">separate with commas</div>
+    <div class="uk-margin-small-top uk-text-center ">
+      <button class=" uk-button portal-button ignoreCommunityPanelBackground uk-button-small " (click)="invite()">Invite</button>
+      {{" "}}
+      <a class=" uk-button uk-button-default uk-button-small ignoreCommunityPanelBackground " [queryParams]="communityIdParam"
+         routerLinkActive="router-link-active" routerLink="/invite">
+                        <span class="uk-margin-xsmall-left uk-icon">
+                            <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="cog"
+                                 ratio="0.8"><circle fill="none" stroke="#000" cx="9.997" cy="10" r="3.31"></circle><path
+                              fill="none" stroke="#000"
+                              d="M18.488,12.285 L16.205,16.237 C15.322,15.496 14.185,15.281 13.303,15.791 C12.428,16.289 12.047,17.373 12.246,18.5 L7.735,18.5 C7.938,17.374 7.553,16.299 6.684,15.791 C5.801,15.27 4.655,15.492 3.773,16.237 L1.5,12.285 C2.573,11.871 3.317,10.999 3.317,9.991 C3.305,8.98 2.573,8.121 1.5,7.716 L3.765,3.784 C4.645,4.516 5.794,4.738 6.687,4.232 C7.555,3.722 7.939,2.637 7.735,1.5 L12.263,1.5 C12.072,2.637 12.441,3.71 13.314,4.22 C14.206,4.73 15.343,4.516 16.225,3.794 L18.487,7.714 C17.404,8.117 16.661,8.988 16.67,10.009 C16.672,11.018 17.415,11.88 18.488,12.285 L18.488,12.285 Z"></path></svg>
 
-                        </span>
-      Customize
-    </a>
+                          </span>
+        Customize
+      </a>
+    </div>
   </div>
 </div>