feat: 💄 button icons for security

packages/client/src/pages/settings/2fa.qrdialog.vue

@@ -35,7 +35,7 @@
 			<a :href="twoFactorData.url"
 				><img :class="$style.qr" :src="twoFactorData.qr"
 			/></a>
-			<div style="max-width: 600px;">
+			<div style="max-width: 600px">
 				<MkKeyValue :copy="twoFactorData.url">
 					<template #key>{{ i18n.ts._2fa.step2Url }}</template>
 					<template #value>{{ twoFactorData.url }}</template>

packages/client/src/pages/settings/2fa.vue

@@ -12,14 +12,16 @@
 				<div v-if="$i.twoFactorEnabled" class="_gaps_s">
 					<div v-text="i18n.ts._2fa.alreadyRegistered" />
 					<template v-if="$i.securityKeysList.length > 0">
-						<MkButton @click="renewTOTP">{{
+						<MkButton @click="renewTOTP"
-							i18n.ts._2fa.renewTOTP
+							><i class="ph-shield-check ph-bold ph-lg"></i
-						}}</MkButton>
+							>{{ i18n.ts._2fa.renewTOTP }}</MkButton
+						>
 						<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
 					</template>
-					<MkButton v-else @click="unregisterTOTP">{{
+					<MkButton v-else @click="unregisterTOTP"
-						i18n.ts.unregister
+						><i class="ph-shield-slash ph-bold ph-lg"></i
-					}}</MkButton>
+						>{{ i18n.ts.unregister }}</MkButton
+					>
 				</div>
 
 				<MkButton
@@ -51,9 +53,10 @@
 					</MkInfo>
 
 					<template v-else>
-						<MkButton primary @click="addSecurityKey">{{
+						<MkButton primary @click="addSecurityKey"
-							i18n.ts._2fa.registerSecurityKey
+							><i class="ph-key ph-bold ph-lg"></i
-						}}</MkButton>
+							>{{ i18n.ts._2fa.registerSecurityKey }}</MkButton
+						>
 						<MkFolder
 							v-for="key in $i.securityKeysList"
 							:key="key.id"

packages/client/src/pages/settings/security.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="_formRoot">
-		<FormSection>
+		<FormSection style="border: none !important">
 			<template #label>{{ i18n.ts.password }}</template>
 			<MkButton primary @click="change()">{{
 				i18n.ts.changePassword