From fd3b57c77e698e4dfb32aaf8e27ce0c2e957e097 Mon Sep 17 00:00:00 2001
From: FEARmeR <fearmer@gmail.com>
Date: Sat, 20 May 2023 15:26:24 +0100
Subject: [PATCH] Better search appearance

---
 .../Sections/PresentationSearch.vue           | 49 ++++++++++++++++---
 1 file changed, 43 insertions(+), 6 deletions(-)

diff --git a/src/views/Presentation/Sections/PresentationSearch.vue b/src/views/Presentation/Sections/PresentationSearch.vue
index 012ada6..1a3a62a 100644
--- a/src/views/Presentation/Sections/PresentationSearch.vue
+++ b/src/views/Presentation/Sections/PresentationSearch.vue
@@ -3,6 +3,7 @@ import { onMounted, onUnmounted } from "vue";
 import axios from 'axios';
 import { ref } from "vue";
 
+
 const searchQuery = ref('');
 const searchResultProjects = ref([]);
 const searchResultUsers = ref([]);
@@ -27,9 +28,12 @@ const search = async () => {
 
 <template>
     <div class="searchBar">
-        <input type="text" v-model="searchQuery" placeholder="Поиск по проектам и людям" />
-        <button type="submit" @click="search">Go</button>
-    </div>
+    <!-- Added @keyup.enter="search" to enable searching by pressing Enter key -->
+    <!-- Added class searchInput for styling -->
+    <input class="searchInput" type="text" v-model="searchQuery" @keyup.enter="search" placeholder="Поиск по проектам и людям" />
+    <!-- Added class searchButton for styling -->
+    <button class="searchButton" type="submit" @click="search">Go</button>
+  </div>
 
     <div>
         <h2>Найдено проектов: {{ searchResultProjects.length}} </h2>
@@ -55,10 +59,43 @@ const search = async () => {
   </template>
 
 <style scoped>
-.searchBar{
-    display: flex;
-    justify-content: center;
+.searchBar {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 
+.searchInput {
+  /* Makes the search input take up the maximum available width */
+  flex-grow: 1;
+  /* Adds some padding inside the input field */
+  padding: 10px;
+  /* Adds some margin to the right side of the input field */
+  margin-right: 10px;
+  /* Increased the font size a bit */
+  font-size: 16px;
+}
+
+.searchButton {
+  /* Adds some padding inside the button */
+  padding: 10px 20px;
+  /* Changes the font size */
+  font-size: 16px;
+  /* Changes the background color of the button */
+  background-color: #007BFF;
+  /* Changes the color of the text inside the button */
+  color: white;
+  /* Makes the border corners rounded */
+  border-radius: 4px;
+  /* Removes the default button border */
+  border: none;
+  /* Changes the cursor to a hand pointer when hovering over the button */
+  cursor: pointer;
+}
+
+.searchButton:hover {
+  /* Changes the background color of the button when hovering over it */
+  background-color: #0056b3;
 }
 </style>
   
\ No newline at end of file