From 153378947689bcd0a9fe621f91efae5c3122a3c0 Mon Sep 17 00:00:00 2001
From: deftio <deftio@deftio.com>
Date: Fri, 2 Aug 2024 09:07:27 -0700
Subject: [PATCH] updated demo buttons in examples

---
 dev/todo.md               | 12 ++++++++----
 examples/example_esm.html |  7 +++++--
 examples/example_umd.html |  8 ++++++--
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/dev/todo.md b/dev/todo.md
index fffaf37..d3156e8 100644
--- a/dev/todo.md
+++ b/dev/todo.md
@@ -2,14 +2,18 @@
 
 * show/hide timestamps
 * add support for right to left languages by making css with [send] on left
+* add support for inline "user" icond with chat message instead of on top
 * provide minified css
-* rename project...
+* ?rename project...
 * example Anthropic
 * example Mistral
 * example React Component
-* test suite automate
-* github badges
-* fix scroll to bottom behavior
+* test suite automate 
+* add travis ci / build passing badge 
+* clean up scroll to bottom behavior (in progress)
+
+==========
+
 * (done 1.1.0) move callback from {meta} to 2nd param of constructor
 * (done 1.1.0) add loremIpsum Generator
 * (done 1.1.0) addedfix alternate light and dark to use css nth-child, added messagesAreaAlternateColors()
diff --git a/examples/example_esm.html b/examples/example_esm.html
index dc909fc..7204eeb 100644
--- a/examples/example_esm.html
+++ b/examples/example_esm.html
@@ -32,9 +32,10 @@
         }
 
         /* these are not part of the widget, just for the demo test */
+         /* these are not part of the widget, just for the demo test */
         .system-btn {
-            padding: 8px 8px;
-            background-color: #918434;
+            padding: 12px 8px;
+            background-color: #443491;
             color: white;
             border: none;
             border-radius: 4px;
@@ -50,9 +51,11 @@ <h2>Quikchatjs Simple Example (ESM)</h2>
         input area can be hidden.</p>
     <div class="parent"></div>
     <br>
+    <br>
     <button class="system-btn" onclick="chatBox.titleAreaToggle()">Toggle Title</button>
     <button class="system-btn" onclick="chatBox.inputAreaToggle()">Toggle Input</button>
     <button class="system-btn" id="themeBtn">Change Themes</button>
+    <button class="system-btn" onclick="chatBox.messagesAreaAlternateColorsToggle()">Alternating Colors</button>
     <script type="module">
         import quikchat from '../dist/quikchat.esm.min.js';
         document.addEventListener('DOMContentLoaded', () => {
diff --git a/examples/example_umd.html b/examples/example_umd.html
index 2fa7d21..3652564 100644
--- a/examples/example_umd.html
+++ b/examples/example_umd.html
@@ -33,9 +33,10 @@
         }
 
         /* these are not part of the widget, just for the demo test */
+           /* these are not part of the widget, just for the demo test */
         .system-btn {
-            padding: 8px 8px;
-            background-color: #918434;
+            padding: 12px 8px;
+            background-color: #443491;
             color: white;
             border: none;
             border-radius: 4px;
@@ -51,9 +52,12 @@ <h2>Quikchatjs Simple Example (UMD)</h2>
         input area can be hidden.</p>
     <div class="parent"></div>
     <br>
+    <br>
     <button class="system-btn" onclick="chatBox.titleAreaToggle()">Toggle Title</button>
     <button class="system-btn" onclick="chatBox.inputAreaToggle()">Toggle Input</button>
     <button class="system-btn" id="themeBtn">Change Themes</button>
+    <button class="system-btn" onclick="chatBox.messagesAreaAlternateColorsToggle()">Alternating Colors</button>
+    <br>
     <script >
         document.addEventListener('DOMContentLoaded', () => {
             const parentDiv = document.querySelector('.parent');