add style to the remaining components in our website

src/app/system/system.component.ts

@@ -1,10 +1,10 @@
 /** Angular Imports */
-import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, OnInit, TemplateRef, ViewChild } from '@angular/core';
 import { Router } from '@angular/router';
 
 /** Custom Services */
-import { PopoverService } from '../configuration-wizard/popover/popover.service';
 import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
+import { PopoverService } from '../configuration-wizard/popover/popover.service';
 
 @Component({
   selector: 'mifosx-system',
@@ -41,6 +41,8 @@ export class SystemComponent implements OnInit, AfterViewInit {
   @ViewChild('manageReports') manageReports: ElementRef<any>;
   /* Template for popover on manage reports */
   @ViewChild('templateManageReports') templateManageReports: TemplateRef<any>;
+  // Initialize an array of 15 boolean values, all set to false
+  arrowBooleans: boolean[] = new Array(15).fill(false);
 
   /**
    * @param {Router} router Router.
@@ -60,6 +62,7 @@ export class SystemComponent implements OnInit, AfterViewInit {
    * @param target HTMLElement | ElementRef<any>.
    * @param position String.
    * @param backdrop Boolean.
+   * @param arrowNumber - The index of the boolean value to toggle.
    */
   showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
     setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
@@ -229,4 +232,9 @@ export class SystemComponent implements OnInit, AfterViewInit {
     this.configurationWizardService.showManageFunds = true;
     this.router.navigate(['/organization/manage-funds']);
   }
+
+  arrowBooleansToggle(arrowNumber:number) {
+    // Toggle the boolean value at the given index
+    this.arrowBooleans[arrowNumber] = !this.arrowBooleans[arrowNumber];
+  }
 }