#705 - Style changes

l10n/bundle.l10n.json

@@ -499,7 +499,7 @@
   "panel.seoKeywords.checks": "Checks",
   "panel.seoKeywords.density.tableTitle": "Frequency",
   "panel.seoKeywords.density": "Keyword density",
-  "panel.seoKeywordInfo.validInfo.label": "Used in heading(s)",
+  "panel.seoKeywordInfo.validInfo.label": "Heading(s)",
   "panel.seoKeywordInfo.validInfo.content": "Content",
 
   "panel.seoKeywords.title": "Keywords",

src/dashboardWebView/utils/updateCssVariables.ts

@@ -98,4 +98,17 @@ export const updateCssVariables = (isDarkTheme = true) => {
     '--frontmatter-border-active',
     darkenColor(borderColor, isDarkTheme ? -30 : 30) || 'var(--vscode-activityBar-activeBorder)'
   );
+
+  // SEO - Success/Warning colors
+  const successColor = styles.getPropertyValue('--vscode-charts-green');
+  document.documentElement.style.setProperty(
+    '--frontmatter-success-background',
+    opacityColor(successColor, 0.05) || 'var(--vscode-charts-green)'
+  );
+
+  const warningColor = styles.getPropertyValue('--vscode-statusBarItem-warningBackground');
+  document.documentElement.style.setProperty(
+    '--frontmatter-warning-background',
+    opacityColor(warningColor, 0.05) || 'var(--vscode-statusBarItem-warningBackground)'
+  );
 };

src/panelWebView/components/SeoKeywordInfo.tsx

@@ -29,7 +29,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
   headings
 }: React.PropsWithChildren<ISeoKeywordInfoProps>) => {
 
-  const tooltipClasses = `!py-[2px] !px-[8px] !rounded-[3px] !border-[var(--vscode-editorHoverWidget-border)] !border !border-solid !bg-[var(--vscode-editorHoverWidget-background)] !text-[var(--vscode-editorHoverWidget-foreground)] !font-normal !opacity-100 shadow-[0_2px_8px_var(--vscode-widget-shadow)] !z-[9999]`;
+  const tooltipClasses = `!py-[2px] !px-[8px] !rounded-[3px] !border-[var(--vscode-editorHoverWidget-border)] !border !border-solid !bg-[var(--vscode-editorHoverWidget-background)] !text-[var(--vscode-editorHoverWidget-foreground)] !font-normal !opacity-100 shadow-[0_2px_8px_var(--vscode-widget-shadow)] text-left`;
 
   const density = () => {
     if (!wordCount) {
@@ -44,7 +44,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
     if (density < 0.75) {
       return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
     } else if (density >= 0.75 && density < 1.5) {
-      return <span className='text-[12px] text-[#1f883d]'>{densityTitle}</span>;
+      return <span className='text-[12px] text-[var(--vscode-charts-green)]'>{densityTitle}</span>;
     } else {
       return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
     }
@@ -98,11 +98,12 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
   const tooltipContent = React.useMemo(() => {
     return (
       <>
-        <span className='inline-flex items-center gap-1'>{localize(LocalizationKey.commonTitle)}: <ValidInfo isValid={checks.title} /></span><br />
-        <span className='inline-flex items-center gap-1'>{localize(LocalizationKey.commonDescription)}: <ValidInfo isValid={checks.description} /></span><br />
-        <span className='inline-flex items-center gap-1'>{localize(LocalizationKey.commonSlug)}: <ValidInfo isValid={checks.slug} /></span><br />
-        <span className='inline-flex items-center gap-1'>{localize(LocalizationKey.panelSeoKeywordInfoValidInfoContent)}: <ValidInfo isValid={checks.content} /></span><br />
-        <span className='inline-flex items-center gap-1'>{localize(LocalizationKey.panelSeoKeywordInfoValidInfoLabel)}: <ValidInfo isValid={!!checks.heading} /></span>
+        <b>Keyword present in:</b><br />
+        <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.title} /> {localize(LocalizationKey.commonTitle)}</span><br />
+        <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.description} /> {localize(LocalizationKey.commonDescription)}</span><br />
+        <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.slug} /> {localize(LocalizationKey.commonSlug)}</span><br />
+        <span className='inline-flex items-center gap-1'><ValidInfo isValid={checks.content} /> {localize(LocalizationKey.panelSeoKeywordInfoValidInfoContent)}</span><br />
+        <span className='inline-flex items-center gap-1'><ValidInfo isValid={!!checks.heading} /> {localize(LocalizationKey.panelSeoKeywordInfoValidInfoLabel)}</span>
       </>
     )
   }, [checks]);
