Add underline decoration to links and use div element as target

Signed-off-by: Louis Chemineau <louis@chmn.me>

2 files changed, 23 insertions, 20 deletions

diff --git a/apps/files/src/views/Settings.vue b/apps/files/src/views/Settings.vue
index f26c0b2e3fc..a7d1c44e719 100644
--- a/apps/files/src/views/Settings.vue
+++ b/apps/files/src/views/Settings.vue
@@ -61,14 +61,17 @@
 				</template>
 			</NcInputField>
 			<em>
-				<a :href="webdavDocs" target="_blank" rel="noreferrer noopener">
+				<a class="setting-link"
+					:href="webdavDocs"
+					target="_blank"
+					rel="noreferrer noopener">
 					{{ t('files', 'Use this address to access your Files via WebDAV') }} ↗
 				</a>
 			</em>
-			<br />
+			<br>
 			<em>
-				<a :href="appPasswordUrl">
-					{{ t('files', 'If you have enabled 2FA, you must create and use a new app password by clicking here.') }}
+				<a class="setting-link" :href="appPasswordUrl">
+					{{ t('files', 'If you have enabled 2FA, you must create and use a new app password by clicking here.') }} ↗
 				</a>
 			</em>
 		</NcAppSettingsSection>
@@ -175,5 +178,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.setting-link:hover {
+	text-decoration: underline;
+}
 </style>
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
index e2ef0aeae5a..4c92d318b6e 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -20,21 +20,19 @@
   -->
 
 <template>
-	<div v-if="!adding" class="row spacing">
-		<a id="generate-app-token-section">
-			<!-- Port to TextField component when available -->
-			<input v-model="deviceName"
-				type="text"
-				:maxlength="120"
-				:disabled="loading"
-				:placeholder="t('settings', 'App name')"
-				@keydown.enter="submit">
-			<NcButton :disabled="loading || deviceName.length === 0"
-				type="primary"
-				@click="submit">
-				{{ t('settings', 'Create new app password') }}
-			</NcButton>
-		</a>
+	<div v-if="!adding" id="generate-app-token-section" class="row spacing">
+		<!-- Port to TextField component when available -->
+		<input v-model="deviceName"
+			type="text"
+			:maxlength="120"
+			:disabled="loading"
+			:placeholder="t('settings', 'App name')"
+			@keydown.enter="submit">
+		<NcButton :disabled="loading || deviceName.length === 0"
+			type="primary"
+			@click="submit">
+			{{ t('settings', 'Create new app password') }}
+		</NcButton>
 	</div>
 	<div v-else class="spacing">
 		{{ t('settings', 'Use the credentials below to configure your app or device.') }}