Merge pull request #10 from AyaDigital/hotfix/DMVP-1032

DMVP-1032 - Change End Call Button

src/components/Buttons/EndCallButton/DropCallButton.tsx

@@ -3,6 +3,7 @@ import clsx from 'clsx';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 
 import { Button } from '@material-ui/core';
+import CallEndIcon from '../../../icons/CallEndIcon';
 import useKeycloakAuth from '../../../state/useKeycloakAuth/useKeycloakAuth';
 
 import useVideoContext from '../../../hooks/useVideoContext/useVideoContext';
@@ -11,10 +12,10 @@ import { useAppState } from '../../../state';
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     button: {
-      background: theme.brand,
+      background: 'none',
       color: 'white',
       '&:hover': {
-        background: '#600101',
+        background: 'none',
       },
     },
   })
@@ -48,7 +49,7 @@ export default function EndCallButton(props: { className?: string }) {
       className={clsx(classes.button, props.className)}
       data-cy-disconnect
     >
-      End Call
+      <CallEndIcon />
     </Button>
   );
 }

src/icons/CallEndIcon.tsx

+import React from 'react';
+
+export default function CallEndIcon() {
+  return (
+    <svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect width="56" height="56" rx="28" fill="#FF544A" />
+      <path
+        d="M27.9921 24C24.1992 24.0085 20.6778 24.7891 18.9213 26.5456C18.1322 27.3347 17.7249 28.2936 17.7758 29.4646C17.8097 30.1519 18.0303 30.7543 18.4376 31.1701C18.7601 31.4841 19.2013 31.6708 19.7189 31.5859L22.8755 31.0513C23.3676 30.975 23.707 30.8222 23.9277 30.6016C24.2077 30.3216 24.2925 29.9143 24.2925 29.3627L24.301 28.4888C24.301 28.353 24.3604 28.2512 24.4368 28.1663C24.5301 28.0645 24.6574 28.0136 24.7592 27.9966C25.3447 27.8608 26.5411 27.7251 28.0006 27.7251C29.4516 27.7251 30.6481 27.8269 31.2335 27.9966C31.3269 28.0221 31.4542 28.073 31.5475 28.1663C31.6239 28.2512 31.6748 28.353 31.6833 28.4803L31.6918 29.3627C31.7002 29.9143 31.7851 30.3216 32.0651 30.6016C32.2857 30.8222 32.6251 30.975 33.1173 31.0513L36.2399 31.5774C36.7745 31.6708 37.2242 31.4756 37.5636 31.1362C37.9709 30.7459 38.2 30.1434 38.217 29.4476C38.2509 28.2851 37.8097 27.3263 37.029 26.5456C35.2726 24.7891 31.7936 24 27.9921 24Z"
+        fill="white"
+      />
+    </svg>
+  );
+}