fix: institution with person, fix semantic html and integration with orcid, add pijama

src/app/features/deposit/components/dialogs/deposit-person-alternative/deposit-person-alternative.dialog.html

@@ -16,6 +16,7 @@
     <h3 mat-subheader>{{'deposit.popup.person.alternative.subtitle.matchingPersons' | translate}}</h3>
     <mat-list-item *ngFor="let person of data.listExistingPerson"
                    (click)="select(person, false)"
+                   class="item-list"
                    [class.is-active]="isSelected(person)"
     >
       <mat-icon mat-list-icon>person</mat-icon>
@@ -27,13 +28,11 @@
              alt="orcid"
         >
         {{person.orcid}}</p>
-      <div mat-line>
-        <li class="inline"
-            *ngFor="let institution of person.institutions"
-        >
-          {{institution.name}}
-        </li>
-      </div>
+      <ul class="institution-list"
+          mat-line
+      >
+        <li *ngFor="let institution of person.institutions">{{institution.name}}</li>
+      </ul>
     </mat-list-item>
   </mat-list>
 </div>

src/app/features/deposit/components/dialogs/deposit-person-alternative/deposit-person-alternative.dialog.scss

@@ -17,16 +17,13 @@
       padding-bottom: 20px;
     }
 
-    .image-orcid {
-      padding-right: 5px;
-      height: 15px;
-      position: relative;
-      top: 3px;
-    }
-
     ::ng-deep .mat-list-item {
       cursor: pointer;
 
+      &:nth-child(even) {
+        background-color: $extra-ultra-light-grey;
+      }
+
       &.is-active {
         background-color: $extra-light-grey;
       }
@@ -36,11 +33,28 @@
       font-style: italic;
       padding-right: 6px;
     }
+
+
+    .image-orcid {
+      padding-right: 5px;
+      height: 15px;
+      position: relative;
+      top: 3px;
+    }
+
+    .institution-list {
+      padding-top: 4px;
+
+      li {
+        display: inline;
+        list-style-type: none;
+
+        &:not(:last-child):after {
+          content: ', ';
+        }
+      }
+    }
   }
 }
 
-.inline {
-  display: inline;
-  list-style-type: none;
-  padding-right: 10px;
-}
+

src/sass/abstracts/_variables.scss

@@ -14,6 +14,7 @@ $grey: #434343;
 $light-grey: #7f7f7f;
 $medium-light-grey: #bdbdbd;
 $extra-light-grey: #efefef;
+$extra-ultra-light-grey: #fbfbfb;
 $success: #6acc29;
 $error: #ff0000;
 $warning: #ffa500;