refactor(css): Apply global CSS classes (#874)

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>

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>
                             )}

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">

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">

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;
 }