From ad16337b9ac15f50aabe6d56a06dbfb07b55f528 Mon Sep 17 00:00:00 2001
From: aregnery <aregnery@gitlab.com>
Date: Mon, 6 Oct 2025 17:32:18 -0400
Subject: [PATCH] Standardize homepage widget card structure for consistency

Both merge requests and work items widgets now use identical card
layouts and styling, and design tokens were used

Changelog: changed
---
 .../homepage/components/homepage_app.vue      |   2 +-
 .../components/merge_requests_widget.vue      | 110 ++++++++---------
 .../homepage/components/work_items_widget.vue | 116 ++++++++----------
 .../components/merge_requests_widget_spec.js  |   2 +-
 .../components/work_items_widget_spec.js      |   2 +-
 5 files changed, 110 insertions(+), 122 deletions(-)

diff --git a/app/assets/javascripts/homepage/components/homepage_app.vue b/app/assets/javascripts/homepage/components/homepage_app.vue
index 1b9176a1c59153..e214ab114b4ad8 100644
--- a/app/assets/javascripts/homepage/components/homepage_app.vue
+++ b/app/assets/javascripts/homepage/components/homepage_app.vue
@@ -65,7 +65,7 @@ export default {
     <homepage-preferences-banner />
     <div class="gl-grid gl-grid-cols-1 gl-gap-6 @md/panel:gl-grid-cols-3">
       <section class="gl-flex gl-flex-col gl-gap-6 @md/panel:gl-col-span-2">
-        <div class="gl-grid gl-grid-cols-1 gl-gap-5 @lg/panel:gl-grid-cols-2">
+        <div class="gl-grid gl-grid-cols-1 gl-gap-3 @lg/panel:gl-grid-cols-2">
           <merge-requests-widget
             :review-requested-path="reviewRequestedPath"
             :assigned-to-you-path="assignedMergeRequestsPath"
diff --git a/app/assets/javascripts/homepage/components/merge_requests_widget.vue b/app/assets/javascripts/homepage/components/merge_requests_widget.vue
index d1267d63bcaf97..2a27abefbd2d52 100644
--- a/app/assets/javascripts/homepage/components/merge_requests_widget.vue
+++ b/app/assets/javascripts/homepage/components/merge_requests_widget.vue
@@ -109,7 +109,7 @@ export default {
 
 <template>
   <base-widget :apply-default-styling="false" @visible="handleVisible">
-    <div class="gl-grid gl-grid-cols-2 gl-gap-5">
+    <div class="gl-grid gl-min-h-full gl-grid-cols-2 gl-gap-3">
       <gl-link
         class="gl-border gl-flex-1 gl-cursor-pointer gl-rounded-lg gl-border-subtle gl-bg-subtle gl-px-4 gl-py-4 hover:gl-bg-gray-10 dark:hover:gl-bg-alpha-light-8"
         :href="reviewRequestedPath"
@@ -117,37 +117,35 @@ export default {
         variant="meta"
         @click="handleReviewRequestedClick"
       >
-        <div>
-          <div v-if="hasError" class="gl-m-2">
-            <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
-              <gl-icon name="error" class="gl-text-red-500" :size="16" />
-              <p class="gl-text-size-h5 gl-text-default-400 gl-mb-0">
-                {{
-                  s__(
-                    'HomePageMergeRequestsWidget|The number of merge requests is not available. Please refresh the page to try again, or visit the dashboard.',
-                  )
-                }}
-              </p>
-            </div>
+        <div v-if="hasError" class="gl-m-2">
+          <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
+            <gl-icon name="error" class="gl-text-control-error" :size="16" />
+            <p class="gl-text-size-h5 gl-mb-0 gl-text-default">
+              {{
+                s__(
+                  'HomePageMergeRequestsWidget|The number of merge requests is not available. Please refresh the page to try again, or visit the dashboard.',
+                )
+              }}
+            </p>
           </div>
-          <div v-else>
-            <div class="gl-m-2 gl-flex gl-items-center gl-gap-4">
-              <div class="gl-heading-1 gl-mb-0" data-testid="review-requested-count">
-                {{ reviewRequestedCount }}
-              </div>
-              <gl-icon name="merge-request" :size="16" />
+        </div>
+        <div v-else>
+          <div class="gl-m-2 gl-flex gl-items-center gl-gap-4">
+            <div class="gl-heading-1 gl-mb-0" data-testid="review-requested-count">
+              {{ reviewRequestedCount }}
             </div>
-            <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
-              {{ s__('HomePageMergeRequestsWidget|Merge requests waiting for your review') }}
-            </h2>
-            <span
-              v-if="reviewRequestedLastUpdatedAt"
-              data-testid="review-requested-last-updated-at"
-              class="gl-text-sm gl-text-gray-400 gl-text-subtle"
-            >
-              {{ timeFormatted(reviewRequestedLastUpdatedAt) }}
-            </span>
+            <gl-icon name="merge-request" :size="16" />
           </div>
+          <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
+            {{ s__('HomePageMergeRequestsWidget|Merge requests waiting for your review') }}
+          </h2>
+          <span
+            v-if="reviewRequestedLastUpdatedAt"
+            data-testid="review-requested-last-updated-at"
+            class="gl-text-sm gl-text-subtle"
+          >
+            {{ timeFormatted(reviewRequestedLastUpdatedAt) }}
+          </span>
         </div>
       </gl-link>
       <gl-link
@@ -158,37 +156,35 @@ export default {
         variant="meta"
         @click="handleAssignedClick"
       >
-        <div>
-          <div v-if="hasError" class="gl-m-2">
-            <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
-              <gl-icon name="error" class="gl-text-red-500" :size="16" />
-              <p class="gl-text-size-h3 gl-text-default-400 gl-mb-0">
-                {{
-                  s__(
-                    'HomePageMergeRequestsWidget|The number of merge requests is not available. Please refresh the page to try again, or visit the dashboard.',
-                  )
-                }}
-              </p>
-            </div>
+        <div v-if="hasError" class="gl-m-2">
+          <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
+            <gl-icon name="error" class="gl-text-control-error" :size="16" />
+            <p class="gl-text-size-h3 gl-mb-0 gl-text-default">
+              {{
+                s__(
+                  'HomePageMergeRequestsWidget|The number of merge requests is not available. Please refresh the page to try again, or visit the dashboard.',
+                )
+              }}
+            </p>
           </div>
-          <div v-else>
-            <div class="gl-m-2 gl-flex gl-items-center gl-gap-4">
-              <div class="gl-heading-1 gl-mb-0" data-testid="assigned-count">
-                {{ assignedCount }}
-              </div>
-              <gl-icon name="merge-request" :size="16" />
+        </div>
+        <div v-else>
+          <div class="gl-m-2 gl-flex gl-items-center gl-gap-4">
+            <div class="gl-heading-1 gl-mb-0" data-testid="assigned-count">
+              {{ assignedCount }}
             </div>
-            <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
-              {{ s__('HomePageMergeRequestsWidget|Merge requests assigned to you') }}
-            </h2>
-            <span
-              v-if="assignedLastUpdatedAt"
-              data-testid="assigned-last-updated-at"
-              class="gl-text-sm gl-text-gray-400 gl-text-subtle"
-            >
-              {{ timeFormatted(assignedLastUpdatedAt) }}
-            </span>
+            <gl-icon name="merge-request" :size="16" />
           </div>
+          <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
+            {{ s__('HomePageMergeRequestsWidget|Merge requests assigned to you') }}
+          </h2>
+          <span
+            v-if="assignedLastUpdatedAt"
+            data-testid="assigned-last-updated-at"
+            class="gl-text-sm gl-text-subtle"
+          >
+            {{ timeFormatted(assignedLastUpdatedAt) }}
+          </span>
         </div>
       </gl-link>
     </div>
diff --git a/app/assets/javascripts/homepage/components/work_items_widget.vue b/app/assets/javascripts/homepage/components/work_items_widget.vue
index 892ff20a90d86a..4f5881ad17e406 100644
--- a/app/assets/javascripts/homepage/components/work_items_widget.vue
+++ b/app/assets/javascripts/homepage/components/work_items_widget.vue
@@ -117,7 +117,7 @@ export default {
 
 <template>
   <base-widget :apply-default-styling="false" @visible="handleVisible">
-    <div class="gl-grid gl-grid-cols-2 gl-gap-5">
+    <div class="gl-grid gl-min-h-full gl-grid-cols-2 gl-gap-3">
       <gl-link
         class="gl-border gl-flex-1 gl-cursor-pointer gl-rounded-lg gl-border-subtle gl-bg-subtle gl-px-4 gl-py-4 hover:gl-bg-gray-10 dark:hover:gl-bg-alpha-light-8"
         :href="assignedToYouPath"
@@ -125,81 +125,73 @@ export default {
         variant="meta"
         @click="handleAssignedClick"
       >
-        <div>
-          <div v-if="hasError" class="gl-m-2">
-            <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
-              <gl-icon name="error" class="gl-text-red-500" :size="16" />
-              <p class="gl-text-size-h5 gl-text-default-400 gl-mb-0">
-                {{
-                  s__(
-                    'HomePageWorkItemsWidget|The number of issues is not available. Please refresh the page to try again, or visit the issue list.',
-                  )
-                }}
-              </p>
-            </div>
+        <div v-if="hasError" class="gl-m-2">
+          <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
+            <gl-icon name="error" class="gl-text-control-error" :size="16" />
+            <p class="gl-text-size-h5 gl-mb-0 gl-text-default">
+              {{
+                s__(
+                  'HomePageWorkItemsWidget|The number of issues is not available. Please refresh the page to try again, or visit the issue list.',
+                )
+              }}
+            </p>
           </div>
-          <div v-else>
-            <div class="gl-m-2 gl-flex gl-flex-col-reverse gl-items-start gl-gap-2">
-              <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
-                {{ s__('HomePageWorkItemsWidget|Issues assigned to you') }}
-              </h2>
-              <div class="gl-flex gl-items-center gl-gap-4">
-                <div class="gl-heading-1 gl-mb-0" data-testid="assigned-count">
-                  {{ assignedCount }}
-                </div>
-                <gl-icon name="work-item-issue" :size="16" />
-              </div>
+        </div>
+        <div v-else>
+          <div class="gl-m-2 gl-flex gl-items-center gl-gap-4">
+            <div class="gl-heading-1 gl-mb-0" data-testid="assigned-count">
+              {{ assignedCount }}
             </div>
-            <span
-              v-if="assignedLastUpdatedAt"
-              data-testid="assigned-last-updated-at"
-              class="gl-text-sm gl-text-gray-400 gl-text-subtle"
-            >
-              {{ timeFormatted(assignedLastUpdatedAt) }}
-            </span>
+            <gl-icon name="work-item-issue" :size="16" />
           </div>
+          <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
+            {{ s__('HomePageWorkItemsWidget|Issues assigned to you') }}
+          </h2>
+          <span
+            v-if="assignedLastUpdatedAt"
+            data-testid="assigned-last-updated-at"
+            class="gl-text-sm gl-text-subtle"
+          >
+            {{ timeFormatted(assignedLastUpdatedAt) }}
+          </span>
         </div>
       </gl-link>
       <gl-link
-        class="gl-border gl-flex-1 gl-cursor-pointer gl-rounded-lg gl-border-subtle gl-bg-subtle gl-p-5 hover:gl-bg-gray-10 dark:hover:gl-bg-alpha-light-8"
+        class="gl-border gl-flex-1 gl-cursor-pointer gl-rounded-lg gl-border-subtle gl-bg-subtle gl-px-4 gl-py-4 hover:gl-bg-gray-10 dark:hover:gl-bg-alpha-light-8"
         :href="authoredByYouPath"
         :aria-label="s__('HomePageWorkItemsWidget|Work items authored by you')"
         variant="meta"
         @click="handleAuthoredClick"
       >
-        <div>
-          <div v-if="hasError" class="gl-m-2">
-            <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
-              <gl-icon name="error" class="gl-text-red-500" :size="16" />
-              <p class="gl-text-size-h3 gl-text-default-400 gl-mb-0">
-                {{
-                  s__(
-                    'HomePageWorkItemsWidget|The number of issues is not available. Please refresh the page to try again, or visit the issue list.',
-                  )
-                }}
-              </p>
-            </div>
+        <div v-if="hasError" class="gl-m-2">
+          <div class="gl-flex gl-flex-col gl-items-start gl-gap-4">
+            <gl-icon name="error" class="gl-text-control-error" :size="16" />
+            <p class="gl-text-size-h3 gl-mb-0 gl-text-default">
+              {{
+                s__(
+                  'HomePageWorkItemsWidget|The number of issues is not available. Please refresh the page to try again, or visit the issue list.',
+                )
+              }}
+            </p>
           </div>
-          <div v-else>
-            <div class="gl-m-2 gl-flex gl-flex-col-reverse gl-items-start gl-gap-2">
-              <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
-                {{ s__('HomePageWorkItemsWidget|Issues authored by you') }}
-              </h2>
-              <div class="gl-flex gl-items-center gl-gap-4">
-                <div class="gl-heading-1 gl-mb-0" data-testid="authored-count">
-                  {{ authoredCount }}
-                </div>
-                <gl-icon name="work-item-issue" :size="16" />
-              </div>
+        </div>
+        <div v-else>
+          <div class="gl-m-2 gl-flex gl-items-center gl-gap-4">
+            <div class="gl-heading-1 gl-mb-0" data-testid="authored-count">
+              {{ authoredCount }}
             </div>
-            <span
-              v-if="authoredLastUpdatedAt"
-              data-testid="authored-last-updated-at"
-              class="gl-text-sm gl-text-gray-400 gl-text-subtle"
-            >
-              {{ timeFormatted(authoredLastUpdatedAt) }}
-            </span>
+            <gl-icon name="work-item-issue" :size="16" />
           </div>
+          <h2 class="gl-heading-5 gl-mb-0 gl-font-normal">
+            {{ s__('HomePageWorkItemsWidget|Issues authored by you') }}
+          </h2>
+          <span
+            v-if="authoredLastUpdatedAt"
+            data-testid="authored-last-updated-at"
+            class="gl-text-sm gl-text-subtle"
+          >
+            {{ timeFormatted(authoredLastUpdatedAt) }}
+          </span>
         </div>
       </gl-link>
     </div>
diff --git a/spec/frontend/homepage/components/merge_requests_widget_spec.js b/spec/frontend/homepage/components/merge_requests_widget_spec.js
index 0d3839a68d9b11..15fe63469409c1 100644
--- a/spec/frontend/homepage/components/merge_requests_widget_spec.js
+++ b/spec/frontend/homepage/components/merge_requests_widget_spec.js
@@ -160,7 +160,7 @@ describe('MergeRequestsWidget', () => {
         const icon = allIcons.at(i);
         if (icon.props('name') === 'error') {
           expect(icon.props('size')).toBe(16);
-          expect(icon.classes('gl-text-red-500')).toBe(true);
+          expect(icon.classes('gl-text-control-error')).toBe(true);
           errorIconCount += 1;
         }
       }
diff --git a/spec/frontend/homepage/components/work_items_widget_spec.js b/spec/frontend/homepage/components/work_items_widget_spec.js
index a8990c0faa1a61..b03b9dcd8a92e6 100644
--- a/spec/frontend/homepage/components/work_items_widget_spec.js
+++ b/spec/frontend/homepage/components/work_items_widget_spec.js
@@ -151,7 +151,7 @@ describe('WorkItemsWidget', () => {
         const icon = allIcons.at(i);
         if (icon.props('name') === 'error') {
           expect(icon.props('size')).toBe(16);
-          expect(icon.classes('gl-text-red-500')).toBe(true);
+          expect(icon.classes('gl-text-control-error')).toBe(true);
           errorIconCount += 1;
         }
       }
-- 
GitLab