From c02275d20b46c06ad1fb1c7b4aaa9b2f011e479f Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Mon, 25 Nov 2024 13:41:43 +0100
Subject: [PATCH] #705 - Style fixes

---
 l10n/bundle.l10n.json                         |  2 +-
 src/localization/localization.enum.ts         |  2 +-
 .../components/SeoKeywordInfo.tsx             |  8 +++----
 src/panelWebView/components/SeoKeywords.tsx   | 24 ++++++++-----------
 4 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/l10n/bundle.l10n.json b/l10n/bundle.l10n.json
index 1914ac87..f5aef9bd 100644
--- a/l10n/bundle.l10n.json
+++ b/l10n/bundle.l10n.json
@@ -497,7 +497,7 @@
   "panel.seoDetails.recommended": "Recommended",
 
   "panel.seoKeywords.checks": "Checks",
-  "panel.seoKeywords.density.tableTitle": "Freq.",
+  "panel.seoKeywords.density.tableTitle": "Frequency",
   "panel.seoKeywords.density": "Keyword density",
   "panel.seoKeywordInfo.validInfo.label": "Used in heading(s)",
   "panel.seoKeywordInfo.validInfo.content": "Content",
diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index bde280c5..f4cac251 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -1605,7 +1605,7 @@ export enum LocalizationKey {
    */
   panelSeoKeywordsChecks = 'panel.seoKeywords.checks',
   /**
-   * Freq.
+   * Frequency
    */
   panelSeoKeywordsDensityTableTitle = 'panel.seoKeywords.density.tableTitle',
   /**
diff --git a/src/panelWebView/components/SeoKeywordInfo.tsx b/src/panelWebView/components/SeoKeywordInfo.tsx
index fa6d9517..5bb7e392 100644
--- a/src/panelWebView/components/SeoKeywordInfo.tsx
+++ b/src/panelWebView/components/SeoKeywordInfo.tsx
@@ -42,11 +42,11 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
     const densityTitle = `${density.toFixed(2)}* %`;
 
     if (density < 0.75) {
-      return <ValidInfo label={densityTitle} isValid={false} className='text-[12px]' />;
+      return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
     } else if (density >= 0.75 && density < 1.5) {
-      return <ValidInfo label={densityTitle} isValid={true} className='text-[12px]' />;
+      return <span className='text-[12px] text-[#1f883d]'>{densityTitle}</span>;
     } else {
-      return <ValidInfo label={densityTitle} isValid={false} className='text-[12px]' />;
+      return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
     }
   };
 
@@ -144,7 +144,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
           />
         </div>
       </VSCodeTableCell>
-      <VSCodeTableCell>
+      <VSCodeTableCell className={`text-center`}>
         {checksMarkup}
 
         <Tooltip 
diff --git a/src/panelWebView/components/SeoKeywords.tsx b/src/panelWebView/components/SeoKeywords.tsx
index 18fa6ab0..274b5068 100644
--- a/src/panelWebView/components/SeoKeywords.tsx
+++ b/src/panelWebView/components/SeoKeywords.tsx
@@ -68,20 +68,16 @@ const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({
               {localize(LocalizationKey.panelSeoKeywordsChecks)}
             </VSCodeTableHead>
             
-            <VSCodeTableHead className='text-center'>
-              <div
-                className='flex items-center justify-center h-full'
-              >
-                <span
-                  data-tooltip-id="tooltip-density"
-                  data-tooltip-content={localize(LocalizationKey.panelSeoKeywordsDensity)}>
-                  {localize(LocalizationKey.panelSeoKeywordsDensityTableTitle)}
-                </span>
-                <Tooltip id="tooltip-density" className={tooltipClasses} style={{
-                  fontSize: '12px',
-                  lineHeight: '19px'
-                }} />
-              </div>
+            <VSCodeTableHead>
+              <span
+                data-tooltip-id="tooltip-density"
+                data-tooltip-content={localize(LocalizationKey.panelSeoKeywordsDensity)}>
+                {localize(LocalizationKey.panelSeoKeywordsDensityTableTitle)}
+              </span>
+              <Tooltip id="tooltip-density" className={tooltipClasses} style={{
+                fontSize: '12px',
+                lineHeight: '19px'
+              }} />
             </VSCodeTableHead>
           </VSCodeTableRow>
         </VSCodeTableHeader>