Using DelayedButton in RoundInfoPane

client/src/components/screens/RoundSummary/RoundInfoPane.jsx

@@ -1,8 +1,8 @@
 import React from "react";
 import styled from "styled-components";
 import ClickToCopy from "../../util/ClickToCopy";
-import Button from "../../util/Button";
 import usePlayerScores from "../../../hooks/usePlayerScores";
+import DelayedButton from "../../util/DelayedButton";
 
 const useTopScorer = (gameId, roundNum) => {
   const scores = usePlayerScores(gameId);
@@ -41,7 +41,7 @@ const TimedOut = styled.span`
   color: red;
 `
 
-const NextButton = styled(Button)`
+const NextButton = styled(DelayedButton)`
   margin-top: 5px;
   padding: 1em;
 `
@@ -69,7 +69,12 @@ export default ({
       <span>Score For Round {roundNum}: {score}</span>
       <span>Running Total Score: {totalScore}</span>
       {topPlayer ? <span className="round-summary__top-score">Current best is {topPlayer} with {topScore}</span> : null}
-      <NextButton onClick={onNext}>{roundNum === "5" ? "View Summary" : "Next Round"}</NextButton>
+      <NextButton 
+        onEnd={onNext}
+        countDownFormatter={rem => `Click to cancel, ${rem}s...`}
+      >
+        {roundNum === "5" ? "View Summary" : "Next Round"}
+      </NextButton>
     </Container>
   );
 }