From fa3f3b5a4c7b7af5661340fd422051be73d357e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C2=96=C2=96AsTroLog?= <tarasbondarenko3@gmail.com>
Date: Wed, 25 Oct 2023 19:52:05 +0000
Subject: [PATCH] SA-109 Added a new chat frame, added animation to the left
 and right frames

---
 .../Pages/Index.razor                         | 122 +++++++++---------
 .../Pages/Index.razor.css                     |   5 +-
 2 files changed, 64 insertions(+), 63 deletions(-)

diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor b/ShoppingAssistantWebClient.Web/Pages/Index.razor
index 870175e..e447132 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor
@@ -2,63 +2,65 @@
 
 <PageTitle>New Chat</PageTitle>
 
-    <div class="right_frame" id="rightFrame">
+<div class="right_frame" id="rightFrame">
 
-            <div id="button_open" class="open_menu">
-                <a class="button_open_menu" >
-                    <span></span>
-                    <span></span>
-                    <span></span>
-                </a>
+    <div id="button_open" class="open_menu">
+        <a class="button_open_menu">
+            <span></span>
+            <span></span>
+            <span></span>
+        </a>
+    </div>
+
+
+    <div class="new_chat">
+        <div class="chat_message">
+            <div class="title_one_frame">New chat</div>
+            <div class="title_two_frame">What you're looking for</div>
+
+            <div class="switch">
+                <div class="switch_product" id="choose_product">
+                    Product
+                </div>
+                <div class="switch_gift" id="choose_gift">
+                    Gift
+                </div>
             </div>
 
-       
-            <div class="new_chat">              
-                <div class="chat_message">  
-                    <div class="title_one_frame">New chat</div>
-                    <div class="title_two_frame">What you're looking for</div>
 
-                    <div class="switch">
-                        <div class="switch_product" id="choose_product" >
-                                Product
-                        </div>
-                        <div class="switch_gift" id="choose_gift">
-                                Gift 
-                        </div>                    
-                    </div>
-
-
-                    <div class="title_three_frame">What you're looking for, we will help you solve your problem and find it</div>
-
-                    <div class="topic" >
-                        <div class="topic_one">
-                            <a class="button_topic_one" >
-                                Date
-                            </a>
-                        </div>
-
-                        <div class="topic_two">
-                            <a class="button_topic_two" >
-                                🎃 Halloween  gift
-                            </a>                        
-                        </div>
-                        <div class="topic_three">
-                            <a class="button_topic_three" >
-                                🎁 Birthday gift
-                            </a>                          
-                        </div>
-                    </div>
-
-                </div>  
-                    <div class="chat_input">
-                        <input class="input_messages" type="text" id="chatInput" placeholder="Describe what you are looking for....">
-                        <img class="button_sende" src="/images/send.svg" alt="Send message"> 
-                    </div>
-                
+            <div class="title_three_frame">What you're looking for, we will help you solve your problem and find it
             </div>
 
+            <div class="topic">
+                <div class="topic_one">
+                    <a class="button_topic_one">
+                        Date
+                    </a>
+                </div>
+
+                <div class="topic_two">
+                    <a class="button_topic_two">
+                        🎃 Halloween gift
+                    </a>
+                </div>
+                <div class="topic_three">
+                    <a class="button_topic_three">
+                        🎁 Birthday gift
+                    </a>
+                </div>
+            </div>
+
+        </div>
+        <div class="chat_input">
+            <input class="input_messages" type="text" id="chatInput"
+                placeholder="Describe what you are looking for....">
+            <img class="button_sende" src="/images/send.svg" alt="Send message">
+        </div>
+
     </div>
 
+</div>
+
 <script>
 
 
@@ -68,21 +70,21 @@
     var switchProd = document.querySelector(".switch_product");
 
     function switchGift() {
-            choose_gift.style.backgroundColor = "#0052CC";
-            choose_product.style.backgroundColor = "transparent";
-            switchGi.style.color = "white";
-            switchProd.style.color = "#202124";
+        choose_gift.style.backgroundColor = "#0052CC";
+        choose_product.style.backgroundColor = "transparent";
+        switchGi.style.color = "white";
+        switchProd.style.color = "#202124";
     }
 
     function switchProduct() {
-            choose_product.style.backgroundColor = "#0052CC";
-            choose_gift.style.backgroundColor = "transparent";
-            switchProd.style.color = "white";
-            switchGi.style.color = "#202124";       
+        choose_product.style.backgroundColor = "#0052CC";
+        choose_gift.style.backgroundColor = "transparent";
+        switchProd.style.color = "white";
+        switchGi.style.color = "#202124";
     }
 
-        document.getElementById('choose_gift').addEventListener('click', switchGift);
-        document.getElementById('choose_product').addEventListener('click', switchProduct);
+    document.getElementById('choose_gift').addEventListener('click', switchGift);
+    document.getElementById('choose_product').addEventListener('click', switchProduct);
 
-        document.getElementById('button_open').addEventListener('click', changetyle);
+    document.getElementById('button_open').addEventListener('click', changetyle);
 </script>
diff --git a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
index a706d48..a6a84be 100644
--- a/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
+++ b/ShoppingAssistantWebClient.Web/Pages/Index.razor.css
@@ -46,7 +46,6 @@
 .title_two_frame {
   padding-top: 2.25em;
   padding-bottom: 1.5em;
-  color: black;
   font-size: 2.5em;
   text-align: center;
   font-weight: 600;
@@ -72,7 +71,7 @@
 
 .topic div {
   margin-top: 1.25em;
-  border:0.09em solid;
+  border: 0.09em solid;
   border-color: #009FFF;
   border-radius: 0.6em;
   justify-content: center;
@@ -86,7 +85,7 @@
 }
 
 .switch {
-  height:  2.8125em;
+  height: 2.8125em;
   width: 21.875em;
   margin: 0 auto;
   border: 0.09em solid;