added far icons to font icons and made with that the heart inside white with a black border

package-lock.json

@@ -1196,6 +1196,21 @@
         "@fortawesome/fontawesome-common-types": "^0.2.29"
       }
     },
+    "@fortawesome/free-regular-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-q4/p8Xehy9qiVTdDWHL4Z+o5PCLRChePGZRTXkl+/Z7erDVL8VcZUuqzJjs6gUz6czss4VIPBRdCz6wP37/zMQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      },
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": {
+          "version": "0.2.35",
+          "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+          "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+        }
+      }
+    },
     "@fortawesome/free-solid-svg-icons": {
       "version": "5.13.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.13.1.tgz",

package.json

@@ -18,6 +18,7 @@
     "@angular/router": "10.0.0",
     "@fortawesome/angular-fontawesome": "0.6.1",
     "@fortawesome/fontawesome-svg-core": "1.2.29",
+    "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "5.13.1",
     "@ng-bootstrap/ng-bootstrap": "^7.0.0",
     "@ng-select/ng-select": "^4.0.1",

src/main/webapp/app/core/core.module.ts

@@ -3,6 +3,7 @@ import { DatePipe, registerLocaleData } from '@angular/common';
 import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
 import { Title } from '@angular/platform-browser';
 import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
+import { far } from '@fortawesome/free-regular-svg-icons';
 import { CookieService } from 'ngx-cookie-service';
 import { TranslateModule, TranslateLoader, MissingTranslationHandler } from '@ngx-translate/core';
 import { NgxWebstorageModule } from 'ngx-webstorage';

src/main/webapp/app/core/icons/font-awesome-icons.ts

@@ -38,6 +38,8 @@ import {
   // jhipster-needle-add-icon-import
 } from '@fortawesome/free-solid-svg-icons';
 
+import { faHeart as farHeart } from '@fortawesome/free-regular-svg-icons';
+
 export const fontAwesomeIcons = [
   faUser,
   faSort,
@@ -76,5 +78,6 @@ export const fontAwesomeIcons = [
   faLanguage,
   faBook,
   faDownload,
+  farHeart,
   // jhipster-needle-add-icon-import
 ];

src/main/webapp/app/exercise/exercise-details/exercise-details.component.html

@@ -104,8 +104,10 @@
                                             (click)="selectREADME()">README
                                         </button>
                                     </div>
-                                    <div style="width: 100%;"><button class="btn like">
-                                            <fa-icon icon="heart"></fa-icon>
+                                    <div style="width: 100%;"><button type="button" class="btn like"
+                                            (click)="likeAction()">
+                                            <!-- <fa-icon icon="heart"></fa-icon> -->
+                                            <fa-icon [icon]="['far', 'heart']"></fa-icon>
                                         </button></div>
                                 </div>
                             </div>

src/main/webapp/app/exercise/exercise-details/exercise-details.component.scss

@@ -48,6 +48,10 @@
   transform: translate(-50%, -50%);
 }
 
+.like:hover {
+  font-size: 20px;
+}
+
 // .onhoverIcon:hover ~ .onhoverIconDisplay {
 //   visibility: visible;
 // }

src/main/webapp/app/exercise/exercise-details/exercise-details.component.ts

@@ -107,5 +107,10 @@ export class ExerciseDetailsComponent implements OnInit, OnDestroy {
     }
   }
 
+  likeAction(): void {
+    // eslint-disable-next-line no-console
+    console.log('this is a test ' + Number(this.exercise!.originalResult.project.project_id));
+  }
+
   selectREADME(): void {}
 }

src/main/webapp/app/search/service/like-service.ts

+/* eslint-disable */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams, HttpResponse } from '@angular/common/http';
+import { Observable } from 'rxjs';
+
+import { SERVER_API_URL } from 'app/app.constants';
+import { SearchResultsDTO } from 'app/shared/model/search/search-results-dto.model';
+import { SearchInput } from 'app/shared/model/search/search-input.model';
+import { Statistics } from 'app/shared/model/statistics.model';
+
+@Injectable({ providedIn: 'root' })
+export class SearchService {
+  public resourceLike = SERVER_API_URL + 'api/like/';
+
+  constructor(protected http: HttpClient) {}
+
+  likeExercise(exerciseID: string): Observable<Statistics> {
+    return this.http.post<number>(this.resourceLike, exerciseID);
+  }
+}