From e6e8afaa521e687f03c6272d11f828fe2860d923 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Sat, 20 Apr 2019 10:54:34 +0100
Subject: [PATCH] some changes

---
 .gitignore                                    |   1 +
 jsconfig.json                                 |  14 +-
 package-lock.json                             |  13 +
 package.json                                  |   1 +
 src/components/app/MessageTemplate.vue        |  33 ++-
 src/components/app/MyMiniInformation.vue      |  25 +-
 src/components/app/Settings.vue               |  24 +-
 .../app/SettingsPanels/DropDownTemplate.vue   | 139 ++++++++++
 .../app/SettingsPanels/ManageEmojis.vue       |   3 +-
 .../app/SettingsPanels/MessageDesign.vue      | 116 +++++++++
 .../app/SettingsPanels/MyProfile.vue          | 171 +++++++++++--
 .../app/relationships/FriendsTemplate.vue     |   1 +
 src/components/app/userInformationPopout.vue  |  34 ++-
 src/router.js                                 |  11 +-
 src/services/channelService.js                |   4 +-
 src/services/settingsService.js               |   5 +
 src/store/modules/messageModule.js            |  50 +++-
 src/store/modules/settingsModule.js           |  13 +-
 src/utils/changelog.js                        |   4 +-
 src/utils/surveyItems.js                      | 242 ++++++++++++++++++
 src/views/HomePage.vue                        |  26 +-
 21 files changed, 874 insertions(+), 56 deletions(-)
 create mode 100644 src/components/app/SettingsPanels/DropDownTemplate.vue
 create mode 100644 src/components/app/SettingsPanels/MessageDesign.vue
 create mode 100644 src/utils/surveyItems.js

diff --git a/.gitignore b/.gitignore
index 2b33ebe..a5da34d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 /dist
+/src/config.js
 
 # local env files
 .env.local
diff --git a/jsconfig.json b/jsconfig.json
index 8d26b9a..3a02644 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -1,10 +1,8 @@
 {
-	"compilerOptions": {
-		"baseUrl": ".",
-		"paths": {
-			"@/*": [
-				"src/*"
-			]
-		}
-	}
+    "compilerOptions": {
+        "baseUrl": ".",
+        "paths": {
+            "@/*": ["src/*"] 
+        }
+    }
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index cc9399b..5699f0c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10815,6 +10815,11 @@
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.0.2.tgz",
       "integrity": "sha512-opKtsxjp9eOcFWdp6xLQPLmRGgfM932Tl56U9chYTnoWqKxQ8M20N7AkdEbM5beUh6wICoFGYugAX9vQjyJLFg=="
     },
+    "vue-script2": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.0.3.tgz",
+      "integrity": "sha512-sGsFbqCIZDbPq140X1p8T6Y72MoCtkFpQ7CfhknZLqDZxMGWavFqIY/5YsnhqxxatWnYy0us/IoHSDr5l2JZzQ=="
+    },
     "vue-socket.io": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/vue-socket.io/-/vue-socket.io-3.0.4.tgz",
@@ -10865,6 +10870,14 @@
       "integrity": "sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==",
       "dev": true
     },
+    "vue-twitter": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/vue-twitter/-/vue-twitter-0.1.0.tgz",
+      "integrity": "sha512-qBHVaOjIX25rleBwHfNPsFpN6frxoz+cZNxXOyVRD20AdldpHhaXc3oKo7XNl6DBa5AkJl1jnU+rn3rKjfBm+A==",
+      "requires": {
+        "vue-script2": "^2.0.3"
+      }
+    },
     "vuex": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.0.1.tgz",
diff --git a/package.json b/package.json
index edaa1a8..fb5b832 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "vue-router": "^3.0.2",
     "vue-socket.io": "^3.0.4",
     "vue-socket.io-extended": "^3.2.0",
+    "vue-twitter": "^0.1.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 339d12e..187f65b 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -1,6 +1,8 @@
 <template>
-  <div :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID}">
-    <profile-picture :hover="true" :admin="$props.admin" :url="userAvatar" size="50px" @click.native="openUserInformation"/>
+  <div :class="{message: true,  ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} ">
+    <div class="outer-profile-picture">
+      <profile-picture :hover="true" :admin="$props.admin" :url="userAvatar" size="50px" @click.native="openUserInformation"/>
+    </div>
     <div class="triangle">
       <div class="triangle-inner"></div>
     </div>
@@ -39,6 +41,8 @@ import config from "@/config.js";
 import friendlyDate from "@/utils/date";
 import path from "path";
 
