feat: update the warning message for the Caps Lock key

Author: aradzie

packages/keybr-textinput-ui/lib/TextArea.module.less

@@ -5,27 +5,19 @@
   margin-block: -1rem;
   padding-inline: 1rem;
   padding-block: 1rem;
-  user-select: none;
 }
 
 .messageArea {
   display: flex;
-  position: absolute;
-  inset: 0;
   align-items: center;
   justify-content: center;
 }
 
 .messageText {
-  padding-inline: 1rem;
+  padding-inline: 2rem;
   padding-block: 0.5rem;
+  border: var(--separator-border);
   color: var(--Popup__color);
   background-color: var(--Popup__background-color);
   box-shadow: var(--Popup--small__box-shadow);
 }
-
-.capsLockMessageArea {
-  position: relative;
-  padding: 5px 10px;
-  font-weight: bold;
-}

packages/keybr-textinput-ui/lib/TextArea.tsx

@@ -115,7 +115,7 @@ export function TextArea({
         focus={demo || focus}
       />
       {!demo && focus && ModifierState.capsLock && (
-        <div className={styles.capsLockMessageArea}>
+        <div className={styles.messageArea}>
           <div className={styles.messageText}>
             <FormattedMessage
               id="textArea.capsLock.message"

packages/keybr-textinput-ui/lib/TextLines.module.less

@@ -3,6 +3,7 @@
   font-kerning: none;
   font-variant: none;
   line-height: 1.2;
+  user-select: none;
 }
 
 .wrap {

packages/keybr-themes/lib/themes/theme.less

@@ -78,7 +78,7 @@
   --Popup__color: var(--text-color);
   --Popup__background-color: var(--background-color);
   --Popup__box-shadow: 0 0.5rem 3rem var(--shadow-color);
-  --Popup--small__box-shadow: 0 0.5rem 1rem var(--shadow-color);
+  --Popup--small__box-shadow: 0 0rem 1rem var(--shadow-color);
 
   --Spotlight__background-color: #00000033;
   --Spotlight__border-color: var(--secondary-l2);