From 7e906e2d46e57cef1902000bccb5bddc9e693b9b Mon Sep 17 00:00:00 2001
From: TheCatLady <52870424+TheCatLady@users.noreply.github.com>
Date: Tue, 9 Feb 2021 09:57:19 -0500
Subject: [PATCH] refactor(css): Apply global CSS classes (#874)

---
 src/components/ResetPassword/RequestResetLink.tsx |  4 +---
 src/components/ResetPassword/index.tsx            |  6 ++----
 src/components/Settings/RadarrModal/index.tsx     | 14 +++++++-------
 src/components/Settings/SonarrModal/index.tsx     | 14 +++++++-------
 src/styles/globals.css                            |  4 ++++
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/src/components/ResetPassword/RequestResetLink.tsx b/src/components/ResetPassword/RequestResetLink.tsx
index ab7182abf..dfd2a5494 100644
--- a/src/components/ResetPassword/RequestResetLink.tsx
+++ b/src/components/ResetPassword/RequestResetLink.tsx
@@ -109,9 +109,7 @@ const ResetPassword: React.FC = () => {
                             />
                           </div>
                           {errors.email && touched.email && (
-                            <div className="mt-2 text-red-500">
-                              {errors.email}
-                            </div>
+                            <div className="error">{errors.email}</div>
                           )}
                         </div>
                       </div>
diff --git a/src/components/ResetPassword/index.tsx b/src/components/ResetPassword/index.tsx
index 00853bd8b..ef6c1e4af 100644
--- a/src/components/ResetPassword/index.tsx
+++ b/src/components/ResetPassword/index.tsx
@@ -128,9 +128,7 @@ const ResetPassword: React.FC = () => {
                             />
                           </div>
                           {errors.password && touched.password && (
-                            <div className="mt-2 text-red-500">
-                              {errors.password}
-                            </div>
+                            <div className="error">{errors.password}</div>
                           )}
                         </div>
                         <label
@@ -151,7 +149,7 @@ const ResetPassword: React.FC = () => {
                           </div>
                           {errors.confirmPassword &&
                             touched.confirmPassword && (
-                              <div className="mt-2 text-red-500">
+                              <div className="error">
                                 {errors.confirmPassword}
                               </div>
                             )}
diff --git a/src/components/Settings/RadarrModal/index.tsx b/src/components/Settings/RadarrModal/index.tsx
index eba9d1980..025cc9388 100644
--- a/src/components/Settings/RadarrModal/index.tsx
+++ b/src/components/Settings/RadarrModal/index.tsx
@@ -342,7 +342,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="name" className="text-label">
                     {intl.formatMessage(messages.servername)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -367,7 +367,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="hostname" className="text-label">
                     {intl.formatMessage(messages.hostname)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -394,7 +394,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="port" className="text-label">
                     {intl.formatMessage(messages.port)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <Field
@@ -432,7 +432,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="apiKey" className="text-label">
                     {intl.formatMessage(messages.apiKey)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -481,7 +481,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="activeProfileId" className="text-label">
                     {intl.formatMessage(messages.qualityprofile)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -519,7 +519,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="rootFolder" className="text-label">
                     {intl.formatMessage(messages.rootfolder)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -555,7 +555,7 @@ const RadarrModal: React.FC<RadarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="minimumAvailability" className="text-label">
                     {intl.formatMessage(messages.minimumAvailability)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
diff --git a/src/components/Settings/SonarrModal/index.tsx b/src/components/Settings/SonarrModal/index.tsx
index 5bcb10829..7c03d4234 100644
--- a/src/components/Settings/SonarrModal/index.tsx
+++ b/src/components/Settings/SonarrModal/index.tsx
@@ -371,7 +371,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="name" className="text-label">
                     {intl.formatMessage(messages.servername)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -396,7 +396,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="hostname" className="text-label">
                     {intl.formatMessage(messages.hostname)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -423,7 +423,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="port" className="text-label">
                     {intl.formatMessage(messages.port)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <Field
@@ -461,7 +461,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="apiKey" className="text-label">
                     {intl.formatMessage(messages.apiKey)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -510,7 +510,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="activeProfileId" className="text-label">
                     {intl.formatMessage(messages.qualityprofile)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -548,7 +548,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                 <div className="form-row">
                   <label htmlFor="rootFolder" className="text-label">
                     {intl.formatMessage(messages.rootfolder)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
@@ -587,7 +587,7 @@ const SonarrModal: React.FC<SonarrModalProps> = ({
                     className="text-label"
                   >
                     {intl.formatMessage(messages.languageprofile)}
-                    <span className="text-red-500">*</span>
+                    <span className="label-required">*</span>
                   </label>
                   <div className="form-input">
                     <div className="flex max-w-lg rounded-md shadow-sm">
diff --git a/src/styles/globals.css b/src/styles/globals.css
index ec2159cfd..2f1080169 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -66,6 +66,10 @@ ul.cardList > li {
   @apply text-white sm:col-span-2;
 }
 
+.label-required {
+  @apply text-red-500;
+}
+
 .label-tip {
   @apply block text-gray-500;
 }