impove the friend search UI

Author: santanu2310

client/src/assets/base.css

@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
+@import url("https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");
 
 :root {
   --vt-c-white: #ffffff;
@@ -35,9 +35,7 @@
 
   --color-heading: var(--vt-c-text-light-1);
   --color-text: var(--vt-c-text-light-1);
-  --color-text-soft: var()
-
-  --section-gap: 160px;
+  --color-text-soft: var() --section-gap: 160px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -80,7 +78,6 @@
   border-radius: 4px;
 }
 
-
 body {
   width: 100vw;
   height: 100vh;

client/src/assets/outline.svg

@@ -90,7 +90,7 @@ async function searchUsers(query: string | null) {
   });
   if (response.status === 200) {
     friendBriefs.value = response.data.map((user: any) =>
-      mapResponseToUserBrief(user)
+      mapResponseToUserBrief(user),
     );
   }
 }
@@ -117,7 +117,11 @@ async function searchUsers(query: string | null) {
 
         <button
           class="h-full aspect-square rounded bg-color-background-mute text-primary flex items-center justify-center"
-          @click="addFriendMode = false"
+          @click="
+            addFriendMode = false;
+            friendBriefs = null;
+            username = null;
+          "
           v-if="addFriendMode"
         >
           <IconClose :size="50" />
@@ -137,7 +141,7 @@ async function searchUsers(query: string | null) {
     <div class="w-full h-full" v-if="addFriendMode">
       <div class="w-full h-auto flex px-4">
         <input
-          class="w-[87%] h-10 px-3 rounded-l-md bg-color-background-mute border-none outline-none"
+          class="w-[87%] h-10 px-3 rounded-l-md bg-color-background-mute placeholder:text-gray-500 border-none outline-none"
           type="text"
           placeholder="username"
           v-model="username"
@@ -152,12 +156,39 @@ async function searchUsers(query: string | null) {
       </div>
 
       <div class="w-full h-auto mt-4">
-        <div class="w-full h-16" v-for="user in friendBriefs">
+        <div
+          v-if="friendBriefs == null"
+          class="w-full pt-20 flex flex-col items-center opacity-50"
+        >
+          <div class="max-w-52 w-[40%] h-auto aspect-square">
+            <img
+              class="w-full h-full object-cover"
+              src="@/assets/search.png"
+              alt=""
+            />
+          </div>
+          <span class="font-thin mt-2">Search for new friend 😎</span>
+        </div>
+        <div
+          class="w-full h-16"
+          v-else-if="friendBriefs.length > 0"
+          v-for="user in friendBriefs"
+        >
           <FriendPreview
             :data="user"
             @add-request-message="addRequestMessage"
           />
         </div>
+        <div v-else class="w-full pt-20 flex flex-col items-center opacity-50">
+          <div class="max-w-52 w-[40%] h-auto aspect-square">
+            <img
+              class="w-full h-full object-cover"
+              src="@/assets/outline.svg"
+              alt=""
+            />
+          </div>
+          <span class="font-thin mt-2">No user found 🙁</span>
+        </div>
       </div>
     </div>