From 3ed144f00384a20bb3b56a6ca7f8464e852d145f Mon Sep 17 00:00:00 2001
From: Elio Struyf <elio@struyfconsulting.be>
Date: Tue, 27 Jul 2021 15:16:10 +0200
Subject: [PATCH] #42 - Table updates

---
 src/viewpanel/components/SeoFieldInfo.tsx | 3 +--
 src/viewpanel/components/SeoStatus.tsx    | 7 +++----
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/viewpanel/components/SeoFieldInfo.tsx b/src/viewpanel/components/SeoFieldInfo.tsx
index e46fa9c0..2b13dd05 100644
--- a/src/viewpanel/components/SeoFieldInfo.tsx
+++ b/src/viewpanel/components/SeoFieldInfo.tsx
@@ -13,8 +13,7 @@ export const SeoFieldInfo: React.FunctionComponent<ISeoFieldInfoProps> = ({ titl
   return (
     <VsTableRow>
       <VsTableCell className={`table__cell table__title`}>{title}</VsTableCell>
-      <VsTableCell className={`table__cell`}>{value}</VsTableCell>
-      <VsTableCell className={`table__cell`}>{recommendation}</VsTableCell>
+      <VsTableCell className={`table__cell`}>{value}/{recommendation}</VsTableCell>
       <VsTableCell className={`table__cell table__cell__validation`}>
         { isValid !== undefined ? <ValidInfo isValid={isValid} /> : <span>-</span> }
       </VsTableCell>
diff --git a/src/viewpanel/components/SeoStatus.tsx b/src/viewpanel/components/SeoStatus.tsx
index e97ecef3..4d555449 100644
--- a/src/viewpanel/components/SeoStatus.tsx
+++ b/src/viewpanel/components/SeoStatus.tsx
@@ -38,25 +38,24 @@ export const SeoStatus: React.FunctionComponent<ISeoStatusProps> = (props: React
             <VsTableHeader slot="header">
               <VsTableHeaderCell className={`table__cell`}>Property</VsTableHeaderCell>
               <VsTableHeaderCell className={`table__cell`}>Length</VsTableHeaderCell>
-              <VsTableHeaderCell className={`table__cell`}>Recommended</VsTableHeaderCell>
               <VsTableHeaderCell className={`table__cell`}>Valid</VsTableHeaderCell>
             </VsTableHeader>
             <VsTableBody slot="body">
               { 
                 (title && seo.title > 0) && (
-                  <SeoFieldInfo title={`title`} value={`${title.length} chars`} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
+                  <SeoFieldInfo title={`title`} value={title.length} recommendation={`${seo.title} chars`} isValid={title.length <= seo.title} />
                 )
               }
 
               {
                 (data[descriptionField] && seo.description > 0) && (
-                  <SeoFieldInfo title={descriptionField} value={`${data[descriptionField].length} chars`} recommendation={`${seo.description} chars`} isValid={data[descriptionField].length <= seo.description} />
+                  <SeoFieldInfo title={descriptionField} value={data[descriptionField].length} recommendation={`${seo.description} chars`} isValid={data[descriptionField].length <= seo.description} />
                 )
               }
 
               {
                 (seo.content > 0 && data?.articleDetails?.wordCount) && (
-                  <SeoFieldInfo title={`Article length`} value={`${data?.articleDetails?.wordCount} words`} recommendation={`${seo.content} words`} />
+                  <SeoFieldInfo title={`Article length`} value={data?.articleDetails?.wordCount} recommendation={`${seo.content} words`} />
                 )
               }
             </VsTableBody>