From 52c57ebd06db8b9a1518a3435ef5c9ac54c4411e Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Mon, 8 Apr 2019 15:40:56 +0100
Subject: [PATCH] tabs and user info

---
 .gitignore                                    |   2 +-
 .vs/VSWorkspaceState.json                     |   8 +
 .vs/slnx.sqlite                               | Bin 0 -> 77824 bytes
 src/components/ProfilePictureTemplate.vue     |  16 +-
 src/components/app/MessageTemplate.vue        |  13 +-
 src/components/app/MyMiniInformation.vue      |   2 +-
 src/components/app/Popouts.vue                |   3 +
 .../app/SettingsPanels/ManageEmojis.vue       |   2 +
 .../app/SettingsPanels/MyProfile.vue          |  12 +-
 .../app/relationships/FriendsTemplate.vue     |  29 ++-
 .../app/relationships/OfflineFriends.vue      |   2 +-
 .../app/relationships/OnlineFriends.vue       |   2 +-
 .../app/relationships/PendingTemplate.vue     |   5 +-
 .../app/relationships/RecentFriends.vue       |   4 +-
 src/components/app/userInformationPopout.vue  | 198 ++++++++++++++++++
 src/components/homePage/LoggedIn.vue          |   2 +-
 src/components/homePage/RightPanel.vue        |   2 +-
 src/services/AuthenticationService.js         |   2 +-
 src/services/userService.js                   |   4 +-
 src/store/modules/popoutsModule.js            |   8 +
 src/store/modules/socketIOModule.js           |  11 +-
 src/utils/changelog.js                        |   1 +
 22 files changed, 293 insertions(+), 35 deletions(-)
 create mode 100644 .vs/VSWorkspaceState.json
 create mode 100644 .vs/slnx.sqlite
 create mode 100644 src/components/app/userInformationPopout.vue

diff --git a/.gitignore b/.gitignore
index 185e663..2b33ebe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,4 +18,4 @@ yarn-error.log*
 *.ntvs*
 *.njsproj
 *.sln
