Merge pull request #2 from Bandwidth-Samples/SWI-3543

SWI-3543 Update App for V2 Design

Author: vikash-band

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+yarn.lock

package.json

@@ -21,6 +21,7 @@
     "@emotion/styled": "^11.8.1",
     "@mui/icons-material": "^5.14.0",
     "@mui/material": "^5.14.0",
+    "@mui/styles": "^5.14.0",
     "@okta/okta-auth-js": "^7.4.0",
     "@okta/okta-react": "^6.7.0",
     "@testing-library/jest-dom": "^5.14.1",

src/App.js

@@ -1,9 +1,13 @@
 import './css/App.css';
 import DialPad from './components/DialPad';
+import Navbar from './components/Navbar';
+
 
 export default function App() {
   return (
     <div className='App'>
+      <Navbar/>
+      <h1>In-App Calling</h1>
       <DialPad/>
     </div>
   );

src/components/CallControlButton.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import '../css/CallControlButton.css';
+
+export default function CallControlButton({type, onClick, disabled, Icon, iconColor='var(--white)', fontSize='large'}) {
+  const color = disabled ? 'var(--grey65)' : iconColor;
+  return (
+    <button className={`${type}-button`} onClick={onClick} disabled={disabled}>
+      <Icon sx={{ color: color }} fontSize={fontSize}/>
+    </button>
+  );
+}