Feature: Add tooltip to reaction button (#497)

* Add tooltip

* Fix x coordinate

* Delete delay from hide

* Rounded and no triangle

* Translations and width fix

* Update test and svg name

* New component and logic in the IntroNotification

* Add Intro Notification unit test

* Add Footer Test

* Fix footer test

* Change toolbar mock

* Mock individualy

* typo

* Remove console

* Gave up

* Delete comments

frontend/locales/ca/fishbowl.json

@@ -103,5 +103,14 @@
     "permissionsModalTitle": "Permisos necessaris",
     "permissionsModalDescription": "Si vols ocupar una cadira per a dir alguna cosa, Stooa necessita permisos per a accedir al teu micròfon, perquè la resta de participants t'escolti.",
     "permissionsModalButton": "Sol·licitar accés",
-    "permissionsModalErrorToast" : "Sembla que tens bloquejats els permisos del micròfon des del navegador.<br/>Intenta recarregar la pàgina per a continuar."
+    "permissionsModalErrorToast" : "Sembla que tens bloquejats els permisos del micròfon des del navegador.<br/>Intenta recarregar la pàgina per a continuar.",
+    "reaction": {
+        "agree": "D'acord",
+        "disagree": "Desacord",
+        "love": "M'encanta",
+        "applause": "Bravo!",
+        "laugh": "LOL",
+        "wave": "Hola",
+        "insightful": "Interessant"
+    }
 }

frontend/locales/en/fishbowl.json

@@ -103,5 +103,14 @@
     "permissionsModalTitle": "Permissions needed",
     "permissionsModalDescription": "If you want to take a seat in order to say something, Stooa needs permissions to access your microphone so others can hear you.",
     "permissionsModalButton": "Request access",
-    "permissionsModalErrorToast" : "It looks like you have blocked the microphone permissions from the browser.<br/>Try reloading the page to continue."
+    "permissionsModalErrorToast" : "It looks like you have blocked the microphone permissions from the browser.<br/>Try reloading the page to continue.",
+    "reaction": {
+        "agree": "Agree",
+        "disagree": "Disagree",
+        "love": "Love",
+        "applause": "Applause",
+        "laugh": "LOL",
+        "wave": "Hi",
+        "insightful": "Insightful"
+    }
 }

frontend/locales/es/fishbowl.json

@@ -103,5 +103,14 @@
     "permissionsModalTitle": "Permisos necesarios",
     "permissionsModalDescription": "Si quieres ocupar una silla para decir algo, Stooa necesita permisos para acceder a tu micrófono, para que el resto de participantes te escuche.",
     "permissionsModalButton": "Solicitar acceso",
-    "permissionsModalErrorToast" : "Parece que tienes bloqueados los permisos del micrófono desde el navegador.<br/>Intenta recargar la página para continuar."
+    "permissionsModalErrorToast" : "Parece que tienes bloqueados los permisos del micrófono desde el navegador.<br/>Intenta recargar la página para continuar.",
+    "reaction": {
+        "agree": "De acuerdo",
+        "disagree": "Desacuerdo",
+        "love": "Me encanta",
+        "applause": "¡Bravo!",
+        "laugh": "LOL",
+        "wave": "Hola",
+        "insightful": "Interesante"
+    }
 }

frontend/locales/fr/fishbowl.json

@@ -95,5 +95,14 @@
     "permissionsModalTitle": "Permissions needed",
     "permissionsModalDescription": "If you want to take a seat in order to say something, Stooa needs permissions to access your microphone so others can hear you.",
     "permissionsModalButton": "Grant permissions",
-    "permissionsModalErrorToast" : "It looks like you have blocked the microphone permissions from the browser.<br/>Try reloading the page to continue."
+    "permissionsModalErrorToast" : "It looks like you have blocked the microphone permissions from the browser.<br/>Try reloading the page to continue.",
+    "reaction": {
+        "agree": "D'accord",
+        "disagree": "Pas d'accord",
+        "love": "J'aime",
+        "applause": "Bravo!",
+        "laugh": "LOL",
+        "wave": "Salut",
+        "insightful": "Intéressant"
+    }
 }

frontend/src/components/App/Footer/index.tsx

@@ -10,11 +10,10 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import dynamic from 'next/dynamic';
-import useTranslation from 'next-translate/useTranslation';
 
 import { useStooa } from '@/contexts/StooaManager';
 import { Footer as FooterStyled } from '@/layouts/App/styles';
