Update layout icon colors when inactive

3 files changed, 10 insertions, 4 deletions

diff --git a/assets/js/toggleLayout.js b/assets/js/toggleLayout.js
index 14f8da2..b89b0b5 100644
--- a/assets/js/toggleLayout.js
+++ b/assets/js/toggleLayout.js
@@ -2,6 +2,8 @@ document.getElementById("btnGrid").addEventListener("click", makeGrid);
 document.getElementById("btnRows").addEventListener("click", makeRows);
 window.addEventListener("resize", adjustListAtMobile);
 
+document.getElementById("rows").style.fill = "var(--grey)";
+
 let listRemoveWidth = window.matchMedia("(max-width: 735px)");
 let listAddWidth = window.matchMedia("(min-width: 735px)");
 let isList = false;
@@ -17,10 +19,14 @@ function adjustListAtMobile(){
 
 function makeGrid(){
     document.getElementById("articlesList").classList.remove("articles-list-container-alt");
+    document.getElementById("tiles").style.fill = "var(--primary)";
+    document.getElementById("rows").style.fill = "var(--grey)";
     isList = false;
 }
 
 function makeRows(){
     document.getElementById("articlesList").classList.add("articles-list-container-alt");
+    document.getElementById("rows").style.fill = "var(--primary)";
+    document.getElementById("tiles").style.fill = "var(--grey)";
     isList = true;
 }
\ No newline at end of file
diff --git a/layouts/partials/icons/ui/rows.html b/layouts/partials/icons/ui/rows.html
index 7f04f40..594c1b9 100644
--- a/layouts/partials/icons/ui/rows.html
+++ b/layouts/partials/icons/ui/rows.html
@@ -1,11 +1,11 @@
-<svg id="rows"
+<svg 
 width="26"
 height="26"
 viewBox="0 0 26 26"
 fill="none"
 xmlns="http://www.w3.org/2000/svg"
 >
-<path
+<path id="rows"
   fill="{{ $.Site.Params.Colors.primary }}"
   d="M4.33331 15.1665H8.41174V10.8332H4.33331V15.1665ZM4.33331 20.5832H8.41174V16.2498H4.33331V20.5832ZM4.33331 9.74984H8.41174V5.4165H4.33331V9.74984ZM9.43135 15.1665H21.6666V10.8332H9.43135V15.1665ZM9.43135 20.5832H21.6666V16.2498H9.43135V20.5832ZM9.43135 5.4165V9.74984H21.6666V5.4165H9.43135Z"
 />
diff --git a/layouts/partials/icons/ui/tiles.html b/layouts/partials/icons/ui/tiles.html
index 47a04e2..29cd673 100644
--- a/layouts/partials/icons/ui/tiles.html
+++ b/layouts/partials/icons/ui/tiles.html
@@ -1,11 +1,11 @@
-<svg id="tiles"
+<svg 
 width="26"
 height="26"
 viewBox="0 0 26 26"
 fill="none"
 xmlns="http://www.w3.org/2000/svg"
 >
-<path
+<path id="tiles"
   fill="{{ $.Site.Params.Colors.primary }}"
   d="M4.33337 13.8424H12.0371V5.4165H4.33337V13.8424ZM4.33337 20.5832H12.0371V15.5276H4.33337V20.5832ZM13.963 20.5832H21.6667V12.1572H13.963V20.5832ZM13.963 5.4165V10.4721H21.6667V5.4165H13.963Z"
 />