Merge pull request #15 from fiit-tp7-2023/AB#334-redisegn-layout

AB#334 Redesign layout
fiit-tp7-2023 · Apr 13, 2024 · 6e3bb05 · 6e3bb05
2 parents 992e3cc + 0b11f16
commit 6e3bb05
Show file tree

Hide file tree

Showing 17 changed files with 162 additions and 395 deletions.
diff --git a/.env.example b/.env.example
@@ -1,5 +1,6 @@
 # REST API configuration
 REST_API_URL=
+SIGNAL_R_URL=
 
 # .NET backend runs locally on HTTPS (must be set to 0), for production must be set to 1
 NODE_TLS_REJECT_UNAUTHORIZED=
diff --git a/app.config.ts b/app.config.ts
@@ -1,27 +1 @@
-import { _colors, _fontFamily } from '#tailwind-config/theme.mjs';
-
-export default defineAppConfig({
-  naiveui: {
-    themeConfig: {
-      shared: {
-        common: {
-          fontFamily: _fontFamily.sans.join(', '),
-        },
-      },
-      light: {
-        common: {
-          primaryColor: _colors.blue[600],
-          primaryColorHover: _colors.blue[500],
-          primaryColorPressed: _colors.blue[700],
-        },
-      },
-      dark: {
-        common: {
-          primaryColor: _colors.blue[500],
-          primaryColorHover: _colors.blue[400],
-          primaryColorPressed: _colors.blue[600],
-        },
-      },
-    },
-  },
-});
+export default defineAppConfig({});
diff --git a/app.vue b/app.vue
@@ -1,13 +1,7 @@
 <template>
-  <naive-config :theme-config="themeConfig">
-    <n-message-provider>
-      <n-layout>
-        <NuxtLayout>
-          <NuxtPage />
-        </NuxtLayout>
-      </n-layout>
-    </n-message-provider>
-  </naive-config>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>
 <script setup lang="ts">
 import { useTokenStore } from '~/store';
@@ -19,17 +13,9 @@ onMounted(() => {
   // Mock posts
   tokenStore.setPosts(MOCKED_POSTS);
 });
-
-const themeConfig = {
-  shared: {
-    common: {
-      baseColor: 'rgb(244,244,249)',
-      bodyColor: 'rgb(244,244,249)',
-      inputColor: '#fff',
-      textColor1: '#000',
-      textColor2: '#000',
-      textColor3: '#000',
-    },
-  },
-};
 </script>
+<style>
+* {
+  @apply font-mono;
+}
+</style>
diff --git a/components/chat/ChatRow.vue b/components/chat/ChatRow.vue
@@ -1,15 +1,7 @@
 <template>
-  <nuxt-link :to="'/chat/' + chat.id" class="w-full">
-    <span class="hidden w-0 md:flex md:gap-2 md:px-2 md:text-xl md:items-center md:justify-start md:w-full md:h-10">
-      <div class="w-5 h-5 bg-slate-500 rounded-full"></div>
-      <p>{{ chat.name ?? chat.users }}</p>
-    </span>
-
-    <span class="md:hidden md:w-0 flex justify-end w-full h-10 gap-1 px-3">
-      <p class="w-8 h-8 flex justify-center items-center bg-slate-200 rounded-full">
-        {{ chat.name?.charAt(0) ?? '?' }}
-      </p>
-    </span>
+  <nuxt-link :to="'/chat/' + chat.id" class="chat-wrapper">
+    <span class="dot" :class="[selected ? 'bg-pink-500' : 'bg-transparent']" />
+    <p>{{ chat.name ?? chat.users }}</p>
   </nuxt-link>
 </template>
 
@@ -21,5 +13,17 @@ defineProps({
     type: Object as PropType<ChatResponseDTO>,
     required: true,
   },
+  selected: {
+    type: Boolean,
+    default: false,
+  },
 });
 </script>
+<style scoped>
+.chat-wrapper {
+  @apply w-full flex gap-2 text-xl items-center justify-start h-10 hover:text-pink-200;
+  .dot {
+    @apply w-5 h-5 border border-pink-500 rounded-full;
+  }
+}
+</style>
diff --git a/components/chat/MessageSender.vue b/components/chat/MessageSender.vue
@@ -15,6 +15,8 @@ const props = defineProps({
   },
 });
 
