From faf62ac8e76023bd673558f91962dfd6759c2a12 Mon Sep 17 00:00:00 2001
From: Carina Wollendorfer <30310907+CarinaWolli@users.noreply.github.com>
Date: Mon, 5 Sep 2022 17:08:59 -0400
Subject: [PATCH] Design improvements for v2 security settings pages (#4087)

* fix password change design

* fix 2fa design

Co-authored-by: CarinaWolli <wollencarina@gmail.com>
---
 .../pages/v2/settings/security/password.tsx   | 70 ++++++++++---------
 .../v2/settings/security/two-factor-auth.tsx  |  6 +-
 2 files changed, 40 insertions(+), 36 deletions(-)

diff --git a/apps/web/pages/v2/settings/security/password.tsx b/apps/web/pages/v2/settings/security/password.tsx
index 74f04cd3fc..b09bfe42bc 100644
--- a/apps/web/pages/v2/settings/security/password.tsx
+++ b/apps/web/pages/v2/settings/security/password.tsx
@@ -52,40 +52,44 @@ const PasswordView = () => {
             const { oldPassword, newPassword } = values;
             mutation.mutate({ oldPassword, newPassword });
           }}>
-          <div className="flex space-x-4">
-            <Controller
-              name="oldPassword"
-              control={formMethods.control}
-              render={({ field: { value } }) => (
-                <TextField
-                  name="oldPassword"
-                  label={t("old_password")}
-                  value={value}
-                  type="password"
-                  onChange={(e) => {
-                    formMethods.setValue("oldPassword", e?.target.value);
-                  }}
-                />
-              )}
-            />
-            <Controller
-              name="newPassword"
-              control={formMethods.control}
-              render={({ field: { value } }) => (
-                <TextField
-                  name="newPassword"
-                  label={t("new_password")}
-                  value={value}
-                  type="password"
-                  placeholder={t("secure_password")}
-                  onChange={(e) => {
-                    formMethods.setValue("newPassword", e?.target.value);
-                  }}
-                />
-              )}
-            />
+          <div className="max-w-[38rem] sm:flex sm:space-x-4">
+            <div className="flex-grow">
+              <Controller
+                name="oldPassword"
+                control={formMethods.control}
+                render={({ field: { value } }) => (
+                  <TextField
+                    name="oldPassword"
+                    label={t("old_password")}
+                    value={value}
+                    type="password"
+                    onChange={(e) => {
+                      formMethods.setValue("oldPassword", e?.target.value);
+                    }}
+                  />
+                )}
+              />
+            </div>
+            <div className="flex-grow">
+              <Controller
+                name="newPassword"
+                control={formMethods.control}
+                render={({ field: { value } }) => (
+                  <TextField
+                    name="newPassword"
+                    label={t("new_password")}
+                    value={value}
+                    type="password"
+                    placeholder={t("secure_password")}
+                    onChange={(e) => {
+                      formMethods.setValue("newPassword", e?.target.value);
+                    }}
+                  />
+                )}
+              />
+            </div>
           </div>
-          <p>
+          <p className="text-sm text-gray-600">
             <Trans i18nKey="valid_password">
               Password must be at least at least 7 characters, mix of uppercase & lowercase letters, and
               contain at least 1 number
diff --git a/apps/web/pages/v2/settings/security/two-factor-auth.tsx b/apps/web/pages/v2/settings/security/two-factor-auth.tsx
index 061bbfd6cb..2f58041efe 100644
--- a/apps/web/pages/v2/settings/security/two-factor-auth.tsx
+++ b/apps/web/pages/v2/settings/security/two-factor-auth.tsx
@@ -1,4 +1,4 @@
-import { useState, useContext } from "react";
+import { useState } from "react";
 
 import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
@@ -34,12 +34,12 @@ const TwoFactorAuthView = () => {
         />
         <div>
           <div className="flex">
-            <p>{t("two_factor_auth")}</p>
+            <p className="font-semibold">{t("two_factor_auth")}</p>
             <Badge className="ml-2 text-xs" variant={user?.twoFactorEnabled ? "success" : "gray"}>
               {user?.twoFactorEnabled ? t("enabled") : t("disabled")}
             </Badge>
           </div>
-          <p>Add an extra layer of security to your account.</p>
+          <p className="text-sm text-gray-600">Add an extra layer of security to your account.</p>
         </div>
       </div>