ui update

README.md

@@ -47,14 +47,18 @@ AudioKit is a lightweight, open-source Chrome extension that allows users to adj
    ```
    npm install
    ```
+4. Install Webpack
+   ```
+   npm install --save-dev webpack
+   ```
 
-4. Build the project:
+5. Build the project:
    ```
    npm run build
    ```
    This command runs Webpack and Tailwind CSS to compile the necessary files.
 
-5. Load the extension in Chrome:
+6. Load the extension in Chrome:
    - Open Chrome and navigate to `chrome://extensions`
    - Enable "Developer mode" in the top right corner
    - Click "Load unpacked" and select the project directory

home.html

@@ -53,10 +53,10 @@ <h4 class="text-lg text-indigo-900 "><b>Stay tuned for more updates</b></h4>
 
     <div class="flex p-2">
         <div class="flex-none p-1">
-            <p class="text-white ellipsi border-2 border-indigo-600 p-1">Tab: </p>
+            <p class="text-pink-200 ellipsi border-2 border-purple-300 p-1">Tab: </p>
         </div>
         <div class="flex-auto p-1">
-            <p class="text-center ellipsi border-2 border-pink-400 p-1 text-pink-800" id="currentTabTitle"></p>
+            <p class="text-center ellipsi border-2 border-purple-300 p-1 text-pink-500" id="currentTabTitle"></p>
         </div>
 
     </div>
@@ -90,7 +90,7 @@ <h4 class="text-lg text-indigo-900 "><b>Stay tuned for more updates</b></h4>
         </div>
 
         <div class="flex-none px-2">
-            <p class="text-white border-2 border-indigo-600 p-1" id="tabAllMuted">Muted All </p>
+            <p class="text-pink-200 border-2 border-indigo-600 p-1" id="tabAllMuted">Muted All </p>
         </div>
     </div>
 
@@ -104,7 +104,7 @@ <h4 class="text-lg text-indigo-900 "><b>Stay tuned for more updates</b></h4>
         </div>
 
         <div class="flex-none px-2">
-            <p class="text-white border-2 border-indigo-600 p-1" id="tabAllUnmuted">Unmute All </p>
+            <p class="text-pink-200 border-2 border-indigo-600 p-1" id="tabAllUnmuted">Unmute All </p>
         </div>
     </div>
 </div>

package.json

@@ -3,7 +3,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "tailwindcss": "^3.4.3",
-    "webpack": "^5.91.0",
+    "webpack": "^5.93.0",
     "webpack-cli": "^5.1.4"
   },
   "name": "equalizerextension",

src/css/output.css

@@ -713,9 +713,9 @@ video {
   border-color: rgb(154 52 18 / var(--tw-border-opacity));
 }
 
-.border-pink-400 {
+.border-purple-300 {
   --tw-border-opacity: 1;
-  border-color: rgb(244 114 182 / var(--tw-border-opacity));
+  border-color: rgb(216 180 254 / var(--tw-border-opacity));
 }
 
 .bg-black {
@@ -874,9 +874,14 @@ video {
   color: rgb(49 46 129 / var(--tw-text-opacity));
 }
 
-.text-pink-800 {
+.text-pink-200 {
   --tw-text-opacity: 1;
-  color: rgb(157 23 77 / var(--tw-text-opacity));
+  color: rgb(251 207 232 / var(--tw-text-opacity));
+}
+
+.text-pink-500 {
+  --tw-text-opacity: 1;
+  color: rgb(236 72 153 / var(--tw-text-opacity));
 }
 
 .text-red-600 {