Add icons to button component

angular.json

@@ -27,9 +27,11 @@
               }
             ],
             "styles": [
+              "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
               "src/styles.css"
             ],
             "scripts": [
+              "node_modules/@fortawesome/fontawesome-free/js/all.min.js",
               "assets/libs/js-interpreter.js"
             ],
             "allowedCommonJsDependencies": [

package.json

@@ -20,6 +20,7 @@
     "@angular/platform-browser": "^19.2.3",
     "@angular/platform-browser-dynamic": "^19.2.3",
     "@angular/router": "^19.2.3",
+    "@fortawesome/fontawesome-free": "^6.7.2",
     "blockly": "^11.2.2",
     "rxjs": "~7.8.2",
     "tslib": "^2.8.1",

src/app/components/activity/activity.component.html

@@ -11,19 +11,23 @@
         <p>Due on {{ activity.dueDate }}</p>
       </div>
       <div class="relative">
-        <button #menuButton (click)="toggleMenu()" data-testid="menu-toggle">menu</button>
+        <button #menuButton (click)="toggleMenu()" data-testid="menu-toggle">
+          <i class="fas fa-ellipsis"></i>
+        </button>
         @if (menuOpen) {
           <div #dropdown
                class="absolute left- mt-2 w-40 bg-white rounded-lg shadow-md transition-opacity duration-200 z-10">
             <button
-              class="block w-full px-4 py-2 text-left hover:bg-gray-100"
+              class="block w-full px-4 py-2 space-x-2 text-left hover:bg-gray-100"
               (click)="activityService.downloadActivity(activity)">
-              Download
+              <i class="fas fa-download"></i>
+              <span>Download</span>
             </button>
             <button
-              class="block w-full px-4 py-2 text-left hover:bg-gray-100"
+              class="block w-full px-4 py-2 space-x-2 text-left hover:bg-gray-100"
               (click)="deleteActivity()">
-              Delete
+              <i class="fas fa-trash"></i>
+              <span>Delete</span>
             </button>
           </div>
         }

src/app/components/blocks-modal/blocks-modal.component.html

@@ -3,7 +3,7 @@
     <div class="flex flex-row p-6 justify-between shadow-md">
       <h2 class="text-4xl">Select the blocks</h2>
       <blearn-button
-        teacherText="Close"
+        icon="xmark"
         teacherStyle="bg-red-500 text-white"
         (click)="onClose()"
       />
@@ -13,14 +13,14 @@ <h2 class="text-4xl">Select the blocks</h2>
         <div class="flex flex-row justify-between items-center mx-6">
           <div [id]="block" class="w-full h-28"></div>
           <blearn-button
-            teacherText="-"
+            icon="minus"
             teacherStyle="text-white bg-red-500"
             (clicked)="removeBlock(block)"
             [disabled]="!BLOCKS_LIMIT.has(block)"
           />
           <p class="p-2">{{BLOCKS_LIMIT.get(block) || 0}}</p>
           <blearn-button
-            teacherText="+"
+            icon="plus"
             teacherStyle="text-white bg-teacher"
             (click)="addBlock(block)"
           />

src/app/components/button/button.component.html

@@ -1,10 +1,16 @@
 <button
   [ngClass]="[
-    'py-2 font-semibold px-4 rounded-full transition-transform hover:scale-105 shadow-md active:scale-95 duration-150',
+    'flex space-x-2 items-center py-4 px-4 font-semibold rounded-full transition-transform hover:scale-105 shadow-md active:scale-95 duration-150',
     buttonStyle(),
     disabled ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''
   ]"
   (click)="onClick()"
 >
-  {{ buttonText() }}
+  @if (icon) {
+    <i class="fas w-4 h-4" [ngClass]="'fa-' + icon"></i>
+  }
+
+  @if (buttonText() !== '') {
+    <span>{{ buttonText() }}</span>
+  }
 </button>

src/app/components/button/button.component.spec.ts

