From d750d736fa5c042c158e339878558192121c036b Mon Sep 17 00:00:00 2001 From: Anatole Sot Date: Mon, 29 Apr 2024 23:15:16 +0200 Subject: [PATCH] fix(react links): changed every instance containing a to only a Ported Links to work for the new React version installed --- src/components/CollectionDetails/index.tsx | 5 +- src/components/Common/Badge/index.tsx | 13 +- src/components/Common/SettingsTabs/index.tsx | 17 ++- src/components/CompanyCard/index.tsx | 63 +++++---- .../Discover/DiscoverWatchlist/index.tsx | 4 +- .../Discover/MovieGenreSlider/index.tsx | 8 +- .../Discover/PlexWatchlistSlider/index.tsx | 8 +- .../Discover/RecentRequestsSlider/index.tsx | 8 +- .../Discover/TvGenreSlider/index.tsx | 8 +- src/components/GenreCard/index.tsx | 59 ++++---- src/components/IssueBlock/index.tsx | 5 +- .../IssueDetails/IssueComment/index.tsx | 17 +-- src/components/IssueDetails/index.tsx | 22 +-- src/components/IssueList/IssueItem/index.tsx | 55 ++++---- src/components/Layout/MobileMenu/index.tsx | 64 ++++----- src/components/Layout/Sidebar/index.tsx | 74 +++++----- src/components/Layout/UserDropdown/index.tsx | 6 +- src/components/Layout/VersionStatus/index.tsx | 85 ++++++------ src/components/ManageSlideOver/index.tsx | 46 +++---- .../MediaSlider/ShowMoreCard/index.tsx | 123 +++++++++-------- src/components/MediaSlider/index.tsx | 8 +- .../MovieDetails/MovieCast/index.tsx | 4 +- .../MovieDetails/MovieCrew/index.tsx | 4 +- .../MovieDetails/MovieRecommendations.tsx | 4 +- src/components/MovieDetails/MovieSimilar.tsx | 4 +- src/components/MovieDetails/index.tsx | 105 +++++++------- src/components/MusicDetails/ArtistDetails.tsx | 5 +- .../MusicDetails/ReleaseDetails.tsx | 12 +- src/components/PersonCard/index.tsx | 113 ++++++++-------- src/components/RequestBlock/index.tsx | 10 +- src/components/RequestCard/index.tsx | 82 +++++------ .../RequestList/RequestItem/index.tsx | 128 +++++++++--------- src/components/RequestList/index.tsx | 8 +- .../RequestModal/QuotaDisplay/index.tsx | 5 +- src/components/TitleCard/index.tsx | 93 ++++++------- src/components/TvDetails/TvCast/index.tsx | 4 +- src/components/TvDetails/TvCrew/index.tsx | 4 +- .../TvDetails/TvRecommendations.tsx | 4 +- src/components/TvDetails/TvSimilar.tsx | 4 +- src/components/TvDetails/index.tsx | 58 ++++---- src/components/UserList/index.tsx | 39 +++--- .../UserProfile/ProfileHeader/index.tsx | 5 +- src/components/UserProfile/index.tsx | 16 +-- src/pages/404.tsx | 8 +- src/pages/_error.tsx | 8 +- 45 files changed, 690 insertions(+), 735 deletions(-) diff --git a/src/components/CollectionDetails/index.tsx b/src/components/CollectionDetails/index.tsx index ff22ee10..1b49ec7c 100644 --- a/src/components/CollectionDetails/index.tsx +++ b/src/components/CollectionDetails/index.tsx @@ -166,10 +166,9 @@ const CollectionDetails = ({ collection }: CollectionDetailsProps) => { - - {genres.find((g) => g.id === genreId)?.name} - + {genres.find((g) => g.id === genreId)?.name} )) .reduce((prev, curr) => ( diff --git a/src/components/Common/Badge/index.tsx b/src/components/Common/Badge/index.tsx index 17eda5b1..0b003d3a 100644 --- a/src/components/Common/Badge/index.tsx +++ b/src/components/Common/Badge/index.tsx @@ -93,13 +93,12 @@ const Badge = ( ); } else if (href) { return ( - - } - > - {children} - + } + > + {children} ); } else { diff --git a/src/components/Common/SettingsTabs/index.tsx b/src/components/Common/SettingsTabs/index.tsx index 8ee46fea..22d5b948 100644 --- a/src/components/Common/SettingsTabs/index.tsx +++ b/src/components/Common/SettingsTabs/index.tsx @@ -55,15 +55,14 @@ const SettingsLink = ({ } return ( - - - {children} - + + {children} ); }; diff --git a/src/components/CompanyCard/index.tsx b/src/components/CompanyCard/index.tsx index 13b92a33..17bcacf1 100644 --- a/src/components/CompanyCard/index.tsx +++ b/src/components/CompanyCard/index.tsx @@ -12,40 +12,39 @@ const CompanyCard = ({ image, url, name }: CompanyCardProps) => { const [isHovered, setHovered] = useState(false); return ( - - { + { + setHovered(true); + }} + onMouseLeave={() => setHovered(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { setHovered(true); - }} - onMouseLeave={() => setHovered(false)} - onKeyDown={(e) => { - if (e.key === 'Enter') { - setHovered(true); - } - }} - role="link" - tabIndex={0} - > -
- -
-
+
+ - +
+
); }; diff --git a/src/components/Discover/DiscoverWatchlist/index.tsx b/src/components/Discover/DiscoverWatchlist/index.tsx index fbbdff01..001049e8 100644 --- a/src/components/Discover/DiscoverWatchlist/index.tsx +++ b/src/components/Discover/DiscoverWatchlist/index.tsx @@ -57,8 +57,8 @@ const DiscoverWatchlist = () => {
- {user?.displayName} + + {user?.displayName} ) : ( '' diff --git a/src/components/Discover/MovieGenreSlider/index.tsx b/src/components/Discover/MovieGenreSlider/index.tsx index 106d14a5..23a6cf2d 100644 --- a/src/components/Discover/MovieGenreSlider/index.tsx +++ b/src/components/Discover/MovieGenreSlider/index.tsx @@ -25,11 +25,9 @@ const MovieGenreSlider = () => { return ( <>
- - - {intl.formatMessage(messages.moviegenres)} - - + + {intl.formatMessage(messages.moviegenres)} +
{ return ( <>
- - - {intl.formatMessage(messages.plexwatchlist)} - - + + {intl.formatMessage(messages.plexwatchlist)} +
{ return ( <>
- - - {intl.formatMessage(sliderTitles.recentrequests)} - - + + {intl.formatMessage(sliderTitles.recentrequests)} +
{ return ( <>
- - - {intl.formatMessage(messages.tvgenres)} - - + + {intl.formatMessage(messages.tvgenres)} +
{ const [isHovered, setHovered] = useState(false); return ( - - { + { + setHovered(true); + }} + onMouseLeave={() => setHovered(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { setHovered(true); - }} - onMouseLeave={() => setHovered(false)} - onKeyDown={(e) => { - if (e.key === 'Enter') { - setHovered(true); - } - }} - role="link" - tabIndex={0} - > - -
-
- {name} -
- + } + }} + role="link" + tabIndex={0} + > + +
+
+ {name} +
); }; diff --git a/src/components/IssueBlock/index.tsx b/src/components/IssueBlock/index.tsx index d4cb9d0e..5cf8a1da 100644 --- a/src/components/IssueBlock/index.tsx +++ b/src/components/IssueBlock/index.tsx @@ -45,10 +45,9 @@ const IssueBlock = ({ issue }: IssueBlockProps) => { ? '/profile' : `/users/${issue.createdBy.id}` } + className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline" > - - {issue.createdBy.displayName} - + {issue.createdBy.displayName}
diff --git a/src/components/IssueDetails/IssueComment/index.tsx b/src/components/IssueDetails/IssueComment/index.tsx index 0a38fa53..7ef788ec 100644 --- a/src/components/IssueDetails/IssueComment/index.tsx +++ b/src/components/IssueDetails/IssueComment/index.tsx @@ -84,13 +84,11 @@ const IssueComment = ({ - - - +
@@ -242,10 +240,9 @@ const IssueComment = ({ href={ isActiveUser ? '/profile' : `/users/${comment.user.id}` } + className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline" > - - {comment.user.displayName} - + {comment.user.displayName} ), relativeTime: ( diff --git a/src/components/IssueDetails/index.tsx b/src/components/IssueDetails/index.tsx index 712d3379..5590c630 100644 --- a/src/components/IssueDetails/index.tsx +++ b/src/components/IssueDetails/index.tsx @@ -251,8 +251,9 @@ const IssueDetails = () => { href={`/${ issueData.media.mediaType === MediaType.MOVIE ? 'movie' : 'tv' }/${data.id}`} + className="hover:underline" > - {title} + {title} {' '} {releaseYear && ( ({releaseYear.slice(0, 4)}) @@ -268,17 +269,16 @@ const IssueDetails = () => { ? '/profile' : `/users/${issueData.createdBy.id}` } + className="group ml-1 inline-flex h-full items-center xl:ml-1.5" > - - - - {issueData.createdBy.displayName} - - + + + {issueData.createdBy.displayName} + ), relativeTime: ( diff --git a/src/components/IssueList/IssueItem/index.tsx b/src/components/IssueList/IssueItem/index.tsx index 8a20b46a..84fc6ead 100644 --- a/src/components/IssueList/IssueItem/index.tsx +++ b/src/components/IssueList/IssueItem/index.tsx @@ -133,21 +133,20 @@ const IssueItem = ({ issue }: IssueItemProps) => { ? `/movie/${issue.media.tmdbId}` : `/tv/${issue.media.tmdbId}` } + className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105" > - - - +
@@ -162,10 +161,9 @@ const IssueItem = ({ issue }: IssueItemProps) => { ? `/movie/${issue.media.tmdbId}` : `/tv/${issue.media.tmdbId}` } + className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl" > - - {isMovie(title) ? title.title : title.name} - + {isMovie(title) ? title.title : title.name} {problemSeasonEpisodeLine.length > 0 && (
@@ -222,17 +220,18 @@ const IssueItem = ({ issue }: IssueItemProps) => { /> ), user: ( - - - - - {issue.createdBy.displayName} - - + + + + {issue.createdBy.displayName} + ), })} diff --git a/src/components/Layout/MobileMenu/index.tsx b/src/components/Layout/MobileMenu/index.tsx index e1036119..9ac2a32f 100644 --- a/src/components/Layout/MobileMenu/index.tsx +++ b/src/components/Layout/MobileMenu/index.tsx @@ -151,25 +151,25 @@ const MobileMenu = () => { {filteredLinks.map((link) => { const isActive = router.pathname.match(link.activeRegExp); return ( - - { - if (e.key === 'Enter') { - setIsOpen(false); - } - }} - onClick={() => setIsOpen(false)} - role="button" - tabIndex={0} - > - {cloneElement(isActive ? link.svgIconSelected : link.svgIcon, { - className: 'h-5 w-5', - })} - {link.content} - + { + if (e.key === 'Enter') { + setIsOpen(false); + } + }} + onClick={() => setIsOpen(false)} + role="button" + tabIndex={0} + > + {cloneElement(isActive ? link.svgIconSelected : link.svgIcon, { + className: 'h-5 w-5', + })} + {link.content} ); })} @@ -182,19 +182,19 @@ const MobileMenu = () => { const isActive = router.pathname.match(link.activeRegExp) && !isOpen; return ( - - - {cloneElement( - isActive ? link.svgIconSelected : link.svgIcon, - { - className: 'h-6 w-6', - } - )} - + + {cloneElement( + isActive ? link.svgIconSelected : link.svgIcon, + { + className: 'h-6 w-6', + } + )} ); })} diff --git a/src/components/Layout/Sidebar/index.tsx b/src/components/Layout/Sidebar/index.tsx index d6aba3d5..24aa0076 100644 --- a/src/components/Layout/Sidebar/index.tsx +++ b/src/components/Layout/Sidebar/index.tsx @@ -176,32 +176,27 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => { key={`mobile-${sidebarLink.messagesKey}`} href={sidebarLink.href} as={sidebarLink.as} + onClick={() => setClosed()} + onKeyDown={(e) => { + if (e.key === 'Enter') { + setClosed(); + } + }} + role="button" + tabIndex={0} + className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none + ${ + router.pathname.match(sidebarLink.activeRegExp) + ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500' + : 'hover:bg-gray-700 focus:bg-gray-700' + } + `} + data-testid={`${sidebarLink.dataTestId}-mobile`} > - setClosed()} - onKeyDown={(e) => { - if (e.key === 'Enter') { - setClosed(); - } - }} - role="button" - tabIndex={0} - className={`flex items-center rounded-md px-2 py-2 text-base font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none - ${ - router.pathname.match( - sidebarLink.activeRegExp - ) - ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500' - : 'hover:bg-gray-700 focus:bg-gray-700' - } - `} - data-testid={`${sidebarLink.dataTestId}-mobile`} - > - {sidebarLink.svgIcon} - {intl.formatMessage( - menuMessages[sidebarLink.messagesKey] - )} - + {sidebarLink.svgIcon} + {intl.formatMessage( + menuMessages[sidebarLink.messagesKey] + )} ); })} @@ -246,24 +241,19 @@ const Sidebar = ({ open, setClosed }: SidebarProps) => { key={`desktop-${sidebarLink.messagesKey}`} href={sidebarLink.href} as={sidebarLink.as} + className={`group flex items-center rounded-md px-2 py-2 text-lg font-medium leading-6 text-white transition duration-150 ease-in-out focus:outline-none + ${ + router.pathname.match(sidebarLink.activeRegExp) + ? 'bg-gradient-to-br from-indigo-600 to-purple-600 hover:from-indigo-500 hover:to-purple-500' + : 'hover:bg-gray-700 focus:bg-gray-700' + } + `} + data-testid={sidebarLink.dataTestId} > - - {sidebarLink.svgIcon} - {intl.formatMessage( - menuMessages[sidebarLink.messagesKey] - )} - + {sidebarLink.svgIcon} + {intl.formatMessage( + menuMessages[sidebarLink.messagesKey] + )} ); })} diff --git a/src/components/Layout/UserDropdown/index.tsx b/src/components/Layout/UserDropdown/index.tsx index 6d3fe7b9..a8608aa9 100644 --- a/src/components/Layout/UserDropdown/index.tsx +++ b/src/components/Layout/UserDropdown/index.tsx @@ -24,10 +24,8 @@ const ForwardedLink = forwardRef< LinkProps & React.ComponentPropsWithoutRef<'a'> >(({ href, children, ...rest }, ref) => { return ( - - - {children} - + + {children} ); }); diff --git a/src/components/Layout/VersionStatus/index.tsx b/src/components/Layout/VersionStatus/index.tsx index e755750e..c5afd781 100644 --- a/src/components/Layout/VersionStatus/index.tsx +++ b/src/components/Layout/VersionStatus/index.tsx @@ -39,49 +39,48 @@ const VersionStatus = ({ onClick }: VersionStatusProps) => { : intl.formatMessage(messages.streamstable); return ( - - { - if (e.key === 'Enter' && onClick) { - onClick(); - } - }} - role="button" - tabIndex={0} - className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-gray-700 transition duration-300 ${ - data.updateAvailable - ? 'bg-yellow-500 text-white hover:bg-yellow-400' - : 'bg-gray-900 text-gray-300 hover:bg-gray-800' - }`} - > - {data.commitTag === 'local' ? ( - - ) : data.version.startsWith('develop-') ? ( - - ) : ( - - )} -
- {versionStream} - - {data.commitTag === 'local' ? ( - '(⌐■_■)' - ) : data.commitsBehind > 0 ? ( - intl.formatMessage(messages.commitsbehind, { - commitsBehind: data.commitsBehind, - }) - ) : data.commitsBehind === -1 ? ( - intl.formatMessage(messages.outofdate) - ) : ( - - {data.version.replace('develop-', '')} - - )} - -
- {data.updateAvailable && } - + { + if (e.key === 'Enter' && onClick) { + onClick(); + } + }} + role="button" + tabIndex={0} + className={`mx-2 flex items-center rounded-lg p-2 text-xs ring-1 ring-gray-700 transition duration-300 ${ + data.updateAvailable + ? 'bg-yellow-500 text-white hover:bg-yellow-400' + : 'bg-gray-900 text-gray-300 hover:bg-gray-800' + }`} + > + {data.commitTag === 'local' ? ( + + ) : data.version.startsWith('develop-') ? ( + + ) : ( + + )} +
+ {versionStream} + + {data.commitTag === 'local' ? ( + '(⌐■_■)' + ) : data.commitsBehind > 0 ? ( + intl.formatMessage(messages.commitsbehind, { + commitsBehind: data.commitsBehind, + }) + ) : data.commitsBehind === -1 ? ( + intl.formatMessage(messages.outofdate) + ) : ( + + {data.version.replace('develop-', '')} + + )} + +
+ {data.updateAvailable && } ); }; diff --git a/src/components/ManageSlideOver/index.tsx b/src/components/ManageSlideOver/index.tsx index 103781d1..1b8d2b8f 100644 --- a/src/components/ManageSlideOver/index.tsx +++ b/src/components/ManageSlideOver/index.tsx @@ -275,19 +275,18 @@ const ManageSlideOver = ({ : `/users/${user.id}` } key={`watch-user-${user.id}`} + className="z-0 mb-1 -mr-2 shrink-0 hover:z-50" > - - - {user.displayName} - - + + {user.displayName} + ))} @@ -401,19 +400,18 @@ const ManageSlideOver = ({ : `/users/${user.id}` } key={`watch-user-${user.id}`} + className="z-0 mb-1 -mr-2 shrink-0 hover:z-50" > - - - {user.displayName} - - + + {user.displayName} + ))} diff --git a/src/components/MediaSlider/ShowMoreCard/index.tsx b/src/components/MediaSlider/ShowMoreCard/index.tsx index f90c0def..68f7dc9f 100644 --- a/src/components/MediaSlider/ShowMoreCard/index.tsx +++ b/src/components/MediaSlider/ShowMoreCard/index.tsx @@ -30,79 +30,78 @@ const ShowMoreCard = ({ url, posters }: ShowMoreCardProps) => { } return ( - - { + { + setHovered(true); + }} + onMouseLeave={() => setHovered(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { setHovered(true); - }} - onMouseLeave={() => setHovered(false)} - onKeyDown={(e) => { - if (e.key === 'Enter') { - setHovered(true); - } - }} - role="link" - tabIndex={0} - > -
+
-
-
-
- {posters[0] && ( -
- -
- )} - {posters[1] && ( -
- -
- )} - {posters[2] && ( -
- -
- )} - {posters[3] && ( -
- -
- )} -
-
- - ); }; diff --git a/src/components/MediaSlider/index.tsx b/src/components/MediaSlider/index.tsx index 54b5cc80..c7e560c1 100644 --- a/src/components/MediaSlider/index.tsx +++ b/src/components/MediaSlider/index.tsx @@ -148,11 +148,9 @@ const MediaSlider = ({ <>
{linkUrl ? ( - - - {title} - - + + {title} + ) : (
diff --git a/src/components/MovieDetails/MovieCast/index.tsx b/src/components/MovieDetails/MovieCast/index.tsx index 2006e9df..0ff95119 100644 --- a/src/components/MovieDetails/MovieCast/index.tsx +++ b/src/components/MovieDetails/MovieCast/index.tsx @@ -34,8 +34,8 @@ const MovieCast = () => {
- {data.title} + + {data.title} } > diff --git a/src/components/MovieDetails/MovieCrew/index.tsx b/src/components/MovieDetails/MovieCrew/index.tsx index 1cc43b05..da52d35f 100644 --- a/src/components/MovieDetails/MovieCrew/index.tsx +++ b/src/components/MovieDetails/MovieCrew/index.tsx @@ -34,8 +34,8 @@ const MovieCrew = () => {
- {data.title} + + {data.title} } > diff --git a/src/components/MovieDetails/MovieRecommendations.tsx b/src/components/MovieDetails/MovieRecommendations.tsx index a7635a25..54bfb217 100644 --- a/src/components/MovieDetails/MovieRecommendations.tsx +++ b/src/components/MovieDetails/MovieRecommendations.tsx @@ -44,8 +44,8 @@ const MovieRecommendations = () => {
- {movieData?.title} + + {movieData?.title} } > diff --git a/src/components/MovieDetails/MovieSimilar.tsx b/src/components/MovieDetails/MovieSimilar.tsx index 5ce5ef1a..efdfb3df 100644 --- a/src/components/MovieDetails/MovieSimilar.tsx +++ b/src/components/MovieDetails/MovieSimilar.tsx @@ -42,8 +42,8 @@ const MovieSimilar = () => {
- {movieData?.title} + + {movieData?.title} } > diff --git a/src/components/MovieDetails/index.tsx b/src/components/MovieDetails/index.tsx index 11b2a775..425f9dc0 100644 --- a/src/components/MovieDetails/index.tsx +++ b/src/components/MovieDetails/index.tsx @@ -233,8 +233,12 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { movieAttributes.push( data.genres .map((g) => ( - - {g.name} + + {g.name} )) .reduce((prev, curr) => ( @@ -448,18 +452,19 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { {sortedCrew.slice(0, 6).map((person) => (
  • {person.job} - - {person.name} + + {person.name}
    • ))}
    - - - {intl.formatMessage(messages.viewfullcrew)} - - + + {intl.formatMessage(messages.viewfullcrew)} +
    @@ -470,10 +475,9 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { - - {keyword.name} - + {keyword.name} ))}
    @@ -483,31 +487,29 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { {data.collection && (
    - -
    -
    - -
    -
    -
    -
    {data.collection.name}
    - -
    +
    +
    + +
    -     +
    +
    {data.collection.name}
    + +
    +
    )} @@ -704,15 +706,13 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { - - {intl.formatDisplayName(data.originalLanguage, { - type: 'language', - fallback: 'none', - }) ?? - data.spokenLanguages.find( - (lng) => lng.iso_639_1 === data.originalLanguage - )?.name} - + {intl.formatDisplayName(data.originalLanguage, { + type: 'language', + fallback: 'none', + }) ?? + data.spokenLanguages.find( + (lng) => lng.iso_639_1 === data.originalLanguage + )?.name}
    @@ -768,8 +768,9 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { - {s.name} + {s.name} ); })} @@ -827,11 +828,13 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => { {data.credits.cast.length > 0 && ( <>
    - - - {intl.formatMessage(messages.cast)} - - + + {intl.formatMessage(messages.cast)} +
    { - - {keyword} - + {keyword} ))}
    diff --git a/src/components/MusicDetails/ReleaseDetails.tsx b/src/components/MusicDetails/ReleaseDetails.tsx index aed9f9bb..c74f9309 100644 --- a/src/components/MusicDetails/ReleaseDetails.tsx +++ b/src/components/MusicDetails/ReleaseDetails.tsx @@ -168,8 +168,11 @@ const ReleaseDetails = ({ release }: ReleaseDetailsProp) => { {data.artist.map((artist, index) => (
    {' '} - - {artist.name} + + {artist.name} {index < data.artist.length - 1 ? ', ' : ''}
    @@ -212,10 +215,9 @@ const ReleaseDetails = ({ release }: ReleaseDetailsProp) => { - - {keyword} - + {keyword} ))}
    diff --git a/src/components/PersonCard/index.tsx b/src/components/PersonCard/index.tsx index 3ca8c179..25164bce 100644 --- a/src/components/PersonCard/index.tsx +++ b/src/components/PersonCard/index.tsx @@ -21,71 +21,68 @@ const PersonCard = ({ const [isHovered, setHovered] = useState(false); return ( - - { + { + setHovered(true); + }} + onMouseLeave={() => setHovered(false)} + onKeyDown={(e) => { + if (e.key === 'Enter') { setHovered(true); - }} - onMouseLeave={() => setHovered(false)} - onKeyDown={(e) => { - if (e.key === 'Enter') { - setHovered(true); - } - }} - role="link" - tabIndex={0} + } + }} + role="link" + tabIndex={0} + > +
    -
    -
    -
    -
    - {profilePath ? ( -
    - -
    - ) : ( - - )} -
    -
    - {name} -
    - {subName && ( -
    - {subName} +
    + ); }; diff --git a/src/components/RequestBlock/index.tsx b/src/components/RequestBlock/index.tsx index ed4c3ec3..3da1d6ad 100644 --- a/src/components/RequestBlock/index.tsx +++ b/src/components/RequestBlock/index.tsx @@ -101,10 +101,9 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => { ? '/profile' : `/users/${request.requestedBy.id}` } + className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline" > - - {request.requestedBy.displayName} - + {request.requestedBy.displayName}
    @@ -120,10 +119,9 @@ const RequestBlock = ({ request, onUpdate }: RequestBlockProps) => { ? '/profile' : `/users/${request.modifiedBy.id}` } + className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline" > - - {request.modifiedBy.displayName} - + {request.modifiedBy.displayName}
    diff --git a/src/components/RequestCard/index.tsx b/src/components/RequestCard/index.tsx index 7ceaaae3..cd446010 100644 --- a/src/components/RequestCard/index.tsx +++ b/src/components/RequestCard/index.tsx @@ -131,17 +131,18 @@ const RequestCardError = ({ requestData }: RequestCardErrorProps) => { { type: 'or' } ) && (
    - - - - - {requestData.requestedBy.displayName} - - + + + + {requestData.requestedBy.displayName} +
    )} @@ -409,27 +410,27 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => { ? `/tv/${requestData.media.tmdbId}` : `/music/${requestData.media.secondaryType}/${requestData.media.mbId}` } + className="overflow-hidden overflow-ellipsis whitespace-nowrap text-base font-bold text-white hover:underline sm:text-lg" > - - {isMovie(title) || isRelease(title) ? title.title : title.name} - + {isMovie(title) || isRelease(title) ? title.title : title.name} {hasPermission( [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW], { type: 'or' } ) && (
    - - - - - {requestData.requestedBy.displayName} - - + + + + {requestData.requestedBy.displayName} +
    )} @@ -633,24 +634,23 @@ const RequestCard = ({ request, onTitleData }: RequestCardProps) => { ? `/tv/${requestData.media.tmdbId}` : `/music/${requestData.media.secondaryType}/${requestData.media.mbId}` } + className="w-20 flex-shrink-0 scale-100 transform-gpu cursor-pointer overflow-hidden rounded-md shadow-sm transition duration-300 hover:scale-105 hover:shadow-md sm:w-28" > - - - + : title.posterPath + ? title.posterPath + : '/images/overseerr_poster_not_found.png' + } + alt="" + layout="responsive" + width={isMovie(title) || isTv(title) ? 600 : 900} + height={900} + />
    diff --git a/src/components/RequestList/RequestItem/index.tsx b/src/components/RequestList/RequestItem/index.tsx index caba283d..94a5c18c 100644 --- a/src/components/RequestList/RequestItem/index.tsx +++ b/src/components/RequestList/RequestItem/index.tsx @@ -205,17 +205,18 @@ const RequestItemError = ({ /> ), user: ( - - - - - {requestData.requestedBy.displayName} - - + + + + {requestData.requestedBy.displayName} + ), })} @@ -259,17 +260,18 @@ const RequestItemError = ({ /> ), user: ( - - - - - {requestData.modifiedBy.displayName} - - + + + + {requestData.modifiedBy.displayName} + ), })} @@ -431,22 +433,21 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => { ? `/tv/${requestData.media.tmdbId}` : `/music/${requestData.secondaryType}/${requestData.media.mbId}` } + className="relative h-auto w-12 flex-shrink-0 scale-100 transform-gpu overflow-hidden rounded-md transition duration-300 hover:scale-105" > - - - +
    @@ -467,12 +468,9 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => { ? `/tv/${requestData.media.tmdbId}` : `/music/${requestData.secondaryType}/${requestData.media.mbId}` } + className="mr-2 min-w-0 truncate text-lg font-bold text-white hover:underline xl:text-xl" > - - {isMovie(title) || isRelease(title) - ? title.title - : title.name} - + {isMovie(title) || isRelease(title) ? title.title : title.name} {isTv(title) && request.seasons.length > 0 && (
    @@ -570,17 +568,18 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => { /> ), user: ( - - - - - {requestData.requestedBy.displayName} - - + + + + {requestData.requestedBy.displayName} + ), })} @@ -624,17 +623,18 @@ const RequestItem = ({ request, revalidateList }: RequestItemProps) => { /> ), user: ( - - - - - {requestData.modifiedBy.displayName} - - + + + + {requestData.modifiedBy.displayName} + ), })} diff --git a/src/components/RequestList/index.tsx b/src/components/RequestList/index.tsx index bffd7c06..a381bb15 100644 --- a/src/components/RequestList/index.tsx +++ b/src/components/RequestList/index.tsx @@ -122,12 +122,12 @@ const RequestList = () => {
    - {currentUser?.displayName} + + {currentUser?.displayName} ) : router.query.userId ? ( - - {user?.displayName} + + {user?.displayName} ) : ( '' diff --git a/src/components/RequestModal/QuotaDisplay/index.tsx b/src/components/RequestModal/QuotaDisplay/index.tsx index 4ffad419..1457c5cb 100644 --- a/src/components/RequestModal/QuotaDisplay/index.tsx +++ b/src/components/RequestModal/QuotaDisplay/index.tsx @@ -133,10 +133,9 @@ const QuotaDisplay = ({ ProfileLink: (msg: React.ReactNode) => ( - - {msg} - + {msg} ), } diff --git a/src/components/TitleCard/index.tsx b/src/components/TitleCard/index.tsx index c96060c1..4918366b 100644 --- a/src/components/TitleCard/index.tsx +++ b/src/components/TitleCard/index.tsx @@ -212,60 +212,55 @@ const TitleCard = ({ ? `/${mediaType}/${id}` : `/music/${mediaType}/${id as string}` } + className="absolute inset-0 h-full w-full cursor-pointer overflow-hidden text-left" + style={{ + background: + 'linear-gradient(180deg, rgba(45, 55, 72, 0.4) 0%, rgba(45, 55, 72, 0.9) 100%)', + }} > - -
    +
    diff --git a/src/components/TvDetails/TvCast/index.tsx b/src/components/TvDetails/TvCast/index.tsx index 4c7697aa..993f0b1c 100644 --- a/src/components/TvDetails/TvCast/index.tsx +++ b/src/components/TvDetails/TvCast/index.tsx @@ -34,8 +34,8 @@ const TvCast = () => {
    - {data.name} + + {data.name} } > diff --git a/src/components/TvDetails/TvCrew/index.tsx b/src/components/TvDetails/TvCrew/index.tsx index a6a65e96..4251de72 100644 --- a/src/components/TvDetails/TvCrew/index.tsx +++ b/src/components/TvDetails/TvCrew/index.tsx @@ -34,8 +34,8 @@ const TvCrew = () => {
    - {data.name} + + {data.name} } > diff --git a/src/components/TvDetails/TvRecommendations.tsx b/src/components/TvDetails/TvRecommendations.tsx index 4ecbd248..8b64532d 100644 --- a/src/components/TvDetails/TvRecommendations.tsx +++ b/src/components/TvDetails/TvRecommendations.tsx @@ -40,8 +40,8 @@ const TvRecommendations = () => {
    - {tvData?.name} + + {tvData?.name} } > diff --git a/src/components/TvDetails/TvSimilar.tsx b/src/components/TvDetails/TvSimilar.tsx index fb254a51..2f0cd666 100644 --- a/src/components/TvDetails/TvSimilar.tsx +++ b/src/components/TvDetails/TvSimilar.tsx @@ -38,8 +38,8 @@ const TvSimilar = () => {
    - {tvData?.name} + + {tvData?.name} } > diff --git a/src/components/TvDetails/index.tsx b/src/components/TvDetails/index.tsx index 2f44a7d8..1b06e336 100644 --- a/src/components/TvDetails/index.tsx +++ b/src/components/TvDetails/index.tsx @@ -214,8 +214,12 @@ const TvDetails = ({ tv }: TvDetailsProps) => { seriesAttributes.push( data.genres .map((g) => ( - - {g.name} + + {g.name} )) .reduce((prev, curr) => ( @@ -487,18 +491,19 @@ const TvDetails = ({ tv }: TvDetailsProps) => { .map((person) => (
  • {person.job} - - {person.name} + + {person.name}
    • ))}
    - - - {intl.formatMessage(messages.viewfullcrew)} - - + + {intl.formatMessage(messages.viewfullcrew)} +
    @@ -509,10 +514,9 @@ const TvDetails = ({ tv }: TvDetailsProps) => { - - {keyword.name} - + {keyword.name} ))}
    @@ -887,15 +891,13 @@ const TvDetails = ({ tv }: TvDetailsProps) => { {intl.formatMessage(messages.originallanguage)} - - {intl.formatDisplayName(data.originalLanguage, { - type: 'language', - fallback: 'none', - }) ?? - data.spokenLanguages.find( - (lng) => lng.iso_639_1 === data.originalLanguage - )?.name} - + {intl.formatDisplayName(data.originalLanguage, { + type: 'language', + fallback: 'none', + }) ?? + data.spokenLanguages.find( + (lng) => lng.iso_639_1 === data.originalLanguage + )?.name}
    @@ -945,7 +947,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => { href={`/discover/tv/network/${n.id}`} key={`network-${n.id}`} > - {n.name} + {n.name} )) .reduce((prev, curr) => ( @@ -989,11 +991,13 @@ const TvDetails = ({ tv }: TvDetailsProps) => { {data.credits.cast.length > 0 && ( <>
    - - - {intl.formatMessage(messages.cast)} - - + + {intl.formatMessage(messages.cast)} +
    {
    - - - - + +
    - - - {user.displayName} - + + {user.displayName} {user.displayName.toLowerCase() !== user.email && (
    @@ -611,10 +611,11 @@ const UserList = () => { [Permission.MANAGE_REQUESTS, Permission.REQUEST_VIEW], { type: 'or' } ) ? ( - - - {user.requestCount} - + + {user.requestCount} ) : ( user.requestCount diff --git a/src/components/UserProfile/ProfileHeader/index.tsx b/src/components/UserProfile/ProfileHeader/index.tsx index fc97eb86..1e6916c6 100644 --- a/src/components/UserProfile/ProfileHeader/index.tsx +++ b/src/components/UserProfile/ProfileHeader/index.tsx @@ -57,10 +57,9 @@ const ProfileHeader = ({ user, isSettingsPage }: ProfileHeaderProps) => { href={ user.id === loggedInUser?.id ? '/profile' : `/users/${user.id}` } + className="text-overseerr text-lg font-bold hover:to-purple-200 sm:text-2xl" > - - {user.displayName} - + {user.displayName} {user.email && user.displayName.toLowerCase() !== user.email && ( diff --git a/src/components/UserProfile/index.tsx b/src/components/UserProfile/index.tsx index 6b480196..2b3c7c12 100644 --- a/src/components/UserProfile/index.tsx +++ b/src/components/UserProfile/index.tsx @@ -159,7 +159,7 @@ const UserProfile = () => { : `/users/${user?.id}/requests?filter=all` } > - {intl.formatNumber(user.requestCount)} + {intl.formatNumber(user.requestCount)}
    @@ -291,11 +291,10 @@ const UserProfile = () => { ? '/profile/requests?filter=all' : `/users/${user?.id}/requests?filter=all` } + className="slider-title" > - - {intl.formatMessage(messages.recentrequests)} - - + {intl.formatMessage(messages.recentrequests)} +
    { ? '/profile/watchlist' : `/users/${user?.id}/watchlist` } + className="slider-title" > - - {intl.formatMessage(messages.plexwatchlist)} - - + {intl.formatMessage(messages.plexwatchlist)} +
    { error: intl.formatMessage(messages.pagenotfound), })}
    - - - {intl.formatMessage(messages.returnHome)} - - + + {intl.formatMessage(messages.returnHome)} +
    ); diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx index 66d85fdb..e50a8b52 100644 --- a/src/pages/_error.tsx +++ b/src/pages/_error.tsx @@ -44,11 +44,9 @@ const Error: NextPage = ({ statusCode }) => { }) : getErrorMessage(statusCode)}
    - - - {intl.formatMessage(messages.returnHome)} - - + + {intl.formatMessage(messages.returnHome)} +
    );