-import { CustomToast } from '@/ui/CustomToast';
+import IntroNotification from '@/components/App/IntroNotification';
 
 const ToolBar = dynamic(import('@/components/App/ToolBar'), { loading: () => <div /> });
 const Logo = dynamic(import('@/components/Common/Logo'), { loading: () => <div /> });
@@ -28,13 +27,12 @@ interface Props {
 
 const Footer: React.FC<Props> = ({ participantsActive }) => {
   const { onIntroduction, isModerator, conferenceStatus } = useStooa();
-  const { t } = useTranslation('app');
   const router = useRouter();
   const { fid } = router.query;
 
   return (
     <FooterStyled className={participantsActive ? 'drawer-open' : ''}>
-      {onIntroduction && <CustomToast>{t('notification.joinAfterIntroduction')}</CustomToast>}
+      {onIntroduction && !isModerator && <IntroNotification />}
       <div className="col-left hide-mobile">
         <Logo />
       </div>

frontend/src/components/App/Footer/styles.ts

@@ -11,6 +11,7 @@ import styled from 'styled-components';
 
 import AlertStyled from '@/ui/Alert';
 import { media, rems, space } from '@/ui/helpers';
+import { CustomToast } from '@/ui/CustomToast';
 
 const Alert = styled(AlertStyled)`
   position: absolute;

frontend/src/components/App/IntroNotification/index.tsx

@@ -0,0 +1,33 @@
+/*!
+ * This file is part of the Stooa codebase.
+ *
+ * (c) 2020 - present Runroom SL
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { useState } from 'react';
+import { StyledIntroNotification } from './styles';
+import Cross from '@/ui/svg/cross.svg';
+import useTranslation from 'next-translate/useTranslation';
+
+const IntroNotification = () => {
+  const [showIntroNotification, setShowIntroNotification] = useState(true);
+  const { t } = useTranslation('app');
+
+  if (showIntroNotification) {
+    return (
+      <StyledIntroNotification data-testid="intro-notification">
+        {t('notification.joinAfterIntroduction')}
+        <button className="cross" onClick={() => setShowIntroNotification(false)}>
+          <Cross />
+        </button>
+      </StyledIntroNotification>
+    );
+  } else {
+    return null;
+  }
+};
+
+export default IntroNotification;

frontend/src/components/App/IntroNotification/styles.ts

@@ -0,0 +1,30 @@
+/*!
+ * This file is part of the Stooa codebase.
+ *
+ * (c) 2020 - present Runroom SL
+ *
+ * For the full copyright and license information, please view the LICENSE
+ * file that was distributed with this source code.
+ */
+
+import { CustomToast } from '@/ui/CustomToast';
+import { space } from '@/ui/helpers';
+import styled from 'styled-components';
+
+const StyledIntroNotification = styled(CustomToast)`
+  padding-right: ${space(4.5)};
+  & > .cross {
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    right: ${space(1.25)};
+    top: 50%;
+    transform: translateY(-50%);
+
+    & svg path {
+      fill: currentColor;
+    }
+  }
+`;
+
+export { StyledIntroNotification };

frontend/src/components/App/Reactions/ReactionEmoji/index.tsx

@@ -7,12 +7,13 @@
  * file that was distributed with this source code.
  */
 
+import useTranslation from 'next-translate/useTranslation';
 import { useEffect, useRef, useState } from 'react';
 import { REACTION_EMOJIS } from '../ReactionsEmojis';
-import { StyledEmojiReaction } from './styles';
+import { StyledEmojiReaction, StyledTooltip } from './styles';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
-  emoji: 'agree' | 'disagree' | 'love' | 'applause' | 'joy' | 'wave' | 'insightful';
+  emoji: keyof typeof REACTION_EMOJIS;
   onClick?: (mouseEvent: React.MouseEvent) => void;
   disabled?: boolean;
 }
@@ -23,6 +24,9 @@ const ReactionEmoji = ({ onClick, emoji, disabled, ...props }: Props) => {
   const [initialScale, setInitialScale] = useState<number>(1);
   const [size, setSize] = useState<number>(1);
   const [clicked, setClicked] = useState<number>(0);
+  const [showTooltip, setShowTooltip] = useState(false);
+
+  const { t } = useTranslation('fishbowl');
 
   const changeCssScaleVariable = scale => {
     if (scale) reactionRef.current.style.setProperty('--emojiScale', scale);
@@ -64,16 +68,27 @@ const ReactionEmoji = ({ onClick, emoji, disabled, ...props }: Props) => {
   }, [reactionRef.current]);
 
   return (
-    <StyledEmojiReaction
-      data-testid={`emoji-reaction-${emoji}`}
-      ref={reactionRef}
-      className={disabled ? 'disabled' : ''}
-      id={emoji}
-      onClick={handleOnClick}
-      {...props}
+    <div
+      style={{ position: 'relative' }}
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+      onClick={() => (showTooltip ? setShowTooltip(false) : null)}
     >
-      {REACTION_EMOJIS[emoji]}
-    </StyledEmojiReaction>
+      <StyledTooltip className={`body-xs ${showTooltip ? 'show' : ''}`}>
+        {t(`reaction.${emoji}`)}
+      </StyledTooltip>
+
+      <StyledEmojiReaction
+        data-testid={`emoji-reaction-${emoji}`}
+        ref={reactionRef}
+        className={disabled ? 'disabled' : ''}
+        id={emoji}
+        onClick={handleOnClick}
+        {...props}
+      >
+        {REACTION_EMOJIS[emoji]}
+      </StyledEmojiReaction>
+    </div>
   );
 };
 

frontend/src/components/App/Reactions/ReactionEmoji/styles.ts

@@ -7,13 +7,42 @@
  * file that was distributed with this source code.
  */
 
-import { media } from '@/ui/helpers';
+import { media, space } from '@/ui/helpers';
+import { COLOR_NEUTRO_100 } from '@/ui/settings';
 import styled from 'styled-components';
 
+const StyledTooltip = styled.div`
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  height: 24px;
+  width: max-content;
+  padding: ${space()} ${space(2)};
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: calc(100% + ${space(1.25)});
+  border-radius: 46px;
+
+  color: ${COLOR_NEUTRO_100};
+  background-color: hsla(0, 59%, 0%, 0.65);
+  backdrop-filter: blur(12px);
+
+  transition: opacity 0.3s ease-in-out;
+  opacity: 0;
+
+  &.show {
+    transition: opacity 0.3s 0.3s ease-in-out;
+    opacity: 1;
+  }
+`;
+
 const StyledEmojiReaction = styled.div`
   --translateY: 0;
   --emojiScale: 0.9;
 
+  position: relative;
   cursor: pointer;
   transition: transform 0.15s cubic-bezier(0.22, 1, 0.36, 1);
 
@@ -43,4 +72,4 @@ const StyledEmojiReaction = styled.div`
   }
 `;
 
-export { StyledEmojiReaction };
+export { StyledEmojiReaction, StyledTooltip };

frontend/src/components/App/Reactions/ReactionsEmojis.tsx

@@ -11,7 +11,7 @@ import Applause from '@/ui/svg/emojis/applause.svg';
 import Agree from '@/ui/svg/emojis/agree.svg';
 import Disagree from '@/ui/svg/emojis/disagree.svg';
 import Love from '@/ui/svg/emojis/love.svg';
-import Joy from '@/ui/svg/emojis/joy.svg';
+import Laugh from '@/ui/svg/emojis/laugh.svg';
 import Insightful from '@/ui/svg/emojis/insightful.svg';
 import Wave from '@/ui/svg/emojis/wave.svg';
 
@@ -20,7 +20,7 @@ export const REACTION_EMOJIS = {
   disagree: <Disagree />,
   love: <Love />,
   applause: <Applause />,
-  joy: <Joy />,
+  laugh: <Laugh />,
   wave: <Wave />,
   insightful: <Insightful />
 };

frontend/src/components/App/Reactions/ReactionsSender/index.tsx

@@ -64,7 +64,7 @@ const ReactionsSender = ({ onMouseLeave, className }: Props) => {
 
   const handleClick = (mouseEvent: React.MouseEvent) => {
     const target = mouseEvent.currentTarget as HTMLDivElement;
-    const xCoordinate = target.offsetLeft;
+    const xCoordinate = target.parentElement.offsetLeft;
 
     const emojiCoordinate = xCoordinate + 20;
 
@@ -167,8 +167,8 @@ const ReactionsSender = ({ onMouseLeave, className }: Props) => {
       />
       <ReactionEmoji
         disabled={disableToSendEmojis}
-        emoji="joy"
-        data-testid="joy-emoji"
+        emoji="laugh"
+        data-testid="laugh-emoji"
         onClick={handleClick}
       />
       <ReactionEmoji