From cd51159c89df65299e36dd9b8b8bfe52f6afa0e0 Mon Sep 17 00:00:00 2001
From: Glen Robson <glen.robson@gmail.com>
Date: Fri, 2 Aug 2024 15:54:16 +0100
Subject: [PATCH] First try for adding colour to the table

---
 css/style.css    |  1 +
 recipe/matrix.md | 10 +++++-----
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4b973830a..9233a356d 100644
--- a/css/style.css
+++ b/css/style.css
@@ -41,4 +41,5 @@ code {
 
 .viewer td {
     border: none !important;
+    text-align: center !important;
 }
diff --git a/recipe/matrix.md b/recipe/matrix.md
index 1d3932929..0c49c02af 100644
--- a/recipe/matrix.md
+++ b/recipe/matrix.md
@@ -72,17 +72,17 @@ The possible values for viewer support are YES, NO or Partial. Click on the reci
             <td width="100px">
                 {% if current.id == viewer %}
                     {% if current.support == "full" %}
-                        YES
+                        <img src="{{ site.cookbook_url | absolute_url }}/assets/images/icons/required.png" alt="Yes" title="Yes" />
                     {% else if current.support == "partial" %}
-                        Partial
+                        <img src="{{ site.cookbook_url | absolute_url }}/assets/images/icons/recommended.png" alt="Partial" title="Partial" />
                     {% else %}
-                        YES
+                        <img src="{{ site.cookbook_url | absolute_url }}/assets/images/icons/required.png" alt="Yes" title="Yes" />
                     {% endif %}
                 {% else %}
                     {% if recipe.viewers contains viewer %} 
-                        YES
+                        <img src="{{ site.cookbook_url | absolute_url }}/assets/images/icons/required.png" alt="Yes" title="Yes" />
                     {% else %}    
-                        NO
+                        <img src="{{ site.cookbook_url | absolute_url }}/assets/images/icons/not_allowed.png" alt="No" title="No"/>
                     {% endif %}
                 {% endif %}
             </td>