From d0095c757436f4a8e82f4a78d407d59f52ac8f7d Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Thu, 13 Nov 2025 18:14:53 -0500
Subject: [PATCH] refactor: component props

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/renderer/components/AllRead.tsx                        | 6 ++++--
 src/renderer/components/Oops.tsx                           | 7 +++++--
 .../components/avatars/AvatarWithFallback.test.tsx         | 4 ++--
 src/renderer/components/avatars/AvatarWithFallback.tsx     | 4 ++--
 src/renderer/components/fields/Checkbox.test.tsx           | 4 ++--
 src/renderer/components/fields/Checkbox.tsx                | 6 +++---
 src/renderer/components/fields/FieldLabel.test.tsx         | 4 ++--
 src/renderer/components/fields/FieldLabel.tsx              | 4 ++--
 src/renderer/components/fields/RadioGroup.test.tsx         | 4 ++--
 src/renderer/components/fields/RadioGroup.tsx              | 4 ++--
 src/renderer/components/fields/Tooltip.test.tsx            | 4 ++--
 src/renderer/components/fields/Tooltip.tsx                 | 4 ++--
 src/renderer/components/filters/FilterSection.tsx          | 4 ++--
 src/renderer/components/icons/LogoIcon.tsx                 | 6 +++---
 src/renderer/components/layout/Centered.tsx                | 4 ++--
 src/renderer/components/layout/EmojiSplash.tsx             | 6 +++---
 src/renderer/components/layout/Page.tsx                    | 4 ++--
 src/renderer/components/metrics/MetricGroup.tsx            | 6 +++---
 src/renderer/components/metrics/MetricPill.test.tsx        | 6 +++---
 src/renderer/components/metrics/MetricPill.tsx             | 4 ++--
 .../components/notifications/AccountNotifications.tsx      | 6 +++---
 .../components/notifications/NotificationFooter.tsx        | 6 +++---
 .../components/notifications/NotificationHeader.tsx        | 6 +++---
 src/renderer/components/notifications/NotificationRow.tsx  | 6 +++---
 .../components/notifications/RepositoryNotifications.tsx   | 4 ++--
 src/renderer/components/primitives/CustomCounter.tsx       | 4 ++--
 src/renderer/components/primitives/Footer.tsx              | 4 ++--
 src/renderer/components/primitives/Header.tsx              | 4 ++--
 src/renderer/components/primitives/HoverButton.tsx         | 6 +++---
 src/renderer/components/primitives/HoverGroup.tsx          | 6 +++---
 src/renderer/components/primitives/Title.tsx               | 4 ++--
 31 files changed, 78 insertions(+), 73 deletions(-)

diff --git a/src/renderer/components/AllRead.tsx b/src/renderer/components/AllRead.tsx
index a047d0de0..5b8956ae7 100644
--- a/src/renderer/components/AllRead.tsx
+++ b/src/renderer/components/AllRead.tsx
@@ -5,11 +5,13 @@ import { AppContext } from '../context/App';
 import { hasActiveFilters } from '../utils/notifications/filters/filter';
 import { EmojiSplash } from './layout/EmojiSplash';
 