+const logger = useLogger('chat::message-sender');
+
 const emit = defineEmits<{
   (e: 'message', message: ChatMessageResponseDTO): void;
   (e: 'error', error: Error): void;
@@ -29,7 +31,7 @@ const sendMessage = async () => {
     emit('message', newMess);
     message.value = '';
   } catch (e) {
-    console.error(e);
+    logger.error(e);
     emit('error', e as Error);
   }
 };

diff --git a/components/layout/LeftSideContent.vue b/components/layout/LeftSideContent.vue
@@ -1,16 +1,18 @@
 <template>
-  <div class="h-full border-r my-2 border-gray-400 p-2">
-    <ul class="flex flex-col left-nav items-center md:items-start">
-      <li v-for="link in links" :key="link.link" class="w-full">
-        <NuxtLink :to="link.link">
-          <span class="flex gap-1 px-2 text-xl items-center justify-start w-full h-10">
-            <icon size="24" :name="link.icon" />
-            <span class="label">{{ link.name }}</span>
-          </span>
+  <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">
+        <icon size="24" name="mdi:menu" />
+        <span v-if="expanded" class="label">Toggle menu</span>
+      </li>
+      <li v-for="link in links" :key="link.link">
+        <NuxtLink :to="link.link" class="nav-item" :title="link.name">
+          <icon size="24" :name="link.icon" />
+          <span v-if="expanded" class="label">{{ link.name }}</span>
         </NuxtLink>
       </li>
     </ul>
-  </div>
+  </aside>
 </template>
 
 <script lang="ts" setup>
@@ -22,6 +24,8 @@ interface Link {
   link: string;
 }
 
