From 124e9a7f227e0d57d99f09f18774195d7d8c51e5 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Sat, 3 Aug 2019 11:27:36 +0100
Subject: [PATCH] survey changes

---
 .../app/Popouts/Popouts/GDriveLinkMenu.vue    |   2 +-
 .../ServerSettingsPanels/DropDownMenu.vue     |  61 ++++-
 .../Popouts/Popouts/SettingsPanels/survey.vue | 162 +++++------
 .../Popouts/Popouts/userInformationPopout.vue | 259 +++++++++++++++---
 .../app/relationships/FriendsTemplate.vue     |   1 +
 src/utils/changelog.js                        |  12 +
 src/utils/surveyItems.js                      |   7 +
 7 files changed, 377 insertions(+), 127 deletions(-)

diff --git a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
index 9825d93..45537ca 100644
--- a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
+++ b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
@@ -97,7 +97,7 @@ export default {
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.781);
-  z-index: 111111;
+  z-index: 11111111133451111;
   display: flex;
 }
 .inner {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
index fa9e0bc..f5329c2 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
@@ -2,22 +2,30 @@
   <div class="drop-down">
     <div class="title">{{name}}</div>
     <div class="current-select-box" ref="dropDown" @click="dropped = !dropped">
-      <div class="name" v-if="noneSelect && selectedItem || !noneSelect">{{selectedItem ? selectedItem.name : items[0].name}}</div>
+      <div class="name" v-if="noneSelect && selectedItem || !noneSelect">
+        <div class="emoji" v-if="selectedItemSorted.emoji || items[0].emoji" v-html="selectedItem ? selectedItemSorted.emoji : items[0].emoji"></div>
+        <div class="item-name">{{selectedItem ? selectedItemSorted.name : items[0].name}}</div>
+      </div>
       <div class="name" v-if="noneSelect && !selectedItem">Select</div>
       <div class="material-icons">expand_more</div>
     </div>
     
     <div class="drop" v-if="dropped">
       <div class="drop-container">
-        <div v-for="(item, index) of items" :key="index" class="item" :class="{selected: selectedItem === item}" @click="itemClick(item)">{{item.name}}</div>
+        <div v-for="(item, index) of itemEmojified" :key="index" class="item" :class="{selected: selectedItemSorted === item}" @click="itemClick(item)">
+          <div class="emoji" v-if="item.emoji" v-html="item.emoji"></div>
+          <div class="name">{{item.name}}</div>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script>
+import emojiParser from "@/utils/emojiParser.js";
+
 export default {
-  props: ['items', 'name', 'selectedItem', 'noneSelect'], // noneSelect: by default, nothing will be selected.
+  props: ['items', 'name', 'selectedItem', 'noneSelect', 'selectBy'], // noneSelect: by default, nothing will be selected.
   data() {
     return {
       dropped: false
@@ -33,13 +41,36 @@ export default {
       if (((el !== target) && !el.contains(target)) && this.dropped) {
          this.dropped = false;
       }
-    }
+    },
+
   },
   created() {
     document.addEventListener('click', this.documentClick);
   },
   destroyed() {
     document.removeEventListener('click', this.documentClick);
+  },
+  computed: {
+    selectedItemSorted() {
+      let item = null;
+      if (this.selectBy){
+        item = this.items.find(i => i[this.selectBy] === this.selectedItem);
+      } else {
+        item = this.selectedItem
+      }
+      if (item && item.emoji && !item.emoji.startsWith('<img')) {
+        item.emoji = emojiParser.replaceEmojis(item.emoji)
+      }
+      return item
+    },
+    itemEmojified(){
+      return this.items.map(i => {
+        if (i && i.emoji && !i.emoji.startsWith('<img')) {
+          i.emoji = emojiParser.replaceEmojis(i.emoji)
+        }
+        return i
+      })
+    }
   }
 }
 </script>
@@ -73,6 +104,10 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
+}
+.current-select-box .emoji{
+  margin-right: 5px;
 }
 .current-select-box .name {
   margin: auto;
@@ -107,7 +142,15 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  display: flex;
 }
