align search and date filter, fix functionality

Author: zubyj

src/problems-by-company/company.css

@@ -13,8 +13,7 @@ body {
 }
 
 h1 {
-    font-size: 36px;
-    margin-bottom: 20px;
+    font-size: 30px;
     color: lightcyan;
 }
 
@@ -90,9 +89,22 @@ select {
     padding: 5px;
 }
 
-#companySearch {
+#dateSelect {
+    color: #fff;
     background-color: #373737;
+    border: '2px solid white';
+    width: 150px;
+    height: 35px;
+    margin-left: 10px;
+    border-radius: 5px;
+}
+
+#companySearch {
     color: #fff;
-    padding: 5px;
-    margin-bottom: 20px;
+    background-color: #373737;
+    border: '2px solid white';
+    width: 250px;
+    height: 30px;
+    border-radius: 5px;
+    text-align: center;
 }

src/problems-by-company/company.html

@@ -10,7 +10,7 @@
     <nav id="navbar">
     </nav>
     <div class="row">
-        <input type="text" id="companySearch" list="companyList" placeholder="Search for a company...">
+        <input type="text" id="companySearch" list="companyList" placeholder="Search for a company">
         <datalist id="companyList"></datalist>
         <select id="dateSelect">
             <option value="freq_6months">6 months</option>
@@ -20,16 +20,10 @@
         </select>
     </div>
     <h1 id="title">Amazon</h1>
-    <p>
-        <span id="score">Score</span> = The number of times the question was asked between 2021-2023
-    </p>
     <table id="solutionTable">
         <tr>
             <th id="#" class="header">#</th>
-            <!-- <th id="Difficulty" class="header">Difficulty</th> -->
             <th id="Title" class="header">Title</th>
-            <!-- <th id="Score" class="header">Score</th> -->
-            <!-- <th id="Acceptance" class="header">Acceptance</th> -->
             <th id="Frequency" class="header">Frequency</th>
         </tr>
     </table>

src/problems-by-company/company.ts

@@ -200,28 +200,28 @@ async function addCompaniesToSelect() {
         }
     });
 
-    // Event when the "Enter" key is pressed
-    companySearch.addEventListener('keydown', (event) => {
-        if (event.key === 'Enter') {
-            const selectedCompany = companySearch.value;
-            if (selectedCompany) {
-                chrome.storage.local.set({ clickedCompany: selectedCompany }, () => {
-                    location.reload();
-                });
-            }
-        }
-    });
-
-    // Event when an option is selected from the dropdown
-    companySearch.addEventListener('change', () => {
-        const selectedCompany = companySearch.value;
+    // Event when the "Enter" key is pressed or an option is selected from the dropdown
+    const handleSelection = () => {
+        const inputValue = companySearch.value;
+        // Find the selected company in a case-insensitive manner
+        const selectedCompany = Array.from(uniqueCompanies).find(
+            (company) => company.toLowerCase() === inputValue.toLowerCase()
+        );
         if (selectedCompany) {
             chrome.storage.local.set({ clickedCompany: selectedCompany }, () => {
                 location.reload();
             });
         }
+    };
+
+    companySearch.addEventListener('keydown', (event) => {
+        if (event.key === 'Enter') {
+            handleSelection();
+        }
     });
 
+    companySearch.addEventListener('change', handleSelection);
+
     // Convert the Set to an Array and sort it alphabetically
     const sortedCompanies = Array.from(uniqueCompanies).sort();
 
@@ -232,6 +232,7 @@ async function addCompaniesToSelect() {
     });
 }
 
+
 // Keep track of the sorting order for each column
 const sortOrders = {
     '#': false,