From 03a988af0f2682147b1f907d388078824660515d Mon Sep 17 00:00:00 2001
From: szubair22 <101330346+szubair22@users.noreply.github.com>
Date: Mon, 30 Sep 2024 12:54:54 -0500
Subject: [PATCH] updating fonts

---
 index.html | 86 +++++++++++++++++++-----------------------------------
 styles.css | 60 +++++++++++++++++++++++--------------
 2 files changed, 68 insertions(+), 78 deletions(-)

diff --git a/index.html b/index.html
index c99b873..c7c64db 100644
--- a/index.html
+++ b/index.html
@@ -11,70 +11,56 @@
     <div class="container">
         <div class="bg-white shadow-md rounded-lg p-6">
             <div class="text-center mb-8">
-                <h1 class="text-3xl font-bold mb-2">CSV Mapping Tool for Sage Intacct</h1>
-                <p class="text-gray-600">Save time and reduce errors by automating the mapping process.</p>
+                <h1>CSV Mapping Tool for Sage Intacct</h1>
+                <p class="subtitle">Save time and reduce errors by automating the mapping process.</p>
             </div>
             
             <div class="mb-8">
-                <h2 class="text-xl font-semibold mb-4">How It Works</h2>
-                <ol class="list-none space-y-4">
-                    <li class="flex items-start">
-                        <span class="mr-2 bg-black text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">1</span>
-                        <div>
-                            <span class="font-semibold">Upload Your Files:</span>
-                            <ul class="list-disc list-inside ml-6 mt-2">
-                                <li>First, upload your data CSV.</li>
-                                <li>Then, upload your Intacct Template CSV.</li>
-                            </ul>
-                        </div>
+                <h2>How It Works</h2>
+                <ol>
+                    <li>
+                        <span class="number-circle">1</span>
+                        <strong>Upload Your Files:</strong>
+                        <ul class="list-disc list-inside ml-6 mt-2">
+                            <li>First, upload your data CSV.</li>
+                            <li>Then, upload your Intacct Template CSV.</li>
+                        </ul>
                     </li>
-                    <li class="flex items-start">
-                        <span class="mr-2 bg-black text-white rounded-full w-6 h-6 flex items-center justify-center text-sm">2</span>
-                        <div>
-                            <span class="font-semibold">Preview and Map:</span>
-                            <ul class="list-disc list-inside ml-6 mt-2">
-                                <li>Match the data fields from your file to the Intacct format.</li>
-                                <li>Review the mappings before finalizing.</li>
-                            </ul>
-                        </div>
+                    <li>
+                        <span class="number-circle">2</span>
+                        <strong>Preview and Map:</strong>
+                        <ul class="list-disc list-inside ml-6 mt-2">
+                            <li>Match the data fields from your file to the Intacct format.</li>
+                            <li>Review the mappings before finalizing.</li>
+                        </ul>
                     </li>
                 </ol>
             </div>
 
             <div class="mb-8">
-                <h2 class="text-xl font-semibold mb-4">Upload CSV Files</h2>
+                <h2>Upload CSV Files</h2>
                 <form id="uploadForm" class="space-y-4">
-                    <div>
-                        <label for="dataFile" class="block mb-2">Data CSV:</label>
+                    <div class="file-input">
+                        <label for="dataFile">Data CSV:</label>
                         <div class="flex items-center">
                             <input type="file" id="dataFile" name="dataFile" accept=".csv" required class="hidden">
-                            <label for="dataFile" class="file-input-label bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center">
-                                <span>Choose File</span>
+                            <label for="dataFile" class="file-input-label">
+                                Choose File
                             </label>
-                            <span id="dataFileName" class="ml-3 text-gray-600">No file chosen</span>
-                            <button type="button" class="ml-2 text-gray-400 hover:text-gray-500">
-                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-                                </svg>
-                            </button>
+                            <span id="dataFileName" class="file-name">No file chosen</span>
                         </div>
                     </div>
