From 162495cf61f853bf64b350bf34524569e56b212e Mon Sep 17 00:00:00 2001
From: Katrina Wheelan <katrina.wheelan@detroitmi.gov>
Date: Fri, 19 Jul 2024 15:37:59 -0400
Subject: [PATCH] #22 use fontawesome to add a checkmark next to edited funds

---
 src/css/common.css                            | 12 ++++++++++--
 src/index.html                                |  2 ++
 src/js/components/table/subcomponents/data.js | 11 ++++++++---
 src/js/components/table/table.css             |  7 ++++++-
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/css/common.css b/src/css/common.css
index b6e336a..26127be 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -53,6 +53,14 @@ body, button, input, textarea, select, .sidebar, table {
     margin: 0;
 }
 
-div.row {
+/* Font awesome */
+
+i.fas.fa-check { 
+    font-size: 1.5em;
+    color: var(--spiritgreen);
+    margin-right: 10px;
+}
+
+/* div.row {
     margin: 0px;
-}
\ No newline at end of file
+} */
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index e85b8dc..8e1d261 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,6 +9,8 @@
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
 <!-- Google fonts -->
 <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap" rel="stylesheet">
+<!-- Font Awesome CSS -->
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
 <!-- Bootstrap JS and its dependencies (jQuery & Popper.js) -->
 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.4/dist/umd/popper.min.js" crossorigin="anonymous"></script>
diff --git a/src/js/components/table/subcomponents/data.js b/src/js/components/table/subcomponents/data.js
index a12a68d..809ac0c 100644
--- a/src/js/components/table/subcomponents/data.js
+++ b/src/js/components/table/subcomponents/data.js
@@ -25,7 +25,7 @@ function fillTable(data) {
             const row = document.createElement('tr');
             Object.values(item).forEach(val => {
             const cell = document.createElement('td');
-            cell.textContent = val;
+            cell.innerHTML = val;
             row.appendChild(cell);
             });
             tbody.appendChild(row);
@@ -63,9 +63,14 @@ function loadFunds(){
         // determine if the fund has already been edited
         if (fundDict[key]['viewed']){
             // todo: add a checkmark here
-            ret.push({'Fund' : fundDict[key]['name'] + ' (Edited)'});
+            ret.push({'Fund' :  `<span class = 'viewed-fund'> 
+                                    <i class="fas fa-check"></i>
+                                    ${fundDict[key]['name']}
+                                </span>`});
         } else {
-            ret.push({'Fund' : fundDict[key]['name']});   
+            ret.push({'Fund' : `<span class = 'unviewed-fund'> 
+                                    ${fundDict[key]['name']}
+                                </span>`});   
         }
     });
     fillTable(ret);
diff --git a/src/js/components/table/table.css b/src/js/components/table/table.css
index a8c20ad..5f2f784 100644
--- a/src/js/components/table/table.css
+++ b/src/js/components/table/table.css
@@ -96,4 +96,9 @@ div.table-container {
 .hover-effect:hover {
     cursor: pointer;
     background-color: var(--verypalegreen); 
-}
\ No newline at end of file
+}
+
+/* Fund table */
+.fund-name > .viewed-fund {
+    color: gray;
+}