Fix some tests.

src/reactions/RaisedHandIndicator.module.css

@@ -1,52 +0,0 @@
-.raisedHandWidget {
-  display: flex;
-  background-color: var(--cpd-color-bg-subtle-primary);
-  border-radius: var(--cpd-radius-pill-effect);
-  color: var(--cpd-color-icon-secondary);
-}
-
-.raisedHandWidget > p {
-  padding: none;
-  margin-top: auto;
-  margin-bottom: auto;
-  width: 4em;
-}
-
-.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;
-  align-items: center;
-  border-radius: var(--cpd-radius-pill-effect);
-  user-select: none;
-  overflow: hidden;
-  box-shadow: var(--small-drop-shadow);
-  box-sizing: border-box;
-  max-inline-size: 100%;
-  max-width: fit-content;
-}
-
-.raisedHand > span {
-  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.test.tsx

@@ -33,10 +33,10 @@ describe("RaisedHandIndicator", () => {
     );
     expect(container.firstChild).toMatchSnapshot();
   });
-  test("renders a smaller indicator when minature is specified", () => {
+  test("renders a smaller indicator when miniature is specified", () => {
     const dateTime = new Date();
     const { container } = render(
-      <RaisedHandIndicator raisedHandTime={dateTime} minature showTimer />,
+      <RaisedHandIndicator raisedHandTime={dateTime} miniature showTimer />,
     );
     expect(container.firstChild).toMatchSnapshot();
   });

src/reactions/RaisedHandIndicator.tsx

@@ -20,11 +20,11 @@ const durationFormatter = new DurationFormat(undefined, {
 
 export function RaisedHandIndicator({
   raisedHandTime,
-  minature,
+  miniature,
   showTimer,
 }: {
   raisedHandTime?: Date;
-  minature?: boolean;
+  miniature?: boolean;
   showTimer?: boolean;
 }): ReactNode {
   const [raisedHandDuration, setRaisedHandDuration] = useState("");
@@ -53,7 +53,7 @@ export function RaisedHandIndicator({
 
   if (raisedHandTime) {
     return (
-      <ReactionIndicator emoji="✋" minature={minature}>
+      <ReactionIndicator emoji="✋" miniature={miniature}>
         {showTimer && <p>{raisedHandDuration}</p>}
       </ReactionIndicator>
     );

src/reactions/ReactionIndicator.module.css

@@ -1,28 +1,28 @@
-.raisedHandWidget {
+.reactionIndicatorWidget {
   display: flex;
   background-color: var(--cpd-color-bg-subtle-primary);
   border-radius: var(--cpd-radius-pill-effect);
   color: var(--cpd-color-icon-secondary);
 }
 
-.raisedHandWidget > p {
+.reactionIndicatorWidget > p {
   padding: none;
   margin-top: auto;
   margin-bottom: auto;
   width: 4em;
 }
 
-.raisedHandWidgetLarge > p {
+.reactionIndicatorWidgetLarge > p {
   padding: var(--cpd-space-2x);
 }
 
-.raisedHandLarge {
+.reactionLarge {
   margin: var(--cpd-space-2x);
   padding: var(--cpd-space-2x);
   padding-block: var(--cpd-space-2x);
 }
 
-.raisedHand {
+.reaction {
   margin: var(--cpd-space-1x);
   color: var(--cpd-color-icon-secondary);
   background-color: var(--cpd-color-icon-secondary);
@@ -37,7 +37,7 @@
   max-width: fit-content;
 }
 
-.raisedHand > span {
+.reaction > span {
   width: var(--cpd-space-6x);
   height: var(--cpd-space-6x);
   display: inline-block;
@@ -45,7 +45,7 @@
   font-size: 16px;
 }
 
-.raisedHandLarge > span {
+.reactionLarge > span {
   width: var(--cpd-space-8x);
   height: var(--cpd-space-8x);
   font-size: 22px;

src/reactions/ReactionIndicator.tsx

@@ -13,24 +13,24 @@ import styles from "./ReactionIndicator.module.css";
 
 export function ReactionIndicator({
   emoji,
-  minature,
+  miniature,
   children,
 }: PropsWithChildren<{
-  minature?: boolean;
+  miniature?: boolean;
   emoji: string;
 }>): ReactNode {
   return (
     <div
-      className={classNames(styles.raisedHandWidget, {
+      className={classNames(styles.reactionIndicatorWidget, {
-        [styles.raisedHandWidgetLarge]: !minature,
+        [styles.reactionIndicatorWidgetLarge]: !miniature,
       })}
     >
       <div
-        className={classNames(styles.raisedHand, {
+        className={classNames(styles.reaction, {
-          [styles.raisedHandLarge]: !minature,
+          [styles.reactionLarge]: !miniature,
         })}
       >
-        <span role="img" aria-label="raised hand">
+        <span role="img" aria-label="reaction indicator">
           {emoji}
         </span>
       </div>

src/reactions/__snapshots__/RaisedHandIndicator.test.tsx.snap

@@ -1,14 +1,14 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`RaisedHandIndicator > renders a smaller indicator when minature is specified 1`] = `
+exports[`RaisedHandIndicator > renders a smaller indicator when miniature is specified 1`] = `
 <div
-  class="raisedHandWidget"
+  class="reactionIndicatorWidget"
 >
   <div
-    class="raisedHand"
+    class="reaction"
   >
     <span
-      aria-label="raised hand"
+      aria-label="reaction indicator"
       role="img"
     >
       ✋
@@ -22,13 +22,13 @@ exports[`RaisedHandIndicator > renders a smaller indicator when minature is spec
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised 1`] = `
 <div
-  class="raisedHandWidget raisedHandWidgetLarge"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="raisedHand raisedHandLarge"
+    class="reaction reactionLarge"
   >
     <span
-      aria-label="raised hand"
+      aria-label="reaction indicator"
       role="img"
     >
       ✋
@@ -42,13 +42,13 @@ exports[`RaisedHandIndicator > renders an indicator when a hand has been raised
 
 exports[`RaisedHandIndicator > renders an indicator when a hand has been raised with the expected time 1`] = `
 <div
-  class="raisedHandWidget raisedHandWidgetLarge"
+  class="reactionIndicatorWidget reactionIndicatorWidgetLarge"
 >
   <div
-    class="raisedHand raisedHandLarge"
+    class="reaction reactionLarge"
   >
     <span
-      aria-label="raised hand"
+      aria-label="reaction indicator"
       role="img"
     >
       ✋

src/tile/MediaView.tsx

@@ -100,12 +100,12 @@ export const MediaView = forwardRef<HTMLDivElement, Props>(
           <div className={styles.reactionSet}>
             <RaisedHandIndicator
               raisedHandTime={raisedHandTime}
-              minature={avatarSize < 96}
+              miniature={avatarSize < 96}
               showTimer={handRaiseTimerVisible}
             />
             {currentReaction && (
               <ReactionIndicator
-                minature={avatarSize < 96}
+                miniature={avatarSize < 96}
                 emoji={currentReaction.emoji}
               />
             )}