+import { mapState } from "vuex";
+
 export default {
   components: {
     ProfilePicture
@@ -62,6 +66,7 @@ export default {
     }
   },
   computed: {
+    ...mapState('settingsModule', ['apperance']),
     getImage() {
       if (!this.$props.files || this.$props.files.length === 0)
         return undefined;
@@ -114,6 +119,30 @@ export default {
 
 
 <style scoped>
+
+.ownMessageLeft  {
+  flex-direction: row-reverse;
+}
+
+.ownMessageLeft .triangle-inner {
+  transition: 0.5s;
+  border-left: 7px solid rgba(184, 184, 184, 0.219);
+  border-right: none !important;
+}
+.ownMessageLeft .profile-picture { 
+    margin-right: 0px;
+    margin-left: 5px;
+}
+.ownMessageLeft .sending-status{
+  margin-left: auto !important;
+  margin-right: 4px !important;
+}
+
+
+
+.outer-profile-picture{
+  z-index:9999;
+}
 .message {
   margin: 10px;
   margin-top: 10px;
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index 5486f6b..068b052 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -13,6 +13,11 @@
         </transition>
       </div>
     </div>
+    <div class="setting-icon survay-button" @click="openSettings">
+      <div class="survay-inner">
+        <i class="material-icons">error</i>
+      </div>
+    </div>
     <div class="setting-icon" @click="openSettings">
       <i class="material-icons">settings</i>
     </div>
@@ -80,7 +85,25 @@ export default {
 
 
 <style scoped>
-
+.survay-button {
+  padding: 10px;
+    height: 24px;
+  width: 24px;
+}
+.survay-inner {
+  display: inline-block;
+  box-shadow: 0px 0px 20px 3px cyan;
+  border-radius: 50%;
+}
+.survay-button .material-icons {
+  display: block;
+  margin-left: -3px !important;
+  margin-top: -3px !important;
+  height: 24px;
+  width: 24px;
+  font-size: 30px;
+  color: cyan;  
+ }
 
 .show-status-list-enter-active, .show-status-list-leave-active {
   transition: .1s;
diff --git a/src/components/app/Settings.vue b/src/components/app/Settings.vue
index 5ab1a5b..ac908d8 100644
--- a/src/components/app/Settings.vue
+++ b/src/components/app/Settings.vue
@@ -32,10 +32,12 @@
 import { bus } from "../../main";
 import MyProfile from "./SettingsPanels/MyProfile.vue";
 import ManageEmojis from "./SettingsPanels/ManageEmojis.vue";
+import MessageDesign from "./SettingsPanels/MessageDesign.vue";
 export default {
   components: {
     MyProfile,
-    ManageEmojis
+    ManageEmojis,
+    MessageDesign
   },
   data() {
     return {
@@ -48,10 +50,10 @@ export default {
           component: "my-profile"
         },
         {
-          name: "Message Themes",
-          tabName: "Coming soon!",
+          name: "Message Design",
+          tabName: "Message Design",
           icon: "palette",
-          component: "ddddsd"
+          component: "message-design"
         },
         {
           name: "Manage Emojis",
@@ -87,26 +89,31 @@ export default {
   color: white;
 }
 .settings-box {
+  height: 600px;
   display: flex;
   margin: auto;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
 }
 .tabs {
   background: rgba(24, 24, 24, 0.938);
-  height: 600px;
+  height: 100%;
   width: 200px;
+  min-width: 150px;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 .panel {
   display: flex;
   flex-direction: column;
   background: rgba(31, 31, 31, 0.924);
-  height: 600px;
+  height: 100%;
   width: 600px;
 }
 .tab {
   display: flex;
   padding: 10px;
   background: rgba(26, 26, 26, 0.233);
+  border-radius: 5px;
   margin-top: 5px;
   margin-bottom: 5px;
   cursor: default;
@@ -162,5 +169,10 @@ export default {
     width: 100%;
   }
 }
+@media (max-height: 609px) {
+  .settings-box {
+    height: 100%;
+  }
+}
 </style>
 
diff --git a/src/components/app/SettingsPanels/DropDownTemplate.vue b/src/components/app/SettingsPanels/DropDownTemplate.vue
new file mode 100644
index 0000000..7ed0d79
--- /dev/null
+++ b/src/components/app/SettingsPanels/DropDownTemplate.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="drop-down">
+    <div class="main-name">{{name}}</div>
+    <div class="box" @click="opened = !opened">
+      <div class="selected" >
+        <div class="emoji" v-if="selected !== null && updateItems[selected]" v-html="updateItems[selected].emoji || ''"></div>
+        {{selected === null ? 'Select One' : updateItems[selected].name}}
+      </div>
+      <i class="material-icons">expand_more</i>
+    </div>
+    <div class="drop-down-menu" v-if="opened">
+      <div
+        class="item"
+        v-for="(item, index) in updateItems"
+        :key="index"
+        @click="itemClickEvent(index)"
+      >
+        <div class="content">
+          <div class="emoji" v-html="item.emoji"></div>
+          <div class="name">{{item.name}}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import emojiParser from "@/utils/emojiParser.js";
+import { constants } from 'crypto';
+export default {
+  model: {
+    prop: "itemSelected",
+    event: "change"
+  },
+  props: ["items", "name", "itemSelected", "default"], // items: [{emoji, name}...]
+  data() {
+    return {
+      opened: false,
+      selected: this.default || null
+    };
+  },
+  methods: {
+    itemClickEvent(index) {
+      this.selected = index;
+      this.$emit("change", index);
+      this.opened = false;
+    }
+  },
+  computed: {
+    updateItems() {
+			this.$emit("change", null);
+			this.selected = null;
+      let newArr = [];
+      for (let index = 0; index < this.items.length; index++) {
+				let element = this.items[index];
+				if (element.emoji) {
+					if (element.emoji.startsWith("<img")) return this.items
+					element.emoji = emojiParser.replaceEmojis(element.emoji);
+					newArr.push(element);
+				} else {
+					element.emoji = ""
+					newArr.push(element);
+				}
+      }
+      return newArr;
+    }
+  }
+};
+</script>
+
+<style scoped>
+.material-icons {
+  margin-right: 10px;
+}
+.main-name {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+.drop-down {
+  width: 220px;
+  user-select: none;
+  cursor: default;
+  position: relative;
+}
+
+.box {
+  width: 100%;
+  height: 44px;
+  background: rgba(61, 61, 61, 0.863);
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+  align-items: center;
+}
+
+.selected {
+  flex: 1;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin-left: 10px;
+}
+
+.drop-down-menu {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  background: rgba(24, 24, 24, 0.945);
+  max-height: 200px;
+  width: 220px;
+  overflow: auto;
+}
+.item {
+  width: 100%;
+  margin-top: 2px;
+  margin-bottom: 2px;
+  transition: 0.3s;
+}
+.item:hover {
+  background: rgba(15, 15, 15, 0.726);
+}
+.content {
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin: 3px;
+}
+.emoji {
+  margin-right: 5px;
+}
+</style>
+
+<style>
+.drop-down-menu img {
+  height: 20px !important;
+  width: 20px !important;
+}
+</style>
+ 
diff --git a/src/components/app/SettingsPanels/ManageEmojis.vue b/src/components/app/SettingsPanels/ManageEmojis.vue
index 35205d7..8d885d9 100644
--- a/src/components/app/SettingsPanels/ManageEmojis.vue
+++ b/src/components/app/SettingsPanels/ManageEmojis.vue
@@ -210,6 +210,7 @@ input:focus {
   flex-direction: column;
   width: 100%;
   height: 100%;
+  margin-bottom: 20px;
 }
 
 .emojis-list {
@@ -218,7 +219,7 @@ input:focus {
   background: rgba(47, 47, 47, 0.767);
   overflow-y: auto;
   overflow-x: hidden;
-  height: calc(100% - 120px);
+  height: 100%;
   width: calc(100% - 30px);
   margin: auto;
   margin-top: 5px;
diff --git a/src/components/app/SettingsPanels/MessageDesign.vue b/src/components/app/SettingsPanels/MessageDesign.vue
new file mode 100644
index 0000000..96cc7fc
--- /dev/null
+++ b/src/components/app/SettingsPanels/MessageDesign.vue
@@ -0,0 +1,116 @@
+<template>
+  <div class="my-profile-panel">
+    <div class="title">Message Example</div>
+    <div class="message-example">
+      <message-template message="Hi" :username="user.username" :date="Date.now()" :uniqueID="user.uniqueID" :admin="user.admin" :avatar="user.avatar" />
+      <message-template message="Hello." username="Cool Dude" :date="Date.now()"/>
+      <message-template message="Whaddup" :username="user.username" :date="Date.now()" :uniqueID="user.uniqueID" :admin="user.admin" :avatar="user.avatar" />
+      <message-template message="Nothing, bye." username="Cool Dude" :date="Date.now()"/>
+    </div>
+    <div class="title">Options</div>  
+    <div class="switches">
+      <div class="checkbox" @click="toggleAppearance">
+        <div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`"></div>
+        <div class="checkbox-name">Show my messages on the right side.</div>
+      </div>
+    </div>
+    <div class="title">Message Themes (Soon!)</div>  
+  </div>
+</template>
+
+<script>
+
+import config from "@/config.js";
+import MessageTemplate from '@/components/app/MessageTemplate.vue';
+import SettingsService from '@/services/settingsService.js';
+
+import { mapState } from "vuex";
+
+export default {
+  components: {
+    MessageTemplate
+  },
+  data() {
+    return {
+
+    };
+  },
+  methods: {
+    toggleAppearance() {
+      if (!this.apperance || !this.apperance.own_message_right || this.apperance.own_message_right === false) {
+        this.$store.dispatch('settingsModule/setApperance', {"own_message_right": true})
+        return SettingsService.setApperance("own_message_right", true)
+      }
+      this.$store.dispatch('settingsModule/setApperance', {"own_message_right": false})
+      SettingsService.setApperance("own_message_right", false)
+
+    }
+  },
+  computed: {
+    ...mapState('settingsModule', ['apperance']),
+    user() {
+      return this.$store.getters.user
+    }
+  }
+};
+</script>
+<style scoped>
+
+.switches {
+  display: flex;
+  margin: 20px;
+  user-select: none;
+}
+
+.checkbox {
+  display: flex;
+}
+.checkbox-box {
+  background: rgba(88, 88, 88, 0.74);
+  height: 20px;
+  width: 20px;
+  margin: auto;
+  margin-right: 10px;
+  transition: 0.3s;
+  border-radius: 5px;
+}
+
+.checkbox-box.selected {
+  background: rgba(66, 122, 244, 0.74);
+}
+
+.checkbox-box.selected:hover {
+  background: rgba(66, 122, 244, 0.94);
+}
+
+.checkbox-box:hover {
+  background: rgba(88, 88, 88, 0.94);
+}
+.checkbox-name {
+  max-width: 200px;
+}
+
+.message-example{
+  padding: 10px;
+  background: rgba(88, 88, 88, 0.44);
+  border-radius: 10px;
+  margin: 10px;
+}
+.title{
+  font-size: 20px;
+  text-align: center;
+  margin-bottom: 5px;
+}
+
+.hidden {
+  display: none;
+}
+.my-profile-panel {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  margin-top: 10px;
+  flex-direction: column;
+}
+
+</style>
diff --git a/src/components/app/SettingsPanels/MyProfile.vue b/src/components/app/SettingsPanels/MyProfile.vue
index 9163a27..8814bcc 100644
--- a/src/components/app/SettingsPanels/MyProfile.vue
+++ b/src/components/app/SettingsPanels/MyProfile.vue
@@ -1,23 +1,88 @@
 <template>
   <div class="my-profile-panel">
-    <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>
-        {{user.username}}
+    <div class="general-information">
+      <div class="profile-picture-outer">
+        <profile-picture
+          :url="avatar"
+          :admin="user.admin"
+          size="100px"
+          emoteSize="30px"
+          animationPadding="5px"
+        />
       </div>
-      <div class="tag">
-        <strong>Tag:</strong>
-        @{{user.tag}}
+      <div class="information">
+        <div class="username">
+          <strong>Username:</strong>
+          {{user.username}}
+        </div>
+        <div class="tag">
+          <strong>Tag:</strong>
+          @{{user.tag}}
+        </div>
+      </div>
+      <div class="options">
+        <input
+          type="file"
+          accept="image/*"
+          ref="avatarBrowser"
+          @change="avatarBrowse"
+          class="hidden"
+        >
+        <div class="option" @click="editAvatarBtn">Edit Avatar</div>
+        <div class="option" @click="changePassword">Change Password</div>
+        <div class="option red" @click="logout">Logout</div>
       </div>
     </div>
-    <div class="options">
-      <input type="file" accept="image/*" ref="avatarBrowser" @change="avatarBrowse" class="hidden">
-      <div class="option" @click="editAvatarBtn">Edit Avatar</div>
-      <div class="option" @click="changePassword">Change Password</div>
-      <div class="option red" @click="logout">Logout</div>
+    <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">
+      <!-- name -->
+      <div>
+        <div class="survey-title">What's your name?</div>
+        <input
+          class="survey-input"
+          v-model="surveySelectedItems.name"
+          type="text"
+          placeholder="Name"
+        >
+      </div>
+      <!-- Gender -->
+      <div class="survey-box">
+        <drop-down
+          name="What is your gender?"
+          v-model="surveySelectedItems.gender"
+          :items="surveyItems.gender"
+        />
+      </div>
+      <!-- Age -->
+      <div class="survey-box">
+        <drop-down
+          name="What is your age?"
+          v-model="surveySelectedItems.age"
+          :items="surveyItems.age"
+        />
+      </div>
+      <!-- Continent -->
+      <div class="survey-box">
+        <drop-down
+          name="Pick a continent"
+          v-model="surveySelectedItems.continent"
+          :items="surveyItems.continents"
+        />
+      </div>
+      <!-- Countries -->
+      <div class="survey-box">
+        <drop-down
+          name="Pick a country"
+          v-if="surveySelectedItems.continent != null"
+          v-model="surveySelectedItems.countries"
+          :items="filterCountry"
+        />
+      </div>
     </div>
     <div class="alert-outer" v-if="alert.show">
       <div class="alert">
@@ -32,7 +97,9 @@
 </template>
 
 <script>
+import surveyItems from "@/utils/surveyItems.js";
 import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
+import DropDown from "@/components/app/SettingsPanels/DropDownTemplate.vue";
 import AvatarUpload from "@/services/AvatarUpload.js";
 import config from "@/config.js";
 import { bus } from "@/main";
@@ -41,10 +108,19 @@ import { mapState } from "vuex";
 
 export default {
   components: {
-    ProfilePicture
+    ProfilePicture,
+    DropDown
   },
   data() {
     return {
+      surveyItems,
+      surveySelectedItems: {
+        name: "",
+        gender: null,
+        age: null,
+        continent: null,
+        countries: null
+      },
       alert: {
         content: "",
         show: false
@@ -102,6 +178,16 @@ export default {
   },
   computed: {
     ...mapState("settingsModule", ["GDriveLinked"]),
+    filterCountry() {
+      const selectedContinentIndex = this.surveySelectedItems.continent;
+      const selectedContinent = this.surveyItems.continents[
+        selectedContinentIndex
+      ];
+      const code = selectedContinent.code;
+      return this.surveyItems.countries.filter(element => {
+        return element.code == code;
+      });
+    },
     user() {
       return this.$store.getters.user;
     },
@@ -112,16 +198,60 @@ export default {
 };
 </script>
 <style scoped>
+.notice {
+  color: grey;
+  font-size: 15px;
+  margin-top: 20px;
+  margin-left: 30px;
+}
+
+.survey-title {
+  margin-top: 10px;
+}
+.survey {
+  display: flex;
+  margin: auto;
+  margin-top: 10px;
+  flex-flow: row wrap;
+  flex-direction: column;
+}
+
+.survey-input {
+  height: 24px;
+  padding: 10px;
+  background: rgba(61, 61, 61, 0.863);
+  margin-top: 5px;
+}
+
+.title {
+  margin-top: 30px;
+  display: flex;
+  align-content: center;
+  align-items: center;
+  margin-left: 25px;
+  font-size: 20px;
+}
+.title .material-icons {
+  color: cyan;
+  margin-right: 10px;
+  font-size: 30px;
+}
 .hidden {
   display: none;
 }
 .my-profile-panel {
   display: flex;
   width: 100%;
-  height: 100px;
-  margin-top: 10px;
+  height: 100%;
+  flex-direction: column;
+  overflow: auto;
 }
-.profile-picture-outer{
+.general-information {
+  display: flex;
+  width: 100%;
+  margin-top: 20px;
+}
+.profile-picture-outer {
   display: flex;
   z-index: 99999;
 }
@@ -209,7 +339,8 @@ export default {
   background: rgb(83, 53, 53);
 }
 @media (max-width: 815px) {
-  .my-profile-panel {
+  .general-information {
+    display: block;
     flex-direction: column;
   }
   .profile-picture {
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 1bbf6f4..f964cda 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -35,6 +35,7 @@ export default {
         this.$socket.emit('notification:dismiss', {channelID: this.channelID});
       }
       this.$store.dispatch('openChat', {
+        uniqueID: this.recipient.uniqueID,
         channelID: this.channelID,
         channelName: this.recipient.username
       })
diff --git a/src/components/app/userInformationPopout.vue b/src/components/app/userInformationPopout.vue
index 51d07b9..1d21dbd 100644
--- a/src/components/app/userInformationPopout.vue
+++ b/src/components/app/userInformationPopout.vue
@@ -43,6 +43,10 @@
           </div>
         </div>
       </div>
+      <div class="about-me-box">
+        <spinner v-if="!user"/>
+        <div class="title" v-else>About {{user.username}}</div>
+      </div>
     </div>
   </div>
 </template>
@@ -85,7 +89,7 @@ export default {
     openChat() {
       // todo: find from friends array and later, create new channels for people who are not friends.
       this.$store.dispatch("openChat", {
-        channelID: this.channelID,
+        uniqueID: this.uniqueID,
         channelName: this.user.username
       });
     }
@@ -113,6 +117,23 @@ export default {
 };
 </script>
 <style scoped>
+
+.about-me-box{
+  display: flex;
+  flex-direction: column;
+  background: rgba(31, 31, 31, 0.704);
+  width: 300px;
+  border-radius: 10px;
+  overflow: hidden;
+  margin-left: 10px;
+}
+
+.title {
+  padding-top: 10px;
+  font-size: 20px;
+  text-align: center;
+}
+
 .drop-background {
   position: absolute;
   background: rgba(0, 0, 0, 0.521);
@@ -126,20 +147,21 @@ export default {
 .box {
   margin: auto;
   height: 330px;
-  width: 500px;
-  background: rgba(31, 31, 31, 0.904);
-  border-radius: 5px;
+  width: initial;
   color: white;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   user-select: none;
   overflow: hidden;
 }
 .inner {
+  background: rgba(31, 31, 31, 0.904);
   display: flex;
   height: 100%;
-  width: 100%;
+  width: 500px;
   flex-direction: column;
+  border-radius: 10px;
+  overflow: hidden;
 }
 .top {
   display: flex;
diff --git a/src/router.js b/src/router.js
index 91c5840..e1ca1a2 100644
--- a/src/router.js
+++ b/src/router.js
@@ -2,14 +2,19 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 Vue.use(VueRouter)
 import {store} from './store/index';
-import MainApp from '../src/views/App.vue'
-import HomePage from '../src/views/HomePage.vue'
-import GDriveCallback from '../src/views/GDriveCallback.vue';
 import VueSocketio from 'vue-socket.io-extended';
 import io from 'socket.io-client';
 import config from './config'
 import VueMq from 'vue-mq'
 
+import MainApp from '../src/views/App.vue'
+import HomePage from '../src/views/HomePage.vue'
+import GDriveCallback from '../src/views/GDriveCallback.vue';
+
+// const MainApp = () => import('../src/views/App.vue');
+// const HomePage = () => import('../src/views/HomePage.vue');
+// const GDriveCallback = () => import( '../src/views/GDriveCallback.vue');
+
 export const router = new VueRouter({
   mode: 'history',
   routes: [
diff --git a/src/services/channelService.js b/src/services/channelService.js
index faa7258..6b41018 100644
--- a/src/services/channelService.js
+++ b/src/services/channelService.js
@@ -1,7 +1,7 @@
 import {instance, wrapper} from './Api';
 
 export default {
-  post ( channelID )  {
-    return wrapper(instance().post(`channels/${channelID}`));
+  post ( uniqueID )  {
+    return wrapper(instance().post(`channels/${ uniqueID }`));
   }
 }
\ No newline at end of file
diff --git a/src/services/settingsService.js b/src/services/settingsService.js
index 9b5b318..6d8017f 100644
--- a/src/services/settingsService.js
+++ b/src/services/settingsService.js
@@ -9,5 +9,10 @@ export default {
   },
   GDriveAuth (code) {
     return wrapper(instance().post('/settings/drive/auth', {code}));
+  },
+  setApperance (apperance, boolean) {
+    return wrapper(instance().put('/settings/apperance', {
+      [apperance]: boolean
+    }));
   }
 }
\ No newline at end of file
diff --git a/src/store/modules/messageModule.js b/src/store/modules/messageModule.js
index d06b158..795c298 100644
--- a/src/store/modules/messageModule.js
+++ b/src/store/modules/messageModule.js
@@ -15,7 +15,53 @@ const getters = {
 };
 
 const actions = {
-  async openChat(context, { channelID, channelName }) {
+  async openChat(context, { uniqueID, channelID, channelName }) {
+
+    if (channelName) context.commit("setChannelName", channelName);
+
+    const channels = context.rootState.channelModule.channels;
+    channelID = Object.keys(channels).find(_channelID => {
+      return channels[_channelID].recipients[0].uniqueID === uniqueID
+    })
+    const messages = context.state.messages[channelID];
+    const channel = channels[channelID];
+    
+    if (channelID) {
+      context.commit("selectedChannelID", channelID); 
+    } else {
+      context.commit("selectedChannelID", "Loading");
+    }
+
+    if (messages) return;
+    if (channel && !messages) return getMessages(channelID);
+
+
+    const { ok, error, result } = await channelService.post(uniqueID);
+    if (ok) {
+      context.commit("channel", result.data.channel);
+      getMessages(result.data.channel.channelID);
+    } else {
+      // TODO handle this
+      console.log(error);
+    }
+
+    async function getMessages(channelID) {
+      const { ok, error, result } = await messagesService.get(channelID);
+      if (ok) {
+        context.commit("selectedChannelID", channelID);
+        context.commit("messages", {
+          channelID: result.data.channelID,
+          messages: result.data.messages.reverse()
+        });
+      } else {
+        // TODO handle this
+        console.log(error.response);
+      }
+    }
+  },
+
+  // OLD STUFF
+  async openddChat(context, { channelID, channelName }) {
     context.commit("selectedChannelID", channelID);
     if (channelName) context.commit("setChannelName", channelName);
 
@@ -66,7 +112,7 @@ const actions = {
 
 const mutations = {
   messages(state, data) {
-    Vue.set(state.messages, data.channelID, data.messages.reverse());
+    Vue.set(state.messages, data.channelID, data.messages);
   },
   addMessage(state, data) {
     bus.$emit("newMessage", data);
diff --git a/src/store/modules/settingsModule.js b/src/store/modules/settingsModule.js
index 9817ce4..f164752 100644
--- a/src/store/modules/settingsModule.js
+++ b/src/store/modules/settingsModule.js
@@ -8,7 +8,8 @@ import {
 const state = {
 	GDriveLinked: false,
 	customEmojis: [],
-	recentEmojis: JSON.parse(localStorage.getItem('recentEmojis')) || []
+	recentEmojis: JSON.parse(localStorage.getItem('recentEmojis')) || [],
+	apperance: {}
 }
 
 const getters = {
@@ -70,11 +71,19 @@ const actions = {
 	setCustomEmojis({commit}, customEmojis) {
 		commit('setCustomEmojis', customEmojis)
 	},
+	setApperance({commit}, data) {
+		commit('setApperance', data)
+	}
 }
 
 const mutations = {
+	setApperance(state, data) {
+		const apperance = state.apperance || {};
+		apperance[Object.keys(data)[0]] = data[Object.keys(data)[0]]
+		state['apperance']  = apperance
+	},
 	setSettings(state, settings) {
-		state = Object.assign(state, settings)
+		Vue.set(state, Object.assign(state, settings))
 	},
 	GoogleDriveLinked(state, status) {
 		Vue.set(state, 'GDriveLinked', status)
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index cf7a030..39085e9 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -8,7 +8,9 @@ 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.",
+      "Added an option to display your messages on the right and other messages to the left.",
+      "Added users information page which allows you to block, End friendship, message someone and view their information.",
+      "Replaced 'Sending' and 'Sent' with icons."
     ],
     fix: ["Some formatting issues with custom emojis have been fixed."],
     next: ['link previews.']
diff --git a/src/utils/surveyItems.js b/src/utils/surveyItems.js
new file mode 100644
index 0000000..6ae0c2d
--- /dev/null
+++ b/src/utils/surveyItems.js
@@ -0,0 +1,242 @@
+export default {
+  gender: [
+    { emoji: "👦🏻", name: "Male" },
+    { emoji: "👧🏼", name: "Female" },
+    { emoji: "😶", name: "Rather not say" }
+  ],
+  age: [
+    { emoji: "", name: "13 or under" },
+    { emoji: "", name: "14-16" },
+    { emoji: "", name: "17-19" },
+    { emoji: "", name: "20 or above" },
+    { emoji: "😶", name: "Rather not say" }
+  ],
+  continents: [
+    { name: "Europe", emoji: "🍃", code: "EU" },
+    { name: "Asia", emoji: "🍜", code: "AS" },
+    { name: "North America", emoji: "🍟", code: "NA" },
+    { name: "South America", emoji: "🌴", code: "SA" },
+    { name: "Africa", emoji: "🦘", code: "AF" },
+  ],
+
+  countries: [
+    { name: "Andorra", emoji: "🇦🇩", code: "EU" },
+    { name: "United Arab Emirates", emoji: "🇦🇪", code: "AS" },
+    { name: "Afghanistan", emoji: "🇦🇫", code: "AS" },
+    { name: "Antigua and Barbuda", emoji: "🇦🇬", code: "NA" },
+    { name: "Anguilla", emoji: "🇦🇮", code: "NA" },
+    { name: "Albania", emoji: "🇦🇱", code: "EU" },
+    { name: "Armenia", emoji: "🇦🇲", code: "AS" },
+    { name: "Angola", emoji: "🇦🇴", code: "AF" },
+    { name: "Argentina", emoji: "🇦🇷", code: "SA" },
+    { name: "Austria", emoji: "🇦🇹", code: "EU" },
+    { name: "Aruba", emoji: "🇦🇼", code: "NA" },
+    { name: "Åland", emoji: "🇦🇽", code: "EU" },
+    { name: "Azerbaijan", emoji: "🇦🇿", code: "AS" },
+    { name: "Bosnia and Herzegovina", emoji: "🇧🇦", code: "EU" },
+    { name: "Barbados", emoji: "🇧🇧", code: "NA" },
+    { name: "Bangladesh", emoji: "🇧🇩", code: "AS" },
+    { name: "Belgium", emoji: "🇧🇪", code: "EU" },
+    { name: "Burkina Faso", emoji: "🇧🇫", code: "AF" },
+    { name: "Bulgaria", emoji: "🇧🇬", code: "EU" },
+    { name: "Bahrain", emoji: "🇧🇭", code: "AS" },
+    { name: "Burundi", emoji: "🇧🇮", code: "AF" },
+    { name: "Benin", emoji: "🇧🇯", code: "AF" },
+    { name: "Saint Barthélemy", emoji: "🇧🇱", code: "NA" },
+    { name: "Bermuda", emoji: "🇧🇲", code: "NA" },
+    { name: "Brunei", emoji: "🇧🇳", code: "AS" },
+    { name: "Bolivia", emoji: "🇧🇴", code: "SA" },
+    { name: "Bonaire", emoji: "🇧🇶", code: "NA" },
+    { name: "Brazil", emoji: "🇧🇷", code: "SA" },
+    { name: "Bahamas", emoji: "🇧🇸", code: "NA" },
+    { name: "Bhutan", emoji: "🇧🇹", code: "AS" },
+    { name: "Botswana", emoji: "🇧🇼", code: "AF" },
+    { name: "Belarus", emoji: "🇧🇾", code: "EU" },
+    { name: "Belize", emoji: "🇧🇿", code: "NA" },
+    { name: "Canada", emoji: "🇨🇦", code: "NA" },
+    { name: "Cocos [Keeling] Islands", emoji: "🇨🇨", code: "AS" },
+    { name: "Democratic Republic of the Congo", emoji: "🇨🇩", code: "AF" },
+    { name: "Central African Republic", emoji: "🇨🇫", code: "AF" },
+    { name: "Republic of the Congo", emoji: "🇨🇬", code: "AF" },
+    { name: "Switzerland", emoji: "🇨🇭", code: "EU" },
+    { name: "Ivory Coast", emoji: "🇨🇮", code: "AF" },
+    { name: "Chile", emoji: "🇨🇱", code: "SA" },
+    { name: "Cameroon", emoji: "🇨🇲", code: "AF" },
+    { name: "China", emoji: "🇨🇳", code: "AS" },
+    { name: "Colombia", emoji: "🇨🇴", code: "SA" },
+    { name: "Costa Rica", emoji: "🇨🇷", code: "NA" },
+    { name: "Cuba", emoji: "🇨🇺", code: "NA" },
+    { name: "Cape Verde", emoji: "🇨🇻", code: "AF" },
+    { name: "Curacao", emoji: "🇨🇼", code: "NA" },
+    { name: "Christmas Island", emoji: "🇨🇽", code: "AS" },
+    { name: "Cyprus", emoji: "🇨🇾", code: "EU" },
+    { name: "Czech Republic", emoji: "🇨🇿", code: "EU" },
+    { name: "Germany", emoji: "🇩🇪", code: "EU" },
+    { name: "Djibouti", emoji: "🇩🇯", code: "AF" },
+    { name: "Denmark", emoji: "🇩🇰", code: "EU" },
+    { name: "Dominica", emoji: "🇩🇲", code: "NA" },
+    { name: "Dominican Republic", emoji: "🇩🇴", code: "NA" },
+    { name: "Algeria", emoji: "🇩🇿", code: "AF" },
+    { name: "Ecuador", emoji: "🇪🇨", code: "SA" },
+    { name: "Estonia", emoji: "🇪🇪", code: "EU" },
+    { name: "Egypt", emoji: "🇪🇬", code: "AF" },
+    { name: "Western Sahara", emoji: "🇪🇭", code: "AF" },
+    { name: "Eritrea", emoji: "🇪🇷", code: "AF" },
+    { name: "Spain", emoji: "🇪🇸", code: "EU" },
+    { name: "Ethiopia", emoji: "🇪🇹", code: "AF" },
+    { name: "Finland", emoji: "🇫🇮", code: "EU" },
+    { name: "Falkland Islands", emoji: "🇫🇰", code: "SA" },
+    { name: "Faroe Islands", emoji: "🇫🇴", code: "EU" },
+    { name: "France", emoji: "🇫🇷", code: "EU" },
+    { name: "Gabon", emoji: "🇬🇦", code: "AF" },
+    { name: "United Kingdom", emoji: "🇬🇧", code: "EU" },
+    { name: "Grenada", emoji: "🇬🇩", code: "NA" },
+    { name: "Georgia", emoji: "🇬🇪", code: "AS" },
+    { name: "French Guiana", emoji: "🇬🇫", code: "SA" },
+    { name: "Guernsey", emoji: "🇬🇬", code: "EU" },
+    { name: "Ghana", emoji: "🇬🇭", code: "AF" },
+    { name: "Gibraltar", emoji: "🇬🇮", code: "EU" },
+    { name: "Greenland", emoji: "🇬🇱", code: "NA" },
+    { name: "Gambia", emoji: "🇬🇲", code: "AF" },
+    { name: "Guinea", emoji: "🇬🇳", code: "AF" },
+    { name: "Guadeloupe", emoji: "🇬🇵", code: "NA" },
+    { name: "Equatorial Guinea", emoji: "🇬🇶", code: "AF" },
+    { name: "Greece", emoji: "🇬🇷", code: "EU" },
+    { name: "Guatemala", emoji: "🇬🇹", code: "NA" },
+    { name: "Guinea-Bissau", emoji: "🇬🇼", code: "AF" },
+    { name: "Guyana", emoji: "🇬🇾", code: "SA" },
+    { name: "Hong Kong", emoji: "🇭🇰", code: "AS" },
+    { name: "Honduras", emoji: "🇭🇳", code: "NA" },
+    { name: "Croatia", emoji: "🇭🇷", code: "EU" },
+    { name: "Haiti", emoji: "🇭🇹", code: "NA" },
+    { name: "Hungary", emoji: "🇭🇺", code: "EU" },
+    { name: "Indonesia", emoji: "🇮🇩", code: "AS" },
+    { name: "Ireland", emoji: "🇮🇪", code: "EU" },
+    { name: "Israel", emoji: "🇮🇱", code: "AS" },
+    { name: "Isle of Man", emoji: "🇮🇲", code: "EU" },
+    { name: "India", emoji: "🇮🇳", code: "AS" },
+    { name: "British Indian Ocean Territory", emoji: "🇮🇴", code: "AS" },
+    { name: "Iraq", emoji: "🇮🇶", code: "AS" },
+    { name: "Iran", emoji: "🇮🇷", code: "AS" },
+    { name: "Iceland", emoji: "🇮🇸", code: "EU" },
+    { name: "Italy", emoji: "🇮🇹", code: "EU" },
+    { name: "Jersey", emoji: "🇯🇪", code: "EU" },
+    { name: "Jamaica", emoji: "🇯🇲", code: "NA" },
+    { name: "Jordan", emoji: "🇯🇴", code: "AS" },
+    { name: "Japan", emoji: "🇯🇵", code: "AS" },
+    { name: "Kenya", emoji: "🇰🇪", code: "AF" },
+    { name: "Kyrgyzstan", emoji: "🇰🇬", code: "AS" },
+    { name: "Cambodia", emoji: "🇰🇭", code: "AS" },
+    { name: "Comoros", emoji: "🇰🇲", code: "AF" },
+    { name: "Saint Kitts and Nevis", emoji: "🇰🇳", code: "NA" },
+    { name: "North Korea", emoji: "🇰🇵", code: "AS" },
+    { name: "South Korea", emoji: "🇰🇷", code: "AS" },
+    { name: "Kuwait", emoji: "🇰🇼", code: "AS" },
+    { name: "Cayman Islands", emoji: "🇰🇾", code: "NA" },
+    { name: "Kazakhstan", emoji: "🇰🇿", code: "AS" },
+    { name: "Laos", emoji: "🇱🇦", code: "AS" },
+    { name: "Lebanon", emoji: "🇱🇧", code: "AS" },
+    { name: "Saint Lucia", emoji: "🇱🇨", code: "NA" },
+    { name: "Liechtenstein", emoji: "🇱🇮", code: "EU" },
+    { name: "Sri Lanka", emoji: "🇱🇰", code: "AS" },
+    { name: "Liberia", emoji: "🇱🇷", code: "AF" },
+    { name: "Lesotho", emoji: "🇱🇸", code: "AF" },
+    { name: "Lithuania", emoji: "🇱🇹", code: "EU" },
+    { name: "Luxembourg", emoji: "🇱🇺", code: "EU" },
+    { name: "Latvia", emoji: "🇱🇻", code: "EU" },
+    { name: "Libya", emoji: "🇱🇾", code: "AF" },
+    { name: "Morocco", emoji: "🇲🇦", code: "AF" },
+    { name: "Monaco", emoji: "🇲🇨", code: "EU" },
+    { name: "Moldova", emoji: "🇲🇩", code: "EU" },
+    { name: "Montenegro", emoji: "🇲🇪", code: "EU" },
+    { name: "Saint Martin", emoji: "🇲🇫", code: "NA" },
+    { name: "Madagascar", emoji: "🇲🇬", code: "AF" },
+    { name: "Macedonia", emoji: "🇲🇰", code: "EU" },
+    { name: "Mali", emoji: "🇲🇱", code: "AF" },
+    { name: "Myanmar [Burma]", emoji: "🇲🇲", code: "AS" },
+    { name: "Mongolia", emoji: "🇲🇳", code: "AS" },
+    { name: "Macao", emoji: "🇲🇴", code: "AS" },
+    { name: "Martinique", emoji: "🇲🇶", code: "NA" },
+    { name: "Mauritania", emoji: "🇲🇷", code: "AF" },
+    { name: "Montserrat", emoji: "🇲🇸", code: "NA" },
+    { name: "Malta", emoji: "🇲🇹", code: "EU" },
+    { name: "Mauritius", emoji: "🇲🇺", code: "AF" },
+    { name: "Maldives", emoji: "🇲🇻", code: "AS" },
+    { name: "Malawi", emoji: "🇲🇼", code: "AF" },
+    { name: "Mexico", emoji: "🇲🇽", code: "NA" },
+    { name: "Malaysia", emoji: "🇲🇾", code: "AS" },
+    { name: "Mozambique", emoji: "🇲🇿", code: "AF" },
+    { name: "Namibia", emoji: "🇳🇦", code: "AF" },
+    { name: "Niger", emoji: "🇳🇪", code: "AF" },
+    { name: "Nigeria", emoji: "🇳🇬", code: "AF" },
+    { name: "Nicaragua", emoji: "🇳🇮", code: "NA" },
+    { name: "Netherlands", emoji: "🇳🇱", code: "EU" },
+    { name: "Norway", emoji: "🇳🇴", code: "EU" },
+    { name: "Nepal", emoji: "🇳🇵", code: "AS" },
+    { name: "Oman", emoji: "🇴🇲", code: "AS" },
+    { name: "Panama", emoji: "🇵🇦", code: "NA" },
+    { name: "Peru", emoji: "🇵🇪", code: "SA" },
+    { name: "Philippines", emoji: "🇵🇭", code: "AS" },
+    { name: "Pakistan", emoji: "🇵🇰", code: "AS" },
+    { name: "Poland", emoji: "🇵🇱", code: "EU" },
+    { name: "Saint Pierre and Miquelon", emoji: "🇵🇲", code: "NA" },
+    { name: "Puerto Rico", emoji: "🇵🇷", code: "NA" },
+    { name: "Palestine", emoji: "🇵🇸", code: "AS" },
+    { name: "Portugal", emoji: "🇵🇹", code: "EU" },
+    { name: "Paraguay", emoji: "🇵🇾", code: "SA" },
+    { name: "Qatar", emoji: "🇶🇦", code: "AS" },
+    { name: "Réunion", emoji: "🇷🇪", code: "AF" },
+    { name: "Romania", emoji: "🇷🇴", code: "EU" },
+    { name: "Serbia", emoji: "🇷🇸", code: "EU" },
+    { name: "Russia", emoji: "🇷🇺", code: "EU" },
+    { name: "Rwanda", emoji: "🇷🇼", code: "AF" },
+    { name: "Saudi Arabia", emoji: "🇸🇦", code: "AS" },
+    { name: "Seychelles", emoji: "🇸🇨", code: "AF" },
+    { name: "Sudan", emoji: "🇸🇩", code: "AF" },
+    { name: "Sweden", emoji: "🇸🇪", code: "EU" },
+    { name: "Singapore", emoji: "🇸🇬", code: "AS" },
+    { name: "Saint Helena", emoji: "🇸🇭", code: "AF" },
+    { name: "Slovenia", emoji: "🇸🇮", code: "EU" },
+    { name: "Svalbard and Jan Mayen", emoji: "🇸🇯", code: "EU" },
+    { name: "Slovakia", emoji: "🇸🇰", code: "EU" },
+    { name: "Sierra Leone", emoji: "🇸🇱", code: "AF" },
+    { name: "San Marino", emoji: "🇸🇲", code: "EU" },
+    { name: "Senegal", emoji: "🇸🇳", code: "AF" },
+    { name: "Somalia", emoji: "🇸🇴", code: "AF" },
+    { name: "Suriname", emoji: "🇸🇷", code: "SA" },
+    { name: "South Sudan", emoji: "🇸🇸", code: "AF" },
+    { name: "São Tomé and Príncipe", emoji: "🇸🇹", code: "AF" },
+    { name: "El Salvador", emoji: "🇸🇻", code: "NA" },
+    { name: "Sint Maarten", emoji: "🇸🇽", code: "NA" },
+    { name: "Syria", emoji: "🇸🇾", code: "AS" },
+    { name: "Swaziland", emoji: "🇸🇿", code: "AF" },
+    { name: "Turks and Caicos Islands", emoji: "🇹🇨", code: "NA" },
+    { name: "Chad", emoji: "🇹🇩", code: "AF" },
+    { name: "Togo", emoji: "🇹🇬", code: "AF" },
+    { name: "Thailand", emoji: "🇹🇭", code: "AS" },
+    { name: "Tajikistan", emoji: "🇹🇯", code: "AS" },
+    { name: "Turkmenistan", emoji: "🇹🇲", code: "AS" },
+    { name: "Tunisia", emoji: "🇹🇳", code: "AF" },
+    { name: "Turkey", emoji: "🇹🇷", code: "AS" },
+    { name: "Trinidad and Tobago", emoji: "🇹🇹", code: "NA" },
+    { name: "Taiwan", emoji: "🇹🇼", code: "AS" },
+    { name: "Tanzania", emoji: "🇹🇿", code: "AF" },
+    { name: "Ukraine", emoji: "🇺🇦", code: "EU" },
+    { name: "Uganda", emoji: "🇺🇬", code: "AF" },
+    { name: "United States", emoji: "🇺🇸", code: "NA" },
+    { name: "Uruguay", emoji: "🇺🇾", code: "SA" },
+    { name: "Uzbekistan", emoji: "🇺🇿", code: "AS" },
+    { name: "Vatican City", emoji: "🇻🇦", code: "EU" },
+    { name: "Saint Vincent and the Grenadines", emoji: "🇻🇨", code: "NA" },
+    { name: "Venezuela", emoji: "🇻🇪", code: "SA" },
+    { name: "British Virgin Islands", emoji: "🇻🇬", code: "NA" },
+    { name: "U.S. Virgin Islands", emoji: "🇻🇮", code: "NA" },
+    { name: "Vietnam", emoji: "🇻🇳", code: "AS" },
+    { name: "Kosovo", emoji: "🇽🇰", code: "EU" },
+    { name: "Yemen", emoji: "🇾🇪", code: "AS" },
+    { name: "Mayotte", emoji: "🇾🇹", code: "AF" },
+    { name: "South Africa", emoji: "🇿🇦", code: "AF" },
+    { name: "Zambia", emoji: "🇿🇲", code: "AF" },
+    { name: "Zimbabwe", emoji: "🇿🇼", code: "AF" }
+  ]
+};
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 7481cc0..1b3bece 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -26,6 +26,13 @@
               </div>
             </div>
           </div>
+          <div class="twitter-outer">
+            <twitter class="twitter">
+              <div slot="loading">loading .....</div>
+              <a class="twitter-timeline" data-height="500" data-theme="dark" href="https://twitter.com/NertiviaApp?ref_src=twsrc%5Etfw">Tweets by NertiviaApp</a>
+            </twitter>
+          </div>
+
         </div>
         <RightPanel  :class="{'show-menu-content': showMobileMenu }" />
     </div>
@@ -37,6 +44,7 @@
 </template>
 
 <script>
+import { twitter } from 'vue-twitter'
 import {bus} from '../main';
 import RightPanel from "./../components/homePage/RightPanel.vue"
 import ChangeLog from "./../components/ChangeLog.vue"
@@ -44,7 +52,8 @@ import changelog from '@/utils/changelog.js'
 export default {
   components: {
     RightPanel,
-    ChangeLog
+    ChangeLog,
+    twitter
   },
   data() {
     return {
@@ -70,7 +79,15 @@ export default {
 
 
 <style scoped>
-
+.twitter-outer{
+  margin: auto;
+  width: 600px;
+  opacity: 0.8;
+  transition: 0.3s;
+}
+.twitter-outer:hover{
+  opacity: 1;
+}
 .fade-enter-active, .fade-leave-active {
   transition: opacity .2s;
 }
@@ -275,6 +292,11 @@ button {
   }
 }
 @media (max-width: 649px) {
+  .twitter-outer{
+    margin-top: 20px;
+    margin-bottom: 50px;
+    width: initial;
+  }
   .change-list{
     flex-direction: column;
   }