+.item div {
+  align-self: center;
+}
+.item .emoji {
+  margin-right: 5px;
+}
+
 .item:hover {
   background: rgb(46, 46, 46);
 }
@@ -119,3 +162,13 @@ export default {
 }
 </style>
 
+<style>
+.item .emoji img {
+  width: 20px;
+  height: 20px;
+}
+.current-select-box .emoji img {
+  width: 20px;
+  height: 20px;
+}
+</style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 080e223..646a65f 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -1,38 +1,41 @@
 <template>
-  <div class="survey" >
-    <div class="title"><i class="material-icons">error</i>Take Survey</div>
-    <div class="notice">Note: Everyone will be able to see your survey in your profile.</div>
-    <div class="survey-inner">
-      <div class="survey-content">
-        <div class="left">
-          <!-- name -->
-          <div class="input">
-            <div class="input-title">Name</div>
-            <input type="text" placeholder="Name">
+  <div class="survey">
+    <div class="inner-content">
+      <div class="title"><i class="material-icons">error</i>Take Survey</div>
+      <div class="notice">Note: Everyone will be able to see your survey in your profile.</div>
+      <spinner v-if="!loaded"/>
+      <div class="survey-inner" v-if="loaded">
+        <div class="survey-content">
+          <div class="left">
+            <!-- name -->
+            <div class="input">
+              <div class="input-title">Name</div>
+              <input type="text" placeholder="Name" v-model="items.name">
+            </div>
+            <!-- Gender -->
+            <drop-down class="dropdown" :items="surveyItems.gender" selectBy="name" :selectedItem="items.gender" :noneSelect="true" name="Gender" @change="changeEvent('gender', $event)"/>
+            <!-- Age -->
+            <drop-down class="dropdown" :items="surveyItems.age" selectBy="name" :selectedItem="items.age" :noneSelect="true" name="Age" @change="changeEvent('age', $event)"/>
+          </div>
+          <div class="right">
+            <!-- Continent -->
+            <drop-down class="dropdown" :items="surveyItems.continents" selectBy="name" :selectedItem="items.continent" :noneSelect="true" name="Continent" @change="changeEvent('continent', $event)"/>
+            <!-- Countries -->
+            <drop-down class="dropdown" v-if="filterCountries" :items="filterCountries" selectBy="name" :selectedItem="items.country" :noneSelect="true" name="Country" @change="changeEvent('country', $event)"/>
+            <!-- About me --> 
+            <div class="input">
+              <div class="input-title">About me</div>
+              <textarea placeholder="I like cats and dogs." v-model="items.about_me"  />
+            </div>       
           </div>
-          <!-- Gender -->
-          <drop-down class="dropdown" :items="surveyItems.gender" :noneSelect="true" name="Gender"/>
-          <!-- Age -->
-          <drop-down class="dropdown" :items="surveyItems.age" :noneSelect="true" name="Age"/>
-        </div>
-        <div class="right">
-          <!-- Continent -->
-          <drop-down class="dropdown" :items="surveyItems.continents" :noneSelect="true" name="Continent"/>
-          <!-- Countries -->
-          <drop-down class="dropdown" :items="surveyItems.countries" :noneSelect="true" name="Country"/>
-          <!-- About me --> 
-          <div class="input">
-            <div class="input-title">About me</div>
-            <textarea placeholder="I like cats and dogs." />
-          </div>       
         </div>
+
+
+        <div class="survey-warning" v-if="surveyErrorMessage">{{ surveyErrorMessage }}</div>
+        <div class="survey-valid" v-if="surveyValidMessage">{{ surveyValidMessage }}</div>
       </div>
-
-
-      <div class="survey-warning" v-if="surveyErrorMessage">{{ surveyErrorMessage }}</div>
-      <div class="survey-valid" v-if="surveyValidMessage">{{ surveyValidMessage }}</div>
-      <div class="button" @click="surveySubmitButton">Save</div>
     </div>
