From 18831d164d7c9c9c4118e7a4bb307259c417cbd0 Mon Sep 17 00:00:00 2001
From: Bogdan <mynameisbogdan@users.noreply.github.com>
Date: Wed, 13 Dec 2023 17:47:41 +0200
Subject: [PATCH] Improve UI notices for series details

---
 frontend/src/Series/Details/SeriesDetails.js | 22 +++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Series/Details/SeriesDetails.js b/frontend/src/Series/Details/SeriesDetails.js
index 8f6189cbe..18d1ca766 100644
--- a/frontend/src/Series/Details/SeriesDetails.js
+++ b/frontend/src/Series/Details/SeriesDetails.js
@@ -3,6 +3,7 @@ import moment from 'moment';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import TextTruncate from 'react-text-truncate';
+import Alert from 'Components/Alert';
 import HeartRating from 'Components/HeartRating';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
@@ -601,13 +602,19 @@ class SeriesDetails extends Component {
             }
 
             {
-              !isFetching && episodesError &&
-                <div>{translate('EpisodesLoadError')}</div>
+              !isFetching && episodesError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('EpisodesLoadError')}
+                </Alert> :
+                null
             }
 
             {
-              !isFetching && episodeFilesError &&
-                <div>{translate('EpisodeFilesLoadError')}</div>
+              !isFetching && episodeFilesError ?
+                <Alert kind={kinds.DANGER}>
+                  {translate('EpisodeFilesLoadError')}
+                </Alert> :
+                null
             }
 
             {
@@ -630,10 +637,11 @@ class SeriesDetails extends Component {
             }
 
             {
-              isPopulated && !seasons.length &&
-                <div>
+              isPopulated && !seasons.length ?
+                <Alert kind={kinds.WARNING}>
                   {translate('NoEpisodeInformation')}
-                </div>
+                </Alert> :
+                null
             }
 
           </div>