From f1ae0d60ccdbbc39b2fa3d725a80b2390688270b Mon Sep 17 00:00:00 2001
From: Tooster <5300963+T3sT3ro@users.noreply.github.com>
Date: Thu, 28 Nov 2024 00:10:27 +0100
Subject: [PATCH 1/2] #705 - UI tweaks and accessibility changes

---
 src/localization/localization.enum.ts         |  2 +-
 .../components/SeoKeywordInfo.tsx             | 19 +++++++---------
 src/panelWebView/components/ValidInfo.tsx     |  6 ++---
 src/panelWebView/styles.css                   | 22 ++++++++++++++++---
 4 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/localization/localization.enum.ts b/src/localization/localization.enum.ts
index f4cac251..4173d25b 100644
--- a/src/localization/localization.enum.ts
+++ b/src/localization/localization.enum.ts
@@ -1613,7 +1613,7 @@ export enum LocalizationKey {
    */
   panelSeoKeywordsDensity = 'panel.seoKeywords.density',
   /**
-   * Used in heading(s)
+   * Heading(s)
    */
   panelSeoKeywordInfoValidInfoLabel = 'panel.seoKeywordInfo.validInfo.label',
   /**
diff --git a/src/panelWebView/components/SeoKeywordInfo.tsx b/src/panelWebView/components/SeoKeywordInfo.tsx
index 871a5e01..125739c6 100644
--- a/src/panelWebView/components/SeoKeywordInfo.tsx
+++ b/src/panelWebView/components/SeoKeywordInfo.tsx
@@ -40,14 +40,8 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
     const count = (content.match(pattern) || []).length;
     const density = (count / wordCount) * 100;
     const densityTitle = `${density.toFixed(2)}* %`;
-
-    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-[var(--vscode-charts-green)]'>{densityTitle}</span>;
-    } else {
-      return <span className='text-[12px] text-[var(--vscode-statusBarItem-warningBackground)]'>{densityTitle}</span>;
-    }
+    const color = (density >= 0.75 && density < 1.5) ? "--vscode-charts-green" : "--vscode-charts-yellow";
+    return <span className={`text-[12px] text-[var(${color})]`} title="Recommended frequency: 0.75% - 1.5%">{densityTitle}</span>;
   };
 
   const validateKeywords = (heading: string, keyword: string) => {
@@ -98,7 +92,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
   const tooltipContent = React.useMemo(() => {
     return (
       <>
-        <b>Keyword present in:</b><br />
+        <h4>Keyword present in:</h4>
         <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 />
@@ -116,7 +110,10 @@ 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-[--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]"}`}
+        className={`inline-flex py-1 px-2 rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid 
+          ${isValid 
+            ? "text-[var(--vscode-charts-green)] border-[var(--vscode-charts-green)] bg-[var(--frontmatter-success-background)]" 
+            : "text-[var(--vscode-charts-yellow)] border-[var(--vscode-charts-yellow)] bg-[var(--frontmatter-warning-background)]"}`}
         data-tooltip-id={`tooltip-checks-${keyword}`}
       >
         <ValidInfo isValid={isValid} />
@@ -137,7 +134,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
         <div className='flex h-full items-center'>
           <Tag
             value={keyword}
-            className={`!w-full !justify-between !mx-0 !my-1 !px-2 !py-1`}
+            className={`!w-full !justify-between !mx-0 !my-1 !px-2 !py-0.5`}
             onRemove={onRemove}
             onCreate={() => void 0}
             title={localize(LocalizationKey.panelTagsTagWarning, keyword)}
diff --git a/src/panelWebView/components/ValidInfo.tsx b/src/panelWebView/components/ValidInfo.tsx
index 8120aada..6b4cde6c 100644
--- a/src/panelWebView/components/ValidInfo.tsx
+++ b/src/panelWebView/components/ValidInfo.tsx
@@ -15,11 +15,11 @@ const ValidInfo: React.FunctionComponent<IValidInfoProps> = ({
   return (
     <div className='inline-flex items-center h-full'>
       {isValid ? (
-        <CheckIcon className={`h-4 w-4 text-[var(--vscode-charts-green)] mr-2`} />
+        <CheckIcon className={`h-6 w-6 text-[var(--vscode-charts-green)] mr-2`} />
       ) : (
-        <ExclamationTriangleIcon className={`h-4 w-4 text-[var(--vscode-statusBarItem-warningBackground)] mr-2`} />
+        <ExclamationTriangleIcon className={`h-6 w-6 text-[var(--vscode-charts-yellow)] mr-2`} />
       )}
-      {label && <span className={className || ""}>{label}</span>}
+      {label && <span className={className || ""}><b>{label}</b></span>}
     </div>
   );
 };
diff --git a/src/panelWebView/styles.css b/src/panelWebView/styles.css
index 355be5f5..137ebee8 100644
--- a/src/panelWebView/styles.css
+++ b/src/panelWebView/styles.css
@@ -895,14 +895,29 @@ vscode-divider {
   color: var(--vscode-inputValidation-infoForeground, #fff);
 }
 
+.tag {
+  transition: all 100ms;
+}
+
+.tag:has(.tag__delete:hover) {
+  background-color: var(--vscode-inputValidation-errorBackground);
+  color: var(--vscode-inputValidation-errorForeground);
+}
+
 .tag .tag__delete {
   margin-left: 0.25rem;
+
+  & svg {
+    stroke-width: 3;
+  }
 }
 
 .tag .tag__delete:hover {
-  background-color: var(--vscode-inputValidation-errorBackground);
   color: var(--vscode-inputValidation-errorForeground, #000);
-  border-radius: 2px;
+
+  & svg {
+    color: var(--vscode-charts-red);
+  }
 }
 
 .vscode-dark .tag .tag__delete:hover {
@@ -911,7 +926,8 @@ vscode-divider {
 
 .tag .tag__value {
   flex-grow: 1;
-  white-space: nowrap;
+  white-space: pre-wrap;
+  font-weight: 600;
 }
 
 /* Slug field */

From 2dc48655816ec85ae440ad1429f5ab15b0a930ac Mon Sep 17 00:00:00 2001
From: Tooster <5300963+T3sT3ro@users.noreply.github.com>
Date: Thu, 28 Nov 2024 00:30:45 +0100
Subject: [PATCH 2/2] #705 - fix styles - align checks badge padding and margin

---
 src/panelWebView/components/SeoKeywordInfo.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panelWebView/components/SeoKeywordInfo.tsx b/src/panelWebView/components/SeoKeywordInfo.tsx
index 125739c6..e4d5c877 100644
--- a/src/panelWebView/components/SeoKeywordInfo.tsx
+++ b/src/panelWebView/components/SeoKeywordInfo.tsx
@@ -110,7 +110,7 @@ const SeoKeywordInfo: React.FunctionComponent<ISeoKeywordInfoProps> = ({
 
     return (
       <div 
-        className={`inline-flex py-1 px-2 rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid 
+        className={`inline-flex py-0.5 px-2 my-1 rounded-[3px] justify-center items-center text-[12px] leading-[16px] border border-solid 
           ${isValid 
             ? "text-[var(--vscode-charts-green)] border-[var(--vscode-charts-green)] bg-[var(--frontmatter-success-background)]" 
             : "text-[var(--vscode-charts-yellow)] border-[var(--vscode-charts-yellow)] bg-[var(--frontmatter-warning-background)]"}`}