Manage 'on stage' request directly in viewers list

CHANGELOG.md

@@ -27,6 +27,9 @@ right (and close / open it)
 - rename LiveRegistration model in LiveSession
 - Disable jitsi prejoin page
 - Admin can access all LiveSession belonging to a video
+- Move on-stage request functional (in Instructor view) from under
+the video to the ViewersList in the right panel
+
 
 ### Fixed
 

src/frontend/components/Button/ButtonLayout/index.spec.tsx

@@ -4,7 +4,7 @@ import { render, screen } from '@testing-library/react';
 import { ButtonLayout } from '.';
 
 const Icon = jest.fn(() => <span>icon</span>);
-const Badge = () => <span>badge</span>;
+const badge = 'badge';
 
 describe('<ButtonLayout />', () => {
   afterEach(() => {
@@ -29,7 +29,7 @@ describe('<ButtonLayout />', () => {
   it('does not render the badge if there is no Icon set', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         label="Button"
         reversedColor={'reversed-color'}
         tintColor={'int-color'}
@@ -61,7 +61,7 @@ describe('<ButtonLayout />', () => {
   it('renders the icon and the badge and the title', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={() => <span>icon</span>}
         label="Button"
         reversedColor={'reversed-color'}
@@ -78,7 +78,7 @@ describe('<ButtonLayout />', () => {
   it('renders the Button component with default style', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={Icon}
         label="Button"
         reversedColor={'#ffffff'}
@@ -96,7 +96,7 @@ describe('<ButtonLayout />', () => {
       {
         height: '100%',
         iconColor: '#0a67de',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -107,7 +107,7 @@ describe('<ButtonLayout />', () => {
   it('renders the Button component with reversed style', () => {
     render(
       <ButtonLayout
-        badge={<Badge />}
+        badge={badge}
         Icon={Icon}
         label="Button"
         reversed

src/frontend/components/Button/ButtonLayout/index.tsx

@@ -22,7 +22,6 @@ const IconBox = styled(Box)`
 
 const TextBox = styled(Box)`
   display: flex;
-  margin-top: 6px;
   text-align: center;
 `;
 
@@ -34,11 +33,14 @@ const StyledText = styled(Text)`
     screenSize === 'small' ? '-0.3px' : '-0.13px'};
   line-height: ${({ screenSize }: ResponsiveProps) =>
     screenSize === 'small' ? '0.8rem' : '0.9rem'};
-  margin: auto;
+`;
+
+const StyledTextBadge = styled(Text)`
+  font-family: 'Roboto-Bold';
 `;
 
 export interface ButtonLayoutSubComponentProps {
-  badge?: JSX.Element;
+  badge?: string;
   Icon?: React.FC<SvgProps>;
   label?: string;
 }
@@ -61,29 +63,37 @@ export const ButtonLayout = ({
 }: ButtonLayoutProps) => {
   const size = useContext(ResponsiveContext);
 
-  let iconColor;
-  let rectColor;
-
-  if (!reversed) {
-    iconColor = tintColor;
-    rectColor = 'none';
-  } else {
-    iconColor = reversedColor;
-    rectColor = tintColor;
-  }
+  const iconColor = reversed ? reversedColor : tintColor;
+  const rectColor = reversed ? tintColor : undefined;
 
   return (
-    <Box align="center" fill>
+    <Box align="center" flex height="100%">
       {Icon && (
         <IconBox screenSize={size}>
           <Icon iconColor={iconColor} focusColor={rectColor} height="100%" />
-          {badge}
+          {badge && (
+            <Box
+              align="center"
+              background="white"
+              border={{
+                color: tintColor,
+                size: 'xsmall',
+              }}
+              pad={{ horizontal: '3px', vertical: '1px' }}
+              round="6px"
+              style={{ position: 'absolute', bottom: '0px', right: '0px' }}
+            >
+              <StyledTextBadge color={tintColor} size="0.688rem">
+                {badge}
+              </StyledTextBadge>
+            </Box>
+          )}
         </IconBox>
       )}
 
       {label && (
-        <TextBox>
-          <StyledText color={textColor} screenSize={size} size=".8rem">
+        <TextBox align="center" margin={{ top: '6px' }}>
+          <StyledText color={textColor} screenSize={size}>
             {label}
           </StyledText>
         </TextBox>

src/frontend/components/Button/index.spec.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import { Button } from '.';
 
 const Icon = jest.fn(() => <span>icon</span>);
-const Badge = () => <span>badge</span>;
+const badge = 'badge';
 
 describe('<Button />', () => {
   afterEach(() => {
@@ -28,14 +28,14 @@ describe('<Button />', () => {
   });
 
   it('does not render the badge if there is no Icon set', () => {
-    render(<Button label="Button" badge={<Badge />} />);
+    render(<Button label="Button" badge={badge} />);
 
     screen.getByRole('button', { name: /Button/i });
     expect(screen.queryByText('badge')).not.toBeInTheDocument();
   });
 
   it('renders the Button component with default style', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} />);
+    render(<Button label="Button" Icon={Icon} badge={badge} />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -45,7 +45,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -54,7 +54,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with default style disabled', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} disabled />);
+    render(<Button label="Button" Icon={Icon} badge={badge} disabled />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -64,7 +64,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#81ade6',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -73,7 +73,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with default style hovered', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} />);
+    render(<Button label="Button" Icon={Icon} badge={badge} />);
 
     fireEvent.mouseEnter(screen.getByRole('button', { name: /Button/i }));
 
@@ -84,7 +84,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );
@@ -102,7 +102,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with reversed style', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} reversed />);
+    render(<Button label="Button" Icon={Icon} badge={badge} reversed />);
 
     screen.getByRole('button', { name: /Button/i });
 
@@ -122,7 +122,7 @@ describe('<Button />', () => {
 
   it('renders the Button component with reversed style disabled', () => {
     render(
-      <Button label="Button" Icon={Icon} badge={<Badge />} disabled reversed />,
+      <Button label="Button" Icon={Icon} badge={badge} disabled reversed />,
     );
 
     screen.getByRole('button', { name: /Button/i });
@@ -142,7 +142,7 @@ describe('<Button />', () => {
   });
 
   it('renders the Button component with reversed style hovered', () => {
-    render(<Button label="Button" Icon={Icon} badge={<Badge />} reversed />);
+    render(<Button label="Button" Icon={Icon} badge={badge} reversed />);
 
     fireEvent.mouseEnter(screen.getByRole('button'));
 
@@ -164,7 +164,7 @@ describe('<Button />', () => {
       {
         height: '100%',
         iconColor: '#055fd2',
-        focusColor: 'none',
+        focusColor: undefined,
       },
       {},
     );

src/frontend/components/Chat/SharedChatComponents/ChatAvatar/index.tsx

@@ -1,8 +1,11 @@
 import { Box } from 'grommet';
+import { normalizeColor } from 'grommet/utils';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
 
+import { theme } from 'utils/theme/theme';
+
 const messages = defineMessages({
   avatarTitle: {
     defaultMessage: "The user's avatar",
@@ -11,9 +14,13 @@ const messages = defineMessages({
   },
 });
 
+interface AvatarProps {
+  isInstructor: boolean;
+}
+
 const AvatarBox = styled(Box)`
-  // minWidth is set otherwise avatar width is crushed by the margin of the component next to the avatar
-  min-width: 24px;
+  outline: ${({ isInstructor }: AvatarProps) =>
+    isInstructor && `2px solid ${normalizeColor('blue-active', theme)}`};
 `;
 
 interface ChatAvatarProps {
@@ -24,19 +31,12 @@ export const ChatAvatar = ({ isInstructor }: ChatAvatarProps) => {
   const intl = useIntl();
   return (
     <AvatarBox
-      background="bg-marsha"
-      border={
-        isInstructor
-          ? {
-              color: 'blue-chat',
-              size: 'small',
-            }
-          : undefined
-      }
-      height="24px"
+      background={`${normalizeColor('blue-active', theme)}19`}
+      isInstructor={isInstructor!}
+      height="26px"
       round="6px"
       title={intl.formatMessage(messages.avatarTitle)}
-      width="24px"
+      width="26px"
     />
   );
 };

src/frontend/components/Chat/SharedChatComponents/ChatMessageMetadatas/index.spec.tsx

@@ -23,8 +23,8 @@ describe('<ChatMessageMetadatas />', () => {
     );
 
     expect(chatAvatarDiv).toHaveStyle({
-      width: '24px',
-      height: '24px',
+      width: '26px',
+      height: '26px',
     });
     expect(senderNameDiv).toHaveTextContent('John Doe');
     expect(messageTimeDiv).toHaveTextContent('12:12');