refactor chevrons for column sort

hlxsites · May 28, 2024 · 5e9110a · 5e9110a
1 parent 3e3da46
commit 5e9110a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.css b/blocks/gmo-campaign-list/gmo-campaign-list.css
@@ -42,6 +42,7 @@ body {
 .column-sort-wrapper {
     display: flex;
     flex-direction: column;
+    justify-content: center;
 }
 .column-sort-wrapper .icon {
     height: 14px;

diff --git a/blocks/gmo-campaign-list/gmo-campaign-list.js b/blocks/gmo-campaign-list/gmo-campaign-list.js
@@ -273,13 +273,15 @@ function buildListHeaders(headerConfig) {
         if (column.sortable) {
             const columnSort = document.createElement('div');
             columnSort.classList.add('column-sort-wrapper');
-            const columnSortAsc = document.createElement('span');
-            columnSortAsc.classList.add('column-sort-asc', 'icon', 'icon-chevronUp');
+            const columnSortAsc = document.createElement('img');
+            columnSortAsc.classList.add('column-sort-asc', 'icon');
+            columnSortAsc.src = '/icons/chevronUp.svg';
             columnSortAsc.addEventListener('click', () => {
                 sortColumn('asc', column.attribute);
             })
-            const columnSortDesc = document.createElement('span');
-            columnSortDesc.classList.add('column-sort-desc', 'icon', 'icon-chevronDown');
+            const columnSortDesc = document.createElement('img');
+            columnSortDesc.classList.add('column-sort-desc', 'icon');
+            columnSortDesc.src = '/icons/chevronDown.svg';
             columnSortDesc.addEventListener('click', () => {
                 sortColumn('desc', column.attribute);
             })