CSS Fixes.

src/snek/static/base.css

@@ -64,10 +64,34 @@ header nav a {
   transition: color 0.3s;
 }
 
+
 header nav a:hover {
   color: #fff;
 }
 
+a {
+  font-weight: bold;
+  color: #f05a28;
+  margin-bottom: 3px;
+}
+
+.chat-area ul {
+    margin: 0px;
+    padding: 0px;
+li {
+  font-weight: bold;
+  color: #f05a28;
+  margin-bottom: 3px;
+    list-style: none;
+      padding: 0;
+      margin: 0; 
+      font-size: 1.5em;
+    a {
+        text-decoration: none;
+    }
+  
+}
+}
 main {
   display: flex;
   flex: 1;
@@ -198,6 +222,16 @@ message-list {
   border-top: 1px solid #333;
 }
 
+input[type="text"] {
+  flex: 1;
+  background-color: #1a1a1a;
+  color: white;
+  border: none;
+  padding: 10px;
+  border-radius: 5px;
+  resize: none;
+}
+
 .chat-input textarea {
   flex: 1;
   background-color: #1a1a1a;

src/snek/static/fancy-button.js

@@ -55,9 +55,16 @@ class FancyButton extends HTMLElement {
         this.shadowRoot.appendChild(this.container);
 
         this.url = this.getAttribute('url');
+       
+
         this.value = this.getAttribute('value');
         this.buttonElement.appendChild(document.createTextNode(this.getAttribute("text")));
         this.buttonElement.addEventListener("click", () => {
+            if(this.url == 'submit'){
+                this.closest('form').submit()
+                return
+            }    
+        
             if (this.url === "/back" || this.url === "/back/") {
                 window.history.back();
             } else if (this.url) {
@@ -67,4 +74,4 @@ class FancyButton extends HTMLElement {
     }
 }
 
-customElements.define("fancy-button", FancyButton);
+customElements.define("fancy-button", FancyButton);

src/snek/templates/app.html

@@ -6,7 +6,9 @@
   <title>Snek</title>
   <style>{{highlight_styles}}</style>
   <script src="/push.js"></script>
+  <script src="/fancy-button.js"></script>
   <script src="/upload-button.js"></script>
+  <script src="/generic-form.js"></script>
   <script src="/html-frame.js"></script>
   <script src="/schedule.js"></script>
   <script src="/app.js"></script>

src/snek/templates/search-user.html

@@ -3,6 +3,24 @@
 {% block title %}Search{% endblock %}
 
 {% block main %}    
-    <h1>Search user</h1>
-    <generic-form class="center" url="/search_user.json"></generic-form>
+
+    <section class="chat-area">
+        <div class="chat-header"><h2>Search user</h2></div>
+        <div class="chat-messages">
+        <form method="get" action="/search-user.html">
+            <input type="text" placeholder="Username" name="query" value="{{query}}" REQUIRED></input>
+            <fancy-button size="auto"  text="Back" url="submit"></fancy-button>
+        </form>
+        <ul>
+        {% for user in users %}
+    <li>
+        <a href="/user/{{user.username.value}}">{{user.username.value}}</a>
+    </li>
+    
+    {% endfor %}
+    </ul> 
+
+ 
+</div>
+    </section>
 {% endblock %}

src/snek/view/search_user.py

@@ -8,14 +8,20 @@ class SearchUserView(BaseFormView):
     form = SearchUserForm
 
     async def get(self):
-        if self.session.get("logged_in"):
-            return web.HTTPFound("/web.html")
+        #if self.session.get("logged_in"):
+        #    return web.HTTPFound("/web.html")
+        users = []
+        query = self.request.query.get("query")
+        if query:
+            users = await self.app.services.user.search(query)
+            print(users,flush=True) 
+
         if self.request.path.endswith(".json"):
             return await super().get()
-        return await self.render_template("login.html")
+        return await self.render_template("search-user.html",dict(users=users,query=query or ''))
 
     async def submit(self, form):
         if await form.is_valid:
-            
-            return {"redirect_url": "/search-user.html?query=" + form.query.value}
+            print("YEAAAH\n") 
+            return {"redirect_url": "/search-user.html?query=" + form['username']}
         return {"is_valid": False}