Add a small mode for spotlight

src/reactions/RaisedHandIndicator.module.css

@@ -7,16 +7,24 @@
 }
 
 .raisedHandWidget > p {
-  padding: var(--cpd-space-2x);
+  padding: none;
   margin-top: auto;
   margin-bottom: auto;
   width: 4em;
 }
 
-.raisedHand {
+.raisedHandWidgetLarge > p {
+  padding: var(--cpd-space-2x);
+}
+
+.raisedHandLarge {
   margin: var(--cpd-space-2x);
   padding: var(--cpd-space-2x);
   padding-block: var(--cpd-space-2x);
+}
+
+.raisedHand {
+  margin: var(--cpd-space-1x);
   color: var(--cpd-color-icon-secondary);
   background-color: var(--cpd-color-icon-secondary);
   display: flex;
@@ -31,9 +39,15 @@
 }
 
 .raisedHand > span {
-  width: var(--cpd-space-8x);
-  height: var(--cpd-space-8x);
+  width: var(--cpd-space-6x);
+  height: var(--cpd-space-6x);
   display: inline-block;
   text-align: center;
+  font-size: 16px;
+}
+
+.raisedHandLarge > span {
+  width: var(--cpd-space-8x);
+  height: var(--cpd-space-8x);
   font-size: 22px;
 }

src/reactions/RaisedHandIndicator.tsx

@@ -8,11 +8,14 @@ Please see LICENSE in the repository root for full details.
 import { ReactNode, useEffect, useState } from "react";
 
 import styles from "./RaisedHandIndicator.module.css";
+import classNames from "classnames";
 
 export function RaisedHandIndicator({
   raisedHandTime,
+  minature,
 }: {
   raisedHandTime?: Date;
+  minature?: boolean;
 }): ReactNode {
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
 
@@ -37,8 +40,16 @@ export function RaisedHandIndicator({
 
   if (raisedHandTime) {
     return (
-      <div className={styles.raisedHandWidget}>
-        <div className={styles.raisedHand}>
+      <div
+        className={classNames(styles.raisedHandWidget, {
+          [styles.raisedHandWidgetLarge]: !minature,
+        })}
+      >
+        <div
+          className={classNames(styles.raisedHand, {
+            [styles.raisedHandLarge]: !minature,
+          })}
+        >
           <span role="img" aria-label="raised hand">
             ✋
           </span>