Replace custom input field with NcInputField

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

apps/user_status/src/components/CustomMessageInput.vue

@@ -28,29 +28,28 @@
 			</NcButton>
 		</NcEmojiPicker>
 		<div class="custom-input__container">
-			<label class="hidden-visually" for="user_status_message">
-				{{ t('user_status', 'What is your status?') }}
-			</label>
-			<input id="user_status_message"
-				ref="input"
+			<NcInputField id="user_status_message"
 				maxlength="80"
 				:disabled="disabled"
 				:placeholder="$t('user_status', 'What is your status?')"
-				type="text"
 				:value="message"
-				@input="onChange">
+				type="text"
+				:label="t('user_status', 'What is your status?')"
+				@input="onChange" />
 		</div>
 	</div>
 </template>
 
 <script>
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcEmojiPicker from '@nextcloud/vue/dist/Components/NcEmojiPicker.js'
+import NcInputField	from '@nextcloud/vue/dist/Components/NcInputField.js'
 
 export default {
 	name: 'CustomMessageInput',
 
 	components: {
+		NcInputField,
 		NcButton,
 		NcEmojiPicker,
 	},
@@ -135,5 +134,13 @@ export default {
 			border-radius: 0 var(--border-radius) var(--border-radius) 0;
 		}
 	}
+
+	::v-deep .button-vue--text-only {
+		padding-left: 0;
+	}
+
+	.custom-input__emoji-button {
+		padding-left: 8px;
+	}
 }
 </style>

dist/user-status-modal-8299.js.LICENSE.txt

@@ -1,3 +1,5 @@
 /*! For license information please see NcEmojiPicker.js.LICENSE.txt */
 
+/*! For license information please see NcInputField.js.LICENSE.txt */
+
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */