From da6a2608682d0179d586ee9d6815e98ec5ddb35d Mon Sep 17 00:00:00 2001
From: el-rabies <eleoraby@gmail.com>
Date: Wed, 1 Apr 2026 13:45:51 -0400
Subject: [PATCH] fix: standardized Icon sizes within library and added figma
 link to the page

---
 .../src/app/community/icon-lib/icon-lib.component.html       | 4 ++--
 .../src/app/community/icon-lib/icon-lib.component.scss       | 5 +++++
 .../src/app/community/icon-lib/icon-lib.component.ts         | 4 ++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/projects/website-angular/src/app/community/icon-lib/icon-lib.component.html b/projects/website-angular/src/app/community/icon-lib/icon-lib.component.html
index 7f45b04..bb5da43 100644
--- a/projects/website-angular/src/app/community/icon-lib/icon-lib.component.html
+++ b/projects/website-angular/src/app/community/icon-lib/icon-lib.component.html
@@ -5,7 +5,7 @@
       <h1>Icon Library</h1>
       <p class="description">
         Browse the Reactome icon library. Icons are used in Enhanced High Level Diagrams (EHLDs)
-        to represent biological entities and concepts.
+        to represent biological entities and concepts. Or take a look at the <a class="figma-link" href="https://www.figma.com/design/5M1QcYKfAsp87nvoJINxM8/Reactome-Icon-Library--Community-?node-id=236-2098&t=fLQHQc4bpMX4fcQt-0" target="_blank">Figma</a>!
       </p>
     </header>
 
@@ -90,7 +90,7 @@ <h1>Icon Library</h1>
         @for (icon of icons; track icon.stId) {
           <button class="icon-card" (click)="openDetail(icon)">
             <div class="icon-preview">
-              <img [src]="iconSvgUrl(icon)" [alt]="icon.iconName || icon.name" loading="lazy" (error)="onImgError($event)" />
+              <img [src]="iconSvgUrl(icon)" [alt]="icon.iconName || icon.name" loading="lazy" (error)="onImgError($event)" width="250" height="auto"/>
             </div>
             <span class="icon-name">{{ icon.iconName || icon.name }}</span>
           </button>
diff --git a/projects/website-angular/src/app/community/icon-lib/icon-lib.component.scss b/projects/website-angular/src/app/community/icon-lib/icon-lib.component.scss
index be665b2..7412260 100644
--- a/projects/website-angular/src/app/community/icon-lib/icon-lib.component.scss
+++ b/projects/website-angular/src/app/community/icon-lib/icon-lib.component.scss
@@ -31,6 +31,11 @@
     margin: 0;
     max-width: 640px;
   }
+
+  .figma-link {
+    text-decoration: underline;
+    cursor: pointer;
+  }
 }
 
 // Search bar
diff --git a/projects/website-angular/src/app/community/icon-lib/icon-lib.component.ts b/projects/website-angular/src/app/community/icon-lib/icon-lib.component.ts
index 5f961e2..d5d75d0 100644
--- a/projects/website-angular/src/app/community/icon-lib/icon-lib.component.ts
+++ b/projects/website-angular/src/app/community/icon-lib/icon-lib.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Subject } from 'rxjs';
 import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import { PageLayoutComponent } from '../../page-layout/page-layout.component';
@@ -49,7 +49,7 @@ interface ParsedReference {
 
 @Component({
   selector: 'app-icon-lib',
-  imports: [PageLayoutComponent],
+  imports: [PageLayoutComponent, RouterLink],
   templateUrl: './icon-lib.component.html',
   styleUrl: './icon-lib.component.scss'
 })