From 7acb102b4372489e0017e0b11153fe5d12319867 Mon Sep 17 00:00:00 2001
From: Syed Sajjad Hussain Shah <syed.sajjad@arbisoft.com>
Date: Mon, 27 Jun 2022 16:13:19 +0500
Subject: [PATCH] fix: password tooltip should use extra small font fize

---
 src/_style.scss                         | 3 +++
 src/common-components/PasswordField.jsx | 6 +++---
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/_style.scss b/src/_style.scss
index 951e825b..d4bcba9b 100644
--- a/src/_style.scss
+++ b/src/_style.scss
@@ -296,8 +296,10 @@ select.form-control {
 .tooltip-shadow {
   box-shadow: 0px 5px 15px 0px rgba(0,0,0,0.3) !important;
 }
+
 #password-requirement-left {
   opacity: 1;
+  @extend .x-small;
   .tooltip-inner {
     @extend .tooltip-shadow;
     background: white;
@@ -315,6 +317,7 @@ select.form-control {
   opacity: 1;
   width: 90%;
   margin-bottom: 10px;
+  @extend .x-small;
   .tooltip-inner {
     max-width: inherit;
     background: white;
diff --git a/src/common-components/PasswordField.jsx b/src/common-components/PasswordField.jsx
index ae32d258..e2406d27 100644
--- a/src/common-components/PasswordField.jsx
+++ b/src/common-components/PasswordField.jsx
@@ -39,15 +39,15 @@ const PasswordField = (props) => {
   const placement = window.innerWidth < 768 ? 'top' : 'left';
   const tooltip = (
     <Tooltip id={`password-requirement-${placement}`}>
-      <span id="letter-check" className="d-flex position-relative align-content-start">
+      <span id="letter-check" className="d-flex align-items-center">
         {LETTER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
         {formatMessage(messages['one.letter'])}
       </span>
-      <span id="number-check" className="d-flex position-relative align-content-start">
+      <span id="number-check" className="d-flex align-items-center">
         {NUMBER_REGEX.test(props.value) ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
         {formatMessage(messages['one.number'])}
       </span>
-      <span id="characters-check" className="d-flex position-relative align-content-start">
+      <span id="characters-check" className="d-flex align-items-center">
         {props.value.length >= 8 ? <Icon className="text-success mr-1" src={Check} /> : <Icon className="mr-1 text-light-700" src={Remove} />}
         {formatMessage(messages['eight.characters'])}
       </span>