open-source-mirrors
/
overseerr
mirror of https://github.com/sct/overseerr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): use consistent formatting & strings (#2231)

Browse Source 
* fix(frontend): use consistent formatting & strings

* fix(lang): remove duplicated status strings

* fix(frontend): reduce height of items in request & issue lists

* fix(frontend): issue description textarea label should be a label element

* refactor: remove unnecessary reduce

* fix: remove small avatar underneath issue comments

* fix(frontend): don't hide Pushover app token tip
pull/2233/head
TheCatLady 3 years ago committed by GitHub
parent aeb7a48d72
commit 216447121b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 264 additions and 178 deletions
Show Stats Download Patch File Download Diff File

32
src/components/IssueDetails/IssueComment/index.tsx
Unescape View File

@ -3,6 +3,7 @@ import { ExclamationIcon } from '@heroicons/react/outline';
import { DotsVerticalIcon } from '@heroicons/react/solid';
import axios from 'axios';
import { Field, Form, Formik } from 'formik';
import Link from 'next/link';
import React, { useState } from 'react';
import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import ReactMarkdown from 'react-markdown';
@ -14,11 +15,11 @@ import Modal from '../../Common/Modal';
import Transition from '../../Transition';
const messages = defineMessages({
postedby: 'Posted by {username} {relativeTime}',
postedbyedited: 'Posted by {username} {relativeTime} (Edited)',
postedby: 'Posted {relativeTime} by {username}',
postedbyedited: 'Posted {relativeTime} by {username} (Edited)',
delete: 'Delete Comment',
areyousuredelete: 'Are you sure you want to delete this comment?',
validationComment: 'You must provide a message',
validationComment: 'You must enter a message',
edit: 'Edit Comment',
});
@ -86,11 +87,15 @@ const IssueComment: React.FC<IssueCommentProps> = ({
{intl.formatMessage(messages.areyousuredelete)}
</Modal>
</Transition>
<img
src={comment.user.avatar}
alt=""
className="w-10 h-10 rounded-full ring-1 ring-gray-500"
/>
<Link href={isActiveUser ? '/profile' : `/users/${comment.user.id}`}>
<a>
<img
src={comment.user.avatar}
alt=""
className="w-10 h-10 transition duration-300 scale-100 rounded-full ring-1 ring-gray-500 transform-gpu hover:scale-105"
/>
</a>
</Link>
<div className="relative flex-1">
<div className="w-full rounded-md shadow ring-1 ring-gray-500">
{(belongsToUser || hasPermission(Permission.MANAGE_ISSUES)) && (
@ -221,7 +226,7 @@ const IssueComment: React.FC<IssueCommentProps> = ({
</div>
</div>
<div
className={`flex justify-between items-center text-xs pt-2 px-2 ${
className={`flex justify-between items-center text-xs pt-2 ${
isReversed ? 'flex-row-reverse' : 'flex-row'
}`}
>
@ -232,14 +237,15 @@ const IssueComment: React.FC<IssueCommentProps> = ({
: messages.postedby,
{
username: (
<a
<Link
href={
isActiveUser ? '/profile' : `/users/${comment.user.id}`
}
className="font-semibold text-gray-100 transition duration-300 hover:underline hover:text-white"
>
{comment.user.displayName}
</a>
<a className="font-semibold text-gray-100 transition duration-300 hover:text-white hover:underline">
{comment.user.displayName}
</a>
</Link>
),
relativeTime: (
<FormattedRelativeTime

242
src/components/IssueDetails/index.tsx
Unescape View File

@ -2,7 +2,8 @@ import {
ChatIcon,
CheckCircleIcon,
ExclamationIcon,
ExternalLinkIcon,
PlayIcon,
ServerIcon,
} from '@heroicons/react/outline';
import { RefreshIcon } from '@heroicons/react/solid';
import axios from 'axios';
@ -34,8 +35,7 @@ import IssueComment from './IssueComment';
import IssueDescription from './IssueDescription';
const messages = defineMessages({
openedby:
'#{issueId} opened {relativeTime} by <UserLink>{username}</UserLink>',
openedby: '#{issueId} opened {relativeTime} by {username}',
closeissue: 'Close Issue',
closeissueandcomment: 'Close with Comment',
leavecomment: 'Comment',
@ -43,18 +43,18 @@ const messages = defineMessages({
reopenissue: 'Reopen Issue',
reopenissueandcomment: 'Reopen with Comment',
issuepagetitle: 'Issue',
playonplex: 'Play on Plex',
play4konplex: 'Play 4K on Plex',
openinarr: 'Open in {arr}',
toasteditdescriptionsuccess: 'Edited the issue description successfully!',
openin4karr: 'Open in 4K {arr}',
toasteditdescriptionsuccess: 'Issue description edited successfully!',
toasteditdescriptionfailed:
'Something went wrong while editing the issue description.',
toaststatusupdated: 'Updated the issue status successfully!',
toaststatusupdated: 'Issue status updated successfully!',
toaststatusupdatefailed:
'Something went wrong while updating the issue status.',
issuetype: 'Issue Type',
mediatype: 'Media Type',
issuetype: 'Type',
lastupdated: 'Last Updated',
statusopen: 'Open',
statusresolved: 'Resolved',
problemseason: 'Affected Season',
allseasons: 'All Seasons',
season: 'Season {seasonNumber}',
@ -63,7 +63,7 @@ const messages = defineMessages({
episode: 'Episode {episodeNumber}',
deleteissue: 'Delete Issue',
deleteissueconfirm: 'Are you sure you want to delete this issue?',
toastissuedeleted: 'Deleted the issue successfully!',
toastissuedeleted: 'Issue deleted successfully!',
toastissuedeletefailed: 'Something went wrong while deleting the issue.',
nocomments: 'No comments.',
unknownissuetype: 'Unknown',
@ -96,8 +96,6 @@ const IssueDetails: React.FC = () => {
(opt) => opt.issueType === issueData?.issueType
);
const mediaType = issueData?.media.mediaType;
if (!data && !error) {
return <LoadingSpinner />;
}
@ -212,7 +210,7 @@ const IssueDetails: React.FC = () => {
/>
</div>
)}
<div className="flex flex-col items-center pt-4 lg:items-end lg:flex-row">
<div className="media-header">
<div className="media-poster">
<CachedImage
src={
@ -231,12 +229,12 @@ const IssueDetails: React.FC = () => {
<div className="media-status">
{issueData.status === IssueStatus.OPEN && (
<Badge badgeType="primary">
{intl.formatMessage(messages.statusopen)}
{intl.formatMessage(globalMessages.open)}
</Badge>
)}
{issueData.status === IssueStatus.RESOLVED && (
<Badge badgeType="success">
{intl.formatMessage(messages.statusresolved)}
{intl.formatMessage(globalMessages.resolved)}
</Badge>
)}
</div>
@ -259,27 +257,26 @@ const IssueDetails: React.FC = () => {
<span className="media-attributes">
{intl.formatMessage(messages.openedby, {
issueId: issueData.id,
username: issueData.createdBy.displayName,
UserLink: function UserLink(msg) {
return (
<div className="inline-flex items-center h-full mx-1">
<Link href={`/users/${issueData.createdBy.id}`}>
<a className="flex-shrink-0 w-6 h-6 mr-1">
<img
className="w-6 h-6 rounded-full"
src={issueData.createdBy.avatar}
alt=""
/>
</a>
</Link>
<Link href={`/users/${issueData.createdBy.id}`}>
<a className="font-semibold text-gray-100 transition hover:underline hover:text-white">
{msg}
</a>
</Link>
</div>
);
},
username: (
<Link
href={
issueData.createdBy.id === currentUser?.id
? '/profile'
: `/users/${issueData.createdBy.id}`
}
>
<a className="inline-flex items-center h-full ml-1 xl:ml-1.5 group">
<img
className="w-5 h-5 mr-0.5 transition duration-300 scale-100 rounded-full xl:w-6 xl:h-6 xl:mr-1 transform-gpu group-hover:scale-105"
src={issueData.createdBy.avatar}
alt=""
/>
<span className="font-semibold text-gray-100 transition duration-300 group-hover:text-white group-hover:underline">
{issueData.createdBy.displayName}
</span>
</a>
</Link>
),
relativeTime: (
<FormattedRelativeTime
value={Math.floor(
@ -306,16 +303,6 @@ const IssueDetails: React.FC = () => {
/>
<div className="mt-8 lg:hidden">
<div className="media-facts">
<div className="media-fact">
<span>{intl.formatMessage(messages.mediatype)}</span>
<span className="media-fact-value">
{intl.formatMessage(
mediaType === MediaType.MOVIE
? globalMessages.movie
: globalMessages.tvshow
)}
</span>
</div>
<div className="media-fact">
<span>{intl.formatMessage(messages.issuetype)}</span>
<span className="media-fact-value">
@ -366,20 +353,66 @@ const IssueDetails: React.FC = () => {
</span>
</div>
</div>
{hasPermission(Permission.MANAGE_ISSUES) && (
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.serviceUrl && (
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.plexUrl && (
<Button
as="a"
href={issueData?.media.plexUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.playonplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl && hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ServerIcon />
<span>
{intl.formatMessage(messages.openinarr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
{issueData?.media.plexUrl4k && (
<Button
as="a"
href={issueData?.media.plexUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.play4konplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl4k &&
hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl}
href={issueData?.media.serviceUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ExternalLinkIcon />
<ServerIcon />
<span>
{intl.formatMessage(messages.openinarr, {
{intl.formatMessage(messages.openin4karr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
@ -388,8 +421,7 @@ const IssueDetails: React.FC = () => {
</span>
</Button>
)}
</div>
)}
</div>
</div>
<div className="mt-6">
<div className="font-semibold text-gray-100 lg:text-xl">
@ -513,16 +545,6 @@ const IssueDetails: React.FC = () => {
)}
</span>
</div>
<div className="media-fact">
<span>{intl.formatMessage(messages.mediatype)}</span>
<span className="media-fact-value">
{intl.formatMessage(
mediaType === MediaType.MOVIE
? globalMessages.movie
: globalMessages.tvshow
)}
</span>
</div>
{issueData.media.mediaType === MediaType.TV && (
<>
<div className="media-fact">
@ -565,30 +587,74 @@ const IssueDetails: React.FC = () => {
</span>
</div>
</div>
{hasPermission(Permission.MANAGE_ISSUES) && (
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.serviceUrl && (
<Button
as="a"
href={issueData?.media.serviceUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ExternalLinkIcon />
<span>
{intl.formatMessage(messages.openinarr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
</div>
)}
<div className="flex flex-col mt-4 mb-6 space-y-2">
{issueData?.media.plexUrl && (
<Button
as="a"
href={issueData?.media.plexUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.playonplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl && hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ServerIcon />
<span>
{intl.formatMessage(messages.openinarr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
{issueData?.media.plexUrl4k && (
<Button
as="a"
href={issueData?.media.plexUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<PlayIcon />
<span>{intl.formatMessage(messages.play4konplex)}</span>
</Button>
)}
{issueData?.media.serviceUrl4k && hasPermission(Permission.ADMIN) && (
<Button
as="a"
href={issueData?.media.serviceUrl4k}
target="_blank"
rel="noreferrer"
className="w-full"
buttonType="ghost"
>
<ServerIcon />
<span>
{intl.formatMessage(messages.openin4karr, {
arr:
issueData.media.mediaType === MediaType.MOVIE
? 'Radarr'
: 'Sonarr',
})}
</span>
</Button>
)}
</div>
</div>
</div>
</div>

60
src/components/IssueList/IssueItem/index.tsx
Unescape View File

@ -18,11 +18,9 @@ import { issueOptions } from '../../IssueModal/constants';
const messages = defineMessages({
openeduserdate: '{date} by {user}',
allseasons: 'All Seasons',
season: 'Season {seasonNumber}',
seasons: '{seasonCount, plural, one {Season} other {Seasons}}',
episodes: '{episodeCount, plural, one {Episode} other {Episodes}}',
problemepisode: 'Affected Episode',
allepisodes: 'All Episodes',
episode: 'Episode {episodeNumber}',
issuetype: 'Type',
issuestatus: 'Status',
opened: 'Opened',
@ -55,7 +53,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
if (!title && !error) {
return (
<div
className="w-full bg-gray-800 h-52 sm:h-40 xl:h-24 rounded-xl animate-pulse"
className="w-full h-64 bg-gray-800 rounded-xl xl:h-28 animate-pulse"
ref={ref}
/>
);
@ -69,30 +67,48 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
(opt) => opt.issueType === issue?.issueType
);
const problemSeasonEpisodeLine = [];
const problemSeasonEpisodeLine: React.ReactNode[] = [];
if (!isMovie(title) && issue) {
problemSeasonEpisodeLine.push(
issue.problemSeason > 0
? intl.formatMessage(messages.season, {
seasonNumber: issue.problemSeason,
})
: intl.formatMessage(messages.allseasons)
<>
<span className="card-field-name">
{intl.formatMessage(messages.seasons, {
seasonCount: issue.problemSeason ? 1 : 0,
})}
</span>
<span className="mr-4 uppercase">
<Badge>
{issue.problemSeason > 0
? issue.problemSeason
: intl.formatMessage(globalMessages.all)}
</Badge>
</span>
</>
);
if (issue.problemSeason > 0) {
problemSeasonEpisodeLine.push(
issue.problemEpisode > 0
? intl.formatMessage(messages.episode, {
episodeNumber: issue.problemEpisode,
})
: intl.formatMessage(messages.allepisodes)
<>
<span className="card-field-name">
{intl.formatMessage(messages.episodes, {
episodeCount: issue.problemEpisode ? 1 : 0,
})}
</span>
<span className="uppercase">
<Badge>
{issue.problemEpisode > 0
? issue.problemEpisode
: intl.formatMessage(globalMessages.all)}
</Badge>
</span>
</>
);
}
}
return (
<div className="relative flex flex-col justify-between w-full py-2 overflow-hidden text-gray-400 bg-gray-800 shadow-md h-52 sm:h-40 xl:h-24 ring-1 ring-gray-700 rounded-xl xl:flex-row">
<div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-28 xl:flex-row">
{title.backdropPath && (
<div className="absolute inset-0 z-0 w-full bg-center bg-cover xl:w-2/3">
<CachedImage
@ -119,7 +135,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
: `/tv/${issue.media.tmdbId}`
}
>
<a className="relative flex-shrink-0 w-10 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
<a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
<CachedImage
src={
title.posterPath
@ -153,8 +169,10 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
</a>
</Link>
{problemSeasonEpisodeLine.length > 0 && (
<div className="text-sm text-gray-200">
{problemSeasonEpisodeLine.join(' | ')}
<div className="card-field">
{problemSeasonEpisodeLine.map((t, k) => (
<span key={k}>{t}</span>
))}
</div>
)}
</div>
@ -212,7 +230,7 @@ const IssueItem: React.FC<IssueItemProps> = ({ issue }) => {
alt=""
className="ml-1.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
<span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
{issue.createdBy.displayName}
</span>
</a>

4
src/components/IssueList/index.tsx
Unescape View File

@ -94,7 +94,7 @@ const IssueList: React.FC = () => {
<>
<PageTitle title={intl.formatMessage(messages.issues)} />
<div className="flex flex-col justify-between mb-4 lg:items-end lg:flex-row">
<Header>Issues</Header>
<Header>{intl.formatMessage(messages.issues)}</Header>
<div className="flex flex-col flex-grow mt-2 sm:flex-row lg:flex-grow-0">
<div className="flex flex-grow mb-2 sm:mb-0 sm:mr-2 lg:flex-grow-0">
<span className="inline-flex items-center px-3 text-sm text-gray-100 bg-gray-800 border border-r-0 border-gray-500 cursor-default rounded-l-md">
@ -157,7 +157,7 @@ const IssueList: React.FC = () => {
</div>
{data.results.map((issue) => {
return (
<div className="mb-2" key={`issue-item-${issue.id}`}>
<div className="py-2" key={`issue-item-${issue.id}`}>
<IssueItem issue={issue} />
</div>
);

6
src/components/IssueModal/CreateIssueModal/index.tsx
Unescape View File

@ -278,10 +278,10 @@ const CreateIssueModal: React.FC<CreateIssueModalProps> = ({
</div>
</RadioGroup>
<div className="flex-col mt-4 space-y-2">
<span>
{intl.formatMessage(messages.whatswrong)}{' '}
<label htmlFor="message">
{intl.formatMessage(messages.whatswrong)}
<span className="label-required">*</span>
</span>
</label>
<Field
as="textarea"
name="message"

11
src/components/ManageSlideOver/index.tsx
Unescape View File

@ -1,8 +1,5 @@
import {
CheckCircleIcon,
DocumentRemoveIcon,
ExternalLinkIcon,
} from '@heroicons/react/solid';
import { ServerIcon } from '@heroicons/react/outline';
import { CheckCircleIcon, DocumentRemoveIcon } from '@heroicons/react/solid';
import axios from 'axios';
import React from 'react';
import { defineMessages, useIntl } from 'react-intl';
@ -208,7 +205,7 @@ const ManageSlideOver: React.FC<
className="block mb-2 last:mb-0"
>
<Button buttonType="ghost" className="w-full">
<ExternalLinkIcon />
<ServerIcon />
<span>
{intl.formatMessage(messages.openarr, {
mediaType: intl.formatMessage(
@ -229,7 +226,7 @@ const ManageSlideOver: React.FC<
rel="noreferrer"
>
<Button buttonType="ghost" className="w-full">
<ExternalLinkIcon />
<ServerIcon />
<span>
{intl.formatMessage(messages.openarr4k, {
mediaType: intl.formatMessage(

2
src/components/RequestCard/index.tsx
Unescape View File

@ -233,7 +233,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
alt=""
className="avatar-sm"
/>
<span className="truncate group-hover:underline">
<span className="font-semibold truncate group-hover:underline group-hover:text-white">
{requestData.requestedBy.displayName}
</span>
</a>

12
src/components/RequestList/RequestItem/index.tsx
Unescape View File

@ -63,7 +63,7 @@ const RequestItemError: React.FC<RequestItemErroProps> = ({
};
return (
<div className="flex flex-col items-center justify-center w-full h-64 px-10 bg-gray-800 lg:flex-row ring-1 ring-red-500 rounded-xl xl:h-32">
<div className="flex flex-col items-center justify-center w-full h-64 px-10 bg-gray-800 lg:flex-row ring-1 ring-red-500 rounded-xl xl:h-28">
<span className="text-sm text-center text-gray-300 lg:text-left">
{intl.formatMessage(messages.mediaerror)}
</span>
@ -149,7 +149,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
if (!title && !error) {
return (
<div
className="w-full h-64 bg-gray-800 rounded-xl xl:h-32 animate-pulse"
className="w-full h-64 bg-gray-800 rounded-xl xl:h-28 animate-pulse"
ref={ref}
/>
);
@ -178,7 +178,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
setShowEditModal(false);
}}
/>
<div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-32 xl:flex-row">
<div className="relative flex flex-col justify-between w-full py-4 overflow-hidden text-gray-400 bg-gray-800 shadow-md ring-1 ring-gray-700 rounded-xl xl:h-28 xl:flex-row">
{title.backdropPath && (
<div className="absolute inset-0 z-0 w-full bg-center bg-cover xl:w-2/3">
<CachedImage
@ -205,7 +205,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
: `/tv/${requestData.media.tmdbId}`
}
>
<a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md sm:w-14 transform-gpu hover:scale-105">
<a className="relative flex-shrink-0 w-12 h-auto overflow-hidden transition duration-300 scale-100 rounded-md transform-gpu hover:scale-105">
<CachedImage
src={
title.posterPath
@ -339,7 +339,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
alt=""
className="ml-1.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
<span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
{requestData.requestedBy.displayName}
</span>
</a>
@ -393,7 +393,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
alt=""
className="ml-1.5 avatar-sm"
/>
<span className="text-sm truncate group-hover:underline">
<span className="text-sm font-semibold truncate group-hover:underline group-hover:text-white">
{requestData.modifiedBy.displayName}
</span>
</a>

41
src/components/UserProfile/UserSettings/UserNotificationSettings/UserNotificationsPushover.tsx
Unescape View File

@ -7,6 +7,7 @@ import { useToasts } from 'react-toast-notifications';
import useSWR from 'swr';
import * as Yup from 'yup';
import { UserSettingsNotificationsResponse } from '../../../../../server/interfaces/api/userSettingsInterfaces';
import useSettings from '../../../../hooks/useSettings';
import { useUser } from '../../../../hooks/useUser';
import globalMessages from '../../../../i18n/globalMessages';
import Button from '../../../Common/Button';
@ -18,7 +19,7 @@ const messages = defineMessages({
pushoversettingsfailed: 'Pushover notification settings failed to save.',
pushoverApplicationToken: 'Application API Token',
pushoverApplicationTokenTip:
'<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Overseerr',
'<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with {applicationTitle}',
pushoverUserKey: 'User or Group Key',
pushoverUserKeyTip:
'Your 30-character <UsersGroupsLink>user or group identifier</UsersGroupsLink>',
@ -29,6 +30,7 @@ const messages = defineMessages({
const UserPushoverSettings: React.FC = () => {
const intl = useIntl();
const settings = useSettings();
const { addToast } = useToasts();
const router = useRouter();
const { user } = useUser({ id: Number(router.query.userId) });
@ -121,25 +123,24 @@ const UserPushoverSettings: React.FC = () => {
<label htmlFor="pushoverApplicationToken" className="text-label">
{intl.formatMessage(messages.pushoverApplicationToken)}
<span className="label-required">*</span>
{data?.pushoverApplicationToken && (
<span className="label-tip">
{intl.formatMessage(messages.pushoverApplicationTokenTip, {
ApplicationRegistrationLink:
function ApplicationRegistrationLink(msg) {
return (
<a
href="https://pushover.net/api#registration"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
})}
</span>
)}
<span className="label-tip">
{intl.formatMessage(messages.pushoverApplicationTokenTip, {
ApplicationRegistrationLink:
function ApplicationRegistrationLink(msg) {
return (
<a
href="https://pushover.net/api#registration"
className="text-white transition duration-300 hover:underline"
target="_blank"
rel="noreferrer"
>
{msg}
</a>
);
},
applicationTitle: settings.currentSettings.applicationTitle,
})}
</span>
</label>
<div className="form-input">
<div className="form-input-field">

30
src/i18n/locale/en.json
Unescape View File

@ -35,9 +35,9 @@
"components.IssueDetails.IssueComment.areyousuredelete": "Are you sure you want to delete this comment?",
"components.IssueDetails.IssueComment.delete": "Delete Comment",
"components.IssueDetails.IssueComment.edit": "Edit Comment",
"components.IssueDetails.IssueComment.postedby": "Posted by {username} {relativeTime}",
"components.IssueDetails.IssueComment.postedbyedited": "Posted by {username} {relativeTime} (Edited)",
"components.IssueDetails.IssueComment.validationComment": "You must provide a message",
"components.IssueDetails.IssueComment.postedby": "Posted {relativeTime} by {username}",
"components.IssueDetails.IssueComment.postedbyedited": "Posted {relativeTime} by {username} (Edited)",
"components.IssueDetails.IssueComment.validationComment": "You must enter a message",
"components.IssueDetails.IssueDescription.deleteissue": "Delete Issue",
"components.IssueDetails.IssueDescription.description": "Description",
"components.IssueDetails.IssueDescription.edit": "Edit Description",
@ -50,36 +50,34 @@
"components.IssueDetails.deleteissueconfirm": "Are you sure you want to delete this issue?",
"components.IssueDetails.episode": "Episode {episodeNumber}",
"components.IssueDetails.issuepagetitle": "Issue",
"components.IssueDetails.issuetype": "Issue Type",
"components.IssueDetails.issuetype": "Type",
"components.IssueDetails.lastupdated": "Last Updated",
"components.IssueDetails.leavecomment": "Comment",
"components.IssueDetails.mediatype": "Media Type",
"components.IssueDetails.nocomments": "No comments.",
"components.IssueDetails.openedby": "#{issueId} opened {relativeTime} by <UserLink>{username}</UserLink>",
"components.IssueDetails.openedby": "#{issueId} opened {relativeTime} by {username}",
"components.IssueDetails.openin4karr": "Open in 4K {arr}",
"components.IssueDetails.openinarr": "Open in {arr}",
"components.IssueDetails.play4konplex": "Play 4K on Plex",
"components.IssueDetails.playonplex": "Play on Plex",
"components.IssueDetails.problemepisode": "Affected Episode",
"components.IssueDetails.problemseason": "Affected Season",
"components.IssueDetails.reopenissue": "Reopen Issue",
"components.IssueDetails.reopenissueandcomment": "Reopen with Comment",
"components.IssueDetails.season": "Season {seasonNumber}",
"components.IssueDetails.statusopen": "Open",
"components.IssueDetails.statusresolved": "Resolved",
"components.IssueDetails.toasteditdescriptionfailed": "Something went wrong while editing the issue description.",
"components.IssueDetails.toasteditdescriptionsuccess": "Edited the issue description successfully!",
"components.IssueDetails.toastissuedeleted": "Deleted the issue successfully!",
"components.IssueDetails.toasteditdescriptionsuccess": "Issue description edited successfully!",
"components.IssueDetails.toastissuedeleted": "Issue deleted successfully!",
"components.IssueDetails.toastissuedeletefailed": "Something went wrong while deleting the issue.",
"components.IssueDetails.toaststatusupdated": "Updated the issue status successfully!",
"components.IssueDetails.toaststatusupdated": "Issue status updated successfully!",
"components.IssueDetails.toaststatusupdatefailed": "Something went wrong while updating the issue status.",
"components.IssueDetails.unknownissuetype": "Unknown",
"components.IssueList.IssueItem.allepisodes": "All Episodes",
"components.IssueList.IssueItem.allseasons": "All Seasons",
"components.IssueList.IssueItem.episode": "Episode {episodeNumber}",
"components.IssueList.IssueItem.episodes": "{episodeCount, plural, one {Episode} other {Episodes}}",
"components.IssueList.IssueItem.issuestatus": "Status",
"components.IssueList.IssueItem.issuetype": "Type",
"components.IssueList.IssueItem.opened": "Opened",
"components.IssueList.IssueItem.openeduserdate": "{date} by {user}",
"components.IssueList.IssueItem.problemepisode": "Affected Episode",
"components.IssueList.IssueItem.season": "Season {seasonNumber}",
"components.IssueList.IssueItem.seasons": "{seasonCount, plural, one {Season} other {Seasons}}",
"components.IssueList.IssueItem.unknownissuetype": "Unknown",
"components.IssueList.IssueItem.viewissue": "View Issue",
"components.IssueList.issues": "Issues",
@ -879,7 +877,7 @@
"components.UserProfile.UserSettings.UserNotificationSettings.pushbulletsettingsfailed": "Pushbullet notification settings failed to save.",
"components.UserProfile.UserSettings.UserNotificationSettings.pushbulletsettingssaved": "Pushbullet notification settings saved successfully!",
"components.UserProfile.UserSettings.UserNotificationSettings.pushoverApplicationToken": "Application API Token",
"components.UserProfile.UserSettings.UserNotificationSettings.pushoverApplicationTokenTip": "<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with Overseerr",
"components.UserProfile.UserSettings.UserNotificationSettings.pushoverApplicationTokenTip": "<ApplicationRegistrationLink>Register an application</ApplicationRegistrationLink> for use with {applicationTitle}",
"components.UserProfile.UserSettings.UserNotificationSettings.pushoverUserKey": "User or Group Key",
"components.UserProfile.UserSettings.UserNotificationSettings.pushoverUserKeyTip": "Your 30-character <UsersGroupsLink>user or group identifier</UsersGroupsLink>",
"components.UserProfile.UserSettings.UserNotificationSettings.pushoversettingsfailed": "Pushover notification settings failed to save.",

2
src/styles/globals.css
Unescape View File

@ -204,7 +204,7 @@
}
img.avatar-sm {
@apply w-5 h-5 mr-1.5 rounded-full transition duration-300 scale-100 transform-gpu group-hover:scale-105;
@apply w-5 h-5 mr-1 transition duration-300 scale-100 rounded-full transform-gpu group-hover:scale-105;
}
.card-field {

Write Preview
Loading…
Cancel
Save