added notification styles

dailyjs/shared/components/Button/Button.js

@@ -121,6 +121,28 @@ export const Button = forwardRef(
             cursor: not-allowed;
           }
 
+          .button.error {
+            background: var(--secondary-default);
+            border-color: var(--secondary-default);
+          }
+          .button.error:focus {
+            box-shadow: 0 0 0px 3px ${hexa(theme.secondary.default, 0.35)};
+          }
+          .button.error:hover {
+            border-color: var(--secondary-dark);
+          }
+
+          .button.success {
+            background: var(--green-default);
+            border-color: var(--green-default);
+          }
+          .button.success:focus {
+            box-shadow: 0 0 0px 3px ${hexa(theme.green.default, 0.35)};
+          }
+          .button.success:hover {
+            border-color: var(--green-dark);
+          }
+
           .button.shadow {
             box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 4px 4px 0 rgb(0 0 0 / 4%);
           }
@@ -129,6 +151,10 @@ export const Button = forwardRef(
             box-shadow: 0 0 4px 0 rgb(0 0 0 / 8%), 0 4px 4px 0 rgb(0 0 0 / 12%);
           }
 
+          .button.small {
+            height: 42px;
+          }
+
           .button.medium-square {
             padding: 0px;
             height: 48px;

dailyjs/shared/components/Card/Card.js

@@ -2,8 +2,8 @@ import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 
-export const Card = ({ children }) => (
-  <div className="card">
+export const Card = ({ children, className }) => (
+  <div className={classNames('card', className)}>
     {children}
     <style jsx>{`
       background: white;
@@ -16,6 +16,7 @@ export const Card = ({ children }) => (
 
 Card.propTypes = {
   children: PropTypes.node,
+  className: PropTypes.string,
 };
 
 export const CardHeader = ({ children }) => (
@@ -53,14 +54,19 @@ CardBody.propTypes = {
   children: PropTypes.node,
 };
 
-export const CardFooter = ({ children, divider = false }) => (
-  <footer className={classNames('card-footer', { divider })}>
+export const CardFooter = ({ children, divider = false, flex = false }) => (
+  <footer className={classNames('card-footer', { divider, flex })}>
     {children}
     <style jsx>{`
-      display: flex;
-      margin: 0;
+      .card-footer {
+        display: flex;
+      }
 
-      &.divider {
+      :global(.card-footer.flex > *) {
+        flex: 1;
+      }
+
+      .card-footer.divider {
         border-top: 1px solid var(--gray-light);
         padding-top: var(--spacing-md);
       }
@@ -70,6 +76,7 @@ export const CardFooter = ({ children, divider = false }) => (
 CardFooter.propTypes = {
   children: PropTypes.node,
   divider: PropTypes.bool,
+  flex: PropTypes.bool,
 };
 
 export default Card;

dailyjs/shared/components/Modal/Modal.js

@@ -121,9 +121,9 @@ export const Modal = ({
 
         .backdrop .modal :global(.card-footer) {
           border-top: 0px;
-          display: grid;
-          grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
-          grid-column-gap: var(--spacing-sm);
+          display: flex;
+          column-gap: var(--spacing-xs);
+          margin-top: var(--spacing-sm);
         }
 
         .isVisible {

dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js

@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { useCallState } from '../../contexts/CallProvider';
 import { useWaitingRoom } from '../../contexts/WaitingRoomProvider';
 import { Button } from '../Button';
+import { Card, CardBody, CardFooter } from '../Card';
 
 export const WaitingRoomNotification = () => {
   const { callObject } = useCallState();
@@ -57,35 +58,43 @@ export const WaitingRoomNotification = () => {
   const handleDenyClick = () => {
     denyAccess(hasMultiplePeopleWaiting ? 'all' : waitingParticipants[0].id);
   };
-  const handleClose = () => setShowNotification(false);
+  // const handleClose = () => setShowNotification(false);
 
   return (
-    <div className="waiting-room-notification">
-      <>
+    <Card className="waiting-room-notification">
+      <CardBody>
+        {hasMultiplePeopleWaiting
+          ? `${waitingParticipants.length} people would like to join the call`
+          : `${waitingParticipants[0].name} would like to join the call`}
+      </CardBody>
+      <CardFooter>
         {hasMultiplePeopleWaiting ? (
-          <Button onClick={handleViewAllClick}>View all</Button>
+          <Button onClick={handleViewAllClick} size="small" variant="success">
+            View all
+          </Button>
         ) : (
-          <Button onClick={handleAllowClick}>Allow</Button>
+          <Button onClick={handleAllowClick} size="small" variant="success">
+            Allow
+          </Button>
         )}
-        <Button onClick={handleDenyClick} variant="secondary">
-          {hasMultiplePeopleWaiting
-            ? 'waitingRoom.denyAll'
-            : 'waitingRoom.deny'}
+        <Button onClick={handleDenyClick} size="small" variant="error">
+          {hasMultiplePeopleWaiting ? 'Deny All' : 'Deny'}
         </Button>
-        <Button onClick={handleClose} variant="ghost">
-          Close
-        </Button>
-      </>
-
+      </CardFooter>
       <style jsx>{`
-        .waiting-room-notification {
+        :global(.waiting-room-notification) {
           position: absolute;
           right: var(--spacing-sm);
           top: var(--spacing-sm);
-          background: red;
+          z-index: 999;
+          box-shadow: var(--shadow-depth-2);
+        }
+        :global(.waiting-room-notification .card-footer) {
+          display: flex;
+          column-gap: var(--spacing-xxs);
         }
       `}</style>
-    </div>
+    </Card>
   );
 };