@@ -28,8 +28,10 @@ describe('ButtonComponent', () => {
     });
 
     // then
-    expect(screen.getByText('Student')).toBeInTheDocument();
-    expect(screen.getByText('Student')).toHaveClass('text-blue-500');
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Student');
+    expect(button).toHaveClass('text-blue-500');
   });
 
   it('should display teacher text when in teacher mode', async () => {
@@ -47,7 +49,9 @@ describe('ButtonComponent', () => {
     });
 
     // then
-    expect(screen.getByText('Teacher')).toBeInTheDocument();
-    expect(screen.getByText('Teacher')).toHaveClass('text-green-500');
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toHaveTextContent('Teacher');
+    expect(button).toHaveClass('text-green-500');
   });
 });

src/app/components/button/button.component.ts

@@ -18,6 +18,7 @@ export class ButtonComponent {
   @Input() studentStyle: string = '';
   @Input() teacherStyle: string = '';
   @Input() disabled: boolean = false;
+  @Input() icon?: string;
 
   @Output() clicked = new EventEmitter<void>();
 

src/app/components/description-modal/description-modal.component.html

@@ -15,8 +15,7 @@ <h3>{{ activity()!.dueDate | date: 'MM/dd/yyyy' }}</h3>
 
       @let closeStyle = 'bg-red-500 text-white';
       <blearn-button
-        studentText="Close"
-        teacherText="Close"
+        icon="xmark"
         [studentStyle]="closeStyle"
         [teacherStyle]="closeStyle"
         (click)="close.emit()"

src/app/components/scene/scene.component.html

@@ -1,6 +1,7 @@
 <div #scene class="h-full w-full">
   <div class="flex flex-row justify-center">
     <blearn-button
+      icon="play"
       studentText="Run"
       teacherText="Run"
       studentStyle="bg-green-500 text-white"
@@ -9,6 +10,7 @@
       [disabled]="isRunning()"
     />
     <blearn-button
+      icon="stop"
       studentText="Stop"
       teacherText="Stop"
       studentStyle="bg-red-500 text-white"
@@ -18,6 +20,7 @@
     />
     @if (modeService.getMode() === 'teacher') {
       <blearn-button
+        icon="plus"
         teacherText="Add"
         teacherStyle="bg-gray-500 text-white"
         (clicked)="addObject()"

src/app/layout/header/header.component.html

@@ -1,4 +1,4 @@
-<header class="p-8 flex justify-between border-b-2 shadow-md" data-testid="header">
+<header class="p-8 flex justify-between items-center border-b-2 shadow-md" data-testid="header">
   @let style = "text-4xl font-extrabold";
 
   <a routerLink="">
@@ -10,6 +10,7 @@
     />
   </a>
   <blearn-button
+    icon="shuffle"
     studentText="Switch to Teacher mode"
     teacherText="Switch to Student mode"
     studentStyle="bg-teacher text-white"

src/app/pages/activity-detail/activity-detail.component.html

@@ -22,13 +22,15 @@
     @let descriptionText = "Description";
     <div class="flex flex-row justify-around space-x-2">
       <blearn-button
+        icon="file-lines"
         studentText="{{descriptionText}}"
         teacherText="{{descriptionText}}"
         studentStyle="bg-student {{style}}"
         teacherStyle="bg-teacher {{style}}"
         (click)="openDescriptionModal()"
       />
       <blearn-button
+        icon="download"
         studentText="{{downloadText}}"
         teacherText="{{downloadText}}"
         studentStyle="bg-student {{style}}"

src/app/pages/home/home.component.html

@@ -13,6 +13,7 @@
 
       @if (modeService.getMode() === 'teacher') {
         <blearn-button
+          icon="check"
           teacherText="Evaluate task"
           teacherStyle="text-teacher border-2 border-teacher"
         />
@@ -21,6 +22,7 @@
       }
 
       <blearn-button
+        icon="plus"
         studentText="Import task"
         teacherText="Create task"
         studentStyle="bg-student {{buttonStyle}}"