From 1622ec3620afc80a13e89ecb5a139eb1fc1b35c5 Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Thu, 15 Jun 2023 16:42:24 -0700
Subject: [PATCH] feat: :lipstick: button icons for security

---
 .../src/pages/settings/2fa.qrdialog.vue       |  2 +-
 packages/client/src/pages/settings/2fa.vue    | 21 +++++++++++--------
 .../client/src/pages/settings/security.vue    |  2 +-
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/client/src/pages/settings/2fa.qrdialog.vue b/packages/client/src/pages/settings/2fa.qrdialog.vue
index 4e45860b1..f6e6e3595 100644
--- a/packages/client/src/pages/settings/2fa.qrdialog.vue
+++ b/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>
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 88a68f685..45915d965 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/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">{{
-							i18n.ts._2fa.renewTOTP
-						}}</MkButton>
+						<MkButton @click="renewTOTP"
+							><i class="ph-shield-check ph-bold ph-lg"></i
+							>{{ i18n.ts._2fa.renewTOTP }}</MkButton
+						>
 						<MkInfo>{{ i18n.ts._2fa.whyTOTPOnlyRenew }}</MkInfo>
 					</template>
-					<MkButton v-else @click="unregisterTOTP">{{
-						i18n.ts.unregister
-					}}</MkButton>
+					<MkButton v-else @click="unregisterTOTP"
+						><i class="ph-shield-slash ph-bold ph-lg"></i
+						>{{ i18n.ts.unregister }}</MkButton
+					>
 				</div>
 
 				<MkButton
@@ -51,9 +53,10 @@
 					</MkInfo>
 
 					<template v-else>
-						<MkButton primary @click="addSecurityKey">{{
-							i18n.ts._2fa.registerSecurityKey
-						}}</MkButton>
+						<MkButton primary @click="addSecurityKey"
+							><i class="ph-key ph-bold ph-lg"></i
+							>{{ i18n.ts._2fa.registerSecurityKey }}</MkButton
+						>
 						<MkFolder
 							v-for="key in $i.securityKeysList"
 							:key="key.id"
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index eef27cfdc..88ef2ba11 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/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