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

refactor(ui): css refinements for a more unified look (#1816)

Browse Source
pull/1812/head
TheCatLady 3 years ago committed by GitHub
parent 409236f976
commit db781bfc35
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 73 additions and 60 deletions
Show Stats Download Patch File Download Diff File

6
src/components/Common/Alert/index.tsx
Unescape View File

@ -13,7 +13,7 @@ interface AlertProps {
const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
let design = {
bgColor: 'bg-yellow-600',
titleColor: 'text-yellow-200',
titleColor: 'text-yellow-100',
textColor: 'text-yellow-300',
svg: <ExclamationIcon className="w-5 h-5" />,
};
@ -22,7 +22,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
case 'info':
design = {
bgColor: 'bg-indigo-600',
titleColor: 'text-indigo-200',
titleColor: 'text-indigo-100',
textColor: 'text-indigo-300',
svg: <InformationCircleIcon className="w-5 h-5" />,
};
@ -30,7 +30,7 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
case 'error':
design = {
bgColor: 'bg-red-600',
titleColor: 'text-red-200',
titleColor: 'text-red-100',
textColor: 'text-red-300',
svg: <XCircleIcon className="w-5 h-5" />,
};

2
src/components/Common/List/index.tsx
Unescape View File

@ -10,7 +10,7 @@ const ListItem: React.FC<ListItemProps> = ({ title, className, children }) => {
return (
<div>
<div className="max-w-6xl py-4 sm:grid sm:grid-cols-3 sm:gap-4">
<dt className="block text-sm font-medium text-gray-400">{title}</dt>
<dt className="block text-sm font-bold text-gray-400">{title}</dt>
<dd className="flex text-sm text-white sm:mt-0 sm:col-span-2">
<span className={`flex-grow ${className}`}>{children}</span>
</dd>

2
src/components/Common/Modal/index.tsx
Unescape View File

@ -137,7 +137,7 @@ const Modal: React.FC<ModalProps> = ({
>
{title && (
<span
className="text-lg font-medium leading-6 text-white"
className="text-lg font-bold leading-6 text-white"
id="modal-headline"
>
{title}

2
src/components/Common/SlideOver/index.tsx
Unescape View File

@ -73,7 +73,7 @@ const SlideOver: React.FC<SlideOverProps> = ({
<div className="flex flex-col h-full overflow-y-scroll bg-gray-700 shadow-xl">
<header className="px-4 space-y-1 bg-indigo-600 slideover">
<div className="flex items-center justify-between space-x-3">
<h2 className="text-lg font-medium leading-7 text-white">
<h2 className="text-lg font-bold leading-7 text-white">
{title}
</h2>
<div className="flex items-center h-7">

6
src/components/Layout/LanguagePicker/index.tsx
Unescape View File

@ -10,7 +10,7 @@ import useLocale from '../../../hooks/useLocale';
import Transition from '../../Transition';
const messages = defineMessages({
changelanguage: 'Change Language',
displaylanguage: 'Display Language',
});
const LanguagePicker: React.FC = () => {
@ -50,9 +50,9 @@ const LanguagePicker: React.FC = () => {
<div>
<label
htmlFor="language"
className="block pb-2 text-sm font-medium leading-5 text-gray-300"
className="block pb-2 text-sm font-bold leading-5 text-gray-300"
>
{intl.formatMessage(messages.changelanguage)}
{intl.formatMessage(messages.displaylanguage)}
</label>
<select
id="language"

6
src/components/Layout/UserDropdown/index.tsx
Unescape View File

@ -67,7 +67,7 @@ const UserDropdown: React.FC = () => {
>
<Link href={`/profile`}>
<a
className="flex items-center px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
className="flex items-center px-4 py-2 text-sm font-medium text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
role="menuitem"
tabIndex={0}
onKeyDown={(e) => {
@ -83,7 +83,7 @@ const UserDropdown: React.FC = () => {
</Link>
<Link href={`/profile/settings`}>
<a
className="flex items-center px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
className="flex items-center px-4 py-2 text-sm font-medium text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
role="menuitem"
tabIndex={0}
onKeyDown={(e) => {
@ -99,7 +99,7 @@ const UserDropdown: React.FC = () => {
</Link>
<a
href="#"
className="flex items-center px-4 py-2 text-sm text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
className="flex items-center px-4 py-2 text-sm font-medium text-gray-200 transition duration-150 ease-in-out hover:bg-gray-600"
role="menuitem"
onClick={() => logout()}
>

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

@ -115,7 +115,7 @@ const Login: React.FC = () => {
{({ openIndexes, handleClick, AccordionContent }) => (
<>
<button
className={`w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 sm:rounded-t-lg ${
className={`font-bold w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 sm:rounded-t-lg ${
openIndexes.includes(0) && 'text-indigo-500'
} ${
settings.currentSettings.localLogin &&
@ -137,7 +137,7 @@ const Login: React.FC = () => {
{settings.currentSettings.localLogin && (
<div>
<button
className={`w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 hover:bg-gray-700 hover:cursor-pointer ${
className={`font-bold w-full py-2 text-sm text-center text-gray-400 transition-colors duration-200 bg-gray-800 cursor-default focus:outline-none bg-opacity-70 hover:bg-gray-700 hover:cursor-pointer ${
openIndexes.includes(1)
? 'text-indigo-500'
: 'sm:rounded-b-lg'

8
src/components/MovieDetails/index.tsx
Unescape View File

@ -248,7 +248,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
{((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
(data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
<>
<h3 className="mb-2 text-xl">
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.downloadstatus)}
</h3>
<div className="mb-6 overflow-hidden bg-gray-600 rounded-md shadow">
@ -309,7 +309,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
)}
</div>
)}
<h3 className="mb-2 text-xl">
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalRequests)}
</h3>
<div className="overflow-hidden bg-gray-600 rounded-md shadow">
@ -606,7 +606,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
<Link
href={`/discover/movies/language/${data.originalLanguage}`}
>
<a className="hover:underline">
<a>
{intl.formatDisplayName(data.originalLanguage, {
type: 'language',
fallback: 'none',
@ -633,7 +633,7 @@ const MovieDetails: React.FC<MovieDetailsProps> = ({ movie }) => {
href={`/discover/movies/studio/${s.id}`}
key={`studio-${s.id}`}
>
<a className="block hover:underline">{s.name}</a>
<a className="block">{s.name}</a>
</Link>
);
})}

8
src/components/NotificationTypeSelector/NotificationType/index.tsx
Unescape View File

@ -46,10 +46,12 @@ const NotificationType: React.FC<NotificationTypeProps> = ({
/>
</div>
<div className="ml-3 text-sm leading-6">
<label htmlFor={option.id} className="block font-medium text-white">
<label htmlFor={option.id} className="block">
<div className="flex flex-col">
<span>{option.name}</span>
<span className="text-gray-500">{option.description}</span>
<span className="font-medium text-white">{option.name}</span>
<span className="font-normal text-gray-400">
{option.description}
</span>
</div>
</label>
</div>

8
src/components/PermissionOption/index.tsx
Unescape View File

@ -128,10 +128,12 @@ const PermissionOption: React.FC<PermissionOptionProps> = ({
/>
</div>
<div className="ml-3 text-sm leading-6">
<label htmlFor={option.id} className="block font-medium text-white">
<label htmlFor={option.id} className="block">
<div className="flex flex-col">
<span>{option.name}</span>
<span className="text-gray-500">{option.description}</span>
<span className="font-medium text-white">{option.name}</span>
<span className="font-normal text-gray-400">
{option.description}
</span>
</div>
</label>
</div>

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

@ -61,7 +61,9 @@ const PersonCard: React.FC<PersonCardProps> = ({
<UserCircleIcon className="h-full" />
)}
</div>
<div className="w-full text-center truncate">{name}</div>
<div className="w-full font-bold text-center truncate">
{name}
</div>
{subName && (
<div
className="overflow-hidden text-sm text-center text-gray-300 whitespace-normal"

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

@ -204,7 +204,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
</div>
)}
<div className="relative z-10 flex flex-col flex-1 min-w-0 pr-4">
<div className="hidden text-xs text-white sm:flex">
<div className="hidden text-xs font-medium text-white sm:flex">
{(isMovie(title) ? title.releaseDate : title.firstAirDate)?.slice(
0,
4
@ -217,7 +217,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
: `/tv/${requestData.media.tmdbId}`
}
>
<a className="overflow-hidden text-base text-white sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
<a className="overflow-hidden text-base font-bold text-white sm:text-lg overflow-ellipsis whitespace-nowrap hover:underline">
{isMovie(title) ? title.title : title.name}
</a>
</Link>
@ -242,7 +242,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
)}
{!isMovie(title) && request.seasons.length > 0 && (
<div className="items-center my-0.5 sm:my-1 text-sm hidden sm:flex">
<span className="mr-2 font-medium">
<span className="mr-2 font-bold ">
{intl.formatMessage(messages.seasons, {
seasonCount:
title.seasons.filter((season) => season.seasonNumber !== 0)
@ -268,7 +268,7 @@ const RequestCard: React.FC<RequestCardProps> = ({ request, onTitleData }) => {
</div>
)}
<div className="flex items-center mt-2 text-sm sm:mt-1">
<span className="hidden mr-2 font-medium sm:block">
<span className="hidden mr-2 font-bold sm:block">
{intl.formatMessage(globalMessages.status)}
</span>
{requestData.media[requestData.is4k ? 'status4k' : 'status'] ===

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

@ -221,7 +221,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
</a>
</Link>
<div className="flex flex-col justify-center pl-2 overflow-hidden xl:pl-4">
<div className="pt-0.5 sm:pt-1 text-xs text-white">
<div className="font-medium pt-0.5 sm:pt-1 text-xs text-white">
{(isMovie(title)
? title.releaseDate
: title.firstAirDate
@ -234,7 +234,7 @@ const RequestItem: React.FC<RequestItemProps> = ({
: `/tv/${requestData.media.tmdbId}`
}
>
<a className="min-w-0 mr-2 text-lg text-white truncate xl:text-xl hover:underline">
<a className="min-w-0 mr-2 text-lg font-bold text-white truncate xl:text-xl hover:underline">
{isMovie(title) ? title.title : title.name}
</a>
</Link>

2
src/components/Settings/SettingsAbout/Releases/index.tsx
Unescape View File

@ -94,7 +94,7 @@ const Release: React.FC<ReleaseProps> = ({
numeric="auto"
/>
</span>
<span className="text-lg">{release.name}</span>
<span className="text-lg font-bold">{release.name}</span>
{isLatest && (
<span className="ml-2 -mt-1">
<Badge badgeType="primary">

8
src/components/TitleCard/index.tsx
Unescape View File

@ -129,7 +129,7 @@ const TitleCard: React.FC<TitleCardProps> = ({
mediaType === 'movie' ? 'bg-blue-500' : 'bg-purple-600'
}`}
>
<div className="flex items-center h-4 px-2 py-2 text-xs font-normal tracking-wider text-center text-white uppercase sm:h-5">
<div className="flex items-center h-4 px-2 py-2 text-xs font-medium tracking-wider text-center text-white uppercase sm:h-5">
{mediaType === 'movie'
? intl.formatMessage(globalMessages.movie)
: intl.formatMessage(globalMessages.tvshow)}
@ -199,10 +199,12 @@ const TitleCard: React.FC<TitleCardProps> = ({
: 'pb-11'
}`}
>
{year && <div className="text-sm">{year}</div>}
{year && (
<div className="text-sm font-medium">{year}</div>
)}
<h1
className="text-xl leading-tight whitespace-normal"
className="text-xl font-bold leading-tight whitespace-normal"
style={{
WebkitLineClamp: 3,
display: '-webkit-box',

8
src/components/TvDetails/index.tsx
Unescape View File

@ -280,7 +280,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
{((data?.mediaInfo?.downloadStatus ?? []).length > 0 ||
(data?.mediaInfo?.downloadStatus4k ?? []).length > 0) && (
<>
<h3 className="mb-2 text-xl">
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.downloadstatus)}
</h3>
<div className="mb-6 overflow-hidden bg-gray-600 rounded-md shadow">
@ -344,7 +344,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
</div>
</div>
)}
<h3 className="mb-2 text-xl">
<h3 className="mb-2 text-xl font-bold">
{intl.formatMessage(messages.manageModalRequests)}
</h3>
<div className="overflow-hidden bg-gray-600 rounded-md shadow">
@ -625,7 +625,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
<span>{intl.formatMessage(messages.originallanguage)}</span>
<span className="media-fact-value">
<Link href={`/discover/tv/language/${data.originalLanguage}`}>
<a className="hover:underline">
<a>
{intl.formatDisplayName(data.originalLanguage, {
type: 'language',
fallback: 'none',
@ -652,7 +652,7 @@ const TvDetails: React.FC<TvDetailsProps> = ({ tv }) => {
href={`/discover/tv/network/${n.id}`}
key={`network-${n.id}`}
>
<a className="hover:underline">{n.name}</a>
<a>{n.name}</a>
</Link>
))
.reduce((prev, curr) => (

8
src/components/UserList/index.tsx
Unescape View File

@ -41,11 +41,11 @@ const messages = defineMessages({
'{userCount, plural, one {# new user} other {# new users}} imported from Plex successfully!',
nouserstoimport: 'No new users to import from Plex.',
user: 'User',
totalrequests: 'Total Requests',
accounttype: 'Account Type',
totalrequests: 'Requests',
accounttype: 'Type',
role: 'Role',
created: 'Created',
lastupdated: 'Last Updated',
lastupdated: 'Updated',
bulkedit: 'Bulk Edit',
owner: 'Owner',
admin: 'Admin',
@ -598,7 +598,7 @@ const UserList: React.FC = () => {
</Link>
<div className="ml-4">
<Link href={`/users/${user.id}`}>
<a className="text-sm font-medium leading-5 transition duration-300 hover:underline">
<a className="text-base font-bold leading-5 transition duration-300 hover:underline">
{user.displayName}
</a>
</Link>

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

@ -34,7 +34,7 @@
"components.DownloadBlock.estimatedtime": "Estimated {time}",
"components.LanguageSelector.languageServerDefault": "Default ({language})",
"components.LanguageSelector.originalLanguageDefault": "All Languages",
"components.Layout.LanguagePicker.changelanguage": "Change Language",
"components.Layout.LanguagePicker.displaylanguage": "Display Language",
"components.Layout.SearchInput.searchPlaceholder": "Search Movies & TV",
"components.Layout.Sidebar.dashboard": "Discover",
"components.Layout.Sidebar.requests": "Requests",
@ -700,7 +700,7 @@
"components.TvDetails.similar": "Similar Series",
"components.TvDetails.viewfullcrew": "View Full Crew",
"components.TvDetails.watchtrailer": "Watch Trailer",
"components.UserList.accounttype": "Account Type",
"components.UserList.accounttype": "Type",
"components.UserList.admin": "Admin",
"components.UserList.autogeneratepassword": "Automatically Generate Password",
"components.UserList.autogeneratepasswordTip": "Email a server-generated password to the user",
@ -717,7 +717,7 @@
"components.UserList.importedfromplex": "{userCount, plural, one {# new user} other {# new users}} imported from Plex successfully!",
"components.UserList.importfromplex": "Import Users from Plex",
"components.UserList.importfromplexerror": "Something went wrong while importing users from Plex.",
"components.UserList.lastupdated": "Last Updated",
"components.UserList.lastupdated": "Updated",
"components.UserList.localLoginDisabled": "The <strong>Enable Local Sign-In</strong> setting is currently disabled.",
"components.UserList.localuser": "Local User",
"components.UserList.nouserstoimport": "No new users to import from Plex.",
@ -730,7 +730,7 @@
"components.UserList.sortDisplayName": "Display Name",
"components.UserList.sortRequests": "Request Count",
"components.UserList.sortUpdated": "Last Updated",
"components.UserList.totalrequests": "Total Requests",
"components.UserList.totalrequests": "Requests",
"components.UserList.user": "User",
"components.UserList.usercreatedfailed": "Something went wrong while creating the user.",
"components.UserList.usercreatedfailedexisting": "The provided email address is already in use by another user.",

31
src/styles/globals.css
Unescape View File

@ -67,11 +67,11 @@ ul.cards-horizontal {
}
.slider-title {
@apply inline-flex items-center text-xl leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
@apply inline-flex items-center text-xl font-bold leading-7 text-gray-300 sm:text-2xl sm:leading-9 sm:truncate;
}
a.slider-title {
@apply hover:text-white;
@apply transition duration-300 hover:text-white;
}
a.slider-title svg {
@ -114,7 +114,11 @@ h1 > .media-year {
}
.media-attributes {
@apply mt-1 text-xs sm:text-sm xl:text-base xl:mt-0;
@apply mt-1 text-xs text-gray-300 sm:text-sm xl:text-base xl:mt-0;
}
.media-attributes a {
@apply transition duration-300 hover:text-white hover:underline;
}
.media-actions {
@ -138,7 +142,7 @@ h1 > .media-year {
}
.media-overview h2 {
@apply text-xl text-gray-300 sm:text-2xl;
@apply text-xl font-bold text-gray-300 sm:text-2xl;
}
.media-overview p {
@ -150,10 +154,11 @@ ul.media-crew {
}
ul.media-crew > li {
@apply flex flex-col col-span-1 font-bold;
@apply flex flex-col col-span-1 font-bold text-gray-300;
}
a.crew-name {
a.crew-name,
.media-fact-value a {
@apply font-normal text-gray-400 transition duration-300 hover:underline hover:text-gray-100;
}
@ -162,7 +167,7 @@ a.crew-name {
}
.media-facts {
@apply text-sm bg-gray-900 border border-gray-700 rounded-lg shadow;
@apply text-sm font-bold text-gray-300 bg-gray-900 border border-gray-700 rounded-lg shadow;
}
.media-fact {
@ -170,7 +175,7 @@ a.crew-name {
}
.media-fact-value {
@apply flex-1 text-sm text-right text-gray-400;
@apply flex-1 text-sm font-normal text-right text-gray-400;
}
.media-ratings {
@ -186,11 +191,11 @@ a.crew-name {
}
.heading {
@apply text-2xl leading-8 text-gray-100;
@apply text-2xl font-bold leading-8 text-gray-100;
}
.description {
@apply max-w-4xl mt-1 text-sm leading-5 text-gray-500;
@apply max-w-4xl mt-1 text-sm leading-5 text-gray-400;
}
img.avatar-sm {
@ -202,7 +207,7 @@ img.avatar-sm {
}
.card-field-name {
@apply mr-2 font-medium;
@apply mr-2 font-bold;
}
.section {
@ -227,7 +232,7 @@ img.avatar-sm {
label,
.group-label {
@apply block mb-1 text-sm font-medium leading-5 text-gray-400;
@apply block mb-1 text-sm font-bold leading-5 text-gray-400;
}
label.checkbox-label {
@ -247,7 +252,7 @@ label a {
}
.label-tip {
@apply block text-gray-500;
@apply block font-medium text-gray-500;
}
button,

Write Preview
Loading…
Cancel
Save