-                    <div>
-                        <label for="templateFile" class="block mb-2">Intacct Template CSV:</label>
+                    <div class="file-input">
+                        <label for="templateFile">Intacct Template CSV:</label>
                         <div class="flex items-center">
                             <input type="file" id="templateFile" name="templateFile" accept=".csv" required class="hidden">
-                            <label for="templateFile" class="file-input-label bg-gray-200 hover:bg-gray-300 text-gray-800 font-semibold py-2 px-4 rounded inline-flex items-center">
-                                <span>Choose File</span>
+                            <label for="templateFile" class="file-input-label">
+                                Choose File
                             </label>
-                            <span id="templateFileName" class="ml-3 text-gray-600">No file chosen</span>
-                            <button type="button" class="ml-2 text-gray-400 hover:text-gray-500">
-                                <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
-                                </svg>
-                            </button>
+                            <span id="templateFileName" class="file-name">No file chosen</span>
                         </div>
                     </div>
-                    <button type="submit" class="btn btn-black w-full flex items-center justify-center bg-black text-white py-2 px-4 rounded hover:bg-gray-800">
+                    <button type="submit" class="btn btn-black">
                         <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                         </svg>
@@ -86,17 +72,5 @@ <h2 class="text-xl font-semibold mb-4">Upload CSV Files</h2>
     </div>
 
     <script src="script.js"></script>
-    <script>
-        // Add this script to update file name displays
-        document.getElementById('dataFile').addEventListener('change', function(e) {
-            var fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
-            document.getElementById('dataFileName').textContent = fileName;
-        });
-
-        document.getElementById('templateFile').addEventListener('change', function(e) {
-            var fileName = e.target.files[0] ? e.target.files[0].name : 'No file chosen';
-            document.getElementById('templateFileName').textContent = fileName;
-        });
-    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 87bd63e..0cfa87e 100644
--- a/styles.css
+++ b/styles.css
@@ -1,9 +1,11 @@
 /* Custom styles for dark theme */
 body {
+    font-family: Arial, sans-serif;
     background-color: white;
-    color: #1f2937;
+    color: #333;
     background-image: radial-gradient(#e5e7eb 1px, transparent 1px);
     background-size: 20px 20px;
+    line-height: 1.5;
 }
 
 .container {
@@ -27,12 +29,19 @@ body {
 
 h1 {
     font-size: 1.875rem;
-    font-weight: 700;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
 }
 
 h2 {
     font-size: 1.25rem;
     font-weight: 600;
+    margin-bottom: 1rem;
+}
+
+.subtitle {
+    color: #6b7280;
+    margin-bottom: 2rem;
 }
 
 .file-input-label {
@@ -51,10 +60,14 @@ h2 {
 }
 
 .btn {
-    padding: 0.5rem 1rem;
+    padding: 0.75rem 1rem;
     font-weight: 600;
     border-radius: 0.25rem;
     transition: background-color 0.2s;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .btn-black {
@@ -71,31 +84,34 @@ ol {
     padding-left: 0;
 }
 
-ul {
-    list-style-type: disc;
-    padding-left: 1.5rem;
-}
-
-.mb-8 {
-    margin-bottom: 2rem;
+ol li {
+    margin-bottom: 1rem;
 }
 
-.space-y-4 > * + * {
-    margin-top: 1rem;
+.number-circle {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.5rem;
+    height: 1.5rem;
+    background-color: #111827;
+    color: white;
+    border-radius: 50%;
+    margin-right: 0.5rem;
+    font-size: 0.875rem;
 }
 
-/* Remove unnecessary styles */
-table, th, tr {
-    background-color: transparent;
-    color: inherit;
+.file-input {
+    margin-bottom: 1rem;
 }
 
-select, input[type="text"], input[type="file"] {
-    background-color: white;
-    color: black;
-    border-color: #d1d5db;
+.file-input label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-weight: 600;
 }
 
-select:focus, input[type="text"]:focus, input[type="file"]:focus {
-    border-color: #3b82f6;
+.file-name {
+    margin-left: 0.5rem;
+    color: #6b7280;
 }