feat(admin): add feedback on hover to member status

* Created new class status-change in styles.scss definging circular background that highlights on
hover
* Added this new class to appropriate places

Author: michalberky

apps/admin-gui/src/_styles.scss

@@ -1444,6 +1444,30 @@ td.mat-mdc-cell {
   justify-content: center;
 }
 
+.status-change {
+  position: relative;
+  display: inline-block;
+  margin-left: 5px;
+
+  // Using ::before to create a pseudo-element serving as circular background
+  &:before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 150%;
+    padding-bottom: 150%;
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.05);
+    opacity: 0;
+  }
+
+  &:hover::before {
+    opacity: 1;
+  }
+}
+
 #preloader {
   position: fixed;
   top: 0;

libs/perun/components/src/lib/group-resource-status/group-resource-status.component.html

@@ -1,5 +1,6 @@
 <div class="flex-container">
   <span
+    class="status-change"
     (click)="changeStatus()"
     *ngIf="status === 'ACTIVE'"
     matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.GROUP_RESOURCE_STATUS.ACTIVE' | translate}}"
@@ -8,6 +9,7 @@
     <mat-icon class="green">check_circle_outline</mat-icon>
   </span>
   <span
+    class="status-change"
     (click)="changeStatus()"
     *ngIf="status === 'INACTIVE'"
     matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.GROUP_RESOURCE_STATUS.INACTIVE' | translate}}"
@@ -16,13 +18,15 @@
     <mat-icon class="grey">block</mat-icon>
   </span>
   <span
+    class="status-change"
     (click)="changeStatus()"
     *ngIf="status === 'FAILED'"
     matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.GROUP_RESOURCE_STATUS.FAILED' | translate}}: {{this.failureCause}}"
     matTooltipPosition="above">
     <mat-icon class="red">report</mat-icon>
   </span>
   <span
+    class="status-change"
     *ngIf="status === 'PROCESSING'"
     matTooltip="{{'SHARED_LIB.PERUN.COMPONENTS.GROUP_RESOURCE_STATUS.PROCESSING' | translate}}"
     matTooltipPosition="above">

libs/perun/components/src/lib/groups-list/groups-list.component.html

@@ -139,7 +139,7 @@
           <i
             *ngIf="{status: group.attributes | findAttribute: 'groupStatus'} as groupStatus"
             (click)="$event.stopPropagation()"
-            class="material-icons {{groupStatus.status | groupStatusIconColor}} cursor-default"
+            class="material-icons status-change {{groupStatus.status | groupStatusIconColor}} cursor-default"
             matTooltip="{{groupStatus.status}}"
             matTooltipClass="status-tooltip"
             matTooltipPosition="left">

libs/perun/components/src/lib/members-dynamic-list/members-dynamic-list.component.html

@@ -73,7 +73,7 @@
           <i
             (click)="openMembershipDialog($event, member)"
             [class.cursor-default]="!expireVoAuth"
-            class="material-icons {{(member | memberStatusIconColor)}}"
+            class="material-icons status-change {{(member | memberStatusIconColor)}}"
             matTooltip="{{member | memberStatusTooltip: false}}"
             matTooltipClass="status-tooltip"
             matTooltipPosition="left">
@@ -91,7 +91,7 @@
           <i
             (click)="openMembershipDialog($event, member, groupId)"
             [class.cursor-default]="!expireGroupAuth"
-            class="material-icons {{member.groupStatus | groupStatusIconColor: member.membershipType === 'INDIRECT' : isMembersGroup}}"
+            class="material-icons status-change {{member.groupStatus | groupStatusIconColor: member.membershipType === 'INDIRECT' : isMembersGroup}}"
             matTooltip="{{member | memberStatusTooltip: true: isMembersGroup}}"
             matTooltipClass="status-tooltip"
             matTooltipPosition="left">

libs/perun/components/src/lib/members-list/members-list.component.html

@@ -83,7 +83,7 @@
         <td *matCellDef="let member" mat-cell>
           <i
             (click)="changeStatus($event, member)"
-            class="material-icons {{(member | memberStatusIconColor)}}"
+            class="material-icons status-change {{(member | memberStatusIconColor)}}"
             matTooltip="{{member | memberStatusTooltip: false}}"
             matTooltipClass="status-tooltip"
             matTooltipPosition="left">
@@ -100,7 +100,7 @@
         <td *matCellDef="let member" mat-cell>
           <i
             (click)="changeStatus($event, member)"
-            class="material-icons {{member.groupStatus | groupStatusIconColor}}"
+            class="material-icons status-change {{member.groupStatus | groupStatusIconColor}}"
             matTooltip="{{member | memberStatusTooltip: true}}"
             matTooltipClass="status-tooltip"
             matTooltipPosition="left">