-interface IAllRead {
+interface AllReadProps {
   fullHeight?: boolean;
 }
 
-export const AllRead: FC<IAllRead> = ({ fullHeight = true }: IAllRead) => {
+export const AllRead: FC<AllReadProps> = ({
+  fullHeight = true,
+}: AllReadProps) => {
   const { settings } = useContext(AppContext);
 
   const hasFilters = hasActiveFilters(settings);
diff --git a/src/renderer/components/Oops.tsx b/src/renderer/components/Oops.tsx
index 38beccb1c..a892585de 100644
--- a/src/renderer/components/Oops.tsx
+++ b/src/renderer/components/Oops.tsx
@@ -4,12 +4,15 @@ import type { GitifyError } from '../types';
 import { Errors } from '../utils/errors';
 import { EmojiSplash } from './layout/EmojiSplash';
 
-interface IOops {
+interface OopsProps {
   error: GitifyError;
   fullHeight?: boolean;
 }
 
-export const Oops: FC<IOops> = ({ error, fullHeight = true }: IOops) => {
+export const Oops: FC<OopsProps> = ({
+  error,
+  fullHeight = true,
+}: OopsProps) => {
   const err = error ?? Errors.UNKNOWN;
 
   const emoji = useMemo(
diff --git a/src/renderer/components/avatars/AvatarWithFallback.test.tsx b/src/renderer/components/avatars/AvatarWithFallback.test.tsx
index e358c048a..090109855 100644
--- a/src/renderer/components/avatars/AvatarWithFallback.test.tsx
+++ b/src/renderer/components/avatars/AvatarWithFallback.test.tsx
@@ -3,11 +3,11 @@ import { fireEvent, render, screen } from '@testing-library/react';
 import { type Link, Size } from '../../types';
 import {
   AvatarWithFallback,
-  type IAvatarWithFallback,
+  type AvatarWithFallbackProps,
 } from './AvatarWithFallback';
 
 describe('renderer/components/avatars/AvatarWithFallback.tsx', () => {
-  const props: IAvatarWithFallback = {
+  const props: AvatarWithFallbackProps = {
     src: 'https://avatars.githubusercontent.com/u/133795385?s=200&v=4' as Link,
     alt: 'gitify-app',
     name: '@gitify-app',
diff --git a/src/renderer/components/avatars/AvatarWithFallback.tsx b/src/renderer/components/avatars/AvatarWithFallback.tsx
index 2f1116af1..59700e9ec 100644
--- a/src/renderer/components/avatars/AvatarWithFallback.tsx
+++ b/src/renderer/components/avatars/AvatarWithFallback.tsx
@@ -8,7 +8,7 @@ import type { UserType } from '../../typesGitHub';
 import { getDefaultUserIcon } from '../../utils/icons';
 import { isNonHumanUser } from '../../utils/notifications/filters/userType';
 
-export interface IAvatarWithFallback {
+export interface AvatarWithFallbackProps {
   src?: Link;
   alt?: string;
   name?: string;
@@ -16,7 +16,7 @@ export interface IAvatarWithFallback {
   userType?: UserType;
 }
 
-export const AvatarWithFallback: React.FC<IAvatarWithFallback> = ({
+export const AvatarWithFallback: React.FC<AvatarWithFallbackProps> = ({
   src,
   alt,
   name,
diff --git a/src/renderer/components/fields/Checkbox.test.tsx b/src/renderer/components/fields/Checkbox.test.tsx
index 7d004caf7..0050b58c6 100644
--- a/src/renderer/components/fields/Checkbox.test.tsx
+++ b/src/renderer/components/fields/Checkbox.test.tsx
@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import { Checkbox, type ICheckbox } from './Checkbox';
+import { Checkbox, type CheckboxProps } from './Checkbox';
 
 describe('renderer/components/fields/Checkbox.tsx', () => {
-  const props: ICheckbox = {
+  const props: CheckboxProps = {
     name: 'appearance',
     label: 'Appearance',
     checked: true,
diff --git a/src/renderer/components/fields/Checkbox.tsx b/src/renderer/components/fields/Checkbox.tsx
index f78e54c32..1ce3bc9fb 100644
--- a/src/renderer/components/fields/Checkbox.tsx
+++ b/src/renderer/components/fields/Checkbox.tsx
@@ -6,7 +6,7 @@ import { cn } from '../../utils/cn';
 import { CustomCounter } from '../primitives/CustomCounter';
 import { Tooltip } from './Tooltip';
 
-export interface ICheckbox {
+export interface CheckboxProps {
   name: string;
   label: string;
   counter?: number;
@@ -17,10 +17,10 @@ export interface ICheckbox {
   onChange: (evt: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const Checkbox: FC<ICheckbox> = ({
+export const Checkbox: FC<CheckboxProps> = ({
   visible = true,
   ...props
-}: ICheckbox) => {
+}: CheckboxProps) => {
   const counter = props?.counter === 0 ? '0' : props.counter;
 
   return (
diff --git a/src/renderer/components/fields/FieldLabel.test.tsx b/src/renderer/components/fields/FieldLabel.test.tsx
index e10a2e655..26a243bfa 100644
--- a/src/renderer/components/fields/FieldLabel.test.tsx
+++ b/src/renderer/components/fields/FieldLabel.test.tsx
@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import { FieldLabel, type IFieldLabel } from './FieldLabel';
+import { FieldLabel, type FieldLabelProps } from './FieldLabel';
 
 describe('renderer/components/fields/FieldLabel.tsx', () => {
-  const props: IFieldLabel = {
+  const props: FieldLabelProps = {
     name: 'appearance',
     label: 'Appearance',
   };
diff --git a/src/renderer/components/fields/FieldLabel.tsx b/src/renderer/components/fields/FieldLabel.tsx
index 1234ea3e5..4d9dec3a4 100644
--- a/src/renderer/components/fields/FieldLabel.tsx
+++ b/src/renderer/components/fields/FieldLabel.tsx
@@ -1,11 +1,11 @@
 import type { FC } from 'react';
 
-export interface IFieldLabel {
+export interface FieldLabelProps {
   name: string;
   label: string;
 }
 
-export const FieldLabel: FC<IFieldLabel> = (props: IFieldLabel) => {
+export const FieldLabel: FC<FieldLabelProps> = (props: FieldLabelProps) => {
   return (
     <label className={'mr-1 font-medium cursor-pointer'} htmlFor={props.name}>
       {props.label}
diff --git a/src/renderer/components/fields/RadioGroup.test.tsx b/src/renderer/components/fields/RadioGroup.test.tsx
index 1a433383d..9f7aed66b 100644
--- a/src/renderer/components/fields/RadioGroup.test.tsx
+++ b/src/renderer/components/fields/RadioGroup.test.tsx
@@ -1,9 +1,9 @@
 import { render } from '@testing-library/react';
 
-import { type IRadioGroup, RadioGroup } from './RadioGroup';
+import { RadioGroup, type RadioGroupProps } from './RadioGroup';
 
 describe('renderer/components/fields/RadioGroup.tsx', () => {
-  const props: IRadioGroup = {
+  const props: RadioGroupProps = {
     label: 'Appearance',
     name: 'appearance',
     options: [
diff --git a/src/renderer/components/fields/RadioGroup.tsx b/src/renderer/components/fields/RadioGroup.tsx
index 89874c7db..95102cf71 100644
--- a/src/renderer/components/fields/RadioGroup.tsx
+++ b/src/renderer/components/fields/RadioGroup.tsx
@@ -6,7 +6,7 @@ import type { RadioGroupItem } from '../../types';
 import { FieldLabel } from './FieldLabel';
 import { Tooltip } from './Tooltip';
 
-export interface IRadioGroup {
+export interface RadioGroupProps {
   name: string;
   label: string;
   options: RadioGroupItem[];
@@ -15,7 +15,7 @@ export interface IRadioGroup {
   tooltip?: ReactNode | string;
 }
 
-export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
+export const RadioGroup: FC<RadioGroupProps> = (props: RadioGroupProps) => {
   return (
     <Stack
       align="center"
diff --git a/src/renderer/components/fields/Tooltip.test.tsx b/src/renderer/components/fields/Tooltip.test.tsx
index 81c4da9bc..40d59fc6d 100644
--- a/src/renderer/components/fields/Tooltip.test.tsx
+++ b/src/renderer/components/fields/Tooltip.test.tsx
@@ -5,10 +5,10 @@ import { BaseStyles, ThemeProvider } from '@primer/react';
 
 import { mockSettings } from '../../__mocks__/state-mocks';
 import { AppContext } from '../../context/App';
-import { type ITooltip, Tooltip } from './Tooltip';
+import { Tooltip, type TooltipProps } from './Tooltip';
 
 describe('renderer/components/fields/Tooltip.tsx', () => {
-  const props: ITooltip = {
+  const props: TooltipProps = {
     name: 'test',
     tooltip: 'This is some tooltip text',
   };
diff --git a/src/renderer/components/fields/Tooltip.tsx b/src/renderer/components/fields/Tooltip.tsx
index 84e0ca42a..3312dd468 100644
--- a/src/renderer/components/fields/Tooltip.tsx
+++ b/src/renderer/components/fields/Tooltip.tsx
@@ -5,12 +5,12 @@ import { AnchoredOverlay } from '@primer/react';
 
 import { cn } from '../../utils/cn';
 
-export interface ITooltip {
+export interface TooltipProps {
   name: string;
   tooltip: ReactNode | string;
 }
 
-export const Tooltip: FC<ITooltip> = (props: ITooltip) => {
+export const Tooltip: FC<TooltipProps> = (props: TooltipProps) => {
   const [showTooltip, setShowTooltip] = useState(false);
 
   return (
diff --git a/src/renderer/components/filters/FilterSection.tsx b/src/renderer/components/filters/FilterSection.tsx
index 6173d89cd..fdd0221b7 100644
--- a/src/renderer/components/filters/FilterSection.tsx
+++ b/src/renderer/components/filters/FilterSection.tsx
@@ -10,7 +10,7 @@ import { Checkbox } from '../fields/Checkbox';
 import { Title } from '../primitives/Title';
 import { RequiresDetailedNotificationWarning } from './RequiresDetailedNotificationsWarning';
 
-export interface IFilterSection<T extends FilterValue> {
+export interface FilterSectionProps<T extends FilterValue> {
   id: string;
   title: string;
   icon: Icon;
@@ -28,7 +28,7 @@ export const FilterSection = <T extends FilterValue>({
   filterSetting,
   tooltip,
   layout = 'vertical',
-}: IFilterSection<T>) => {
+}: FilterSectionProps<T>) => {
   const { updateFilter, settings, notifications } = useContext(AppContext);
 
   return (
diff --git a/src/renderer/components/icons/LogoIcon.tsx b/src/renderer/components/icons/LogoIcon.tsx
index a52b24ac0..651c5cb97 100644
--- a/src/renderer/components/icons/LogoIcon.tsx
+++ b/src/renderer/components/icons/LogoIcon.tsx
@@ -5,7 +5,7 @@ import { APPLICATION } from '../../../shared/constants';
 import { Size } from '../../types';
 import { cn } from '../../utils/cn';
 
-interface ILogoIcon {
+interface LogoIconProps {
   isDark?: boolean;
   onClick?: () => void;
   size: Size.SMALL | Size.MEDIUM | Size.LARGE;
@@ -17,12 +17,12 @@ const LIGHT_GRADIENT_END = '#FFFFFF';
 const DARK_GRADIENT_START = '#22283B';
 const DARK_GRADIENT_END = '#555B6E';
 
-export const LogoIcon: FC<ILogoIcon> = ({
+export const LogoIcon: FC<LogoIconProps> = ({
   isDark,
   onClick,
   size = Size.SMALL,
   ...props
-}: ILogoIcon) => (
+}: LogoIconProps) => (
   <svg
     aria-hidden="true"
     aria-label={`${APPLICATION.NAME} Logo`}
diff --git a/src/renderer/components/layout/Centered.tsx b/src/renderer/components/layout/Centered.tsx
index e5d78504f..ae60a023f 100644
--- a/src/renderer/components/layout/Centered.tsx
+++ b/src/renderer/components/layout/Centered.tsx
@@ -2,12 +2,12 @@ import type { FC, ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
 
-interface ICentered {
+interface CenteredProps {
   children: ReactNode;
   fullHeight: boolean;
 }
 
-export const Centered: FC<ICentered> = (props: ICentered) => {
+export const Centered: FC<CenteredProps> = (props: CenteredProps) => {
   return (
     <Stack
       align="center"
diff --git a/src/renderer/components/layout/EmojiSplash.tsx b/src/renderer/components/layout/EmojiSplash.tsx
index 97e2d7a5b..4df786190 100644
--- a/src/renderer/components/layout/EmojiSplash.tsx
+++ b/src/renderer/components/layout/EmojiSplash.tsx
@@ -5,18 +5,18 @@ import { Stack } from '@primer/react';
 import { EmojiText } from '../primitives/EmojiText';
 import { Centered } from './Centered';
 
-interface IEmojiSplash {
+interface EmojiSplashProps {
   emoji: string;
   heading: string;
   subHeadings?: string[];
   fullHeight?: boolean;
 }
 
-export const EmojiSplash: FC<IEmojiSplash> = ({
+export const EmojiSplash: FC<EmojiSplashProps> = ({
   fullHeight = true,
   subHeadings = [],
   ...props
-}: IEmojiSplash) => {
+}: EmojiSplashProps) => {
   return (
     <Centered fullHeight={fullHeight}>
       <Stack
diff --git a/src/renderer/components/layout/Page.tsx b/src/renderer/components/layout/Page.tsx
index 2db23bfd3..efdf1f56d 100644
--- a/src/renderer/components/layout/Page.tsx
+++ b/src/renderer/components/layout/Page.tsx
@@ -1,6 +1,6 @@
 import type { FC, ReactNode } from 'react';
 
-interface IPage {
+interface PageProps {
   children: ReactNode;
   testId: string;
 }
@@ -10,7 +10,7 @@ interface IPage {
  * It creates a column layout for header, content, and footer.
  * The height is 100% to fill the parent container.
  */
-export const Page: FC<IPage> = ({ children, testId }) => {
+export const Page: FC<PageProps> = ({ children, testId }) => {
   return (
     <div className="flex flex-col h-screen" data-testid={testId}>
       {children}
diff --git a/src/renderer/components/metrics/MetricGroup.tsx b/src/renderer/components/metrics/MetricGroup.tsx
index ae32660e9..cdb1bd3d4 100644
--- a/src/renderer/components/metrics/MetricGroup.tsx
+++ b/src/renderer/components/metrics/MetricGroup.tsx
@@ -13,13 +13,13 @@ import type { Notification } from '../../typesGitHub';
 import { getPullRequestReviewIcon } from '../../utils/icons';
 import { MetricPill } from './MetricPill';
 
-interface IMetricGroup {
+interface MetricGroupProps {
   notification: Notification;
 }
 
-export const MetricGroup: FC<IMetricGroup> = ({
+export const MetricGroup: FC<MetricGroupProps> = ({
   notification,
-}: IMetricGroup) => {
+}: MetricGroupProps) => {
   const { settings } = useContext(AppContext);
 
   const commentsPillDescription = `${notification.subject.comments} ${
diff --git a/src/renderer/components/metrics/MetricPill.test.tsx b/src/renderer/components/metrics/MetricPill.test.tsx
index b8f6d3698..f6e37ff1d 100644
--- a/src/renderer/components/metrics/MetricPill.test.tsx
+++ b/src/renderer/components/metrics/MetricPill.test.tsx
@@ -3,11 +3,11 @@ import { render } from '@testing-library/react';
 import { MarkGithubIcon } from '@primer/octicons-react';
 
 import { IconColor } from '../../types';
-import { type IMetricPill, MetricPill } from './MetricPill';
+import { MetricPill, type MetricPillProps } from './MetricPill';
 
 describe('renderer/components/metrics/MetricPill.tsx', () => {
   it('should render with metric', () => {
-    const props: IMetricPill = {
+    const props: MetricPillProps = {
       title: 'Mock Pill',
       metric: 1,
       icon: MarkGithubIcon,
@@ -18,7 +18,7 @@ describe('renderer/components/metrics/MetricPill.tsx', () => {
   });
 
   it('should render without metric', () => {
-    const props: IMetricPill = {
+    const props: MetricPillProps = {
       title: 'Mock Pill',
       icon: MarkGithubIcon,
       color: IconColor.GREEN,
diff --git a/src/renderer/components/metrics/MetricPill.tsx b/src/renderer/components/metrics/MetricPill.tsx
index 6c86be7c2..4c330ab9b 100644
--- a/src/renderer/components/metrics/MetricPill.tsx
+++ b/src/renderer/components/metrics/MetricPill.tsx
@@ -5,14 +5,14 @@ import { Label, Stack, Text } from '@primer/react';
 
 import { type IconColor, Size } from '../../types';
 
-export interface IMetricPill {
+export interface MetricPillProps {
   title: string;
   metric?: number;
   icon: Icon;
   color: IconColor;
 }
 
-export const MetricPill: FC<IMetricPill> = (props: IMetricPill) => {
+export const MetricPill: FC<MetricPillProps> = (props: MetricPillProps) => {
   const Icon = props.icon;
 
   return (
diff --git a/src/renderer/components/notifications/AccountNotifications.tsx b/src/renderer/components/notifications/AccountNotifications.tsx
index 147d441dc..4e1fb9a7e 100644
--- a/src/renderer/components/notifications/AccountNotifications.tsx
+++ b/src/renderer/components/notifications/AccountNotifications.tsx
@@ -26,15 +26,15 @@ import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationRow } from './NotificationRow';
 import { RepositoryNotifications } from './RepositoryNotifications';
 
-interface IAccountNotifications {
+interface AccountNotificationsProps {
   account: Account;
   notifications: Notification[];
   error: GitifyError | null;
   showAccountHeader: boolean;
 }
 
-export const AccountNotifications: FC<IAccountNotifications> = (
-  props: IAccountNotifications,
+export const AccountNotifications: FC<AccountNotificationsProps> = (
+  props: AccountNotificationsProps,
 ) => {
   const { account, showAccountHeader, notifications } = props;
 
diff --git a/src/renderer/components/notifications/NotificationFooter.tsx b/src/renderer/components/notifications/NotificationFooter.tsx
index 289bf8277..dd9e59dc9 100644
--- a/src/renderer/components/notifications/NotificationFooter.tsx
+++ b/src/renderer/components/notifications/NotificationFooter.tsx
@@ -10,13 +10,13 @@ import { getReasonDetails } from '../../utils/reason';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 import { MetricGroup } from '../metrics/MetricGroup';
 
-interface INotificationFooter {
+interface NotificationFooterProps {
   notification: Notification;
 }
 
-export const NotificationFooter: FC<INotificationFooter> = ({
+export const NotificationFooter: FC<NotificationFooterProps> = ({
   notification,
-}: INotificationFooter) => {
+}: NotificationFooterProps) => {
   const reason = getReasonDetails(notification.reason);
 
   return (
diff --git a/src/renderer/components/notifications/NotificationHeader.tsx b/src/renderer/components/notifications/NotificationHeader.tsx
index 64f56970d..e3e0a8f77 100644
--- a/src/renderer/components/notifications/NotificationHeader.tsx
+++ b/src/renderer/components/notifications/NotificationHeader.tsx
@@ -9,13 +9,13 @@ import { cn } from '../../utils/cn';
 import { openRepository } from '../../utils/links';
 import { AvatarWithFallback } from '../avatars/AvatarWithFallback';
 
-interface INotificationHeader {
+interface NotificationHeaderProps {
   notification: Notification;
 }
 
-export const NotificationHeader: FC<INotificationHeader> = ({
+export const NotificationHeader: FC<NotificationHeaderProps> = ({
   notification,
-}: INotificationHeader) => {
+}: NotificationHeaderProps) => {
   const { settings } = useContext(AppContext);
 
   const repoSlug = notification.repository.full_name;
diff --git a/src/renderer/components/notifications/NotificationRow.tsx b/src/renderer/components/notifications/NotificationRow.tsx
index 21c793cee..976f46bc7 100644
--- a/src/renderer/components/notifications/NotificationRow.tsx
+++ b/src/renderer/components/notifications/NotificationRow.tsx
@@ -15,15 +15,15 @@ import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationFooter } from './NotificationFooter';
 import { NotificationHeader } from './NotificationHeader';
 
-interface INotificationRow {
+interface NotificationRowProps {
   notification: Notification;
   isAnimated?: boolean;
 }
 
-export const NotificationRow: FC<INotificationRow> = ({
+export const NotificationRow: FC<NotificationRowProps> = ({
   notification,
   isAnimated = false,
-}: INotificationRow) => {
+}: NotificationRowProps) => {
   const {
     settings,
     markNotificationsAsRead,
diff --git a/src/renderer/components/notifications/RepositoryNotifications.tsx b/src/renderer/components/notifications/RepositoryNotifications.tsx
index 1f47b8e6b..da71b165f 100644
--- a/src/renderer/components/notifications/RepositoryNotifications.tsx
+++ b/src/renderer/components/notifications/RepositoryNotifications.tsx
@@ -15,12 +15,12 @@ import { HoverButton } from '../primitives/HoverButton';
 import { HoverGroup } from '../primitives/HoverGroup';
 import { NotificationRow } from './NotificationRow';
 
-interface IRepositoryNotifications {
+interface RepositoryNotificationsProps {
   repoNotifications: Notification[];
   repoName: string;
 }
 
-export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
+export const RepositoryNotifications: FC<RepositoryNotificationsProps> = ({
   repoName,
   repoNotifications,
 }) => {
diff --git a/src/renderer/components/primitives/CustomCounter.tsx b/src/renderer/components/primitives/CustomCounter.tsx
index fd21907fc..75c00bb32 100644
--- a/src/renderer/components/primitives/CustomCounter.tsx
+++ b/src/renderer/components/primitives/CustomCounter.tsx
@@ -6,7 +6,7 @@ import { cn } from '../../utils/cn';
 
 type CounterScheme = 'primary' | 'secondary' | 'empty';
 
-interface ICustomCounter {
+interface CustomCounterProps {
   value: string | number;
   scheme?: CounterScheme;
 }
@@ -19,7 +19,7 @@ interface ICustomCounter {
  * - would show screen vertical scrollbar which is undesirable.
  * - would not render '0' within a counter.
  */
-export const CustomCounter: FC<ICustomCounter> = ({
+export const CustomCounter: FC<CustomCounterProps> = ({
   value,
   scheme = 'secondary',
 }) => {
diff --git a/src/renderer/components/primitives/Footer.tsx b/src/renderer/components/primitives/Footer.tsx
index 3a40b7b81..a60441fd0 100644
--- a/src/renderer/components/primitives/Footer.tsx
+++ b/src/renderer/components/primitives/Footer.tsx
@@ -2,7 +2,7 @@ import type { FC, ReactNode } from 'react';
 
 import { Stack } from '@primer/react';
 
-interface IFooter {
+interface FooterProps {
   children: ReactNode;
   justify: 'end' | 'space-between';
 }
@@ -11,7 +11,7 @@ interface IFooter {
  * Footer component displays actions at the bottom of the page.
  * It is fixed to the viewport bottom.
  */
-export const Footer: FC<IFooter> = ({ children, justify }) => {
+export const Footer: FC<FooterProps> = ({ children, justify }) => {
   return (
     <div className="left-sidebar bg-gitify-footer">
       <Stack direction="horizontal" justify={justify} padding="condensed">
diff --git a/src/renderer/components/primitives/Header.tsx b/src/renderer/components/primitives/Header.tsx
index b4037d390..4f080f86a 100644
--- a/src/renderer/components/primitives/Header.tsx
+++ b/src/renderer/components/primitives/Header.tsx
@@ -7,13 +7,13 @@ import { IconButton, Stack } from '@primer/react';
 import { AppContext } from '../../context/App';
 import { Title } from './Title';
 
-interface IHeader {
+interface HeaderProps {
   icon: Icon;
   children: string;
   fetchOnBack?: boolean;
 }
 
-export const Header: FC<IHeader> = (props: IHeader) => {
+export const Header: FC<HeaderProps> = (props: HeaderProps) => {
   const navigate = useNavigate();
 
   const { fetchNotifications } = useContext(AppContext);
diff --git a/src/renderer/components/primitives/HoverButton.tsx b/src/renderer/components/primitives/HoverButton.tsx
index bc74676a9..5071d1676 100644
--- a/src/renderer/components/primitives/HoverButton.tsx
+++ b/src/renderer/components/primitives/HoverButton.tsx
@@ -3,7 +3,7 @@ import type { FC } from 'react';
 import type { Icon } from '@primer/octicons-react';
 import { IconButton } from '@primer/react';
 
-interface IHoverButton {
+interface HoverButtonProps {
   label: string;
   icon: Icon;
   enabled?: boolean;
@@ -11,10 +11,10 @@ interface IHoverButton {
   action: () => void;
 }
 
-export const HoverButton: FC<IHoverButton> = ({
+export const HoverButton: FC<HoverButtonProps> = ({
   enabled = true,
   ...props
-}: IHoverButton) => {
+}: HoverButtonProps) => {
   return (
     enabled && (
       <IconButton
diff --git a/src/renderer/components/primitives/HoverGroup.tsx b/src/renderer/components/primitives/HoverGroup.tsx
index 9becb8169..0fec85c81 100644
--- a/src/renderer/components/primitives/HoverGroup.tsx
+++ b/src/renderer/components/primitives/HoverGroup.tsx
@@ -4,7 +4,7 @@ import { Stack } from '@primer/react';
 
 import { cn } from '../../utils/cn';
 
-interface IHoverGroup {
+interface HoverGroupProps {
   children: ReactNode;
   bgColor:
     | 'group-hover:bg-gitify-account-rest'
@@ -12,10 +12,10 @@ interface IHoverGroup {
     | 'group-hover:bg-gitify-notification-hover';
 }
 
-export const HoverGroup: FC<IHoverGroup> = ({
+export const HoverGroup: FC<HoverGroupProps> = ({
   bgColor,
   children,
-}: IHoverGroup) => {
+}: HoverGroupProps) => {
   return (
     <Stack
       align="center"
diff --git a/src/renderer/components/primitives/Title.tsx b/src/renderer/components/primitives/Title.tsx
index 071ea0265..30fd9b830 100644
--- a/src/renderer/components/primitives/Title.tsx
+++ b/src/renderer/components/primitives/Title.tsx
@@ -5,14 +5,14 @@ import { Heading, Stack } from '@primer/react';
 
 import { Tooltip } from '../fields/Tooltip';
 
-interface ITitle {
+interface TitleProps {
   icon: Icon;
   children: string;
   size?: number;
   tooltip?: ReactNode;
 }
 
-export const Title: FC<ITitle> = ({ size = 2, ...props }) => {
+export const Title: FC<TitleProps> = ({ size = 2, ...props }) => {
   const name = props.children.toLowerCase().replaceAll(' ', '-');
 
   return (