#705 - Style fixes

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",

src/localization/localization.enum.ts

@@ -1605,7 +1605,7 @@ export enum LocalizationKey {
    */
   panelSeoKeywordsChecks = 'panel.seoKeywords.checks',
   /**
-   * Freq.
+   * Frequency
    */
   panelSeoKeywordsDensityTableTitle = 'panel.seoKeywords.density.tableTitle',
   /**

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 

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>