feat(devtools): enhance SEO overview with new scoring and styling features

This commit introduces a comprehensive update to the SEO overview section, adding a scoring system for subsections based on issue severity. It includes new styles for the score ring visualization, improving the presentation of SEO health metrics. Additionally, it refactors the issue reporting logic to provide clearer insights into the status of SEO elements, enhancing user experience and accessibility in the SEO tab.

Author: abedshaaban

packages/devtools/src/styles/use-styles.ts

@@ -743,69 +743,129 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: 11px;
       color: ${t(colors.gray[500], colors.gray[400])};
     `,
-    seoOverviewSectionList: css`
+    seoOverviewCheckListCaption: css`
+      margin: 0 0 8px 0;
+      font-size: 11px;
+      line-height: 1.4;
+      color: ${t(colors.gray[500], colors.gray[400])};
+    `,
+    seoOverviewScoreRingWrap: css`
+      flex-shrink: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+    seoOverviewScoreRingSvg: css`
+      display: block;
+    `,
+    seoOverviewScoreRingTrack: css`
+      fill: none;
+      stroke: ${t(colors.gray[200], colors.gray[700])};
+      stroke-width: 3;
+    `,
+    seoOverviewScoreRingLabel: css`
+      font-size: 10px;
+      font-weight: 600;
+      font-variant-numeric: tabular-nums;
+      font-family: ${fontFamily.sans};
+      fill: ${t(colors.gray[800], colors.gray[100])};
+    `,
+    seoOverviewCheckList: css`
       display: flex;
       flex-direction: column;
-      gap: 4px;
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 8px;
+      overflow: hidden;
     `,
-    seoOverviewSectionButton: css`
+    seoOverviewCheckRow: css`
       display: flex;
       align-items: center;
-      gap: 10px;
+      gap: 12px;
       width: 100%;
+      margin: 0;
+      padding: 9px 10px;
       text-align: left;
-      padding: 8px 10px;
-      border: 1px solid ${t(colors.gray[200], colors.gray[800])};
-      border-radius: 6px;
+      border: none;
+      border-bottom: 1px solid ${t(colors.gray[100], colors.gray[800])};
       background: ${t(colors.white, colors.darkGray[900])};
-      cursor: pointer;
       color: ${t(colors.gray[900], colors.gray[100])};
       font-size: 13px;
       font-family: inherit;
+      cursor: pointer;
+      transition: background 0.1s ease;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &:hover {
+        background: ${t(colors.gray[50], colors.gray[800] + '55')};
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        position: relative;
+        z-index: 1;
+        box-shadow: inset 0 0 0 2px ${t(colors.blue[500], colors.blue[400])};
+      }
     `,
-    seoOverviewSectionIcon: css`
-      flex-shrink: 0;
-      width: 20px;
-      height: 20px;
-      border-radius: 4px;
+    seoOverviewCheckBody: css`
+      flex: 1;
+      min-width: 0;
       display: flex;
-      align-items: center;
-      justify-content: center;
+      flex-direction: column;
+      gap: 2px;
+    `,
+    seoOverviewCheckTitle: css`
+      font-weight: 500;
+      font-size: 13px;
+      line-height: 1.3;
+    `,
+    seoOverviewCheckMeta: css`
       font-size: 11px;
-      font-weight: 700;
+      line-height: 1.35;
+      color: ${t(colors.gray[500], colors.gray[400])};
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     `,
-    seoOverviewSectionIconPass: css`
-      background: ${t(colors.green[50], '#16a34a18')};
-      color: #16a34a;
+    seoOverviewCheckCounts: css`
+      flex-shrink: 0;
+      font-family: ${fontFamily.mono};
+      font-size: 11px;
+      font-variant-numeric: tabular-nums;
+      line-height: 1.3;
+      letter-spacing: -0.02em;
     `,
-    seoOverviewSectionIconError: css`
-      background: #dc262618;
+    seoOverviewCheckNError: css`
       color: #dc2626;
+      font-weight: 500;
     `,
-    seoOverviewSectionIconWarn: css`
-      background: #d9770618;
+    seoOverviewCheckNWarn: css`
       color: #d97706;
-    `,
-    seoOverviewSectionIconInfo: css`
-      background: #2563eb18;
-      color: #2563eb;
-    `,
-    seoOverviewSectionBody: css`
-      flex-grow: 1;
-      min-width: 0;
-    `,
-    seoOverviewSectionTitle: css`
       font-weight: 500;
-      font-size: 13px;
     `,
-    seoOverviewSectionHint: css`
-      font-size: 11px;
-      color: ${t(colors.gray[500], colors.gray[400])};
-      margin-top: 1px;
+    seoOverviewCheckNInfo: css`
+      color: ${t(colors.blue[600], colors.blue[400])};
+      font-weight: 500;
     `,
-    seoOverviewSectionChevron: css`
+    seoOverviewCheckNZero: css`
       color: ${t(colors.gray[400], colors.gray[600])};
+      font-weight: 400;
+    `,
+    seoOverviewCheckNSep: css`
+      color: ${t(colors.gray[300], colors.gray[600])};
+      margin: 0 1px;
+      font-weight: 400;
+    `,
+    seoOverviewCheckChevron: css`
       flex-shrink: 0;
+      color: ${t(colors.gray[400], colors.gray[500])};
+      font-size: 15px;
+      line-height: 1.2;
     `,
     seoHeadingTreeHeaderRow: css`
       display: flex;