Andal.LND/frontend-app-authn
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #597 from openedx/sajjad/VAN-577

Browse Source 
fix: password tooltip should use extra small font size
This commit is contained in:
Syed Sajjad Hussain Shah
2022-07-13 17:58:49 +05:00
committed by GitHub
parent 4bd1f3de7d 2947784f00
commit 3486aead7f
2 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/_style.scss
View File

@@ -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;

6
src/common-components/PasswordField.jsx
View File

@@ -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>