From a4959bd4283843487bccf63cf9bc5518d8a631e2 Mon Sep 17 00:00:00 2001
From: Jon <jon@daily.co>
Date: Wed, 16 Jun 2021 12:45:02 +0100
Subject: [PATCH] further styles waiting room notification

---
 .../WaitingRoom/WaitingRoomNotification.js    | 67 ++++++++++++++-----
 dailyjs/shared/icons/add-person-lg.svg        |  1 +
 2 files changed, 50 insertions(+), 18 deletions(-)
 create mode 100644 dailyjs/shared/icons/add-person-lg.svg

diff --git a/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js b/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js
index aeb9df3..dbee7fb 100644
--- a/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js
+++ b/dailyjs/shared/components/WaitingRoom/WaitingRoomNotification.js
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { useCallState } from '../../contexts/CallProvider';
 import { useWaitingRoom } from '../../contexts/WaitingRoomProvider';
+import { ReactComponent as IconWaiting } from '../../icons/add-person-lg.svg';
 import { Button } from '../Button';
 import { Card, CardBody, CardFooter } from '../Card';
 
@@ -58,40 +59,70 @@ export const WaitingRoomNotification = () => {
   const handleDenyClick = () => {
     denyAccess(hasMultiplePeopleWaiting ? 'all' : waitingParticipants[0].id);
   };
-  // const handleClose = () => setShowNotification(false);
 
   return (
     <Card className="waiting-room-notification">
+      <aside>
+        <IconWaiting />
+      </aside>
       <CardBody>
+        <strong>
+          {hasMultiplePeopleWaiting
+            ? waitingParticipants.length
+            : waitingParticipants[0].name}
+        </strong>
         {hasMultiplePeopleWaiting
-          ? `${waitingParticipants.length} people would like to join the call`
-          : `${waitingParticipants[0].name} would like to join the call`}
+          ? ` people would like to join the call`
+          : ` would like to join the call`}
+        <CardFooter>
+          {hasMultiplePeopleWaiting ? (
+            <Button onClick={handleViewAllClick} size="small" variant="success">
+              View all
+            </Button>
+          ) : (
+            <Button onClick={handleAllowClick} size="small" variant="success">
+              Allow
+            </Button>
+          )}
+          <Button onClick={handleDenyClick} size="small" variant="error">
+            {hasMultiplePeopleWaiting ? 'Deny All' : 'Deny'}
+          </Button>
+        </CardFooter>
       </CardBody>
-      <CardFooter>
-        {hasMultiplePeopleWaiting ? (
-          <Button onClick={handleViewAllClick} size="small" variant="success">
-            View all
-          </Button>
-        ) : (
-          <Button onClick={handleAllowClick} size="small" variant="success">
-            Allow
-          </Button>
-        )}
-        <Button onClick={handleDenyClick} size="small" variant="error">
-          {hasMultiplePeopleWaiting ? 'Deny All' : 'Deny'}
-        </Button>
-      </CardFooter>
       <style jsx>{`
-        :global(.waiting-room-notification) {
+        :global(.card.waiting-room-notification) {
           position: absolute;
           right: var(--spacing-sm);
           top: var(--spacing-sm);
           z-index: 999;
+          padding: 0px;
+          display: grid;
+          align-items: center;
+          grid-template-columns: auto auto;
+          overflow: hidden;
           box-shadow: var(--shadow-depth-2);
         }
+
+        strong {
+          color: var(--text-default);
+        }
+        aside {
+          background: var(--gray-wash);
+          display: flex;
+          padding: var(--spacing-md);
+          height: 100%;
+          align-items: center;
+          color: var(--gray-default);
+        }
+
         :global(.waiting-room-notification .card-footer) {
           display: flex;
           column-gap: var(--spacing-xxs);
+          margin-top: var(--spacing-xs);
+        }
+
+        :global(.waiting-room-notification .card-body) {
+          padding: var(--spacing-md);
         }
       `}</style>
     </Card>
diff --git a/dailyjs/shared/icons/add-person-lg.svg b/dailyjs/shared/icons/add-person-lg.svg
new file mode 100644
index 0000000..fbae5e4
--- /dev/null
+++ b/dailyjs/shared/icons/add-person-lg.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><title>add-27</title><g stroke-linecap="square" stroke-linejoin="miter" stroke-width="2" fill="none" stroke="currentColor" stroke-miterlimit="10"><line x1="8" y1="14" x2="8" y2="26" stroke="currentColor"></line> <line x1="2" y1="20" x2="14" y2="20" stroke="currentColor"></line> <path d="M30,22L30,22 c-4.418,0-8-3.582-8-8v-4c0-4.418,3.582-8,8-8h0c4.418,0,8,3.582,8,8v4C38,18.418,34.418,22,30,22z"></path> <path d="M46,46H14v-8.229 c0-2.493,1.53-4.727,3.862-5.61C20.635,31.11,24.797,30,30,30s9.365,1.11,12.138,2.161C44.47,33.044,46,35.278,46,37.771V46z"></path></g></svg>
\ No newline at end of file