From 5302ee05bcf3a67b3e6547b17cf6c45f1c360efd Mon Sep 17 00:00:00 2001
From: Michael Casey <michael@casey.com.au>
Date: Mon, 8 Feb 2021 05:51:53 +1000
Subject: [PATCH] New: Add logo to loading page

Closes #4304
---
 frontend/src/Components/Loading/LoadingMessage.css | 2 +-
 frontend/src/Components/Page/LoadingPage.css       | 8 ++++++++
 frontend/src/Components/Page/LoadingPage.js        | 6 ++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/Loading/LoadingMessage.css b/frontend/src/Components/Loading/LoadingMessage.css
index a7b39e76f..528970ea7 100644
--- a/frontend/src/Components/Loading/LoadingMessage.css
+++ b/frontend/src/Components/Loading/LoadingMessage.css
@@ -1,5 +1,5 @@
 .loadingMessage {
-  margin: 50px 10px 0;
+  margin: 10px 10px 0;
   text-align: center;
   font-weight: 300;
   font-size: 36px;
diff --git a/frontend/src/Components/Page/LoadingPage.css b/frontend/src/Components/Page/LoadingPage.css
index fc782dc0c..b2cb698a1 100644
--- a/frontend/src/Components/Page/LoadingPage.css
+++ b/frontend/src/Components/Page/LoadingPage.css
@@ -1,3 +1,11 @@
 .page {
   composes: page from '~./Page.css';
 }
+
+.logoFull {
+  margin-top: 50px;
+  margin-right: auto;
+  margin-left: auto;
+  width: 48px;
+  height: 48px;
+}
diff --git a/frontend/src/Components/Page/LoadingPage.js b/frontend/src/Components/Page/LoadingPage.js
index 398b70c4b..1dbaa42e9 100644
--- a/frontend/src/Components/Page/LoadingPage.js
+++ b/frontend/src/Components/Page/LoadingPage.js
@@ -3,9 +3,15 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import LoadingMessage from 'Components/Loading/LoadingMessage';
 import styles from './LoadingPage.css';
 
+const sonarrLogo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAMAAABg3Am1AAAAsVBMVEUAAADu7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u7u46P1Hu7u7u7u7u7u46P1E6P1GChZAnbos6P1FRVWUuW3QsYn0paYU6P1Hu7u4AzP9FSlskdJLMzdE2SFwvWXIWl74PqdR+gYyrrLMZjrMLst6Ul6DBwsdna3hRVWXj4+QEw/QSoMkdhqiJjJa2t70sYn0oa4cHuukhfZ1ydoLY2NpcYG6foakzUWcmib9jAAAAGnRSTlMAr4DPn4/vQL8gEDDfYGBwUICf72BwgJ+An/dgjJ0AAAIcSURBVHjapZTZdqJAEEAb2UWTmcxeBYjirnFNZvv/D0svdFvQtHnIfeOcew9dJS2ziAeejxLfG8TsHeIgwhZRkN3TE+whcb1m6KEDb9jnf4rQSRTb/ucT3mHxres/Aczv+ABPbf/XDGhh+7D80ToPlKpw+1MYk3kLoIXtV4cpQGEmT6OJKfaWP+d+LfzJSG/XQzTFboEtNjvjI4bKjxF1UYnktNlr+8R1uDQ+J5VBgro45iUothxQzPJS+xioFyj2BVQrWSiMPzO+ekVgjgu0oD5sUKKmiMg+RHEFQpnXALBGzUicyPAHeCEHLw91PZPveuWPBdl1ygZ44y9Ipi+5ZDUFyZwoD4xegrXyn/OGZ1WciRKqpZqxOdVLbqhBsCFKwpAwUXMSLsBBZ4DAOdDg2A3QDmoa1B8PPngka2i51z0d2l4rrO6v1aOXsfvDVSBYECVsfRonUEXzjrrq+zRivLETIwDnuqzr40U8iceCKCn9vBfN/SKI+0HP5NMLhDt1XyiVLHZmT488yMz90ffFLua3E3ESc6D/+aoCuwBTBEwQax+Wr8IvtuuG34UorktTpEwSaF/8rtszEjZbsWZdDJhiGBm/+Icdzrf/XZ9pYuNP0GKiiy8ZM4xdvimWAGNG+K59Z1Fyn/JT+e7iK+swpr5djJlFNkIno4z1MAzRQThk/aQB9hCkzE0ajjqHGWjdSfYYJj5y/CR8sO03cenGuuEsM7AAAAAASUVORK5CYII=';
+
 function LoadingPage() {
   return (
     <div className={styles.page}>
+      <img
+        className={styles.logoFull}
+        src={sonarrLogo}
+      />
       <LoadingMessage />
       <LoadingIndicator />
     </div>