-*.sw*
+*.sw*
\ No newline at end of file
diff --git a/.vs/VSWorkspaceState.json b/.vs/VSWorkspaceState.json
new file mode 100644
index 0000000..2964a7a
--- /dev/null
+++ b/.vs/VSWorkspaceState.json
@@ -0,0 +1,8 @@
+{
+  "ExpandedNodes": [
+    "",
+    "\\src"
+  ],
+  "SelectedNode": "\\src\\main.js",
+  "PreviewInSolutionExplorer": false
+}
\ No newline at end of file
diff --git a/.vs/slnx.sqlite b/.vs/slnx.sqlite
new file mode 100644
index 0000000000000000000000000000000000000000..742376e7933e4de5e74efcddb378fc3657c8ee65
GIT binary patch
literal 77824
zcmeI5&u<&Y700=vL`tM(DpgXV)gfyahQ;cK?KrB_06|NyR`%8uN%MysK_!S4xso>}
zmoj&$L}+@T-6Tl+Clu(lr~U&$fu0KFlvB||i=qK~>80qQhqMS%bY^#Fe+-wlq{eP6
zd<p2s&b*m@^O^VF%<dc6)w>1V(!{-9zpGl}_1IiY5MtjK#aJx%68V}ZU+gnSewkz!
z<fjn$ecZ1v#a6y}FhzwkpHrEyWj;T5nEo_<DRp7SO#UMA*<?HZNjw+7Fs=iXgTVil
zK;nGDzW?yzY%+UqMHp`CMq7KQdeq(Rb=I{#-Ow$)XEdE(jr|S1qbcpC5+!tAs>u18
zEGory`Au=>Sba2RQ=(WZj!HMg#hvg?8@b{9xnx!%N=ng67S*m6t=jApRP$RtRv{|Z
z5T#O~K*w1uN%^Xrdv7kC%&x2mA66}Ox1;gH=C9AWs?_o~3v$G`XH$!mi8xxNv>SwN
zO}-^p#BxR1%vZL>JMy-euh&XSk#xH$7i&Z-@>MSsmfc>;{obM8*80KLOh&B88*)W1
zN^(`)VS=(@>DEzW(JLS=b53VeEizf_azQ5JC!?40>oU8M1E;u^uSmD^mBm-q)^eUQ
z95dErW6<dw-5sbMeNWfgQ5}R?vvzmL{QE4}XjpB&)zVB;-_<*G93C=WjI*v0xey#`
z_thiQ(z+fVzKCKHL!9d6b!sOrr%+Wi!a}d5Qg^HL-X5<v6OwwJLDv|Sn@#107gEV=
zl{iYtb`)FFmTDMUUs7B5wdSbmyhu9iFno1H51!-jvc!@`@7KsZs?XSN^M1p28@?5P
zoeH}RUrp}L+=j0T8vZfd#+||_oxc<l37Nr(ErdB~a8S&!Lk7zPJ#%FR$Mojf(E$l{
zEZneLFc+)oUCp%A?m<JOCSFrENjM}yhuYrKbTWG-Cp=8sw#RNu`)kr~tiVxh#+}xB
zQMp_9mJTN4HS&y$)wshViv%li6z1ZESG%S4P2yN1!TX_*OlEUA;n5qm6|&Bp?!#Bp
zVG9gb2JDYj1gGc(cE_4K<MG4k)h9+%*3uj6aT?PZdo7X7$}4QfZ2t*_x@KAJYlhXN
z;hC>XMou3u73{&ANnVI9_)+WYGFh2y1^5QkkcabA!5slFV(aYe2>7amtGT;b;j05J
zPpon7(b1$G+CI4ChqeGv{$5jI!{Vz0ro~sC(!`<`TIS(nR_d`+;D?C7o<lLIrVa6?
zGP)lrsHRogHMRbsM%HjYdbrybvbosE*9$eVHR#)BXR%P@#-5E*MOJPV?VS(t{;{Uv
z$JyW}hbK5@aXRHXPMoP1PiC(z2*a11EvjZ&y0IUyrm9mi88$z+G$7|$om(}|J#yuV
zM0ROO*tSj0d_eX*TGP}X3^ar6g2I>akfCvviw5!UWzsS?ye%ZN3k$--eY;Or0r$s5
zsE-|{oxl9LCC|<@x75yn*qR^g?2TugJl4#mXUX??=G9o{Z<*hcANYU(2!H?xfB*=9
z00@8p2!H?xfB*=%1cuY`shBiukk^TCX)R0Y8GHKvpl>H8s^qne-qL<dU#?tq1#S-X
zPCF!JUVL5LY1r>;E|R2J-x?gavh?*!uvT(j@`Qy*Yl9?)W>Y`8JTVztxi0lJ)zaFf
ze*K_Lf4TbVm8-8^dFAT0?~2#fUcdI8*RS9Bx-c2LoUM}FMpt!Te_mU?zPd)A|0gnk
zj%EHyzTpD`AOHd&00JNY0w4eaAOHd&00JQJ{1JF@BEBN<2RbIwLVQ7R4<W=;WK{9Y
zN3qNwGaqIC@%#-D8iN1`fB*=900@8p2!H?xfB*=9z}Y77a$FJ~a{?j$B6;@b4+c!k
z#V^l<4gom%|Bqvtzh^!^+q^J35C8!X009sH0T2KI5C8!X009tq{t0|*A`!bWGn3e=
z-s|;$WFDw3jr`4krLDeY_KfL2{AT$-sea`JAwm8{zv;y4p-GFr`28<`P4oW~nZLv`
z|0dt?0Ra#I0T2KI5C8!X009sH0T2KI5O^L5d?S8Ch<qh5k%-UFkoN%2^FR6f|9|1{
z|DVSRhRz@W0w4eaAOHd&00JNY0w4eaAQ1cJ<c*mzkN?TZ`51lvr|194fBJ_H2!H?x
zfB*=900@8p2!H?xfB*=9z!@e$^Z$7MKf@D@p@9GhfB*=900@8p2!H?xfB*=903m?<
zKg<9GKmY_l00ck)1V8`;KmY_l00hoH0p$PB{v2b3AOHd&00JNY0w4eaAOHd&00JO@
z{6A~}1V8`;KmY_l00ck)1V8`;KmY{JJ^|$a&;A@^gdhL{AOHd&00JNY0w4eaAOHd&
zfaibM00@8p2!H?xfB*=900@8p2!H?xoP7c~|9|%97$XD$5C8!X009sH0T2KI5C8!X
z00H{^pPp>TGHd7mdcJ?|F#T!zQtHBtnfyiKv&nY+lXx!nz1WQrPKivyE_-kPd@_6e
zy704srS5jL4ZWjPk4#JJR<u2>uNkeVqKs6L^EFwl<!=^baVMftV>Y!on-a+<s#Z2E
z-8xd*4N)o9<Xdt@ELW7xd}Uj_BX5iOdaa}s$t^bJVofZT$XC5kSQg#>%KhG<-q!lT
z=1fSe$QyD+E=qD$++l*w-5QHt0cn|YI-?4fisHIlkjZeQd{xS?%ggSK*0lr8Xsd=r
z$M?j$`4GJO@kR8$?kL<F*URgaqkH3H=oFfjkWK_qX!QKe$@uxAFI%6oYTa*$HTg|v
z#zd)9DA3^*OJsl^)|%Si*Q|zE+{#y^+xg1kD{E^xdy2<2ka~uty>pTlwW9;gw=HTt
zv#H$h;%qW|Z$%hx>PB08r+U=g?RD0*J>AePy=OF?UyXfANohBgD53MN;VZ>;`Au=>
zSbY#zu#Id)x*;y^gm2o&4d>4#vl3BKidM3ycC~2LW}l#%-}12vQLzR$5xMu~(#h<~
zitu684ifyZ`RjAx@W59GVgp|lwCH1m1lLiSqX%0*m5AWL;SAS}PaHEAL^cMU&e7e0
z+R^uPtsT`tw3pl=^B*u_76jc9=UXk!H1%D*L*nRoG0wWYXd4NKj}A{KU=(^SmAYG{
z_x5<bnUK`$47$ds9QEc4sbscF9HnGCimiN0H4LpUsjd53lOK)J=0(zBhvBOudhi^F
zmmP!ZQGLdCoA(?3+8WT2?<Ey>8@@W=Hhfjk@Q>j(Y$dh3u^0Q%1^It5k<dDJ;wA2x
zc{8_4a4uHUyP9dK-Ghcm*XWwENft79C0UwIX0POghiTjPn8LKbCjG_=9I7+!wAPEt
z-MUPC&|W&2jMvCBE>`1iBgi7bN*sl`c;VG<X?>G8)=2PvC?u2FTuylOhHZtcGpGCT
z)pXbb!<7O1V-=^gJJ#G8j~`C2l5N1_qbY0YjrBN<X|#APk<7{~Y{q!QZ<bZE)wP;5
zJo9zQ$m!#yf<1UM$qUg1KWcqlCVN#|0lop@OLhcP!5slFV(aYe2>7amtGR1&e08AZ
zi8anWI-0aY+Xt8Y&=!a!{Jo~ahQ(J0OpC8NrHMr?v`@0FaZ}(goAfcnU4a#oYT6KQ
zDuG87x2~X?R%zGN`iB}>!~N*NY<pea$kz)su{G%1W@oWb<95DLs>sT%qWv&Lynmct
zfoGWDV-HVo%;I#)2NB{-y?8QvZ9y2m>}*jr%hHYgfHhT}lF6|7xupR)&+6Q&aqf{T
zPb9KSOTxBoYUTs7=h2#`_FzDtPPxl?$k4dTMT7YFGHIC`-WHPCg$3c^zTKy*fcs-2
z)W;6f&VQnHOP-x+ZmFFCu{A%~u_q=n8_55UyxTwl2!H?xfB*=900@8p2!H?xfB*=b
zIRf<gKQZ;ISmv$szf1pV=Kl0Y<N_ZM009sHfv*aI_vc<nzO=G3{quW=y7o3b6+lnR
z*hx5DGx=-x4fK{G-xK*dQ8i~%_mtXga@<F%SE|aEJSvl~y2r2RL8B@;-XzsTJ~5!Q
z#e7w~shaMIFDE0Yw3o$kDF-SqIY|pg#BV|qE}?4czPM2-ZI0a4PY#oWXsPI5I$HYI
zRP*v`gnD6-jq2*j)g9@=R{!01#mhguERrAPRd1MN9Klgr_x-lc__(R0(q&&pDHh4`
zwjYoKZ6hS8<VKa8Kl7!@U?OJeji5d>W5lr2*Z(OtyVcciFLQdEo?*<U9;fValq9N-
z(`|H)h=JZF=kTJ9MO3PGCVjXxm&|VGgrVvm;jnXv>#C(j9KW!0>pmVTH6P9~g)7H(
z;pLse;xzr_moUVQ<sCaso%`uQ#!jPuxWHvRsUChidi6p$ffTNc%yrUMr%WgLy?ZMA
z2}_o7e0KRkmLFxA`rxR%1Z+?pCg^BSl9jB0v<zf8$DYzW`5}T+<c8e@oOiU5jq)j;
zWhB0hv$<nu9cOdx!_{<+9Lp$lRv2e<!-pZABQxGoz#l|?e$M9N-~aonZ1JH72!H?x
XfB*=900@8p2!H?xfB*<QJp%s)sE4IG

literal 0
HcmV?d00001

diff --git a/src/components/ProfilePictureTemplate.vue b/src/components/ProfilePictureTemplate.vue
index 2b04611..b874caa 100644
--- a/src/components/ProfilePictureTemplate.vue
+++ b/src/components/ProfilePictureTemplate.vue
@@ -1,16 +1,16 @@
 <template>
-  <div :class="`profile-picture ${adminType ? adminType.name : ''}`">
-    <img v-if="adminType" class="emote" :src="adminType.emotePath">
+  <div :class="`profile-picture ${adminType ? adminType.name : ''}`" :style="`padding: ${$props.animationPadding || '3px'}`">
+    <img v-if="adminType" class="emote" :src="adminType.emotePath" :style="`width: ${$props.emoteSize || '20px'}; height: ${$props.emoteSize ||'20px'}`">
     <div
-      class="inner-profile-picture"
-      :style="`height: ${$props.height}; width: ${$props.width}; background-image: url(${$props.url})`"
+      :class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
+      :style="`height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
     ></div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["url", "height", "width", "admin"],
+  props: ["url", "size","emoteSize", "admin", "hover", 'animationPadding'],
   data() {
     return {
       crown: require("twemoji/2/svg/1f451.svg"),
@@ -38,7 +38,6 @@ export default {
 <style scoped>
 .profile-picture {
   position: relative;
-  padding: 3px;
   border-radius: 50%;
 }
 .inner-profile-picture {
@@ -48,6 +47,10 @@ export default {
   background-size: cover;
   background-repeat: no-repeat;
   display: flex;
+  transition: 0.2s;
+}
+.hoverable:hover{
+  filter: brightness(80%);
 }
 .creator {
   margin-right: 5px;
@@ -92,6 +95,7 @@ export default {
   top: -3px;
   left: -3px;
 }
+
 @keyframes Anime {
   0% {
     background-position: 0% 50%;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 11048c5..339d12e 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -1,12 +1,12 @@
 <template>
   <div :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID}">
-    <profile-picture :admin="$props.admin" :url="userAvatar" height="50px" width="50px"/>
+    <profile-picture :hover="true" :admin="$props.admin" :url="userAvatar" size="50px" @click.native="openUserInformation"/>
     <div class="triangle">
       <div class="triangle-inner"></div>
     </div>
     <div class="content">
       <div class="user-info">
-        <div class="username">{{this.$props.username}}</div>
+        <div class="username" @click="openUserInformation">{{this.$props.username}}</div>
         <div class="date">{{getDate}}</div>
       </div>
       <div class="content-message" v-html="formatMessage"></div>
@@ -54,6 +54,9 @@ export default {
     "admin"
   ],
   methods: {
+    openUserInformation() {
+      this.$store.dispatch('setUserInformationPopout', this.uniqueID)
+    },
     imageClicked(event) {
       this.$store.dispatch("setImagePreviewURL", event.target.src);
     }
@@ -121,6 +124,7 @@ export default {
 }
 
 .ownMessage .triangle-inner {
+  transition: 0.5s;
   border-right: 7px solid rgba(184, 184, 184, 0.219);
 }
 .ownMessage .content {
@@ -240,6 +244,11 @@ export default {
   margin: auto;
   margin-left: 0;
   margin-right: 0;
+  transition: 0.1s;
+  cursor: default;
+}
+.username:hover{
+  color: rgb(199, 199, 199);
 }
 .date {
   color: rgb(161, 161, 161);
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index b60237a..5486f6b 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="my-mini-information">
-    <profile-picture :url="avatar" :admin="user.admin" height="50px" width="50px"/>
+    <profile-picture :url="avatar" :admin="user.admin" size="50px"/>
     <div class="information">
       <div class="name">{{user.username}}</div>
       <div class="tag">@{{user.tag}}</div>
diff --git a/src/components/app/Popouts.vue b/src/components/app/Popouts.vue
index 5b148b7..31c3eee 100644
--- a/src/components/app/Popouts.vue
+++ b/src/components/app/Popouts.vue
@@ -6,6 +6,7 @@
       <GDriveLinkMenu key="GDriveLinkMenu" v-if="popouts.GDLinkMenu"/>
       <image-large-preview key="ilp" v-if="popouts.ImagePreviewURL"/>
       <drag-drop-file-upload-dialog key="ddfud" v-if="showUploadDrapDrop"/>
+      <user-information-popout key="uip" v-if="popouts.userInformationPopoutID"/>
     </transition-group>
   </div>
 </template>
@@ -13,6 +14,7 @@
 <script>
 import { bus } from "@/main";
 //popouts
+import userInformationPopout from "@/components/app/userInformationPopout.vue";
 import Settings from "@/components/app/Settings.vue";
 import uploadDialog from "@/components/app/uploadDialog.vue";
 import GDriveLinkMenu from "@/components/app/GDriveLinkMenu.vue";
@@ -24,6 +26,7 @@ export default {
     Settings,
     uploadDialog,
     GDriveLinkMenu,
+    userInformationPopout,
     DragDropFileUploadDialog,
     imageLargePreview
   },
diff --git a/src/components/app/SettingsPanels/ManageEmojis.vue b/src/components/app/SettingsPanels/ManageEmojis.vue
index baf2573..35205d7 100644
--- a/src/components/app/SettingsPanels/ManageEmojis.vue
+++ b/src/components/app/SettingsPanels/ManageEmojis.vue
@@ -154,6 +154,7 @@ input {
   margin-top: 0;
   margin-bottom: 0;
   background: none;
+  width: calc(100% - 30px);
 }
 input:hover {
   background: rgba(26, 26, 26, 0.24);
@@ -172,6 +173,7 @@ input:focus {
   width: 50px;
   position: relative;
   overflow: hidden;
+  flex-shrink: 0;
 }
 .delete-button .material-icons {
   margin: auto;
diff --git a/src/components/app/SettingsPanels/MyProfile.vue b/src/components/app/SettingsPanels/MyProfile.vue
index 21c3977..9163a27 100644
--- a/src/components/app/SettingsPanels/MyProfile.vue
+++ b/src/components/app/SettingsPanels/MyProfile.vue
@@ -1,6 +1,8 @@
 <template>
   <div class="my-profile-panel">
-    <profile-picture :url="avatar" :admin="user.admin" height="100px" width="100px" />
+    <div class="profile-picture-outer">
+      <profile-picture :url="avatar" :admin="user.admin" size="100px" emoteSize="30px" animationPadding="5px"/>
+    </div>
     <div class="information">
       <div class="username">
         <strong>Username:</strong>
@@ -35,7 +37,7 @@ import AvatarUpload from "@/services/AvatarUpload.js";
 import config from "@/config.js";
 import { bus } from "@/main";
 import path from "path";
-import {mapState} from 'vuex'
+import { mapState } from "vuex";
 
 export default {
   components: {
@@ -99,7 +101,7 @@ export default {
     }
   },
   computed: {
-    ...mapState('settingsModule', ['GDriveLinked']),
+    ...mapState("settingsModule", ["GDriveLinked"]),
     user() {
       return this.$store.getters.user;
     },
@@ -119,6 +121,10 @@ export default {
   height: 100px;
   margin-top: 10px;
 }
+.profile-picture-outer{
+  display: flex;
+  z-index: 99999;
+}
 .profile-picture {
   margin-left: 20px;
 }
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 60d5840..8a2ef1f 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -1,10 +1,10 @@
 <template>
   <div :class="{friend: true, notifyAnimation: (notifications && notifications > 0) }" :style="`background: ${status.bgColor};`" @click="openChat">
-    <div class="profile-picture" :style="`border-color: ${status.statusColor}; background-image: url(${userAvatar})`">
+    <div class="profile-picture" @click="openUserInformation" :style="`border-color: ${status.statusColor}; background-image: url(${userAvatar})`">
       <div class="status" :style="`background-image: url(${status.statusURL})`" ></div>
     </div>
     <div class="information">
-      <div class="username">{{$props.username}}</div>
+      <div class="username">{{recipient.username}}</div>
       <div class="status-name" :style="`color: ${status.statusColor}`">{{status.statusName}}</div>
     </div>
     <div class="notification" v-if="notifications && notifications >0">
@@ -23,7 +23,7 @@ import statuses from '@/utils/statuses';
 import {bus} from '@/main'
 
 export default {
-  props: ['username', 'tag',  'channelID',  'uniqueID', ],
+  props: ['username', 'tag',  'channelID',  'uniqueID', 'recipient'],
   methods: {
     async getMessages() {
       const {ok, error, result} = await messagesService.get(this.$props.channelID);
@@ -34,14 +34,19 @@ export default {
         console.log (error.response)
       }
     },
-    async openChat() {
+    async openChat(event) {
+      if (event.target.classList[0] === "profile-picture") return;
       bus.$emit('closeLeftMenu');
       // dismiss notification if exists
       if (this.notifications && this.notifications >= 1 && document.hasFocus()) {
         this.$socket.emit('notification:dismiss', {channelID: this.channelID});
       }
+      // this.$store.dispatch('openChat', {
+      //   channelID: this.channelID,
+      //   channelName: this.channel
+      // })
       this.$store.dispatch('selectedChannelID', this.$props.channelID);
-      this.$store.dispatch('setChannelName', this.$props.username);
+      this.$store.dispatch('setChannelName', this.recipient.username);
       if (this.$store.getters.messages[this.$props.channelID]) return;
       if (this.$store.getters.channels[this.$props.channelID] && !this.$store.getters.messages[this.$props.channelID]) return this.getMessages();
       const {ok, error, result} = await channelService.post(this.$props.channelID);
@@ -52,6 +57,9 @@ export default {
         // TODO handle this
         console.log(error)
       }
+    },
+    openUserInformation() {
+      this.$store.dispatch('setUserInformationPopout', this.recipient.uniqueID)
     }
   },
   computed: {
@@ -63,14 +71,15 @@ export default {
       if (!notifications || (this.$props.channelID === this.$store.getters.selectedChannelID && document.hasFocus())) return;
       return notifications.count;
     },
-    user() {
-      return this.$store.getters.user.friends[this.$props.uniqueID].recipient;
-    },
     userAvatar() {
-      return config.domain + "/avatars/" + this.user.avatar
+      return config.domain + "/avatars/" + this.recipient.avatar
     },
     status() {
-      const status = this.$store.getters.user.friends[this.$props.uniqueID].recipient.status || 0
+      let status = 0;
+      if (this.$store.getters.user.friends[this.recipient.uniqueID]) {
+        status = this.$store.getters.user.friends[this.recipient.uniqueID].recipient.status || 0
+      }
+
       return {
         statusName: statuses[parseInt(status)].name,
         statusURL: statuses[parseInt(status)].url,
diff --git a/src/components/app/relationships/OfflineFriends.vue b/src/components/app/relationships/OfflineFriends.vue
index a7e8241..0214874 100644
--- a/src/components/app/relationships/OfflineFriends.vue
+++ b/src/components/app/relationships/OfflineFriends.vue
@@ -5,7 +5,7 @@
     </div>
     <transition name="list" appear>
       <div class="list" v-if="expanded">
-        <FriendsTemplate v-for="(friend, key) of friends" :key="key" :channelID="friend.channelID" :uniqueID="friends[key].recipient.uniqueID" :username="friend.recipient.username" :tag="friend.recipient.tag"/>
+        <FriendsTemplate v-for="(friend, key) of friends" :key="key" :channelID="friend.channelID" :recipient="friends[key].recipient" />
       </div>
     </transition>
   </div>
diff --git a/src/components/app/relationships/OnlineFriends.vue b/src/components/app/relationships/OnlineFriends.vue
index d900b5c..cc07ced 100644
--- a/src/components/app/relationships/OnlineFriends.vue
+++ b/src/components/app/relationships/OnlineFriends.vue
@@ -5,7 +5,7 @@
     </div>
     <transition name="list" appear>
       <div class="list" v-if="expanded">
-        <FriendsTemplate v-for="(friend, key) of friends" :key="key" :channelID="friend.channelID" :uniqueID="friends[key].recipient.uniqueID" :username="friend.recipient.username" :tag="friend.recipient.tag"/>
+        <FriendsTemplate v-for="(friend, key) of friends" :key="key" :channelID="friend.channelID" :recipient="friends[key].recipient"/>
       </div>
     </transition>
   </div>
diff --git a/src/components/app/relationships/PendingTemplate.vue b/src/components/app/relationships/PendingTemplate.vue
index 0e058b5..534a2ba 100644
--- a/src/components/app/relationships/PendingTemplate.vue
+++ b/src/components/app/relationships/PendingTemplate.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="pending-friend">
-    <div class="profile-picture" :style="`background-image: url(${userAvatar})`"></div>
+    <div class="profile-picture" @click="openUserInformation" :style="`background-image: url(${userAvatar})`"></div>
     <div class="information">
       <div class="username">{{$props.username}}</div>
       <div class="tag">@{{$props.tag}}</div>
@@ -32,6 +32,9 @@ export default {
     },
     accept() {
       RelationshipService.put(this.$props.uniqueID)
+    },
+    openUserInformation() {
+      this.$store.dispatch('setUserInformationPopout', this.uniqueID)
     }
   },
   computed: {
diff --git a/src/components/app/relationships/RecentFriends.vue b/src/components/app/relationships/RecentFriends.vue
index b5a9830..b2d09b6 100644
--- a/src/components/app/relationships/RecentFriends.vue
+++ b/src/components/app/relationships/RecentFriends.vue
@@ -3,7 +3,7 @@
     <transition name="list" appear>
       <div class="list">
         
-        <FriendsTemplate v-for="(channel, key) of channels" :key="key" notifications="1" :channelID="channel.channelID" :uniqueID="channel.recipients[0].uniqueID" :username="channel.recipients[0].username" :tag="channel.recipients[0].tag"/>
+        <FriendsTemplate v-for="(channel, key) of channels" :key="key" notifications="1" :channelID="channel.channelID" :recipient="channel.recipients[0]"/>
       </div>
     </transition>
   </div>
@@ -21,9 +21,11 @@ export default {
       const json = this.$store.getters.channels;
       const notifications = this.$store.getters.notifications;
 
+
       const keys = Object.keys(json);
       let result = [];
       keys.forEach(function(key){
+        if (json[key].recipients.length > 0)
           result.push(json[key]);
       });
 
diff --git a/src/components/app/userInformationPopout.vue b/src/components/app/userInformationPopout.vue
new file mode 100644
index 0000000..114de90
--- /dev/null
+++ b/src/components/app/userInformationPopout.vue
@@ -0,0 +1,198 @@
+<template>
+  <div class="drop-background" @click="backgroundClickEvent">
+    <div class="box">
+      <spinner v-if="!user"/>
+      <div class="inner" v-else>
+        <div class="top">
+          <div class="profile-picture-outer">
+            <profile-picture
+              size="90px"
+              emoteSize="28px"
+              animationPadding="5px"
+              :admin="user.admin"
+              :url="`${avatarDomain}${user.avatar}`"
+            />
+          </div>
+          <div class="info">
+            <div class="username">{{user.username}}</div>
+            <div class="tag">@{{user.tag}}</div>
+          </div>
+        </div>
+        <div class="bottom" v-if="selfUniqueID !== user.uniqueID">
+
+          <div class="button valid" v-if="this.relationshipStatus == null" @click="AddFriendButton">
+            <div class="material-icons">person_add</div>Add friend
+          </div>
+
+          <div class="button valid" v-if="this.relationshipStatus == 0" @click="RemoveFriendButton">
+            <div class="material-icons">person_add</div>Request Sent!
+          </div>
+
+          <div class="button valid" v-if="this.relationshipStatus == 1" @click="AcceptFriendButton">
+            <div class="material-icons">person_add</div>Accept Friend
+          </div>
+
+          <div class="button warn" v-if="this.relationshipStatus == 2" @click="RemoveFriendButton">
+            <div class="material-icons">person_add_disabled</div>End Friendship
+          </div>
+
+          <div class="button">
+            <div class="material-icons">chat</div>Send Message
+          </div>
+          <div class="button warn">
+            <div class="material-icons">block</div>Block
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+import config from "@/config.js";
+import Spinner from "@/components/Spinner.vue";
+import profilePicture from "@/components/ProfilePictureTemplate.vue";
+import userService from "@/services/userService.js";
+import relationshipService from "@/services/RelationshipService.js";
+export default {
+  components: { Spinner, profilePicture },
+  data() {
+    return {
+      user: null,
+      avatarDomain: config.domain + "/avatars/"
+    };
+  },
+  methods: {
+    backgroundClickEvent(event) {
+      if (event.target.classList.contains("drop-background")) {
+        this.$store.dispatch("setUserInformationPopout", null);
+      }
+    },
+    async AddFriendButton() {
+      const {ok, error, result} = await relationshipService.post({username: this.user.username, tag: this.user.tag});
+    },
+    async AcceptFriendButton() {
+      const {ok, error, result} = await relationshipService.put(this.uniqueID);
+    },
+    async RemoveFriendButton() {
+      const {ok, error, result} = await relationshipService.delete(this.uniqueID);
+    }
+  },
+  async mounted() {
+    const { ok, error, result } = await userService.get(this.uniqueID);
+    if (ok) {
+      this.user = result.data.user;
+    }
+  },
+  computed: {
+    selfUniqueID() {
+      return this.$store.getters.user.uniqueID;
+    },
+    uniqueID() {
+      return this.$store.getters.popouts.userInformationPopoutID;
+    },
+    relationshipStatus() {
+      const userUniqueID = this.$store.getters.popouts.userInformationPopoutID;
+      const allFriend = this.$store.getters.user.friends;
+      if (!allFriend[userUniqueID]) return null
+      return allFriend[userUniqueID].status
+    }
+  }
+};
+</script>
+<style scoped>
+.drop-background {
+  position: absolute;
+  background: rgba(0, 0, 0, 0.521);
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 999;
+  display: flex;
+}
+.box {
+  margin: auto;
+  height: 330px;
+  width: 500px;
+  background: rgba(31, 31, 31, 0.904);
+  border-radius: 5px;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+  overflow: hidden;
+}
+.inner {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+}
+.top {
+  display: flex;
+  flex-direction: column;
+  background: rgba(22, 22, 22, 0.918);
+  width: 100%;
+  height: 170px;
+}
+.bottom {
+  display: flex;
+  height: 100%;
+  width: calc(100% - 20px);
+  margin: auto;
+}
+.button {
+  background: rgba(49, 49, 49, 0.815);
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  border-radius: 5px;
+  flex: 1;
+  margin: 30px;
+  margin-left: 20px;
+  margin-right: 20px;
+  transition: 0.3s;
+}
+.button .material-icons {
+  margin-bottom: 10px;
+  font-size: 40px;
+}
+
+.button:hover {
+  background: rgb(61, 61, 61);
+}
+
+.button.valid {
+  background: #09ff002d;
+}
+.button.valid:hover {
+  background: #09ff00ab;
+}
+
+.button.warn {
+  background: #ff00002d;
+}
+.button.warn:hover {
+  background: #ff0000ab;
+}
+
+.profile-picture-outer {
+  display: flex;
+  z-index: 9999;
+  margin: auto;
+  margin-bottom: 0px;
+}
+.info {
+  margin-top: 1px;
+  margin: auto;
+  font-size: 20px;
+  display: flex;
+  user-select: text;
+}
+.tag {
+  color: grey;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/homePage/LoggedIn.vue b/src/components/homePage/LoggedIn.vue
index adfe2c1..1287e2c 100644
--- a/src/components/homePage/LoggedIn.vue
+++ b/src/components/homePage/LoggedIn.vue
@@ -2,7 +2,7 @@
   <div class="logged-in">
     <div class="card">
       <div class="avatar-outer">
-        <profile-picture :url="avatar" :admin="user.admin" height="90px" width="90px" />
+        <profile-picture :url="avatar" :admin="user.admin" size="90px" emoteSize="27px" />
       </div>
       <div class="info">
           <div class="username">{{user.username}}<span class="tag">@{{user.tag}}</span></div>
diff --git a/src/components/homePage/RightPanel.vue b/src/components/homePage/RightPanel.vue
index 42d4204..5dfbd12 100644
--- a/src/components/homePage/RightPanel.vue
+++ b/src/components/homePage/RightPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="right-panel-home">
     <div class="right-panel-inner">
-        <img class="logo" src="./../../assets/logo.svg"></img>
+        <img class="logo" src="./../../assets/logo.svg" />
         <div class="title">Nertivia</div>
         <spinner :msg="spinnerMessage" v-if="previouslyLoggedIn && user == null && tokenExists" />
         
diff --git a/src/services/AuthenticationService.js b/src/services/AuthenticationService.js
index 26388bd..b6a67d0 100644
--- a/src/services/AuthenticationService.js
+++ b/src/services/AuthenticationService.js
@@ -8,6 +8,6 @@ export default {
     return wrapper(instance().post('user/login', credentials));
   },
   user () {
-    return wrapper(instance().get('user/details'))
+    return wrapper(instance().get('user'))
   }
 }
\ No newline at end of file
diff --git a/src/services/userService.js b/src/services/userService.js
index 2ed5c63..a58e088 100644
--- a/src/services/userService.js
+++ b/src/services/userService.js
@@ -1,5 +1,7 @@
 import {instance, wrapper} from './Api';
 
 export default {
-
+  get (uniqueID) {
+    return wrapper(instance().get(`user/${uniqueID}`))
+  } 
 }
\ No newline at end of file
diff --git a/src/store/modules/popoutsModule.js b/src/store/modules/popoutsModule.js
index e6b95e7..35714cb 100644
--- a/src/store/modules/popoutsModule.js
+++ b/src/store/modules/popoutsModule.js
@@ -11,6 +11,8 @@ const state = {
   uploadDialog: false,
   ImagePreviewURL: null,
 
+  userInformationPopoutID: null,
+
   dragDropFileUploadDialog: false,
   settings: false,
   GDLinkMenu: false,
@@ -24,6 +26,9 @@ const getters = {
 }
 
 const actions = {
+  setUserInformationPopout({commit}, id){
+    commit('setUserInformationPopout', id)
+  },
   setPopoutVisibility(context, data) {
     context.commit('setPopoutVisibility', data)
   },
@@ -36,6 +41,9 @@ const actions = {
 }
 
 const mutations = {
+  setUserInformationPopout(state, id) {
+    Vue.set(state, 'userInformationPopoutID', id)
+  },
   setPopoutVisibility(state, data) {
     Vue.set(state, data.name, data.visibility)
   },
diff --git a/src/store/modules/socketIOModule.js b/src/store/modules/socketIOModule.js
index 3fccffc..1aac417 100644
--- a/src/store/modules/socketIOModule.js
+++ b/src/store/modules/socketIOModule.js
@@ -25,15 +25,18 @@ const actions = {
     if(friendsArray !== undefined && friendsArray.length >=1) {
       for (let index = 0; index < friendsArray.length; index++) {
         const element = friendsArray[index];
-        friendObject[element.recipient.uniqueID] = element;
-        for (let currentFriendStatus of currentFriendStatus){
-          if(currentFriendStatus[0] == element.recipient.uniqueID){
-            friendObject[element.recipient.uniqueID].recipient.status = currentFriendStatus[1]
+        if (element.recipient) {
+          friendObject[element.recipient.uniqueID] = element;
+          for (let currentFriendStatus of currentFriendStatus){
+            if(currentFriendStatus[0] == element.recipient.uniqueID){
+              friendObject[element.recipient.uniqueID].recipient.status = currentFriendStatus[1]
+            }
           }
         }
       }
       data.user.friends = friendObject;
     }
+
     context.commit('user', data.user)
 
     // convert dms array to object
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index b653037..cf7a030 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -8,6 +8,7 @@ const config = [
     new: [
       'You can now make your own guild.',
       "Tabs have been added at the top of the screen.",
+      "Added users information page which allows you to block, End friendship or message someone.",
     ],
     fix: ["Some formatting issues with custom emojis have been fixed."],
     next: ['link previews.']