VIB-29: Encourage more verbose shoutouts

app/assets/stylesheets/main.scss

@@ -796,23 +796,14 @@ input.email-input-new:focus-visible {
     width: 16px;
   }
 
-  width: 200px;
   height: 155px;
-  border-radius: 8px;
-  border: 3px solid $primary;
-  padding: 8px 1px 7px;
-  padding-inline-start: 0px;
-  background-color: $white;
   overflow: auto;
 
   li {
-    list-style: none;
-    text-align: left;
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow: hidden;
     padding-inline-start: 7px;
-    color: $gray-300;
 
     &:focus, &.highlight {
       cursor: pointer;

app/javascript/components/UI/rich-text/DropDownList.js

@@ -6,14 +6,14 @@ const DropDownList = ({ dataList,  coordX, coordY, onClick, valSel, changeIndexS
 
   return (
     <div className='position-absolute' style={{zIndex:350,  top: coordY, left: coordX }}>
-      <ul className="drop-down-block lh-base">
+      <ul className="drop-down-block lh-base rounded-3 border border-3 border-primary py-1 ps-0 pe-2 bg-white">
         {dataList.map(( item ,index ) => (
           <ListItem
             key = { item.id }
             id = { item.id }
             dataList = { dataList }
             index = { index }
-            className = {`item b3 ${valSel === item.id ? 'highlight' : ''}`}
+            className = {`fs-5 list-unstyled text-gray-300 ${valSel === item.id ? 'highlight' : ''}`}
             focus = {valSel === item.id }
             onClick = { onClick }
             changeIndexSel={ changeIndexSel }

app/javascript/components/UI/rich-text/RichInputElement.js

@@ -2,8 +2,8 @@ import React, { useEffect, useRef, useState } from 'react';
 import Cursor from '../rich-text/cursor';
 import DropDownList from './DropDownList';
 import { userFullName } from '../../helpers/library';
+import { calculateWordCount } from '../../helpers/helpers';
 import RichText from './rich-text';
-import xClose from '../../../../assets/images/sys_svg/x-close.svg';
 import Button from '../Button';
 import RichTextArea from './RichTextArea';
 import SwitcherShoutouts from '../SwitcherShoutouts';
@@ -39,8 +39,8 @@ const RichInputElement = ({
   const MARKER = '@';
   const TAG_AT = '<span class="' + classAt + '">' + MARKER;
   const END_TAG_AT = '</span>';
-  const OFFSET_X = 0;
-  const OFFSET_Y = 40;
+  const OFFSET_X = -10;
+  const OFFSET_Y = -15;
   const LIMIT_CHARS = 700;
   const highlightSmbATUnknownUser = false;
   const node = highlightSmbATUnknownUser ? TAG_AT + END_TAG_AT : MARKER;
@@ -54,11 +54,7 @@ const RichInputElement = ({
     if (Cursor.getCurrentCursorPosition(element).focusOffset === 1)
       setCoordinates(Cursor.getCurrentCursorPosition(element).coordinates);
     setCursorPosition(Cursor.getCurrentCursorPosition(element));
-    element.innerText === undefined || element.innerText === '\x0A'
-      ? setIsDisabled(true)
-      : setIsDisabled(false);
   }, [caret, textHTML, currentSelection]);
-
   const handleCheckboxChange = () => {
     setIsChecked(!isChecked);
   };
@@ -577,6 +573,7 @@ const RichInputElement = ({
   const clickHandling = (event) => {
     const element = textAreaRef.current;
     const cursor = Cursor.getCurrentCursorPosition(element);
+
     if (
       element.textContent.includes(
         `Use "@"  to include Shoutouts to members of the team!`
@@ -662,6 +659,10 @@ const RichInputElement = ({
       });
   };
 
+  useEffect(() => {
+    setIsDisabled(calculateWordCount(textHTML) <= 2);
+  }, [textHTML]);
+
   return (
     <>
       <div className="d-flex flex-column align-items-center">
@@ -674,7 +675,13 @@ const RichInputElement = ({
           className="c3 place-size-shout-out w-100 border-none text-start d-inline-block lh-sm pt-2"
           placeholder={`\x0DUse "${TAG_AT}${END_TAG_AT}"  to include Shoutouts to members of the team!\x0A`}
         />
-        <div className='d-flex flex-column gap-3 justify-content-between flex-lg-row w-100'>
+        <div className="d-flex flex-column gap-3 justify-content-between flex-lg-row w-100">
+          <p
+            className="text-gray-300 mx-auto"
+            style={{ visibility: isDisabled ? 'visible' : 'hidden' }}
+          >
+            Please enter more information. The more detail the better.
+          </p>
           <SwitcherShoutouts
             isChecked={isChecked}
             handleCheckboxChange={handleCheckboxChange}

app/javascript/components/UI/rich-text/cursor.js

@@ -41,17 +41,18 @@ export default class Cursor {
                 }
             }
             if (selection.rangeCount) {
-                let range = selection.getRangeAt(0).cloneRange();
+                const range = selection.getRangeAt(0).cloneRange();
                 if (range.getClientRects) {
-                    range.collapse(true);
-                    let rects = range.getClientRects();
-                    if (rects.length > 0) {
-                        let rect = rects[0];
-                        coordinates.x = rect.left + window.scrollX ;
-                        coordinates.y = rect.top + window.scrollY ;
-                    }
+                  range.collapse(true);
+                  const rect = range.getBoundingClientRect();
+                  const modal = document.querySelector('.custom-modal');
+                  if (modal) {
+                    const modalRect = modal.getBoundingClientRect();
+                    coordinates.x = rect.x - modalRect.left;
+                    coordinates.y = rect.y - modalRect.top;
+                  }
                 }
-            }
+              }
             return {
                 charCount: charCount,
                 focusNode: focusNode,

app/javascript/components/helpers/helpers.js

@@ -123,3 +123,11 @@ export function usersEmoji(users, current_user, emojiObject) {
 export function gifUrlWithId(id) {
   return 'https://media.giphy.com/media/' + id + '/giphy.gif'
 }
+
+export const calculateWordCount = (text) => {
+  return text
+    .replace(/<span[^>]*>@[^<]*<\/span>/g, '')
+    .trim()
+    .split(' ')
+    .filter((word) => word.length > 0).length;
+}