From 5e29ad081a643cb594b1a8a57f21d3604795faa6 Mon Sep 17 00:00:00 2001
From: ProbablyRaging <probablyraging@gmail.com>
Date: Tue, 10 Sep 2024 22:47:04 +1000
Subject: [PATCH] Added a divider between the WFM input and the rest of the
 form Added a label to the input

---
 changelog.md |  5 ++---
 content.js   | 44 ++++++++++++++++++++++++++++++++------------
 2 files changed, 34 insertions(+), 15 deletions(-)

diff --git a/changelog.md b/changelog.md
index 30c3db5..652b7e2 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,3 +1,2 @@
-- Changed extension name to 'Workforce Mate'
-- Updated extension icon to suit name change
-- Removed unnecessary permission from firefox manifest
\ No newline at end of file
+- Added a divider between the WFM input and the rest of the form
+- Added a label to the input
\ No newline at end of file
diff --git a/content.js b/content.js
index e4b18bc..ea87dcb 100644
--- a/content.js
+++ b/content.js
@@ -5,45 +5,65 @@ const retryInterval = 500;
 // Initialize the extension
 function initializeExtension() {
     if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => addButtonToTabsMenu());
+        document.addEventListener('DOMContentLoaded', () => addDivToForm());
     } else {
-        addButtonToTabsMenu();
+        addDivToForm();
     }
 }
 
 // Add button to form - retry if form not found
-function addButtonToTabsMenu() {
+function addDivToForm() {
     const form = document.querySelector('.container-fluid');
     if (!form) {
-        setTimeout(() => addButtonToTabsMenu(), retryInterval);
+        setTimeout(() => addDivToForm(), retryInterval);
         return;
     }
 
     if (document.getElementById(buttonId)) return;
 
     const newDiv = createFormFillerElements();
-    form.insertBefore(newDiv, form.firstChild);
+    form.insertBefore(newDiv.mainDiv, form.firstChild);
+
+    setTimeout(() => newDiv.input.focus(), 0);
 }
 
 // Main div element
 function createFormFillerElements() {
-    const newDiv = document.createElement('div');
-    newDiv.id = buttonId;
-    newDiv.style.cssText = 'display: flex; gap: 4px;';
+    const mainDiv = document.createElement('div');
+    mainDiv.style.cssText = 'display: flex; flex-direction: column; gap: 2px;';
+    mainDiv.id = buttonId;
+
+    const flexDiv = document.createElement('div');
+    flexDiv.style.cssText = 'display: flex; gap: 6px;';
+
+    const divider = document.createElement('div');
+    divider.style.cssText = 'width: 100%; height: 1px; background-color: #dadada; margin-top: 10px; margin-bottom: 20px;';
 
+    const label = createLabel();
     const input = createInput();
     const button = createButton();
 
-    newDiv.appendChild(input);
-    newDiv.appendChild(button);
+    mainDiv.appendChild(label);
+    mainDiv.append(flexDiv);
+    flexDiv.appendChild(input);
+    flexDiv.appendChild(button);
+    mainDiv.appendChild(divider);
+
+    return { mainDiv, input };
+}
 
-    return newDiv;
+// Label element
+function createLabel() {
+    const label = document.createElement('p');
+    label.textContent = 'Job Listing URL';
+    label.style.cssText = 'font: 16px "Public Sans", sans-serif; font-weight: 500; margin-bottom: 6px;';
+    return label;
 }
 
 // Input element
 function createInput() {
     const input = document.createElement('input');
-    input.placeholder = 'Enter a seek.com.au job listing URL to auto fill the form below';
+    input.placeholder = 'Enter a Seek, Jora, or Indeed job listing URL';
     input.style.cssText = `
         background-color: #fff;
         border: 1px solid #ccc;