+    <div class="button" v-if="loaded" @click="surveySubmitButton">Save</div>
   </div>
 </template>
 
@@ -40,22 +43,20 @@
 import DropDown from './../ServerSettingsPanels/DropDownMenu';
 import surveyItems from "@/utils/surveyItems.js";
 import userService from "@/services/userService.js";
+import Spinner from '@/components/Spinner';
 export default {
-  components: { DropDown },
+  components: { DropDown, Spinner },
   data() {
     return {
       surveyItems: surveyItems,
       surveyErrorMessage: null,
       surveyValidMessage: null,
+      loaded: false,
+      items: {
+        about_me: null,
+        name: null,
+      },
 
-      // selected: {
-      //   name: "",
-      //   gender: null,
-      //   age: null,
-      //   continent: null,
-      //   country: null,
-      //   about_me: ""
-      // }
     };
   },
   computed: {
@@ -63,67 +64,57 @@ export default {
   },
   async mounted() {
     const { ok, error, result } = await userService.getSurvey();
-    if (ok) {
-
+    if (!ok) {
+      if (error.response === undefined) {
+        return;
+      }
+      this.loaded = true;
+      return;
     }
-    this.previousLoaded = true;
+    this.$set(this, 'items', Object.assign({}, this.items, result.data.result)) 
+    this.loaded = true;
   },
   methods: {
+    changeEvent(name, item) {
+      if (name === 'continent'){
+        this.$set(this.items, 'country', null)
+      }
+      this.$set(this.items, name, item.name);
+    },
     async surveySubmitButton() {
       this.surveyValidMessage = null;
       this.surveyErrorMessage = null;
-      //checks if all drop boxes are not null.
-      for (let item in this.selected) {
-        if (this.selected[item] === null && item !== "country") {
-          this.surveyErrorMessage =
-            "Make sure you select / fill in all fields!";
-          return;
-        }
-      }
-      //checks if all values are not null
-      if (
-        this.selected.name.trim() === "" ||
-        this.selected.about_me.trim() === ""
-      ) {
-        this.surveyErrorMessage = "Make sure you select / fill in all fields!";
-        return;
-      }
+    
       this.surveyValidMessage = "Saving...";
       //gets the country index after unfiltering.
-      let countryIndex = undefined;
-      if (this.filterCountry[this.selected.country]) {
-        const selectedCountryName = this.filterCountry[this.selected.country]
-          .name;
-        countryIndex = this.surveyItems.countries.findIndex(
-          el => el.name == selectedCountryName
-        );
-      }
-      if (this.selected.name && this.selected.name.length > 100) {
+     
+      if (this.items.name && this.items.name.length > 100) {
         this.surveyErrorMessage = "Name must be less that 100 characters.";
         this.surveyValidMessage = null;
         return;
       }
-      if (this.selected.about_me && this.selected.about_me.length > 500) {
+      if (this.items.about_me && this.items.about_me.length > 500) {
         this.surveyErrorMessage = "About me must be less that 500 characters.";
         this.surveyValidMessage = null;
         return;
       }
 
-      const { ok, error, result } = await userService.setSurvey({
-        name: this.selected.name,
-        gender: this.selected.gender,
-        age: this.selected.age,
-        continent: this.selected.continent,
-        country: countryIndex,
-        about_me: this.selected.about_me
-      });
+      const { ok, error, result } = await userService.setSurvey(this.items);
       if (ok) {
         this.surveyValidMessage = "Saved!";
       } else {
         this.surveyValidMessage = null;
-        this.surveyErrorMessage = error.response.data.message;
+        this.surveyErrorMessage = error.response.data.message || error.response.data;
       }
     }
+  },
+  computed: {
+    filterCountries(){
+      if (!this.items.continent || this.items.continent === "Rather not say") return null;
+      const continent = this.surveyItems.continents.find(c => c.name === this.items.continent);
+      if (!continent) return null;
+      return [...this.surveyItems.countries.filter(c => c.code === continent.code), ...[{emoji: "😶",name: 'Rather not say', code: 'no'}]];
+    }
   }
 };
 </script>
@@ -132,7 +123,7 @@ export default {
 .notice {
   color: grey;
   font-size: 15px;
-  margin-top: 20px;
+  margin-top: 10px;
   margin-left: 30px;
   user-select: none;
 }
@@ -144,7 +135,6 @@ export default {
 
 .survey {
   height: 100%;
-  overflow: auto;
   align-items: center;
   width: 100%;
 }
@@ -159,6 +149,12 @@ export default {
   height: 100%;
 
 }
+.inner-content {
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  width: 100%;
+}
 
 .survey-content {
   display: flex;
@@ -207,7 +203,7 @@ export default {
 
 
 .title {
-  margin-top: 30px;
+  margin-top: 20px;
   display: flex;
   align-content: center;
   align-items: center;
@@ -253,4 +249,10 @@ textarea {
 textarea:hover {
   background: rgba(0, 0, 0, 0.401);
 }
+
+@media (max-width: 764px) {
+  .survey-content{
+    flex-direction: column;
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index c5f1cef..e3daabc 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -15,15 +15,35 @@
           <div class="uesrname-tag">
             <div class="username">{{user.username}}</div>
             <div class="tag">#{{user.tag}}</div>
+          </div>  
+            <div class="actions" v-if="uniqueID !== selfUniqueID">
+              <div class="action-buttons">
+                <div class="button" v-if="this.relationshipStatus === null" @click="AddFriendButton"><div class="material-icons">person_add</div><div>Add Friend</div></div>  
+                <div class="button" v-if="this.relationshipStatus === 0" @click="RemoveFriendButton"><div class="material-icons">hourglass_empty</div><div>Request Sent</div></div>  
+                <div class="button green" v-if="this.relationshipStatus === 1" @click="AcceptFriendButton"><div class="material-icons">check</div><div>Accept Friend</div></div>
+                <div class="button" v-if="this.relationshipStatus === 2" @click="openChat"><div class="material-icons">message</div><div>Message</div></div>  
+                <div class="button warn" v-if="this.relationshipStatus === 2" @click="RemoveFriendButton"><div class="material-icons">person_add_disabled</div><div>Remove Friend</div></div>
+                <div class="button warn"><div class="material-icons">block</div><div>Block</div></div>
+              </div>
           </div>
-          <div class="button" v-if="uniqueID !== selfUniqueID">Add Friend</div>     
         </div>
-        <div class="badges" v-if="user.badges && filteredBadges.length">
-          <div class="title">Badges</div>
-          <div class="badges-list">
-            <div class="badge" v-for="(badge, index) of filteredBadges" v-bind:style="{ 'border-color': badges[badge].color }" :key="index">
-              <img class="icon" :src="badges[badge].icon"/>
-              <div class="name">{{badges[badge].name}}</div>
+        <div class="scrollable">
+          <div class="badges" v-if="user.badges && filteredBadges.length">
+            <div class="title">Badges</div>
+            <div class="badges-list">
+              <div class="badge" v-for="(badge, index) of filteredBadges" v-bind:style="{ 'border-color': badges[badge].color }" :key="index">
+                <img class="icon" :src="badges[badge].icon"/>
+                <div class="name">{{badges[badge].name}}</div>
+              </div>
+            </div>
+          </div>
+          <div class="about-me" v-if="aboutMe">
+            <div class="title">About Me</div>
+            <div class="about-item" v-for="(aboutItem) of aboutMe" :key="aboutItem.name" :class="{infoAboutMe: aboutItem.key === 'About me'}">
+              <div class="key">{{aboutItem.key}}: </div>
+              <div class="emoji" v-if="aboutItem.emoji" v-html="aboutItem.emoji"></div>
+              <div class="name" v-if="aboutItem.key === 'About me'" v-html="formatAboutMe(aboutItem.name)"></div>
+              <div class="name" v-else>{{aboutItem.name}}</div>
             </div>
           </div>
         </div>
@@ -53,30 +73,6 @@ export default {
       badges
     };
   },
-  computed: {
-    filteredBadges() {
-      if (!this.user.badges) return;
-      return this.user.badges.filter(b => this.badges[b])
-    },
-    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;
-    }
-  },
-  async mounted() {
-    const { ok, error, result } = await userService.get(this.uniqueID);
-    if (ok) {
-      this.user = result.data.user;
-    }
-  },
   methods: {
     backgroundClickEvent(event) {
       if (event.target.classList.contains("drop-background")) {
@@ -112,8 +108,55 @@ export default {
     },
     formatAboutMe(string) {
       return messageFormatter(string);
+    },
+    capitalize(s){
+      if (typeof s !== 'string') return ''
+      return s.charAt(0).toUpperCase() + s.slice(1)
     }
   },
+  async mounted() {
+    const { ok, error, result } = await userService.get(this.uniqueID);
+    if (ok) {
+      this.user = result.data.user;
+    }
+  },
+  computed: {
+    aboutMe(){
+      const about_me = this.user.about_me
+      if (!about_me) return null;
+      if (about_me._id) delete about_me._id;
+      const arr = [];
+      for (let index in about_me) {
+        console.log(index)
+        const item = {key: this.capitalize(index.replace('_', " ")), name: about_me[index]};
+        if (item.name && item.name.length && item.name !== "Rather not say"){
+          if (surveyItems.constants[index]){
+            const i = surveyItems[surveyItems.constants[index]].find(i => i.name === item.name);
+            item.emoji = i ? this.emojiParse(i.emoji) : undefined; 
+          }
+          arr.push(item)
+        }
+      }
+      return arr
+    },
+    filteredBadges() {
+      if (!this.user.badges) return;
+        return this.user.badges.filter(b => this.badges[b])
+    },
+    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>
@@ -137,8 +180,7 @@ export default {
   color: white;
   display: flex;
   flex-direction: row;
-  overflow: auto;
-  background: rgba(0, 0, 0, 0.553);
+  background: rgba(22, 22, 22, 0.853);
   border-radius: 10px;
 
 }
@@ -152,7 +194,18 @@ export default {
   width: 100%;
   align-items: center;
   padding: 10px;
-  padding-top: 30px;
+  overflow: auto;
+}
+.scrollable {
+  margin-top: 5px;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  align-items: center;
+  overflow: auto;
+}
+.scrollable::-webkit-scrollbar {
+    width: 3px;
 }
 .profile {
   display: flex;
@@ -163,6 +216,10 @@ export default {
   align-items: center;
   align-content: center;
   padding-bottom: 10px;
+  flex-shrink: 0;
+  background: rgba(41, 41, 41, 0.697);
+  padding-top: 30px;
+  border-radius: 5px;
 }
 
 .uesrname-tag {
@@ -179,30 +236,65 @@ export default {
 }
 
 .button {
-  background: rgb(23, 151, 255);
-  padding: 8px;
+  padding: 8px; 
   align-self: center;
   border-radius: 5px;
   user-select: none;
   cursor: default;
+  transition: 0.3s;
+  position: relative;
+  z-index: 1;
+  cursor: pointer;
 }
+.button::after{
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgb(51, 163, 255);
+  z-index: -1;
+  border-radius: 5px;
+  opacity: 0.8;
+  transition: 0.3s;
+}
+.button.green::after {
+  background: rgb(0, 200, 84);
+}
+.button:hover::after {
+  opacity: 1;
+}
+
 .badges{
   display: flex;
   flex-direction: column;
   width: 100%;
-  margin-top: 10px;
+  margin-top: 3px;
   border-bottom: solid 1px rgba(255, 255, 255, 0.733);
   padding-bottom: 10px;
   user-select: none;
   cursor: default;
+  flex-shrink: 0
 }
-.badges .title {
+.actions {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 10px;
+
+  user-select: none;
+  cursor: default;
+  flex-shrink: 0
+}
+.title {
   font-size: 20px;
+  margin-bottom: 3px;
 }
 .badges-list{
   display: flex;
-  margin-top: 5px;
   flex-wrap: wrap;
+  flex-shrink: 0
 }
 .badge {
   border: solid 1px white;
@@ -210,6 +302,7 @@ export default {
   border-radius: 5px;
   margin: 3px;
   display: flex;
+  flex-shrink: 0
 }
 
 .badge div {
@@ -222,7 +315,89 @@ export default {
   width: 20px;
 }
 
-@media (max-width: 815px) {
-  
+.about-me{
+   display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 10px;
+  margin-bottom: 5px;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.733);
+  padding-bottom: 10px;
+  cursor: default;
+  flex-shrink: 0
 }
-</style>
\ No newline at end of file
+.about-item{
+  display: flex;
+  align-items: center;
+  background: rgba(47, 47, 47, 0.37);
+  margin: 2px;
+  border-radius: 5px;
+  padding: 10px;
+  flex-shrink: 0
+
+}
+.about-item .key {
+  color: rgb(0, 153, 255);
+}
+.about-item .name {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.about-item div {
+  align-self: center;
+  margin-right: 5px;
+}
+.infoAboutMe {
+  height: initial;
+  flex-direction: column;
+}
+.infoAboutMe .key {
+  align-self: flex-start;
+  margin-bottom: 5px;
+}
+.infoAboutMe .name {
+  align-self: center;
+  width: 100%;
+  word-wrap: break-word;
+  word-break: break-word;
+  white-space: pre-wrap;
+  text-overflow: none;
+  margin-right: 0;
+}
+
+.action-buttons {
+  display: flex;
+  align-self: center;
+}
+.action-buttons .button {
+  font-size: 12px;
+  text-align: center;
+  margin: 2px;
+  display: flex;
+  flex-direction: row;
+}
+
+.action-buttons .button .material-icons {
+  margin-right: 5px;
+  font-size: 18px;
+}
+.action-buttons .button div {
+  align-self: center;
+}
+.action-buttons .button.warn::after {
+  background: rgb(255, 53, 53);
+  border-radius: 5px;
+}
+@media (max-width: 352px) {
+  .box {
+    width: 100%;
+  }
+}
+</style>
+<style>
+  .emoji img {
+    height: 20px;
+    width: 20px; 
+  }
+</style>
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index d822122..4f96ee7 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -108,6 +108,7 @@ export default {
 <style scoped>
 .username{
   width: 201px;
+  white-space: nowrap; 
   overflow: hidden;
   text-overflow: ellipsis;
 }
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 91f4496..f8ba2cc 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -14,6 +14,18 @@
 
 const config = [
 
+  {
+    version: 5.6,
+    title: "Redesigned survey + user pop-out",
+    shortTitle: "",
+    date: "03/08/2019",
+    headColor: "rgba(79, 98, 255, 0.77)",
+    new: [
+      "Re-coded the survey. Note: since the survey is recoded, you will need to reselect some of the options.",
+      "Remove '13 or under' option in the survey.",
+      "Redesigned user information pop-out which now shows the badges for developer, creator and more."
+    ],
+  },
   {
     version: 5.6,
     title: "Bug fixes and redesigns",
diff --git a/src/utils/surveyItems.js b/src/utils/surveyItems.js
index eb5e8ee..bf7948f 100644
--- a/src/utils/surveyItems.js
+++ b/src/utils/surveyItems.js
@@ -1,4 +1,11 @@
 export default {
+  constants: {
+    gender: 'gender',
+    age: 'age',
+    continent: 'continents',
+    country: 'countries'
+
+  },
   gender: [
     { emoji: "👦🏻", name: "Male", code:"M" },
     { emoji: "👧🏼", name: "Female", code:"F"},