From 92718ebc8c2598a0502d54d42ed9fce1f74e9ea9 Mon Sep 17 00:00:00 2001
From: Fredy Santamaria <77696721+fsantamaria1@users.noreply.github.com>
Date: Fri, 15 Sep 2023 08:42:24 -0400
Subject: [PATCH 1/2] Add new css class: -Add the clear_convo class -Use the
 clear_convo class for the 'Clear Conversations' button

---
 client/css/style.css   | 35 +++++++++++++++++++++++++++++++++++
 client/html/index.html |  7 ++++---
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index a1f69087..7e72c2d6 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -459,6 +459,41 @@ select {
     border: 1px dashed var(--conversations)
 }
 
+.clear_convo {
+    padding: 8px 12px;
+    display: flex;
+    gap: 18px;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+    background: transparent; 
+    border: 1px dashed var(--conversations);
+    border-radius: var(--border-radius-1);
+    width: 100%;
+    transition: border-style 0.3s;
+}
+
+.clear_convo button {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    background: transparent; 
+    border: none;
+    outline: none;
+    cursor: pointer;
+    color: var(--colour-3);
+    font-size: 14px;
+}
+
+.clear_convo:hover {
+    border-style: solid;
+}
+
+.clear_convo button span {
+    color: var(--colour-3);
+    font-size: 14px;
+}
+
 .bottom_buttons {
     width: 100%;
     display: flex;
diff --git a/client/html/index.html b/client/html/index.html
index 72336aa8..31a40db3 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -71,18 +71,19 @@
                     </button>
                     <div class="spinner"></div>
                 </div>
-                <div class="bottom_buttons">
+                <div class="clear_convo">
                     <button onclick="delete_conversations()">
                         <i class="fa-regular fa-trash"></i>
                         <span>Clear Conversations</span>
                     </button>
-                    <div class="info">
+                </div>
+                <div class="info">
                         <i class="fa-regular fa-circle-info"></i>
                         <span class="convo-title">By: @xtekky<br>
                             Version: 0.0.1-beta<br>
                             Release: 2023-04-18<br>
                         </span>
-                    </div>
+                    
                 </div>
             </div>
             <div class="conversation disable-scrollbars">

From 2887f41853ce5f779f50692b744756bf385441c7 Mon Sep 17 00:00:00 2001
From: Fredy Santamaria <77696721+fsantamaria1@users.noreply.github.com>
Date: Fri, 15 Sep 2023 08:51:16 -0400
Subject: [PATCH 2/2] Add new red theme: -Add the red css class -Add new radio
 button for selecting the red theme

---
 client/css/style.css   | 18 ++++++++++++++++++
 client/html/index.html |  3 +++
 2 files changed, 21 insertions(+)

diff --git a/client/css/style.css b/client/css/style.css
index 7e72c2d6..979cd45d 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -789,6 +789,10 @@ a:-webkit-any-link {
     --radio-color: green;
 }
 
+.color-picker input[type="radio"]#red {
+    --radio-color: #232323;
+}
+
 .color-picker input[type="radio"]#dark {
     --radio-color: #232323;
 }
@@ -814,6 +818,13 @@ a:-webkit-any-link {
     --conversations: hsl(109 50% 25%);
 }
 
+.red {
+    --colour-1: hsl(0, 70%, 60%); 
+    --clr-card-bg: hsl(240, 10%, 5%); 
+    --colour-3: hsl(0, 0%, 90%); 
+    --conversations: hsl(0, 0%, 20%); 
+}
+
 .dark {
     --colour-1: hsl(209 50% 10%);
     --clr-card-bg: hsl(209 50% 5%);
@@ -842,6 +853,13 @@ a:-webkit-any-link {
     --conversations: hsl(109 50% 25%);
 }
 
+:root:has(#red:checked) {
+    --colour-1: hsl(0, 70%, 60%); 
+    --clr-card-bg: hsl(240, 10%, 5%); 
+    --colour-3: hsl(0, 0%, 90%); 
+    --conversations: hsl(0, 0%, 20%);
+}
+
 :root:has(#dark:checked) {
     --colour-1: hsl(209 50% 10%);
     --clr-card-bg: hsl(209 50% 5%);
diff --git a/client/html/index.html b/client/html/index.html
index 31a40db3..929bb1f8 100644
--- a/client/html/index.html
+++ b/client/html/index.html
@@ -144,6 +144,9 @@
                     
                         <label for="green" class="visually-hidden">Green theme</label>
                         <input type="radio" title="green" id="green" name="theme">
+
+                        <label for="red" class="visually-hidden">Dracula theme</label>
+                        <input type="radio" title="red" id="red" name="theme">
                     
                         <label for="dark" class="visually-hidden">Dark theme</label>
                         <input type="radio" title="dark" id="dark" name="theme">