Merge pull request #16 from fiit-tp7-2023/AB#342-redesign-chats

AB#342 redesign chats

app.vue

@@ -15,7 +15,18 @@ onMounted(() => {
 });
 </script>
 <style>
-* {
-  @apply font-mono;
+div,
+span,
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-mono text-white;
+}
+body {
+  @apply bg-slate-800;
 }
 </style>

components/chat/ChatHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex w-full bg-slate-300 text-xl items-center pl-5 py-2 rounded-md my-2">
+  <div class="flex w-full bg-pink-500 text-xl items-center pl-5 py-2 rounded-md my-2">
     {{ chat.name ?? chat.users }}
   </div>
 </template>

components/chat/ChatRow.vue

@@ -21,9 +21,12 @@ defineProps({
 </script>
 <style scoped>
 .chat-wrapper {
-  @apply w-full flex gap-2 text-xl items-center justify-start h-10 hover:text-pink-200;
+  @apply w-full flex gap-2 text-xl items-center justify-start h-10;
   .dot {
     @apply w-5 h-5 border border-pink-500 rounded-full;
   }
+  p {
+    @apply hover:text-pink-200 text-nowrap overflow-ellipsis;
+  }
 }
 </style>

components/chat/CreateChatModal.vue

@@ -1,33 +1,46 @@
 <template>
   <!--Create new chat modal, where you can invite friends-->
   <div class="absolute top-0 left-0 z-40 w-full h-full bg-black bg-opacity-50 flex justify-center items-center">
-    <div class="bg-white w-96 h-min-96 rounded-lg p-4 flex flex-col gap-4">
+    <div class="bg-black border border-pink-500 w-96 h-min-96 rounded-lg p-4 flex flex-col gap-4">
       <h1 class="text-2xl text-center">Create new chat</h1>
-      <input v-model="chatName" class="rounded py-2 px-2 border" type="text" placeholder="Chat name" />
-      <ul class="flex flex-col gap-2 my-2">
+      <input v-model="chatName" class="rounded py-2 px-2 border bg-transparent" type="text" placeholder="Chat name" />
+      <h2 class="text-lg">Invite friends</h2>
+      <ul class="flex flex-col gap-2 mb-2">
         <li v-for="user in users" :key="user.id" class="w-full flex justify-between">
           <input
             :id="user.id"
             type="text"
-            class="w-3/4 rounded py-2 px-2 border"
+            class="w-3/4 bg-transparent rounded py-2 px-2 border"
             @input="(e) => updateAddress(user.id, (e.target as HTMLInputElement).value)"
           />
-          <button class="bg-slate-300 rounded py-2 px-2 w-20 self-center" @click="removeUser(user.id)">Remove</button>
+          <button
+            class="border border-slate-300 hover:border-pink-300 rounded py-2 px-2 w-20 self-center"
+            @click="removeUser(user.id)"
+          >
+            Remove
+          </button>
         </li>
         <li>
-          <button class="bg-slate-300 rounded py-2 px-2 w-full self-center" @click="addUser">
+          <button
+            class="border border-slate-300 hover:border-pink-300 rounded py-2 px-2 w-full self-center"
+            @click="addUser"
+          >
             <Icon name="mdi:add" />
           </button>
         </li>
       </ul>
       <button
-        class="bg-slate-300 rounded py-2 px-2 w-full"
-        :class="[canCreateChat ? ' bg-blue-300  hover:bg-blue-200' : 'bg-slate-100 text-gray-200 cursor-not-allowed']"
+        class="rounded py-2 px-2 w-full border"
+        :class="[
+          canCreateChat
+            ? ' bg-pink-500  hover:bg-pink-400 text-black'
+            : 'bg-slate-100 text-gray-400 cursor-not-allowed',
+        ]"
         @click="createChat"
       >
         Create
       </button>
-      <button class="bg-slate-300 rounded py-2 px-2 w-full" @click="$emit('close')">Close</button>
+      <button class="border rounded py-2 px-2 w-full" @click="$emit('close')">Close</button>
     </div>
   </div>
 </template>

components/chat/InviteToChat.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full py-2 px-2 mx-2 my-2 flex justify-between">
-    <input v-model="address" class="w-full rounded py-2 px-2 border" type="text" />
-    <button class="bg-slate-300 rounded py-2 px-2 ml-2 w-20" @click="inviteToChat">Invite</button>
+  <div class="wrapper">
+    <input v-model="address" class="address-input" type="text" />
+    <button class="send-button" @click="inviteToChat">Invite</button>
   </div>
 </template>
 
@@ -16,4 +16,15 @@ const inviteToChat = async () => {
 };
 </script>
 
-<style></style>
+<style scoped>
+.wrapper {
+  @apply flex gap-2 py-2;
+}
+.address-input {
+  @apply w-full rounded py-2 px-2 border bg-transparent text-white;
+}
+
+.send-button {
+  @apply bg-pink-500 hover:bg-pink-400 rounded py-2 px-2 w-20;
+}
+</style>

components/chat/MessageRow.vue

@@ -1,7 +1,9 @@
 <template>
-  <div class="w-min min-w-40 rounded px-2 py-2" :class="[mine ? 'bg-blue-400 text-white' : 'bg-white']">
-    <p>{{ message.content }}</p>
-    <sub class="w-full text-end block my-2">{{ formattedDate }}</sub>
+  <div class="wrapper" :class="[mine ? 'justify-start' : 'justify-end']">
+    <div class="w-min min-w-40" :class="[mine ? 'my-message' : 'their-message']">
+      <p>{{ message.content }}</p>
+      <sub class="w-full text-end block my-2">{{ formattedDate }}</sub>
+    </div>
   </div>
 </template>
 
@@ -23,4 +25,17 @@ const date = new Date(props.message.createdAt);
 const formattedDate = `${date.getHours()}:${date.getMinutes()}`;
 </script>
 
-<style></style>
+<style>
+.wrapper {
+  @apply w-full flex;
+}
+.my-message {
+  @apply bg-transparent border border-pink-500 rounded px-2 py-2;
+  sub {
+    @apply text-pink-500;
+  }
+}
+.their-message {
+  @apply bg-transparent border border-white rounded px-2 py-2;
+}
+</style>

components/chat/MessageSender.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="w-full py-2 px-2 mx-2 my-2 flex justify-between">
-    <input v-model="message" class="w-full rounded py-2 px-2 border" type="text" @keyup.enter="sendMessage" />
-    <button class="bg-blue-300 hover:bg-blue-200 rounded py-2 px-2 ml-2 w-20" @click="sendMessage">Send</button>
+  <div class="wrapper">
+    <input v-model="message" class="message-input" type="text" @keyup.enter="sendMessage" />
+    <button class="send-button" @click="sendMessage">Send</button>
   </div>
 </template>
 
@@ -37,4 +37,15 @@ const sendMessage = async () => {
 };
 </script>
 
-<style></style>
+<style scoped>
+.wrapper {
+  @apply flex gap-2 pt-2;
+}
+.message-input {
+  @apply w-full rounded py-2 px-2 border bg-transparent text-white;
+}
+
+.send-button {
+  @apply bg-pink-500 hover:bg-pink-400 rounded py-2 px-2 w-20;
+}
+</style>

components/controls/SearchBar.vue

@@ -1,12 +1,22 @@
 <template>
-  <div
-    class="hidden md:flex items-center gap-2 relative justify-center w-full px-2 h-10 border-2 border-white rounded-md bg-white text-gray-400"
-  >
+  <div class="wrapper">
     <Icon name="mdi:search" size="24" />
-    <input
-      class="bg-transparent outline-none w-full h-full text-black placeholder:text-gray-400"
-      placeholder="Search"
-      type="text"
-    />
+    <input class="address-input" placeholder="Search" type="text" />
   </div>
 </template>
+<style scoped>
+.wrapper {
+  @apply flex items-center gap-2 relative justify-center w-full px-2 h-10 border-2 border-pink-300 rounded-md bg-transparent text-pink-300;
+
+  &:focus-within {
+    @apply border-pink-500 text-pink-500;
+  }
+}
+.address-input {
+  @apply bg-transparent outline-none w-full h-full text-white placeholder:text-pink-100;
+
+  &:focus {
+    @apply placeholder:invisible;
+  }
+}
+</style>

components/layout/LeftSideContent.vue

@@ -1,7 +1,7 @@
 <template>
   <aside class="left-nav" :class="[expanded ? 'left-nav-expanded' : 'left-nav-collapsed']">
     <ul id="navigation-links" :class="{ 'items-start': expanded, 'items-center': !expanded }">
-      <li class="nav-item" title="Toggle menu" @click="expanded = !expanded">
+      <li class="nav-item cursor-pointer" title="Toggle menu" @click="expanded = !expanded">
         <icon size="24" name="mdi:menu" />
         <span v-if="expanded" class="label">Toggle menu</span>
       </li>
@@ -41,6 +41,11 @@ const links = computed<Link[]>(() =>
           link: '/chat',
           icon: 'mdi:message-outline',
         },
+        {
+          name: 'Profile',
+          link: '/profile',
+          icon: 'mdi:account-outline',
+        },
         {
           name: 'Signing test',
           link: '/sign',
@@ -70,11 +75,17 @@ const links = computed<Link[]>(() =>
   }
 
   .nav-item {
-    @apply flex justify-start items-center gap-2 text-white hover:text-pink-300;
+    @apply flex justify-start items-center gap-2 hover:text-pink-300;
+    .label {
+      @apply hover:text-pink-300 text-nowrap overflow-ellipsis;
+    }
   }
 
   li:has(> .router-link-active) .nav-item {
     @apply text-pink-500;
+    .label {
+      @apply text-pink-500;
+    }
   }
 
   &.left-nav-expanded {

components/layout/NavigationComponent.vue

@@ -4,15 +4,13 @@
     <span class="w-1/2">
       <SearchBar />
     </span>
-    <button v-if="!account" class="border-2 p-2 font-mono rounded-md w-200" @click="connectWallet">
-      Connect wallet
-    </button>
+    <button v-if="!account" class="border-2 p-2 font-mono rounded-md w-200" @click="connectWallet">Connect</button>
     <button
       v-else
       class="border-2 border-pink-500 text-pink-500 hover:border-pink-400 hover:text-pink-400 font-semibold p-2 font-mono rounded-md"
       @click="disconnectWallet"
     >
-      Disconnect wallet
+      Disconnect
     </button>
   </nav>
 </template>
@@ -89,13 +87,14 @@ const connectWallet = async () => {
     }
   }
 };
-
+const router = useRouter();
 const disconnectWallet = async () => {
   if (window.ethereum) {
     try {
       logger.info('Disconnecting account');
       await window.ethereum.request({ method: 'eth_accounts' });
       accountStore.disconnect();
+      router.push('/');
     } catch (error) {
       logger.error(error);
     }

components/layout/RightSideChat.vue

@@ -164,7 +164,7 @@ onMounted(async () => {
   }
 
   .side-item {
-    @apply w-full flex justify-start items-center gap-2 text-white;
+    @apply w-full flex justify-start items-center gap-2;
   }
 
   &.right-nav-expanded {

pages/chat/[id].vue

@@ -6,7 +6,7 @@
     <chat-header :chat="chat" />
     <invite-to-chat />
     <div class="w-full flex flex-col justify-end gap-2">
-      <message-row v-for="message in messages" :key="message.id" :message="message" />
+      <message-row v-for="message in messages" :key="message.id" :message="message" :mine="isMine(message)" />
       <message-sender :chat="chat" @message="saveMessage" @error="(e) => (error = e)" />
     </div>
   </template>
@@ -49,6 +49,10 @@ if (!chat.value) {
 }
 const messages = computed(() => chatStore.getMessages(Number(route.params.id)));
 
+const isMine = (message: ChatMessageResponseDTO) => {
+  return message.sender.address === accountStore.account;
+};
+
 const pageNumber = ref(1);
 
 onMounted(async () => {

pages/profile/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>Your profile</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style></style>

store/chat.ts

@@ -27,7 +27,7 @@ export const useChatStore = defineStore({
       this.invitations = invitations;
     },
     setMessages(chatId: number, messages: ChatMessageResponseDTO[]) {
-      this.messages[chatId] = messages;
+      this.messages[chatId] = messages.reverse();
     },
     addMessage(chatId: number, message: ChatMessageResponseDTO) {
       if (!this.messages[chatId]) {