Add Photo Uploader component nayarahilton#1

src/components/MainTitles.vue

@@ -1,35 +1,35 @@
 <template>
-    <div
-        :class="titlesStyle"
-        class="titles"
-    >
-        <h2 class="titles__title">
-            {{ titleText }}
-        </h2>
-        <h3>
-            {{ subtitleText }}
-        </h3>
-    </div>
+	<div
+		:class="titlesStyle"
+		class="titles"
+	>
+		<h2 class="titles__title">
+			{{ titleText }}
+		</h2>
+		<h3 class="titles__subtitle">
+			{{ subtitleText }}
+		</h3>
+	</div>
 </template>
 
 <script>
 export default {
-		props: {
+	props: {
 		titleText: {
 			required: true,
 			type: String,
 		},
 		subtitleText: {
 			type: String,
-		},		
+		},
 		design: {
 			type: String,
 		},
 	},
-    computed: {
+	computed: {
 		titlesStyle() {
 			if (this.design === 'left' || !this.design) return 'titles--left';
-            if (this.design === 'center') return 'input--center';
+			if (this.design === 'center') return 'titles--center';
 		},
 	},
 };
@@ -43,21 +43,24 @@ export default {
 
 	.titles
 		background transparent
-        color $gray
+		color $dark-gray		
 		margin-bottom 20px
 		padding 15px
 		width 100%
 
 		&--left
-			text-align left 
+			text-align left
 
-        &--center
-            text-align center
+		&--center
+			text-align center
 
-        &__title
-            font-size 16pt
+		&__title
+			font-size 18pt
+			font-weight 300
+			margin 0
 
-        &__subtitle
-            font-size 12pt
-    
+		&__subtitle
+			font-size 12pt
+			font-weight 300
+			margin 0
 </style>

src/components/PhotoUpload.vue

@@ -0,0 +1,114 @@
+<template>
+	 <div class="photo-upload">
+		<div class="file-upload-form">
+			<input
+				type="file"
+				@change="previewThumbnail"
+				name="photo-upload-button"
+				id="photo-upload-button"
+				accept="image/*"
+				class="input-file"
+			/>
+			<label for="photo-upload-button">{{ labelText }}</label>
+		</div>
+		<div
+			class="image-preview"
+			v-if="imageData.length > 0"
+		>
+			<img
+				:src="imageData"
+				class="image-preview__img"
+			>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	data: function returnImageData() {
+		return {
+			imageData: '',
+		};
+	},
+	props: {
+		labelText: {
+			required: true,
+			type: String,
+		},
+	},
+	methods: {
+		previewThumbnail: function getPreview(event) {
+			const input = event.target;
+			if (input.files && input.files[0]) {
+				const reader = new FileReader();
+				reader.onload = (e) => {
+					this.imageData = e.target.result;
+				};
+				reader.readAsDataURL(input.files[0]);
+			}
+		},
+	},
+};
+</script>
+
+<style lang="stylus" scoped>
+	@import '../assets/styles/_colors'
+
+	*
+		box-sizing border-box
+
+	.photo-upload
+		height auto
+		margin 20px 0
+		position relative
+		text-align center
+		width 100%
+
+	.input-file
+		height 0.1px
+		opacity 0
+		overflow hidden
+		position absolute
+		width 0.1px
+		z-index -1
+
+		&:focus + label
+			border-color $dark-blue			
+
+		& + label
+			background transparent
+			border 2px solid $pink
+			border-radius 50%
+			color $dark-gray
+			display inline-block
+			font-size 12pt
+			font-weight 500
+			height 150px
+			line-height 150px
+			text-align center
+			width 150px
+
+			&:hover,
+			&:focus
+				border-color $dark-blue
+				cursor pointer
+
+	.image-preview		
+		border-radius 50%
+		height 150px
+		left 0
+		margin 0 auto
+		pointer-events none
+		position: absolute
+		right 0
+		top 0
+		width 150px
+
+		&__img
+			border 2px solid $pink
+			border-radius 50%
+			height 150px
+			object-fit cover
+			object-position center
+			width 150px
+</style>

src/views/RegisterView.vue

@@ -5,12 +5,12 @@
 			title="Cadastro"
 		/>
 		<main class="register-main">
-			<div class="presentation-holder">
-				<h2 class="title">Seus Dados</h2>
-				<p>{{ msg }}</p>
-			</div>
-
+			<main-titles
+				title-text="Seus dados"
+				subtitle-text="Todos os campos são obrigatórios"
+			/>
 			<div class="btn-holder">
+				<photo-upload label-text="Carregue sua foto" />
 				<social-button text-inner="Completar com o Linkedin" />
 				<main-input
 					type="text"
@@ -41,6 +41,8 @@
 
 <script>
 import StatusBar from '../components/StatusBar';
+import MainTitles from '../components/MainTitles';
+import PhotoUpload from '../components/PhotoUpload';
 import SocialButton from '../components/SocialButton';
 import MainButton from '../components/MainButton';
 import MainInput from '../components/MainInput';
@@ -54,6 +56,8 @@ export default {
 	},
 	components: {
 		'status-bar': StatusBar,
+		'main-titles': MainTitles,
+		'photo-upload': PhotoUpload,
 		'social-button': SocialButton,
 		'main-button': MainButton,
 		'main-input': MainInput,