From d1b68fc47d7fcbb09479750524d08dfb0676baef Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn123@googlemail.com>
Date: Thu, 1 Aug 2019 14:14:18 +0100
Subject: [PATCH] re-design profile popout and survey.

---
 .../ServerSettingsPanels/DropDownMenu.vue     |  19 +-
 .../Popouts/ServerSettingsPanels/General.vue  |   7 +-
 .../Popouts/Popouts/SettingsPanels/survey.vue | 249 +++++-----
 .../Popouts/Popouts/userInformationPopout.vue | 433 ++++--------------
 src/utils/Badges.js                           |  22 +
 src/utils/surveyItems.js                      |   8 +-
 src/views/RegisterPage.vue                    |   2 +-
 7 files changed, 248 insertions(+), 492 deletions(-)
 create mode 100644 src/utils/Badges.js

diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
index f6c16c3..fa9e0bc 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
@@ -1,7 +1,12 @@
 <template>
   <div class="drop-down">
     <div class="title">{{name}}</div>
-    <div class="current-select-box" ref="dropDown" @click="dropped = !dropped"><div class="name">{{selectedItem ? selectedItem.name : items[0].name}}</div><div class="material-icons">expand_more</div></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">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>
@@ -12,7 +17,7 @@
 
 <script>
 export default {
-  props: ['items', 'name', 'selectedItem'],
+  props: ['items', 'name', 'selectedItem', 'noneSelect'], // noneSelect: by default, nothing will be selected.
   data() {
     return {
       dropped: false
@@ -43,7 +48,7 @@ export default {
 .drop-down {
   background-color: rgb(44, 44, 44);
   border-radius: 10px;
-  padding: 5px;
+  padding: 10px;
   user-select: none;
   cursor: default;
   flex-shrink: 0;
@@ -54,7 +59,7 @@ export default {
 }
 .current-select-box {
   background: rgba(22, 22, 22, 0.411);
-  border-radius: 10px;
+  border-radius: 5px;
   padding: 5px;
   cursor: pointer;
   display: flex;
@@ -65,6 +70,9 @@ export default {
 }
 .current-select-box div {
   align-self: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 .current-select-box .name {
   margin: auto;
@@ -106,5 +114,8 @@ export default {
 .item.selected {
   background: rgb(63, 63, 63);
 }
+.material-icons{
+  flex-shrink: 0;
+}
 </style>
 
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
index 608e651..7d81fbe 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
@@ -189,12 +189,15 @@ export default {
   flex-direction: column;
   background-color: rgb(44, 44, 44);
   border-radius: 10px;
-  padding: 5px;
+  padding: 10px;
   align-self: center;
   margin: 10px;
 }
 .input input {
-  border-radius: 10px;
+  margin-top: 2px;
+  margin-bottom: 0;
+  border-radius: 5px;
+  width: 190px;
 }
 .button {
   background: rgba(17, 148, 255, 0.692);
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 1e94b70..080e223 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -1,150 +1,70 @@
 <template>
-  <div
-    v-show="previousLoaded"
-    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" >
+    <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">
-      <!-- name -->
-      <div class="survey-box">
-        <div class="survey-title">
-          What's your name?
+      <div class="survey-content">
+        <div class="left">
+          <!-- name -->
+          <div class="input">
+            <div class="input-title">Name</div>
+            <input type="text" placeholder="Name">
+          </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>
-        <input
-          v-model="selected.name"
-          class="survey-input"
-          type="text"
-          placeholder="Name"
-        >
-      </div>
-      <!-- Gender -->
-      <div class="survey-box">
-        <drop-down
-          v-model="selected.gender"
-          name="What is your gender?"
-          :items="surveyItems.gender"
-        />
-      </div>
-      <!-- Age -->
-      <div class="survey-box">
-        <drop-down
-          v-model="selected.age"
-          name="What is your age?"
-          :items="surveyItems.age"
-        />
-      </div>
-      <!-- Continent -->
-      <div class="survey-box">
-        <drop-down
-          v-model="selected.continent"
-          name="Pick a continent"
-          :items="surveyItems.continents"
-        />
-      </div>
-      <!-- Countries -->
-      <div class="survey-box">
-        <drop-down
-          v-if="selected.continent != null"
-          v-model="selected.country"
-          name="Pick a country"
-          :items="filterCountry"
-        />
-      </div>
-      <!-- About me -->
-      <div class="survey-box">
-        <div class="survey-title">
-          About me (Formatting allowed)
+        <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>
-        <textarea
-          v-model="selected.about_me"
-          class="survey-input textarea"
-          placeholder="Hobbies, games, animals"
-        />
-      </div>
-      <div
-        v-if="surveyErrorMessage"
-        class="survey-warning"
-      >
-        {{ surveyErrorMessage }}
-      </div>
-      <div
-        v-if="surveyValidMessage"
-        class="survey-valid"
-      >
-        {{ surveyValidMessage }}
-      </div>
-      <div
-        class="button"
-        @click="surveySubmitButton"
-      >
-        Save
       </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>
 </template>
 
 <script>
+import DropDown from './../ServerSettingsPanels/DropDownMenu';
 import surveyItems from "@/utils/surveyItems.js";
-import DropDown from "./DropDownTemplate.vue";
 import userService from "@/services/userService.js";
 export default {
   components: { DropDown },
   data() {
     return {
-      surveyItems: Object.assign({}, surveyItems),
+      surveyItems: surveyItems,
       surveyErrorMessage: null,
       surveyValidMessage: null,
-      previousLoaded: false,
-      selected: {
-        name: "",
-        gender: null,
-        age: null,
-        continent: null,
-        country: null,
-        about_me: ""
-      }
+
+      // selected: {
+      //   name: "",
+      //   gender: null,
+      //   age: null,
+      //   continent: null,
+      //   country: null,
+      //   about_me: ""
+      // }
     };
   },
   computed: {
-    filterCountry() {
-      const selectedContinentIndex = this.selected.continent;
-      const selectedContinent = this.surveyItems.continents[
-        selectedContinentIndex
-      ];
-      const code = selectedContinent.code;
 
-      return this.surveyItems.countries.filter(element => {
-        return element.code == code || !element.code;
-      });
-    }
   },
   async mounted() {
     const { ok, error, result } = await userService.getSurvey();
     if (ok) {
-      this.selected.continent = result.data.result.continent;
-      this.selected.age = result.data.result.age;
-      this.selected.name = result.data.result.name;
-      this.selected.about_me = result.data.result.about_me;
-      this.selected.gender = result.data.result.gender;
-      //filter the country
-      if (result.data.result.country) {
-        setTimeout(() => {
-          const continentCode =
-            surveyItems.continents[this.selected.continent].code;
-          const filter = surveyItems.countries.filter(
-            e => e.code === continentCode
-          );
-          const countryName =
-            surveyItems.countries[result.data.result.country].name;
-          this.selected.country = filter.findIndex(e => e.name === countryName);
-        }, 500);
-      }
+
     }
     this.previousLoaded = true;
   },
@@ -228,14 +148,37 @@ export default {
   align-items: center;
   width: 100%;
 }
-.survey,
+.survey {
+  display: flex;
+  flex-direction: column;
+}
 .survey-inner {
   display: flex;
-  margin: auto;
-  margin-bottom: 50px;
   flex-direction: column;
-  align-content: center;
-  align-items: center;
+  width: 100%;
+  height: 100%;
+
+}
+
+.survey-content {
+  display: flex;
+}
+
+.left{
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+.right {
+  display: flex; 
+  flex-direction: column;
+  flex: 1;
+}
+
+.dropdown {
+  margin: 10px;
+  margin-left: 30px;
+  margin-right: 30px;
 }
 
 .survey-warning {
@@ -261,26 +204,7 @@ export default {
 .survey .button:hover {
   background: rgb(0, 98, 255);
 }
-.survey-input {
-  height: 24px;
-  padding: 10px;
-  background: rgba(61, 61, 61, 0.863);
-  margin-top: 5px;
-  border-radius: 5px;
-  transition: 0.3s;
-}
-.survey-input:hover {
-  background: rgba(73, 73, 73, 0.863);
-}
-.survey-input.textarea {
-  resize: none;
-  color: white;
-  outline: none;
-  border: none;
-  width: 200px;
-  height: 100px;
-  transition: 0.3s;
-}
+
 
 .title {
   margin-top: 30px;
@@ -296,4 +220,37 @@ export default {
   margin-right: 10px;
   font-size: 30px;
 }
+
+.input {
+  display: flex;
+  flex-direction: column;
+  background-color: rgb(44, 44, 44);
+  border-radius: 10px;
+  padding: 10px;
+  margin: 10px;
+  margin-left: 30px;
+  margin-right: 30px;
+  padding-bottom: 0;
+}
+.input input {
+  width: initial;
+  border-radius: 5px;
+  margin-top: 2px;
+}
+textarea {
+  padding: 10px;
+  resize: none;
+  background: rgba(0, 0, 0, 0.301);
+  border: none;
+  outline: none;
+  border-radius: 5px;
+  color: white;
+  height: 100px;
+  margin-bottom: 10px;
+  margin-top: 2px;
+  transition: 0.3s;
+}
+textarea:hover {
+  background: rgba(0, 0, 0, 0.401);
+}
 </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 b415621..c5f1cef 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -4,197 +4,31 @@
     @click="backgroundClickEvent"
   >
     <div class="box">
-      <spinner v-if="!user" />
-      <div
-        v-else
-        class="inner"
-      >
-        <div class="top">
+      <spinner class="spinner" v-if="!user" />
+      <div class="inner" v-if="user">
+        <div class="profile">
           <profile-picture
             class="avatar"
-            size="90px"
-            emote-size="28px"
-            animation-padding="5px"
-            :admin="user.admin"
+            size="120px"
             :url="`${avatarDomain}${user.avatar}`"
           />
-
-          <div class="info">
-            <div class="username">
-              {{ user.username }}
-            </div>
-            <div class="tag">
-              @{{ user.tag }}
-            </div>
+          <div class="uesrname-tag">
+            <div class="username">{{user.username}}</div>
+            <div class="tag">#{{user.tag}}</div>
           </div>
+          <div class="button" v-if="uniqueID !== selfUniqueID">Add Friend</div>     
         </div>
-        <div
-          v-if="selfUniqueID !== user.uniqueID"
-          class="bottom"
-        >
-          <div
-            v-if="this.relationshipStatus == null"
-            class="button valid"
-            @click="AddFriendButton"
-          >
-            <div class="material-icons">
-              person_add
-            </div>Add friend
-          </div>
-
-          <div
-            v-if="this.relationshipStatus == 0"
-            class="button valid"
-            @click="RemoveFriendButton"
-          >
-            <div class="material-icons">
-              person_add
-            </div>Request Sent!
-          </div>
-
-          <div
-            v-if="this.relationshipStatus == 1"
-            class="button valid"
-            @click="AcceptFriendButton"
-          >
-            <div class="material-icons">
-              person_add
-            </div>Accept Friend
-          </div>
-
-          <div
-            v-if="this.relationshipStatus == 2"
-            class="button warn"
-            @click="RemoveFriendButton"
-          >
-            <div class="material-icons">
-              person_add_disabled
-            </div>End Friendship
-          </div>
-
-          <div
-            class="button"
-            @click="openChat"
-          >
-            <div class="material-icons">
-              chat
-            </div>Send Message
-          </div>
-          <div class="button warn">
-            <div class="material-icons">
-              block
-            </div>Block
-          </div>
-        </div>
-        <div
-          v-else
-          class="cross"
-        >
-          <i class="material-icons">close</i>
-        </div>
-      </div>
-      <div
-        v-if="user && user.about_me"
-        class="about-me-box"
-      >
-        <div class="title">
-          About {{ user.username }}
-        </div>
-        <div class="about-me-inner">
-          <div
-            v-if="user.about_me.name"
-            class="about-me-detail"
-          >
-            <div class="about-me-title">
-              <div class="main-title-about-me">
-                Name:
-              </div>
-              <div class="emoji-about-me" />
-              {{ user.about_me.name }}
-            </div>
-          </div>
-
-          <div
-            v-if="user.about_me.gender == 0 || user.about_me.gender"
-            class="about-me-detail"
-          >
-            <div class="about-me-title">
-              <div class="main-title-about-me">
-                Gender:
-              </div>
-              <div
-                class="emoji-about-me"
-                v-html="emojiParse(surveyItems.gender[user.about_me.gender].emoji)"
-              />
-              {{ surveyItems.gender[user.about_me.gender].name }}
-            </div>
-          </div>
-
-          <div
-            v-if="user.about_me.age == 0 || user.about_me.age"
-            class="about-me-detail"
-          >
-            <div class="about-me-title">
-              <div class="main-title-about-me">
-                Age:
-              </div>
-              <div
-                class="emoji-about-me"
-                v-html="emojiParse(surveyItems.age[user.about_me.age].emoji)"
-              />
-              {{ surveyItems.age[user.about_me.age].name }}
-            </div>
-          </div>
-
-          <div
-            v-if="user.about_me.continent == 0 || user.about_me.continent"
-            class="about-me-detail"
-          >
-            <div class="about-me-title">
-              <div class="main-title-about-me">
-                Continent:
-              </div>
-              <div
-                class="emoji-about-me"
-                v-html="emojiParse(surveyItems.continents[user.about_me.continent].emoji)"
-              />
-              {{ surveyItems.continents[user.about_me.continent].name }}
-            </div>
-          </div>
-
-          <div
-            v-if="user.about_me.country == 0 || user.about_me.country"
-            class="about-me-detail"
-          >
-            <div class="about-me-title">
-              <div class="main-title-about-me">
-                Country:
-              </div>
-              <div
-                class="emoji-about-me"
-                v-html="emojiParse(surveyItems.countries[user.about_me.country].emoji)"
-              />
-              {{ surveyItems.countries[user.about_me.country].name }}
-            </div>
-          </div>
-
-          <div
-            v-if="user.about_me.about_me"
-            class="about-me-detail"
-          >
-            <div class="about-me-title about_me">
-              <div class="main-title-about-me">
-                About Me:
-              </div>
-              <div class="emoji-about-me" />
-              <div
-                class="about-me-format"
-                v-html="formatAboutMe(user.about_me.about_me)"
-              />
+        <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>
+
     </div>
   </div>
 </template>
@@ -207,16 +41,23 @@ import relationshipService from "@/services/RelationshipService.js";
 import surveyItems from "@/utils/surveyItems.js";
 import emojiParser from "@/utils/emojiParser.js";
 import messageFormatter from "@/utils/messageFormatter.js";
+import badges from "@/utils/Badges";
+
 export default {
   components: { Spinner, profilePicture },
   data() {
     return {
       surveyItems: Object.assign({}, surveyItems),
       user: null,
-      avatarDomain: config.domain + "/avatars/"
+      avatarDomain: config.domain + "/avatars/",
+      badges
     };
   },
   computed: {
+    filteredBadges() {
+      if (!this.user.badges) return;
+      return this.user.badges.filter(b => this.badges[b])
+    },
     selfUniqueID() {
       return this.$store.getters.user.uniqueID;
     },
@@ -272,64 +113,13 @@ export default {
     formatAboutMe(string) {
       return messageFormatter(string);
     }
-  }
+  },
 };
 </script>
 <style scoped>
-.cross {
-  margin: auto;
-  opacity: 0.1;
-}
-.cross .material-icons {
-  font-size: 150px;
-}
-.about_me {
-  flex-direction: column;
-  align-items: initial !important;
-  font-size: 15px;
-}
-.about_me .about-me-format {
-  user-select: text;
-}
-.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;
-  overflow: auto;
-  padding-bottom: 10px;
-}
-.about-me-detail {
-  margin-top: 10px;
-  margin-left: 20px;
-  margin-right: 20px;
-}
-.about-me-title {
-  display: flex;
-  align-content: center;
-  align-items: center;
-}
-.about-me-format {
-  word-wrap: break-word;
-  word-break: break-word;
-  white-space: pre-wrap;
-}
-.emoji-about-me {
-  margin-left: 5px;
-  margin-right: 10px;
-}
-.main-title-about-me {
-  color: rgb(179, 179, 179);
-}
 
-.title {
-  padding-top: 10px;
-  font-size: 20px;
-  text-align: center;
-}
+
+
 .drop-background {
   position: absolute;
   background: rgba(0, 0, 0, 0.521);
@@ -342,124 +132,97 @@ export default {
 }
 .box {
   margin: auto;
-  height: 330px;
-  width: initial;
+  max-height: 500px;
+  width: 350px;
   color: white;
   display: flex;
   flex-direction: row;
-  user-select: none;
-  overflow: hidden;
-}
-.inner {
-  background: rgba(31, 31, 31, 0.904);
-  display: flex;
-  height: 100%;
-  width: 500px;
-  flex-direction: column;
+  overflow: auto;
+  background: rgba(0, 0, 0, 0.553);
   border-radius: 10px;
-  overflow: hidden;
+
 }
-.top {
+.spinner {
+  align-self: center;
+}
+
+.inner {
   display: flex;
   flex-direction: column;
-  background: rgba(22, 22, 22, 0.918);
   width: 100%;
-  height: 170px;
-  flex-shrink: 0;
+  align-items: center;
+  padding: 10px;
+  padding-top: 30px;
 }
-.bottom {
-  display: flex;
-  height: 100%;
-  width: calc(100% - 20px);
-  margin: auto;
-}
-.button {
-  background: rgba(49, 49, 49, 0.815);
+.profile {
   display: flex;
   flex-direction: column;
   align-content: center;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.733);
+  width: 100%;
   align-items: center;
-  justify-content: center;
-  border-radius: 5px;
-  flex: 1;
-  margin: 30px;
-  margin-left: 20px;
-  margin-right: 20px;
-  transition: 0.3s;
-  height: 100px;
-  width: 100px;
+  align-content: center;
+  padding-bottom: 10px;
 }
-.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;
-}
-.avatar{
+
+.uesrname-tag {
   display: flex;
-  z-index: 9999;
-  margin: auto;
-  margin-bottom: 0px;
-}
-.info {
-  margin-top: 1px;
-  margin: auto;
   font-size: 20px;
-  display: flex;
-  user-select: text;
+  text-align: center;
+  align-self: center;
+  margin-top: 10px;
+  margin-bottom: 10px;
+  user-select: auto !important;
 }
 .tag {
-  color: grey;
+  color: rgb(139, 139, 139);
 }
+
+.button {
+  background: rgb(23, 151, 255);
+  padding: 8px;
+  align-self: center;
+  border-radius: 5px;
+  user-select: none;
+  cursor: default;
+}
+.badges{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 10px;
+  border-bottom: solid 1px rgba(255, 255, 255, 0.733);
+  padding-bottom: 10px;
+  user-select: none;
+  cursor: default;
+}
+.badges .title {
+  font-size: 20px;
+}
+.badges-list{
+  display: flex;
+  margin-top: 5px;
+  flex-wrap: wrap;
+}
+.badge {
+  border: solid 1px white;
+  padding: 5px;
+  border-radius: 5px;
+  margin: 3px;
+  display: flex;
+}
+
+.badge div {
+  align-self: center;
+  margin-left: 5px;
+}
+.badge img {
+  align-self: center;
+  height: 20px;
+  width: 20px;
+}
+
 @media (max-width: 815px) {
-  .box {
-    flex-direction: column;
-    max-width: 500px;
-    width: 100%;
-    overflow: auto;
-  }
-  .about-me-box {
-    width: 100%;
-    margin-left: 0;
-    margin-top: 10px;
-    flex-shrink: 0;
-    overflow: initial;
-  }
-  .inner {
-    width: 100%;
-    flex-shrink: 0;
-    height: initial;
-  }
-  .bottom {
-    flex-shrink: 0;
-    height: initial;
-    margin-top: 5px;
-    margin-bottom: 5px;
-  }
-  .bottom .button {
-    margin: 2px;
-    margin-top: 5px;
-    margin-bottom: 5px;
-    height: 100px;
-    -ms-flex-negative: 0;
-    flex-shrink: 0;
-    -webkit-box-flex: 0;
-    -ms-flex: none;
-    flex: 1;
-    font-size: 10px;
-  }
+  
 }
 </style>
\ No newline at end of file
diff --git a/src/utils/Badges.js b/src/utils/Badges.js
new file mode 100644
index 0000000..5a60dc0
--- /dev/null
+++ b/src/utils/Badges.js
@@ -0,0 +1,22 @@
+module.exports = {
+  0: {
+    name: 'Creator',
+    icon: require('twemoji/2/svg/1f451.svg'),
+    color: '#ffcc4d'
+  },
+  1: {
+    name: 'Cute', 
+    icon: require('twemoji/2/svg/1f33a.svg'),
+    color: '#f4abba'
+  },
+  2: {
+    name: 'Developer', 
+    icon: require('twemoji/2/svg/2728.svg'),
+    color: '#ffe6c2'
+  },
+  3: {
+    name: 'Supporter', 
+    icon: require('twemoji/2/svg/2764.svg'),
+    color: '#dd2e44'
+  },
+}
\ No newline at end of file
diff --git a/src/utils/surveyItems.js b/src/utils/surveyItems.js
index 28dd43a..eb5e8ee 100644
--- a/src/utils/surveyItems.js
+++ b/src/utils/surveyItems.js
@@ -5,9 +5,8 @@ export default {
     { emoji: "😶", name: "Rather not say", code:"no"}
   ],
   age: [
-    { emoji: "", name: "13 or under", code: "-13"},
-    { emoji: "", name: "14-16", code:"1416"},
-    { emoji: "", name: "17-19", code:"1719"},
+    { emoji: "", name: "14-16", code:"14-16"},
+    { emoji: "", name: "17-19", code:"17-19"},
     { emoji: "", name: "20 or above", code:"20+" },
     { emoji: "😶", name: "Rather not say", code: "no" }
   ],
@@ -18,6 +17,7 @@ export default {
     { name: "South America", emoji: "🌴", code: "SA" },
     { name: "Africa", emoji: "🐘", code: "AF" },
     { name: "Oceania", emoji: "🌊", code: "OC" },
+    { emoji: "😶", name: "Rather not say", code: "no" }
   ],
 
   countries: [
@@ -266,6 +266,6 @@ export default {
     { name: "Vanuatu", emoji: "🇻🇺", code: "OC" },
     { name: "Wallis and Futuna", emoji: "🇼🇫", code: "OC" },
     { name: "Samoa", emoji: "🇼🇸", code: "OC" },
-    { emoji: "😶", name: "Rather not say" }
+    { emoji: "😶", name: "Rather not say", code: "no" }
   ]
 };
diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue
index 8afd741..3f95616 100644
--- a/src/views/RegisterPage.vue
+++ b/src/views/RegisterPage.vue
@@ -16,7 +16,7 @@
               Register
             </div>
             <div class="info">
-              Welcome, new user! Hope you enjoy Nertivia!
+              Welcome, new user! I Hope you enjoy Nertivia!
             </div>
             <form
               v-if="!showCaptcha"