feat(react-sdk)!: Visual redesign of the SDK and Demo App

[zwaardje]

Overview

Implements the new styling for our SDK-provided components.

Changes

Styling

• New global variables like spacing, font-size, colors, button states etc, have been added. The old variables are still available.
• Major style changes have been made to the following items: Callstats, Device settings, Buttons, Particpant layout
• Icons have been updated and added

Components

Button

CompositeButton.tsx

• ToggleMenuButton prop has been added by default DefaultToggleMenuButton
• The composite buttons has an optional variant primary and secondary to indicate a primary and secondary active state of the button
• An active class has been added to the DefaultToggleMenuButton.

Call controls

• The default caption value has been removed
• A title has been added to the buttons
• Some buttons have been provided a variant prop
• CallStats button has been replaced with Reactions button

CancelCallButton.tsx

• A cancel call confirmation button is added to allow the user end the call for all participants or leave the call.

ToggleAudioButton.tsx

• A default permission state has been added to indicate that the browsers audio permissions have not been granted

ToggleVideoButton.tsx

• A default permission state has been added to indicate that the browsers camera permissions have not been granted

ReactionsButton.tsx

• Added a layout prop horizontal or vertical defaults to horizontal

RecordCallButton.tsx

• An end recording confirmation button component has been added. To display a confirmation modal to the user either continue the recording or cancel it

Other

CallParticipantsList.tsx

• Removed the copy url button invite new participants
• Removed other related invite functionality

CallRecordingListHeader

• Put the refresh functionality to optional

CallStats.tsx

• The stats are defined with a lowBound (default 75) and a highBound (default 400) prop to indicate what you think is an acceptable latency.

DropdownSelect.tsx

• Added a dropdown selector used in the device settings

Icon.tsx

• Added a className prop to icon

MenuToggle.tsx

• Ability to choose between to visual types portal or menu to display the MenuToggle.

Notification.tsx

• Added a close prop so a notification can be closed by the user

RecordingInProgressNotification.tsx

• Added a notification that can be used to be displayed when a recording is in progress

DefaultVideoPlaceholder

• Added an initials fallback