shpaq/sct-overseerr
1
0
Fork 0
mirror of https://github.com/sct/overseerr.git synced 2025-09-17 17:24:35 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): fix missing styles for alert component

Browse Source 
also adds relative release time to releases in About page
This commit is contained in:
sct
2020-12-25 20:27:19 +09:00
parent 6353cda582
commit de3d288949
2 changed files with 24 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/Common/Alert/index.tsx
View File

@@ -7,7 +7,9 @@ interface AlertProps {
const Alert: React.FC<AlertProps> = ({ title, children, type }) => { const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
let design = { let design = {
color: 'yellow', bgColor: 'bg-yellow-600',
titleColor: 'text-yellow-200',
textColor: 'text-yellow-300',
svg: ( svg: (
<svg <svg
className="w-5 h-5" className="w-5 h-5"
@@ -28,7 +30,9 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
switch (type) { switch (type) {
case 'info': case 'info':
design = { design = {
color: 'indigo', bgColor: 'bg-indigo-600',
titleColor: 'text-indigo-200',
textColor: 'text-indigo-300',
svg: ( svg: (
<svg <svg
className="w-5 h-5" className="w-5 h-5"
@@ -50,18 +54,14 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
} }
return ( return (
<div className={`rounded-md p-4 mb-8 bg-${design.color}-600`}> <div className={`rounded-md p-4 mb-8 ${design.bgColor}`}>
<div className="flex"> <div className="flex">
<div className={`flex-shrink-0 text-${design.color}-200`}> <div className={`flex-shrink-0 ${design.titleColor}`}>{design.svg}</div>
{design.svg}
</div>
<div className="ml-3"> <div className="ml-3">
<h3 className={`text-sm font-medium text-${design.color}-200`}> <h3 className={`text-sm font-medium ${design.titleColor}`}>
{title} {title}
</h3> </h3>
<div className={`mt-2 text-sm text-${design.color}-300`}> <div className={`mt-2 text-sm ${design.textColor}`}>{children}</div>
{children}
</div>
</div> </div>
</div> </div>
</div> </div>

19
src/components/Settings/SettingsAbout/Releases/index.tsx
View File

@@ -7,7 +7,7 @@ import Badge from '../../../Common/Badge';
import Button from '../../../Common/Button'; import Button from '../../../Common/Button';
import Modal from '../../../Common/Modal'; import Modal from '../../../Common/Modal';
import Transition from '../../../Transition'; import Transition from '../../../Transition';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
import globalMessages from '../../../../i18n/globalMessages'; import globalMessages from '../../../../i18n/globalMessages';
const messages = defineMessages({ const messages = defineMessages({
@@ -59,7 +59,7 @@ const Release: React.FC<ReleaseProps> = ({
const intl = useIntl(); const intl = useIntl();
const [isModalOpen, setModalOpen] = useState(false); const [isModalOpen, setModalOpen] = useState(false);
return ( return (
<div className="bg-gray-800 rounded-md flex flex-col sm:flex-row px-4 py-2"> <div className="flex flex-col px-4 py-2 bg-gray-800 rounded-md sm:flex-row">
<Transition <Transition
enter="opacity-0 transition duration-300" enter="opacity-0 transition duration-300"
enterFrom="opacity-0" enterFrom="opacity-0"
@@ -99,7 +99,16 @@ const Release: React.FC<ReleaseProps> = ({
</div> </div>
</Modal> </Modal>
</Transition> </Transition>
<div className="flex mb-4 sm:mb-0 items-center justify-center sm:justify-start"> <div className="flex items-center justify-center mb-4 sm:mb-0 sm:justify-start">
<span className="mr-2 text-sm">
<FormattedRelativeTime
value={Math.floor(
(new Date(release.created_at).getTime() - Date.now()) / 1000
)}
updateIntervalInSeconds={1}
numeric="always"
/>
</span>
<span className="text-xl">{release.name}</span> <span className="text-xl">{release.name}</span>
{isLatest && ( {isLatest && (
<span className="ml-2"> <span className="ml-2">
@@ -147,7 +156,7 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
return ( return (
<div> <div>
<div className="text-xl pb-4 mb-4 border-b border-gray-800"> <div className="pb-4 mb-4 text-xl border-b border-gray-800">
{intl.formatMessage(messages.releases)} {intl.formatMessage(messages.releases)}
</div> </div>
{currentVersion.startsWith('develop-') && ( {currentVersion.startsWith('develop-') && (
@@ -159,7 +168,7 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
href="https://github.com/sct/overseerr" href="https://github.com/sct/overseerr"
target="_blank" target="_blank"
rel="noreferrer" rel="noreferrer"
className="text-yellow-100 underline hover:text-white transition duration-300" className="text-yellow-100 underline transition duration-300 hover:text-white"
> >
{msg} {msg}
</a> </a>