From 24967997964130041f616baaec20971c99bd3a9d Mon Sep 17 00:00:00 2001
From: Ben Willenbring <ben.willenbring@maibornwolff.de>
Date: Fri, 20 Oct 2023 23:24:22 +0200
Subject: [PATCH] style: set color of call to action button to secondary

---
 .../common/components/buttons/CallToActionButton.tsx   | 10 ++++++++++
 .../frontend/src/common/dialogs/JoinSessionDialog.tsx  |  5 +++--
 .../components/dialogs/CreatePokerSessionDialog.tsx    |  5 +++--
 .../components/dialogs/EstimationUnitSetupDialog.tsx   |  3 ++-
 .../src/retro/components/dialogs/CreateCardDialog.tsx  |  5 +++--
 .../retro/components/dialogs/CreateColumnDialog.tsx    |  5 +++--
 .../components/dialogs/CreateRetroSessionDialog.tsx    |  8 ++++++--
 .../src/retro/components/dialogs/EditCardDialog.tsx    |  5 +++--
 .../src/retro/components/dialogs/ManageVotesDialog.tsx |  3 ++-
 9 files changed, 35 insertions(+), 14 deletions(-)
 create mode 100644 packages/frontend/src/common/components/buttons/CallToActionButton.tsx

diff --git a/packages/frontend/src/common/components/buttons/CallToActionButton.tsx b/packages/frontend/src/common/components/buttons/CallToActionButton.tsx
new file mode 100644
index 00000000..430e23f4
--- /dev/null
+++ b/packages/frontend/src/common/components/buttons/CallToActionButton.tsx
@@ -0,0 +1,10 @@
+import { Button, ButtonProps } from "@mui/material";
+import React from "react";
+
+export function CallToActionButton({ ...props }: ButtonProps) {
+  return (
+    <Button {...props} variant="contained" color="secondary">
+      {props.children}
+    </Button>
+  );
+}
diff --git a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx
index 811aa6e5..d909da0a 100644
--- a/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx
+++ b/packages/frontend/src/common/dialogs/JoinSessionDialog.tsx
@@ -21,6 +21,7 @@ import { TextInput } from "../components/TextInput";
 import { useErrorContext } from "../context/ErrorContext";
 import { LocalStorage } from "../utils/localStorage";
 import { useLocalStorage } from "../hooks/useLocalStorage";
