From de3d288949b60d3a3af889d69a62bea2bc799ed7 Mon Sep 17 00:00:00 2001
From: sct <ryan@sct.dev>
Date: Fri, 25 Dec 2020 20:27:19 +0900
Subject: [PATCH] fix(frontend): fix missing styles for alert component

also adds relative release time to releases in About page
---
 src/components/Common/Alert/index.tsx         | 20 +++++++++----------
 .../Settings/SettingsAbout/Releases/index.tsx | 19 +++++++++++++-----
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/components/Common/Alert/index.tsx b/src/components/Common/Alert/index.tsx
index c5c9c6afd..84c529c96 100644
--- a/src/components/Common/Alert/index.tsx
+++ b/src/components/Common/Alert/index.tsx
@@ -7,7 +7,9 @@ interface AlertProps {
 
 const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
   let design = {
-    color: 'yellow',
+    bgColor: 'bg-yellow-600',
+    titleColor: 'text-yellow-200',
+    textColor: 'text-yellow-300',
     svg: (
       <svg
         className="w-5 h-5"
@@ -28,7 +30,9 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
   switch (type) {
     case 'info':
       design = {
-        color: 'indigo',
+        bgColor: 'bg-indigo-600',
+        titleColor: 'text-indigo-200',
+        textColor: 'text-indigo-300',
         svg: (
           <svg
             className="w-5 h-5"
@@ -50,18 +54,14 @@ const Alert: React.FC<AlertProps> = ({ title, children, type }) => {
   }
 
   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-shrink-0 text-${design.color}-200`}>
-          {design.svg}
-        </div>
+        <div className={`flex-shrink-0 ${design.titleColor}`}>{design.svg}</div>
         <div className="ml-3">
-          <h3 className={`text-sm font-medium text-${design.color}-200`}>
+          <h3 className={`text-sm font-medium ${design.titleColor}`}>
             {title}
           </h3>
-          <div className={`mt-2 text-sm text-${design.color}-300`}>
-            {children}
-          </div>
+          <div className={`mt-2 text-sm ${design.textColor}`}>{children}</div>
         </div>
       </div>
     </div>
diff --git a/src/components/Settings/SettingsAbout/Releases/index.tsx b/src/components/Settings/SettingsAbout/Releases/index.tsx
index c570f12f7..1e27c07dd 100644
--- a/src/components/Settings/SettingsAbout/Releases/index.tsx
+++ b/src/components/Settings/SettingsAbout/Releases/index.tsx
@@ -7,7 +7,7 @@ import Badge from '../../../Common/Badge';
 import Button from '../../../Common/Button';
 import Modal from '../../../Common/Modal';
 import Transition from '../../../Transition';
-import { defineMessages, useIntl } from 'react-intl';
+import { defineMessages, FormattedRelativeTime, useIntl } from 'react-intl';
 import globalMessages from '../../../../i18n/globalMessages';
 
 const messages = defineMessages({
@@ -59,7 +59,7 @@ const Release: React.FC<ReleaseProps> = ({
   const intl = useIntl();
   const [isModalOpen, setModalOpen] = useState(false);
   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
         enter="opacity-0 transition duration-300"
         enterFrom="opacity-0"
@@ -99,7 +99,16 @@ const Release: React.FC<ReleaseProps> = ({
           </div>
         </Modal>
       </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>
         {isLatest && (
           <span className="ml-2">
@@ -147,7 +156,7 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
 
   return (
     <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)}
       </div>
       {currentVersion.startsWith('develop-') && (
@@ -159,7 +168,7 @@ const Releases: React.FC<ReleasesProps> = ({ currentVersion }) => {
                   href="https://github.com/sct/overseerr"
                   target="_blank"
                   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}
                 </a>