refactor: use children property instead of custom label

packages/frontend/src/common/components/buttons/ActionButton.tsx

@@ -3,11 +3,10 @@ import React, { MouseEventHandler } from "react";
 
 interface ActionButtonProps extends ButtonProps {
   onClick: MouseEventHandler<HTMLButtonElement>;
-  label: string;
   icon?: React.ReactNode;
 }
 
-export function ActionButton({ onClick, label, icon, ...props }: ActionButtonProps) {
+export function ActionButton({ onClick, icon, children, ...props }: ActionButtonProps) {
   const theme = useTheme();
 
   return (
@@ -26,7 +25,7 @@ export function ActionButton({ onClick, label, icon, ...props }: ActionButtonPro
       startIcon={icon}
       fullWidth
     >
-      {label}
+      {children}
     </Button>
   );
 }

packages/frontend/src/poker/components/buttons/PokerResultButton.tsx

@@ -17,11 +17,8 @@ export function PokerResultButton() {
   }
 
   return (
-    <ActionButton
-      onClick={handleClick}
-      label="Show Results"
-      disabled={noUserVoted}
-      icon={<Visibility />}
-    />
+    <ActionButton onClick={handleClick} disabled={noUserVoted} icon={<Visibility />}>
+      Show Results
+    </ActionButton>
   );
 }

packages/frontend/src/poker/components/buttons/ResetVotesButton.tsx

@@ -17,12 +17,9 @@ export function ResetVotesButton() {
 
   return (
     <>
-      <ActionButton
-        onClick={openDialog}
-        label="Reset Votes"
-        disabled={noUserVoted}
-        icon={<RestartAlt />}
-      />
+      <ActionButton onClick={openDialog} disabled={noUserVoted} icon={<RestartAlt />}>
+        Reset Votes
+      </ActionButton>
       <ResetVotesDialog isOpen={isOpen} close={closeDialog} />
     </>
   );

packages/frontend/src/retro/components/buttons/CreateColumnButton.tsx

@@ -13,12 +13,9 @@ export function CreateColumnButton() {
 
   return (
     <>
-      <ActionButton
-        onClick={openDialog}
-        label={"Add Column"}
-        disabled={!isModerator(user)}
-        icon={<Add />}
-      />
+      <ActionButton onClick={openDialog} disabled={!isModerator(user)} icon={<Add />}>
+        Add Column
+      </ActionButton>
       <CreateColumnDialog isOpen={isOpen} close={closeDialog} />
     </>
   );

packages/frontend/src/retro/components/buttons/IncrementTimerButton.tsx

@@ -9,12 +9,9 @@ export default function IncrementTimerButton({
   onTimerIncrement,
   minutesToIncrement,
 }: IncrementTimerButtonProps) {
-  return (
-    <ActionButton
-      label={`+${minutesToIncrement} Minutes`}
-      onClick={() => {
-        onTimerIncrement(minutesToIncrement);
-      }}
-    />
-  );
+  function handleTimeIncrement() {
+    onTimerIncrement(minutesToIncrement);
+  }
+
+  return <ActionButton onClick={handleTimeIncrement}>+{minutesToIncrement} Minutes</ActionButton>;
 }

packages/frontend/src/retro/components/buttons/ToggleRetroBlurButton.tsx

@@ -20,5 +20,9 @@ export function ToggleRetroBlurButton() {
 
   if (!isModerator(user)) return null;
 
-  return <ActionButton onClick={toggleRetroBlur} label={buttonText} icon={buttonIcon} />;
+  return (
+    <ActionButton onClick={toggleRetroBlur} icon={buttonIcon}>
+      {buttonText}
+    </ActionButton>
+  );
 }

packages/frontend/src/retro/components/buttons/ToggleRetroVotingButton.tsx

@@ -27,9 +27,13 @@ export function ToggleRetroVotingButton() {
   return (
     <>
       {isVotingEnabled ? (
-        <ActionButton onClick={handleStopVoting} label={"Stop Voting"} icon={<Stop />} />
+        <ActionButton onClick={handleStopVoting} icon={<Stop />}>
+          Stop Voting
+        </ActionButton>
       ) : (
-        <ActionButton onClick={handleStartVoting} label={"Voting"} icon={<HowToVote />} />
+        <ActionButton onClick={handleStartVoting} icon={<HowToVote />}>
+          Voting
+        </ActionButton>
       )}
       <ManageVotesDialog isOpen={isOpen} close={closeDialog} />
     </>

packages/frontend/src/retro/components/buttons/ToggleTimerDialogButton.tsx

@@ -31,7 +31,6 @@ export function ToggleTimerDialogButton() {
     <>
       <WiggleActionButton
         onClick={handleOpenDialog}
-        label={timerStatus !== TimerStatus.STOPPED ? remainingTimeLabel : "Timer"}
         icon={timerStatus === TimerStatus.PAUSED ? <SnoozeOutlined /> : <Alarm />}
         color={
           timerStatus === TimerStatus.PAUSED
@@ -41,7 +40,9 @@ export function ToggleTimerDialogButton() {
             : undefined
         }
         isWiggling={isEffectActive}
-      />
+      >
+        {timerStatus !== TimerStatus.STOPPED ? remainingTimeLabel : "Timer"}
+      </WiggleActionButton>
       <TimerDialog
         isOpen={isOpen}
         close={closeDialog}

packages/frontend/src/retro/components/buttons/WiggleActionButton.tsx

@@ -5,14 +5,13 @@ import { ActionButton } from "../../../common/components/buttons/ActionButton";
 
 interface WiggleActionButtonProps extends ButtonProps {
   onClick: MouseEventHandler<HTMLButtonElement>;
-  label: string;
   icon?: React.ReactNode;
   isWiggling: boolean;
 }
 
 export function WiggleActionButton({
   onClick,
-  label,
+  children,
   icon,
   isWiggling,
   ...props
@@ -33,11 +32,12 @@ export function WiggleActionButton({
   `;
   return (
     <ActionButton
-      label={label}
       onClick={onClick}
       icon={icon}
       sx={{ animation: isWiggling ? `${wiggle} 0.5s ease infinite` : undefined }}
       {...props}
-    />
+    >
+      {children}
+    </ActionButton>
   );
 }