style: set color of call to action button to secondary

MaibornWolff · Oct 20, 2023 · 2496799 · 2496799
1 parent 3ac2cc0
commit 2496799
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 14 deletions.
diff --git a/packages/frontend/src/common/components/buttons/CallToActionButton.tsx 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
   );