improved styling and added owner actions

dailyjs/shared/components/Aside/PeopleAside.js

@@ -32,13 +32,15 @@ const PersonRow = ({ participant, isOwner = false }) => (
       ) : (
         <>
           <Button
-            size="medium-square"
+            size="tiny-square"
+            disabled={participant.isCamMuted}
             variant={participant.isCamMuted ? 'error-light' : 'success-light'}
           >
             {participant.isCamMuted ? <IconCamOff /> : <IconCamOn />}
           </Button>
           <Button
-            size="medium-square"
+            size="tiny-square"
+            disabled={participant.isMicMuted}
             variant={participant.isMicMuted ? 'error-light' : 'success-light'}
           >
             {participant.isMicMuted ? <IconMicOff /> : <IconMicOn />}
@@ -50,15 +52,14 @@ const PersonRow = ({ participant, isOwner = false }) => (
       .person-row {
         display: flex;
         border-bottom: 1px solid var(--gray-light);
-        padding: var(--spacing-xs) 0;
+        padding-bottom: var(--spacing-xxxs);
+        margin-bottom: var(--spacing-xxxs);
         justify-content: space-between;
         align-items: center;
-        margin: 0 var(--spacing-xs);
       }
-
       .person-row .actions {
         display: flex;
-        gap: var(--spacing-xxs);
+        gap: var(--spacing-xxxs);
       }
 
       .mute-state {
@@ -95,8 +96,11 @@ export const PeopleAside = () => {
   return (
     <Aside>
       {isOwner && (
-        <>
+        <div className="owner-actions">
           <Button
+            fullWidth
+            size="tiny"
+            variant="outline-gray"
             onClick={() =>
               callObject.updateParticipants({ '*': { setAudio: false } })
             }
@@ -104,17 +108,36 @@ export const PeopleAside = () => {
             Mute all mics
           </Button>
           <Button
+            fullWidth
+            size="tiny"
+            variant="outline-gray"
             onClick={() =>
               callObject.updateParticipants({ '*': { setVideo: false } })
             }
           >
-            Mute all cam
+            Mute all cams
           </Button>
-        </>
+        </div>
       )}
-      {allParticipants.map((p) => (
-        <PersonRow participant={p} key={p.id} isOwner={isOwner} />
-      ))}
+      <div className="rows">
+        {allParticipants.map((p) => (
+          <PersonRow participant={p} key={p.id} isOwner={isOwner} />
+        ))}
+      </div>
+      <style jsx>
+        {`
+          .owner-actions {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-xxxs);
+            margin: var(--spacing-xs) var(--spacing-xxs);
+          }
+
+          .rows {
+            margin: var(--spacing-xxs);
+          }
+        `}
+      </style>
     </Aside>
   );
 };

dailyjs/shared/components/Button/Button.js

@@ -194,12 +194,28 @@ export const Button = forwardRef(
             height: 42px;
           }
 
+          .button.tiny {
+            height: 32px;
+            font-size: 11px;
+            border-radius: var(--radius-xs);
+            text-transform: uppercase;
+          }
+
+          .button.tiny-square {
+            padding: 0px;
+            height: 32px;
+            width: 32px;
+          }
+          .button.small-square {
+            padding: 0px;
+            height: 42px;
+            width: 42px;
+          }
           .button.medium-square {
             padding: 0px;
             height: 48px;
             width: 48px;
           }
-
           .button.large-square {
             padding: 0px;
             height: 52px;
@@ -273,6 +289,21 @@ export const Button = forwardRef(
             box-shadow: 0 0 0px 3px rgba(255, 255, 255, 0.15);
           }
 
+          .button.outline-gray {
+            background: transparent;
+            border: 1px solid var(--gray-light);
+            color: var(--text-light);
+          }
+          .button.outline-gray:hover,
+          .button.outline-gray:focus,
+          .button.outline-gray:active {
+            border: 1px solid var(--gray-default);
+            box-shadow: none;
+          }
+          .button.outline-gray:focus {
+            box-shadow: 0 0 0px 3px rgba(0, 0, 0, 0.05);
+          }
+
           .button.muted {
             color: var(--red-default);
           }

dailyjs/shared/components/GlobalStyle/GlobalStyle.js

@@ -37,6 +37,7 @@ export const GlobalStyle = () => (
       --weight-medium: 500;
       --weight-bold: 600;
 
+      --radius-xs: 6px;
       --radius-sm: 9px;
       --radius-md: 12px;