Edit components nayarahilton#1

lucasjs · Dec 1, 2017 · 04da492 · 04da492
1 parent 6391f7e
commit 04da492
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 16 deletions.
diff --git a/src/components/FeedbackMessage.vue b/src/components/FeedbackMessage.vue
@@ -1,11 +1,10 @@
 <template>
-	<div
+	<span
 		class="feedback"
-	>	
-		<span class="feedback__text">
-			{{ msgText }}
-		</span>
-	</div>
+		:class="feedbackStyle"
+	>
+		{{ msgText }}
+	</span>
 </template>
 
 <script>
@@ -14,7 +13,16 @@ export default {
 		msgText: {
 			required: true,
 			type: String,
-		},		
+		},
+		design: {
+			type: String,
+		},
+	},
+	computed: {
+		feedbackStyle() {
+			if (this.design === 'main' || !this.design) return 'feedback--main';
+			if (this.design === 'login') return 'feedback--login';
+		},
 	},
 };
 </script>
@@ -27,14 +35,17 @@ export default {
 
 	.feedback
 		background transparent
+		font-size 14pt
+		font-weight 600
 		margin-bottom 20px
-		padding 15px
+		padding 0
 		width 100%
 
-		&__text
-            color red
-			font-size 12pt
-			font-weight 300
-			margin 0
-            text-align center
-</style>
+		&--login
+			color lightness(red, 70%)
+			text-align center
+
+		&--main
+			color red
+			text-align left
+</style>
diff --git a/src/components/MainInput.vue b/src/components/MainInput.vue
@@ -40,7 +40,6 @@ export default {
 		inputStyle() {
 			if (this.design === 'main' || !this.design) return 'input--main';
 			if (this.design === 'login') return 'input--login';
-			if (this.design === 'invalid') return 'input--invalid';
 		},
 	},
 	methods: {
@@ -80,4 +79,5 @@ export default {
 
 		&--invalid
 			border-color red
+			background rgba(255, 0, 0, 0.20);
 </style>
diff --git a/src/components/MainTextarea.vue b/src/components/MainTextarea.vue
@@ -6,6 +6,9 @@
 		:class="textareaStyle"
 		class="textarea"
         rows="4"
+		ref="input"
+		v-bind:value="value"
+		v-on:input="updateValue($event.target.value)"
 	/>
 </template>
 
@@ -18,6 +21,9 @@ export default {
 		id: {
 			type: String,
 		},
+		value: {
+			type: String,
+		},
 		placeholder: {
 			required: true,
 			type: String,
@@ -31,6 +37,11 @@ export default {
 			if (this.design === 'main' || !this.design) return 'textarea--main';
 		},
 	},
+	methods: {
+		updateValue(value) {
+			this.$emit('input', value);
+		},
+	},
 };
 </script>