+import { CallToActionButton } from "../components/buttons/CallToActionButton";
 
 interface JoinSessionDialogProps extends DialogProps {
   roomId: string;
@@ -112,9 +113,9 @@ export function JoinSessionDialog({
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
-        <Button onClick={handleSubmit} disabled={!isValid}>
+        <CallToActionButton onClick={handleSubmit} disabled={!isValid}>
           Join
-        </Button>
+        </CallToActionButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/packages/frontend/src/poker/components/dialogs/CreatePokerSessionDialog.tsx b/packages/frontend/src/poker/components/dialogs/CreatePokerSessionDialog.tsx
index 2880c11f..ea553c24 100644
--- a/packages/frontend/src/poker/components/dialogs/CreatePokerSessionDialog.tsx
+++ b/packages/frontend/src/poker/components/dialogs/CreatePokerSessionDialog.tsx
@@ -19,6 +19,7 @@ import { TextInput } from "../../../common/components/TextInput";
 import { useRouter } from "next/navigation";
 import { LocalStorage } from "../../../common/utils/localStorage";
 import { useLocalStorage } from "../../../common/hooks/useLocalStorage";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
 
 export function CreatePokerSessionDialog({ isOpen, close }: DialogProps) {
   const {
@@ -92,9 +93,9 @@ export function CreatePokerSessionDialog({ isOpen, close }: DialogProps) {
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
-        <Button onClick={handleSubmit} disabled={!isValid}>
+        <CallToActionButton onClick={handleSubmit} disabled={!isValid}>
           Join
-        </Button>
+        </CallToActionButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/packages/frontend/src/poker/components/dialogs/EstimationUnitSetupDialog.tsx b/packages/frontend/src/poker/components/dialogs/EstimationUnitSetupDialog.tsx
index d28abdee..d3ad6f3c 100644
--- a/packages/frontend/src/poker/components/dialogs/EstimationUnitSetupDialog.tsx
+++ b/packages/frontend/src/poker/components/dialogs/EstimationUnitSetupDialog.tsx
@@ -15,6 +15,7 @@ import { DialogProps } from "../../../common/types/commonTypes";
 import { useFullscreen } from "../../../retro/hooks/useFullscreen";
 import { PokerUnit, PokerUnitType } from "../../types/pokerTypes";
 import { usePokerContext } from "../../context/PokerContext";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
 
 export function EstimationUnitSetupDialog({ isOpen, close }: DialogProps) {
   const { pokerState, handleSetPokerUnit } = usePokerContext();
@@ -79,7 +80,7 @@ export function EstimationUnitSetupDialog({ isOpen, close }: DialogProps) {
       </DialogContent>
       <DialogActions>
         <Button onClick={close}>Cancel</Button>
-        <Button onClick={handleSubmit}>Save</Button>
+        <CallToActionButton onClick={handleSubmit}>Save</CallToActionButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/packages/frontend/src/retro/components/dialogs/CreateCardDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateCardDialog.tsx
index 763986ff..f9fcd448 100644
--- a/packages/frontend/src/retro/components/dialogs/CreateCardDialog.tsx
+++ b/packages/frontend/src/retro/components/dialogs/CreateCardDialog.tsx
@@ -9,6 +9,7 @@ import { TextInput } from "../../../common/components/TextInput";
 import { useValidatedTextInput } from "../../../common/hooks/useValidatedTextInput";
 import { DialogProps } from "../../../common/types/commonTypes";
 import { useFullscreen } from "../../hooks/useFullscreen";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
 
 interface CreateCardDialogProps extends DialogProps {
   columnIndex: number;
@@ -79,9 +80,9 @@ export function CreateCardDialog({ isOpen, close, columnIndex }: CreateCardDialo
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
-        <Button onClick={handleSubmit} disabled={!isValid}>
+        <CallToActionButton onClick={handleSubmit} disabled={!isValid}>
           Create
-        </Button>
+        </CallToActionButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/packages/frontend/src/retro/components/dialogs/CreateColumnDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateColumnDialog.tsx
index 6e363f6e..ad3d2f8f 100644
--- a/packages/frontend/src/retro/components/dialogs/CreateColumnDialog.tsx
+++ b/packages/frontend/src/retro/components/dialogs/CreateColumnDialog.tsx
@@ -15,6 +15,7 @@ import { RetroColumn } from "../../types/retroTypes";
 import { useValidatedTextInput } from "../../../common/hooks/useValidatedTextInput";
 import { useRetroContext } from "../../context/RetroContext";
 import { DialogProps } from "../../../common/types/commonTypes";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
 
 export function CreateColumnDialog({ isOpen, close }: DialogProps) {
   const {
@@ -73,9 +74,9 @@ export function CreateColumnDialog({ isOpen, close }: DialogProps) {
       </DialogContent>
       <DialogActions>
         <Button onClick={closeDialog}>Cancel</Button>
-        <Button onClick={handleSubmit} disabled={!isValid}>
+        <CallToActionButton onClick={handleSubmit} disabled={!isValid}>
           Create
-        </Button>
+        </CallToActionButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx
index eb086986..7041a868 100644
--- a/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx
+++ b/packages/frontend/src/retro/components/dialogs/CreateRetroSessionDialog.tsx
@@ -23,6 +23,7 @@ import { useRoomContext } from "../../../common/context/RoomContext";
 import { useRouter } from "next/navigation";
 import { LocalStorage } from "../../../common/utils/localStorage";
 import { useLocalStorage } from "../../../common/hooks/useLocalStorage";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
 
 export function CreateRetroSessionDialog({ isOpen, close }: DialogProps) {
   const {
@@ -126,9 +127,12 @@ export function CreateRetroSessionDialog({ isOpen, close }: DialogProps) {
       </DialogContent>
       <DialogActions>
         <Button onClick={handleClose}>Cancel</Button>
-        <Button onClick={handleSubmit} disabled={!isNameValid || !isTitleValid || !format}>
+        <CallToActionButton
+          onClick={handleSubmit}
+          disabled={!isNameValid || !isTitleValid || !format}
+        >
           Create
-        </Button>
+        </CallToActionButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/packages/frontend/src/retro/components/dialogs/EditCardDialog.tsx b/packages/frontend/src/retro/components/dialogs/EditCardDialog.tsx
index 6e56aef9..3741a528 100644
--- a/packages/frontend/src/retro/components/dialogs/EditCardDialog.tsx
+++ b/packages/frontend/src/retro/components/dialogs/EditCardDialog.tsx
@@ -6,6 +6,7 @@ import { TextInput } from "../../../common/components/TextInput";
 import { RetroCard } from "../../types/retroTypes";
 import { DialogProps } from "../../../common/types/commonTypes";
 import { useFullscreen } from "../../hooks/useFullscreen";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
 
 interface EditCardDialogProps extends DialogProps {
   card: RetroCard;
@@ -69,9 +70,9 @@ export function EditCardDialog({ isOpen, close, card, columnIndex }: EditCardDia
       </DialogContent>
       <DialogActions>
         <Button onClick={close}>Cancel</Button>
-        <Button onClick={handleSave} disabled={!isValid}>
+        <CallToActionButton onClick={handleSave} disabled={!isValid}>
           Save
-        </Button>
+        </CallToActionButton>
       </DialogActions>
     </Dialog>
   );
diff --git a/packages/frontend/src/retro/components/dialogs/ManageVotesDialog.tsx b/packages/frontend/src/retro/components/dialogs/ManageVotesDialog.tsx
index d5d6f7e0..07a59e6c 100644
--- a/packages/frontend/src/retro/components/dialogs/ManageVotesDialog.tsx
+++ b/packages/frontend/src/retro/components/dialogs/ManageVotesDialog.tsx
@@ -13,6 +13,7 @@ import {
 import { DialogProps } from "../../../common/types/commonTypes";
 import { useFullscreen } from "../../hooks/useFullscreen";
 import { useRetroContext } from "../../context/RetroContext";
+import { CallToActionButton } from "../../../common/components/buttons/CallToActionButton";
 
 export function ManageVotesDialog({ isOpen, close }: DialogProps) {
   const fullScreen = useFullscreen();
@@ -72,7 +73,7 @@ export function ManageVotesDialog({ isOpen, close }: DialogProps) {
       <DialogActions>
         <Button onClick={handleReset}>Reset Votes</Button>
         <Button onClick={handleCancel}>Cancel</Button>
-        <Button onClick={handleSave}>Save</Button>
+        <CallToActionButton onClick={handleSave}>Save</CallToActionButton>
       </DialogActions>
     </Dialog>
   );