+const expanded = ref(true);
+
 const accountStore = useAccountStore();
 
 const links = computed<Link[]>(() =>
@@ -35,12 +39,12 @@ const links = computed<Link[]>(() =>
         {
           name: 'Chats',
           link: '/chat',
-          icon: 'mdi:group',
+          icon: 'mdi:message-outline',
         },
         {
           name: 'Signing test',
           link: '/sign',
-          icon: 'mdi:graph-line',
+          icon: 'mdi:file-sign',
         },
         {
           name: 'Settings',
@@ -59,14 +63,26 @@ const links = computed<Link[]>(() =>
 </script>
 <style>
 .left-nav {
-  a {
-    @apply flex justify-end md:justify-center items-center gap-1;
-    .label {
-      @apply hidden md:block;
-    }
+  @apply flex flex-col w-full p-2 h-full items-start bg-slate-900;
+
+  #navigation-links {
+    @apply w-full flex flex-col  gap-4 p-2;
+  }
+
+  .nav-item {
+    @apply flex justify-start items-center gap-2 text-white hover:text-pink-300;
   }
-  li:not(:has(> .router-link-active)) {
-    @apply text-gray-600;
+
+  li:has(> .router-link-active) .nav-item {
+    @apply text-pink-500;
+  }
+
+  &.left-nav-expanded {
+    @apply max-w-[240px];
+  }
+
+  &.left-nav-collapsed {
+    @apply w-[64px];
   }
 }
 </style>
diff --git a/components/layout/NavigationComponent.vue b/components/layout/NavigationComponent.vue
@@ -1,16 +1,24 @@
 <template>
-  <div class="flex items-center justify-between w-full border-b-2 bg-slate-600 text-white p-4">
-    <NuxtLink to="/" class="text-xl">TokenGram</NuxtLink>
+  <nav class="flex items-center justify-between w-full bg-black text-white p-4">
+    <NuxtLink to="/" class="text-xl font-mono text-pink-500 font-bold">TokenGram</NuxtLink>
     <span class="w-1/2">
       <SearchBar />
     </span>
-    <button v-if="!account" class="border-2 p-2 rounded-md w-200" @click="connectWallet">Connect wallet</button>
-    <button v-else class="border-2 p-2 rounded-md" @click="disconnectWallet">Disconnect wallet</button>
-  </div>
+    <button v-if="!account" class="border-2 p-2 font-mono rounded-md w-200" @click="connectWallet">
+      Connect wallet
+    </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
+    </button>
+  </nav>
 </template>
 <script lang="ts" setup>
 import SearchBar from '../controls/SearchBar.vue';
-import type { VerifyNonce } from '~/types/auth';
+import type { VerifyNonce } from '~/types/dtos';
 import { useAccountStore } from '~/store';
 
 const { $web3 } = useNuxtApp();

diff --git a/components/layout/LeftSideChat.vue → components/layout/RightSideChat.vue b/components/layout/LeftSideChat.vue → components/layout/RightSideChat.vue
@@ -1,15 +1,24 @@
 <template>
-  <div class="h-full border-r my-2 border-gray-400 md:py-2">
+  <aside class="right-nav" :class="[expanded ? 'right-nav-expanded' : 'right-nav-collapsed']">
     <teleport to="body">
       <create-chat-modal v-if="openedModal" @close="openedModal = false" />
       <error-modal v-if="error" :error="error" @close="error = null" />
     </teleport>
-    <ul class="flex flex-col items-start">
-      <li v-if="hasInvitations" class="w-full text-xl border-b-2 mb-2">Invitations</li>
+    <span
+      class="text-white pb-2 flex gap-2 cursor-pointer"
+      :class="{ 'w-full  border-b border-pink-500': expanded }"
+      @click="expanded = !expanded"
+    >
+      <icon size="24" name="mdi:message-outline" />
+      <span v-if="expanded">Toggle chats</span>
+    </span>
+    <ul v-if="expanded" id="side-items" :class="{ 'items-start': expanded, 'items-center': !expanded }">
+      <li v-if="hasInvitations" class="side-item text-xl border-b border-pink-500">Invitations</li>
       <li
         v-for="invitation in invitations"
         :key="invitation.chat.id"
-        class="w-full flex justify-between items-center border-b py-2"
+        class="side-item"
+        :title="invitation.sender.address"
       >
         {{ invitation.chat.name }}
         <span class="flex gap-1">
@@ -24,29 +33,27 @@
           </button>
         </span>
       </li>
-      <li class="w-full text-xl border-b-2 mb-2">Chats</li>
-      <li class="w-full p-2 flex justify-center items-center">
+      <li class="side-item mt-2">
         <button
-          class="w-full rounded p-2 bg-blue-300 hover:bg-blue-200 cursor-pointer flex justify-center items-center"
+          class="w-full flex justify-center items-center rounded p-2 bg-pink-500 hover:bg-pink-400 cursor-pointer"
           @click="createChat"
         >
           New chat
         </button>
       </li>
-      <li
-        v-for="chat in chats"
-        :key="chat.id"
-        class="w-full py-2 px-2 border-b flex justify-between gap-2"
-        :class="[isSelected(chat.id) ? 'bg-slate-400' : '']"
-      >
-        <chat-row :chat="chat" :selected="isSelected(chat.id)" />
+      <li v-for="chat in chats" :key="chat.id" class="side-item">
+        <chat-row :chat="chat" :selected="isSelected(chat.id)" :title="chat.name ?? chat.users[0].address" />
 
-        <button class="bg-slate-300 hover:bg-slate-200 rounded py-1 px-1 w-10" @click="leaveChat(chat.id)">
+        <button
+          class="text-pink-500 hover:text-pink-200 flex items-center justify-center rounded w-20 h-10"
+          title="Leave chat"
+          @click="leaveChat(chat.id)"
+        >
           <Icon name="mdi:chat-remove-outline" />
         </button>
       </li>
     </ul>
-  </div>
+  </aside>
 </template>
 <script setup lang="ts">
 import { HubConnectionState } from '@microsoft/signalr';
@@ -56,6 +63,8 @@ import CreateChatModal from '~/components/chat/CreateChatModal.vue';
 
 import { useAccountStore, useChatStore } from '~/store';
 
+const expanded = ref(true);
+
 const accountStore = useAccountStore();
 const chatStore = useChatStore();
 
@@ -146,3 +155,24 @@ onMounted(async () => {
   }
 });
 </script>
+<style scoped>
+.right-nav {
+  @apply flex flex-col w-full p-4 h-full items-center bg-slate-900;
+
+  #side-items {
+    @apply w-full flex flex-col  gap-4;
+  }
+
+  .side-item {
+    @apply w-full flex justify-start items-center gap-2 text-white;
+  }
+
+  &.right-nav-expanded {
+    @apply w-80;
+  }
+
+  &.right-nav-collapsed {
+    @apply w-16;
+  }
+}
+</style>
diff --git a/components/layout/RightSideContent.vue b/components/layout/RightSideContent.vue