hide warning when capslock off and fix popup design

Author: nikunj8866

src/js/_enqueues/admin/user-profile.js

@@ -354,6 +354,10 @@
 
 			// Skip CapsLock key itself.
 			if ( ev.key === 'CapsLock' ) {
+				if (capsLockOn) {
+					capsLockOn = false;
+					$capsWarning.hide();
+				}
 				return;
 			}
 

src/wp-admin/css/forms.css

@@ -717,46 +717,16 @@ fieldset label,
 /* Caps lock warning */
 .wp-pwd .caps-warning {
 	display: none;
-	position: absolute;
-	background: #FFFDD6;
-	border: 1px solid #ddd;
-	border-radius: 3px;
-	color: #1E1E20;
-	font-size: 13px;
+	position: relative;
+	background: #f5e6ab;
 	padding: 6px 10px;
-	top: calc(100% - 25px);
-	left: 24px;
-	white-space: nowrap;
-	z-index: 10;
-	box-shadow: 0 1px 3px rgba(0,0,0,0.1);
-}
-
-.wp-pwd .caps-warning::before {
-	content: '';
-	position: absolute;
-	bottom: 100%;
-	left: 15px;
-	margin-left: -8px;
-	border-width: 8px;
-	border-style: solid;
-	border-color: transparent transparent #ddd transparent;
-}
-
-.wp-pwd .caps-warning::after {
-	content: '';
-	position: absolute;
-	bottom: 100%;
-	left: 15px;
-	margin-left: -7px;
-	border-width: 7px;
-	border-style: solid;
-	border-color: transparent transparent #FFFDD6 transparent;
+	top: -8px;
 }
 
 .wp-pwd .caps-icon {
 	display: inline-flex;
     justify-content: center;
-    background-color: #FFF972;
+    background-color: #fcf9e8;
     width: 20px;
     height: 20px;
     border-radius: 3px;

src/wp-admin/user-edit.php

@@ -698,6 +698,15 @@
 										<div class="password-input-wrapper">
 											<input type="password" name="pass1" id="pass1" class="regular-text" value="" autocomplete="new-password" spellcheck="false" data-pw="<?php echo esc_attr( wp_generate_password( 24 ) ); ?>" aria-describedby="pass-strength-result" />
 											<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
+											<div id="caps-warning" class="caps-warning">
+												<span class="caps-icon">
+													<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5">
+														<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
+														<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
+													</svg>
+												</span>
+												<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
+											</div>
 										</div>
 										<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
 											<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
@@ -707,15 +716,6 @@
 											<span class="dashicons dashicons-no" aria-hidden="true"></span>
 											<span class="text"><?php _e( 'Cancel' ); ?></span>
 										</button>
-										<div id="caps-warning" class="caps-warning">
-											<span class="caps-icon">
-												<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" stroke-width="0.5">
-													<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
-													<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
-												</svg>
-											</span>
-											<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
-										</div>
 									</div>
 								</td>
 							</tr>

src/wp-admin/user-new.php

@@ -602,20 +602,20 @@
 				<div class="password-input-wrapper">
 					<input type="password" name="pass1" id="pass1" class="regular-text" autocomplete="new-password" spellcheck="false" data-reveal="1" data-pw="<?php echo esc_attr( $initial_password ); ?>" aria-describedby="pass-strength-result" />
 					<div style="display:none" id="pass-strength-result" aria-live="polite"></div>
+					<div id="caps-warning" class="caps-warning">
+						<span class="caps-icon">
+							<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5">
+								<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
+								<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
+							</svg>
+						</span>
+						<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
+					</div>
 				</div>
 				<button type="button" class="button wp-hide-pw hide-if-no-js" data-toggle="0" aria-label="<?php esc_attr_e( 'Hide password' ); ?>">
 					<span class="dashicons dashicons-hidden" aria-hidden="true"></span>
 					<span class="text"><?php _e( 'Hide' ); ?></span>
 				</button>
-				<div id="caps-warning" class="caps-warning">
-					<span class="caps-icon">
-						<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" stroke-width="0.5">
-							<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
-							<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
-						</svg>
-					</span>
-					<span class="caps-warning-text"><?php _e( 'Caps lock is on.' ); ?></span>
-				</div>
 			</div>
 		</td>
 	</tr>

src/wp-login.php

@@ -1524,7 +1524,7 @@ function wp_login_viewport_meta() {
 					</button>
 					<div id="caps-warning" class="caps-warning">
 						<span class="caps-icon">
-							<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#2c3338" stroke="#2c3338" stroke-width="0.5">
+							<svg viewBox="0 0 24 26" xmlns="http://www.w3.org/2000/svg" fill="#3c434a" stroke="#3c434a" stroke-width="0.5">
 								<path d="M12 5L19 15H16V19H8V15H5L12 5Z"/>
 								<rect x="8" y="21" width="8" height="1.5" rx="0.75"/>
 							</svg>