@@ -115,7 +116,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
 
     return (
       <div 
-        className={`inline-flex py-1 px-[4px] rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid ${isValid ? "text-[#1f883d] border-[#1f883d]" : "text-[var(--vscode-statusBarItem-warningBackground)] border-[var(--vscode-statusBarItem-warningBackground)]"}`}
+        className={`inline-flex py-1 px-[4px] rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid ${isValid ? "text-[--vscode-charts-green] border-[--vscode-charts-green] bg-[--frontmatter-success-background]" : "text-[var(--vscode-statusBarItem-warningBackground)] border-[var(--vscode-statusBarItem-warningBackground)] bg-[--frontmatter-warning-background]"}`}
         data-tooltip-id={`tooltip-checks-${keyword}`}
       >
         <ValidInfo isValid={isValid} />

src/panelWebView/components/SeoKeywords.tsx

@@ -64,11 +64,11 @@ const SeoKeywords: React.FunctionComponent<ISeoKeywordsProps> = ({
             <VSCodeTableHead>
               {localize(LocalizationKey.panelSeoKeywordsHeaderKeyword)}
             </VSCodeTableHead>
-            <VSCodeTableHead>
+            <VSCodeTableHead className={`text-center`}>
               {localize(LocalizationKey.panelSeoKeywordsChecks)}
             </VSCodeTableHead>
             
-            <VSCodeTableHead>
+            <VSCodeTableHead className={`text-center`}>
               <span
                 data-tooltip-id="tooltip-density"
                 data-tooltip-content={localize(LocalizationKey.panelSeoKeywordsDensity)}>

src/panelWebView/components/ValidInfo.tsx

@@ -15,7 +15,7 @@ const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({
   return (
     <div className='inline-flex items-center h-full'>
       {isValid ? (
-        <CheckIcon className={`h-4 w-4 text-[#1f883d] mr-2`} />
+        <CheckIcon className={`h-4 w-4 text-[var(--vscode-charts-green)] mr-2`} />
       ) : (
         <ExclamationTriangleIcon className={`h-4 w-4 text-[var(--vscode-statusBarItem-warningBackground)] mr-2`} />
       )}

src/panelWebView/index.tsx

@@ -5,10 +5,16 @@ import { ViewPanel } from './ViewPanel';
 import { RecoilRoot } from 'recoil';
 import { I10nProvider } from '../dashboardWebView/providers/I10nProvider';
 import { SentryInit } from '../utils/sentryInit';
+import { updateCssVariables } from '../dashboardWebView/utils/updateCssVariables';
 import 'vscrui/dist/codicon.css';
 
 import './styles.css';
 
+const mutationObserver = new MutationObserver((_, __) => {
+  const darkMode = document.body.classList.contains('vscode-dark');
+  updateCssVariables(darkMode);
+});
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 declare const acquireVsCodeApi: <T = unknown>() => {
   getState: () => T;
@@ -24,6 +30,9 @@ if (elm) {
   const isProd = elm?.getAttribute('data-isProd');
   const isCrashDisabled = elm?.getAttribute('data-is-crash-disabled');
 
+  updateCssVariables(document.body.classList.contains('vscode-dark'));
+  mutationObserver.observe(document.body, { childList: false, attributes: true });
+
   if (isProd === 'true' && isCrashDisabled === 'false') {
     Sentry.init(SentryInit(version, environment));