Mark the props of the component as read-only. (non-standard props)

ui/src/App/Team/Archives/ThoughtArchives/ArchivedBoard/ArchivedBoardColumn/ArchivedBoardColumn.tsx

@@ -34,7 +34,9 @@ interface ThoughtProps {
 	thought: Thought;
 }
 
-function ArchivedBoardThought({ thought }: ThoughtProps): React.ReactElement {
+function ArchivedBoardThought({
+	thought,
+}: Readonly<ThoughtProps>): React.ReactElement {
 	return (
 		<li data-testid={'thought' + thought.id} className="archived-thought">
 			<p className="message">{thought.message}</p>
@@ -51,7 +53,7 @@ function ArchivedBoardThought({ thought }: ThoughtProps): React.ReactElement {
 function ArchivedBoardColumn({
 	column,
 	thoughts,
-}: ColumnProps): React.ReactElement {
+}: Readonly<ColumnProps>): React.ReactElement {
 	return (
 		<div data-testid="archived-column" className="archived-column">
 			<ColumnHeader initialTitle={column.title} type={column.topic} />

ui/src/App/Team/Retro/RetroSubheader/FeedbackForm/FeedbackStars/FeedbackStars.tsx

@@ -25,7 +25,7 @@ type FeedbackStarsProps = {
 	onChange: (stars: number) => void;
 };
 
-function FeedbackStars(props: FeedbackStarsProps) {
+function FeedbackStars(props: Readonly<FeedbackStarsProps>) {
 	const { value, onChange } = props;
 	const [hoveredStarValue, setHoveredStarValue] = useState<number>(-1);
 

ui/src/App/Team/Retro/ThoughtsColumn/ThoughtItemWithAddAction/AddActionItem/AddActionItem.tsx

@@ -39,7 +39,7 @@ type AddActionItemProps = {
 	hideComponentCallback: () => void;
 };
 
-function AddActionItem(props: AddActionItemProps) {
+function AddActionItem(props: Readonly<AddActionItemProps>) {
 	const { hideComponentCallback, thoughtId } = props;
 
 	const team = useRecoilValue(TeamState);

ui/src/App/Team/TeamHeader/Settings/AccountTab/AddBoardOwnersForm/AddBoardOwnersForm.tsx

@@ -37,7 +37,7 @@ export interface AddBoardOwnersFormProps {
 	email2?: string;
 }
 
-function AddBoardOwnersForm(props: AddBoardOwnersFormProps) {
+function AddBoardOwnersForm(props: Readonly<AddBoardOwnersFormProps>) {
 	const { email1 = '', email2 = '' } = props;
 
 	const setModalContents = useSetRecoilState(ModalContentsState);

ui/src/Assets/CheckedCheckboxIcon.tsx

@@ -20,7 +20,7 @@ interface Props {
 	className?: string;
 }
 
-function CheckedCheckboxIcon({ color, className }: Props) {
+function CheckedCheckboxIcon({ color, className }: Readonly<Props>) {
 	return (
 		<svg
 			role="presentation"

ui/src/Common/AuthTemplate/Form/Form.tsx

@@ -28,7 +28,7 @@ interface FormProps extends ComponentPropsWithoutRef<'form'> {
 	disableSubmitBtn?: boolean;
 }
 
-function Form(props: FormProps): React.ReactElement {
+function Form(props: Readonly<FormProps>): React.ReactElement {
 	const {
 		onSubmit,
 		errorMessages = [],

ui/src/Common/ColumnHeader/ColumnHeader.tsx

@@ -33,7 +33,7 @@ interface ColumnHeaderProps extends HTMLAttributes<HTMLDivElement> {
 	onTitleChange?(title: string): void;
 }
 
-function ColumnHeader(props: ColumnHeaderProps): React.ReactElement {
+function ColumnHeader(props: Readonly<ColumnHeaderProps>): React.ReactElement {
 	const {
 		initialTitle = '',
 		type = '',

ui/src/Common/ColumnItem/DeleteColumnItem/DeleteColumnItem.tsx

@@ -34,7 +34,7 @@ interface DeletionOverlayProps {
 	className?: string;
 }
 
-function DeleteColumnItem(props: DeletionOverlayProps) {
+function DeleteColumnItem(props: Readonly<DeletionOverlayProps>) {
 	const { onConfirm, onCancel, children, height, className } = props;
 
 	const cancelButtonRef = useRef<HTMLButtonElement>(null);

ui/src/Common/CountSeparator/CountSeparator.tsx

@@ -23,7 +23,7 @@ interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
 	count: number;
 }
 
-function CountSeparator(props: SeparatorProps): ReactElement {
+function CountSeparator(props: Readonly<SeparatorProps>): ReactElement {
 	const { count, ...divProps } = props;
 	return (
 		<div {...divProps} className="count-separator" data-testid="countSeparator">

ui/src/Common/DateCreated/DateCreated.tsx

@@ -28,7 +28,7 @@ type DateCreatedProps = {
 	className?: string;
 };
 
-export function DateCreated(props: DateCreatedProps) {
+export function DateCreated(props: Readonly<DateCreatedProps>) {
 	const { date, className, disabled = false, readOnly = false } = props;
 
 	return (

ui/src/Common/HorizontalRuleWithText/HorizontalRuleWithText.tsx

@@ -23,7 +23,9 @@ interface RuleProps {
 	text: string;
 }
 
-function HorizontalRuleWithText(props: RuleProps): React.ReactElement {
+function HorizontalRuleWithText(
+	props: Readonly<RuleProps>
+): React.ReactElement {
 	const { text } = props;
 	return (
 		<div className="or-separator-line">

ui/src/Common/UpvoteCount/UpvoteCount.tsx

@@ -23,7 +23,7 @@ interface Props {
 	votes: number;
 }
 
-function UpvoteCount({ votes }: Props): React.ReactElement {
+function UpvoteCount({ votes }: Readonly<Props>): React.ReactElement {
 	return (
 		<div className="upvote-count">
 			<div className="star-icon">