styling github links

Author: gbanu

client/src/app/components/environments/workflow-job-status/workflow-jobs-status.component.html

@@ -15,13 +15,15 @@ <h3 class="text-lg font-medium">Job Status</h3>
         >
           <div class="job-header flex justify-between items-center mb-2">
             <div class="flex items-center gap-2">
-              <i-tabler [name]="getStatusIcon(job.status, job.conclusion)" [ngClass]="getStatusClass(job.status, job.conclusion)" class="!size-5"></i-tabler>
+              <i-tabler [name]="getStatusIcon(job.status, job.conclusion)" [ngClass]="getIconColorClass(job.status, job.conclusion)" class="!size-5"></i-tabler>
               <span class="font-semibold">{{ job.name }}</span>
               <span class="status-badge px-2 py-1 rounded-full text-xs font-medium" [ngClass]="getStatusClass(job.status, job.conclusion)">
                 {{ getStatusText(job.status, job.conclusion) }}
               </span>
               @if (!!job.htmlUrl) {
-                <button text class="ml-2 text-xs text-blue-600 hover:underline" (click)="openLink(job.htmlUrl)">View Logs</button>
+                <p-button [link]="true" label="View Logs on Github" size="small" (click)="openLink(job.htmlUrl)">
+                  <i-tabler name="external-link" class="!size-4"></i-tabler>
+                </p-button>
               }
             </div>
             <div class="text-sm text-gray-500 flex items-center gap-2">
@@ -108,7 +110,7 @@ <h3 class="text-lg font-medium">Job Status</h3>
     @if (deploymentUnsuccessful() && !!latestDeployment()?.workflowRunHtmlUrl) {
       <div class="flex-col w-full justify-items-center">
         <div class="text-red-600 text-sm mb-2">Some jobs failed. Please check the details below.</div>
-        <p-button label="Open in GitHub" (click)="openLink(latestDeployment()?.workflowRunHtmlUrl)">
+        <p-button label="Open Workflow Run on GitHub" (click)="openLink(latestDeployment()?.workflowRunHtmlUrl)">
           <i-tabler name="brand-github" class="!size-4" />
         </p-button>
       </div>

client/src/app/components/environments/workflow-job-status/workflow-jobs-status.component.ts

@@ -5,14 +5,14 @@ import { getWorkflowJobStatusOptions, getWorkflowJobStatusQueryKey } from '@app/
 import { PermissionService } from '@app/core/services/permission.service';
 import { injectQuery } from '@tanstack/angular-query-experimental';
 import { provideTablerIcons, TablerIconComponent } from 'angular-tabler-icons';
-import { IconBrandGithub, IconCircleCheck, IconCircleMinus, IconCircleX, IconClock, IconProgress } from 'angular-tabler-icons/icons';
+import { IconBrandGithub, IconCircleCheck, IconCircleMinus, IconCircleX, IconClock, IconExternalLink, IconProgress } from 'angular-tabler-icons/icons';
 import { Button } from 'primeng/button';
 
 @Component({
   selector: 'app-workflow-jobs-status',
   standalone: true,
   imports: [CommonModule, TablerIconComponent, Button],
-  providers: [DatePipe, provideTablerIcons({ IconClock, IconProgress, IconCircleMinus, IconCircleCheck, IconCircleX, IconBrandGithub })],
+  providers: [DatePipe, provideTablerIcons({ IconClock, IconProgress, IconCircleMinus, IconCircleCheck, IconCircleX, IconBrandGithub, IconExternalLink })],
   templateUrl: './workflow-jobs-status.component.html',
 })
 export class WorkflowJobsStatusComponent {
@@ -44,6 +44,7 @@ export class WorkflowJobsStatusComponent {
 
     return false;
   });
+
   workflowJobsQuery = injectQuery(() => ({
     ...getWorkflowJobStatusOptions({ path: { runId: this.workflowRunId() } }),
     queryKey: getWorkflowJobStatusQueryKey({ path: { runId: this.workflowRunId() } }),
@@ -106,13 +107,13 @@ export class WorkflowJobsStatusComponent {
   }
   // Get CSS class for job status
   getStatusClass(status: string | null | undefined, conclusion: string | null | undefined): string {
-    if (conclusion === 'success') return 'text-green-600 bg-green-50 dark:text-green-400 dark:bg-green-900/30';
-    if (conclusion === 'failure') return 'text-red-600 bg-red-50 dark:text-red-400 dark:bg-red-900/30';
-    if (conclusion === 'skipped') return 'text-gray-600 bg-gray-50 dark:text-gray-400 dark:bg-gray-800';
+    if (conclusion === 'success') return 'text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/30';
+    if (conclusion === 'failure') return 'text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-900/30';
+    if (conclusion === 'skipped') return 'text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-900';
     if (conclusion === 'cancelled') return 'text-orange-600 bg-orange-50 dark:text-orange-400 dark:bg-orange-900/30';
 
     if (status === 'in_progress') return 'text-blue-600 bg-blue-50 dark:text-blue-400 dark:bg-blue-900/30';
-    if (status === 'queued' || status === 'waiting') return 'text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-800';
+    if (status === 'queued' || status === 'waiting') return 'text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-900';
 
     return 'text-gray-600 dark:text-gray-400';
   }
@@ -141,6 +142,18 @@ export class WorkflowJobsStatusComponent {
     return 'help';
   }
 
+  getIconColorClass(status: string | null | undefined, conclusion: string | null | undefined): string {
+    if (conclusion === 'success') return 'text-green-600 dark:text-green-400';
+    if (conclusion === 'failure') return 'text-red-600 dark:text-red-400';
+    if (conclusion === 'skipped') return 'text-gray-600 dark:text-gray-400';
+    if (conclusion === 'cancelled') return 'text-orange-600 dark:text-orange-400';
+
+    if (status === 'in_progress') return 'text-blue-600 dark:text-blue-400 animate-spin';
+    if (status === 'queued' || status === 'waiting') return 'text-gray-600 dark:text-gray-400';
+
+    return 'text-gray-600 dark:text-gray-400';
+  }
+
   // Get status text for display
   getStatusText(status: string | null | undefined, conclusion: string | null | undefined): string {
     return conclusion || status || 'Unknown';