Merge pull request #336 from Seluj78/325-profile-page

325 profile page

Author: supalarry

frontend/src/assets/css/tailwind.css

@@ -482,6 +482,18 @@
     .slider-dropdown:focus {
         outline:none;
     }
+
+    .settings-button-choice {
+        @apply border-gray-300;
+        @apply rounded-lg;
+        @apply border;
+        @apply px-4;
+        @apply py-2;
+        @apply w-auto;
+        @apply cursor-pointer;
+        @apply text-sm;
+        @apply text-center;
+    }
 }
 
 @tailwind utilities;

frontend/src/assets/dots.png

@@ -7,8 +7,8 @@
     <div class="auth-sub-container-error mt-8" v-if="image.error">
       <h1 class="auth-sub-container-error-message">{{image.error}}</h1>
     </div>
-    <button v-if="!image.uploaded" class="relative onboarding-sub-container-upload-button w-full my-8">
-      <input class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
+    <button v-if="!image.uploaded" class="overflow-hidden relative onboarding-sub-container-upload-button w-full my-8">
+      <input style="padding-left: 100%;" class="cursor-pointer opacity-0 absolute top-0 left-0 w-full h-full rounded-md" type="file" v-on:change="selectFile()" ref="file">
       <img src="../../../assets/onboarding/cloud.png" class="w-8 mx-auto">
     </button>
     <div v-if="image.uploaded" class="relative overflow-hidden bg-transparent rounded-md w-full my-10" style="padding-bottom: 70%">

frontend/src/assets/onboarding/cloudPurple.png

@@ -15,7 +15,7 @@ export default {
   props: ['slide'],
   methods: {
     nextSlide() {
-      this.$emit('nextSlide');
+      this.$emit('next-slide');
     },
   },
 };

frontend/src/assets/recommendations/avatars/other.png

@@ -8,7 +8,7 @@
       subheader: 'Would you like to share your location to get potential matches closer to you?',
       options: ['yes', 'no'],
       buttonText: slide.buttonText}"
-      v-on:saveInput="saveLocation"></SingleChoice>
+      v-on:save-input="saveLocation"></SingleChoice>
 </template>
 
 <script>
@@ -41,21 +41,21 @@ export default {
       const { latitude } = position.coords;
       const { longitude } = position.coords;
       this.locationData = { lat: latitude, lng: longitude, ip: '0.0.0.0' };
-      this.$emit('nextSlide');
+      this.$emit('next-slide');
     },
     async locationDenied() {
       let ipRequest = await fetch('https://api.ipify.org?format=json');
       ipRequest = await ipRequest.json();
       const { ip } = ipRequest;
       this.locationData = { ip };
-      this.$emit('nextSlide');
+      this.$emit('next-slide');
     },
     async sendLocation() {
       await this.$http.put('/profile/edit/geolocation', this.locationData);
     },
   },
   mounted() {
-    this.bus.$on('sendUserLocationToBackend', this.sendLocation);
+    this.bus.$on('send-user-location-to-backend', this.sendLocation);
   },
 };
 </script>

frontend/src/components/app/onboarding/ImageUpload.vue

@@ -42,7 +42,7 @@ export default {
         this.bus.$emit('clearForNextImage');
         this.imageIndex += 1;
       } else {
-        this.$emit('nextSlide');
+        this.$emit('next-slide');
         this.sendImagesToBackend();
       }
     },

frontend/src/components/app/onboarding/Introduction.vue

@@ -40,7 +40,7 @@ export default {
   }),
   methods: {
     saveInput() {
-      this.$emit('saveInput', this.slide.key, this.optionSelected);
+      this.$emit('save-input', this.slide.key, this.optionSelected);
       this.optionSelected = [];
     },
     select(...args) {

frontend/src/components/app/onboarding/Location.vue

@@ -45,7 +45,7 @@ export default {
     },
   },
   mounted() {
-    this.bus.$on('deselectIfNot', this.deselectIfNot);
+    this.bus.$on('deselect-if-not', this.deselectIfNot);
   },
 };
 </script>