Allow to send emojis in chat

custom/fitness-demo/components/Call/ChatAside.js

@@ -4,6 +4,7 @@ import Button from '@custom/shared/components/Button';
 import { TextInput } from '@custom/shared/components/Input';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
 import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { ReactComponent as IconEmoji } from '@custom/shared/icons/emoji-sm.svg';
 import { useChat } from '../../contexts/ChatProvider';
 import { useMessageSound } from '../../hooks/useMessageSound';
 
@@ -16,6 +17,7 @@ export const ChatAside = () => {
   const { localParticipant } = useParticipants();
   const [newMessage, setNewMessage] = useState('');
   const playMessageSound = useMessageSound();
+  const [showEmojis, setShowEmojis] = useState(false);
 
   const chatWindowRef = useRef();
 
@@ -57,7 +59,67 @@ export const ChatAside = () => {
           </div>
         ))}
       </div>
+      {showEmojis && (
+        <div className="emojis">
+          <Button
+            variant="gray"
+            size="small-circle"
+            onClick={() => sendMessage('😍')}
+          >
+            😍
+          </Button>
+          <Button
+            variant="gray"
+            size="small-circle"
+            onClick={() => sendMessage('😭')}
+          >
+            😭
+          </Button>
+          <Button
+            variant="gray"
+            size="small-circle"
+            onClick={() => sendMessage('😂')}
+          >
+            😂
+          </Button>
+          <Button
+            variant="gray"
+            size="small-circle"
+            onClick={() => sendMessage('👋')}
+          >
+            👋
+          </Button>
+          <Button
+            variant="gray"
+            size="small-circle"
+            onClick={() => sendMessage('👌')}
+          >
+            👌
+          </Button>
+          <Button
+            variant="gray"
+            size="small-circle"
+            onClick={() => sendMessage('👏')}
+          >
+            👏
+          </Button>
+          <Button
+            variant="gray"
+            size="small-circle"
+            onClick={() => sendMessage('🙏')}
+          >
+            🙏
+          </Button>
+        </div>
+      )}
       <footer className="chat-footer">
+        <Button
+          variant="gray"
+          size="small-circle"
+          onClick={() => setShowEmojis(!showEmojis)}
+        >
+          <IconEmoji />
+        </Button>
         <TextInput
           value={newMessage}
           placeholder="Type message here"
@@ -77,6 +139,20 @@ export const ChatAside = () => {
         </Button>
       </footer>
       <style jsx>{`
+        .emojis {
+          position: absolute;
+          display: flex;
+          bottom: var(--spacing-xxl);
+          left: 0px;
+          transform: translateX(calc(-50% + 26px));
+          z-index: 99;
+          background: white;
+          padding: var(--spacing-xxxs);
+          column-gap: 5px;
+          border-radius: var(--radius-md);
+          box-shadow: var(--shadow-depth-2);
+        }
+
         .messages-container {
           flex: 1;
           overflow-y: scroll;
@@ -122,7 +198,7 @@ export const ChatAside = () => {
         }
 
         .chat-footer :global(.input-container input) {
-          padding-right: 0px;
+          padding-right: 0;
         }
 
         .chat-footer :global(.send-button) {

custom/shared/components/Button/Button.js

@@ -229,6 +229,13 @@ export const Button = forwardRef(
             border-radius: 32px;
           }
           
+          .button.small-circle {
+            padding: 0px;
+            height: 42px;
+            width: 42px;
+            border-radius: 21px;
+          }
+
           .button.translucent {
             background: ${hexa(theme.blue.light, 0.35)};
             color: white;

custom/shared/icons/emoji-sm.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.5 16C8.32843 16 9 15.3284 9 14.5C9 13.6716 8.32843 13 7.5 13C6.67157 13 6 13.6716 6 14.5C6 15.3284 6.67157 16 7.5 16Z" fill="#2B3F56"/>
+<path d="M16.5 16C17.3284 16 18 15.3284 18 14.5C18 13.6716 17.3284 13 16.5 13C15.6716 13 15 13.6716 15 14.5C15 15.3284 15.6716 16 16.5 16Z" fill="#2B3F56"/>
+<path d="M12 0C5.383 0 0 5.383 0 12C0 18.617 5.383 24 12 24C18.617 24 24 18.617 24 12C24 5.383 18.617 0 12 0ZM12 22C6.486 22 2 17.514 2 12C2.031 11 4.544 9.951 6.855 9.951C6.876 9.951 6.896 9.951 6.917 9.951C9.442 9.949 12.558 9.955 15.796 7.472C18.375 10.946 22 12 22 12C22 17.514 17.514 22 12 22Z" fill="#2B3F56"/>
+</svg>