Replaced main loader for index.html (#1694)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>

portal-ui/public/index.html

@@ -68,16 +68,7 @@
         <img src="./images/background-wave-orig2.svg" />
       </div>
       <div id="loader-block">
-        <svg class="loader-svg-container" viewBox="22 22 44 44">
-          <circle
-            class="loader-style MuiCircularProgress-circle MuiCircularProgress-circleIndeterminate"
-            cx="44"
-            cy="44"
-            fill="none"
-            r="20.2"
-            stroke-width="3.6"
-          ></circle>
-        </svg>
+        <img src="./Loader.svg" />
       </div>
     </div>
     <!--

portal-ui/public/styles/root-styles.css

@@ -168,42 +168,3 @@ body {
   justify-content: center;
   align-items: center;
 }
-
-#loader-block .loader-svg-container {
-  display: block;
-  width: 40px;
-  height: 40px;
-  margin-bottom: 15px;
-  animation: loader-container-keyframes 1.4s linear infinite;
-}
-
-#loader-block .loader-svg-container .loader-style {
-  stroke: #073052;
-  animation: animation-keyframes 1.4s ease-in-out infinite;
-  stroke-dasharray: 80px, 200px;
-  stroke-dashoffset: 0px;
-}
-
-@keyframes animation-keyframes {
-  0% {
-    stroke-dasharray: 1px, 200px;
-    stroke-dashoffset: 0px;
-  }
-  50% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -15px;
-  }
-  100% {
-    stroke-dasharray: 100px, 200px;
-    stroke-dashoffset: -125px;
-  }
-}
-
-@keyframes loader-container-keyframes {
-  0% {
-    transform-origin: 50% 50%;
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

portal-ui/src/screens/LoginPage/LoginPage.tsx

@@ -580,7 +580,11 @@ const Login = ({
           ) : (
             <React.Fragment>
               <div>
-                <p>An error has occurred, the backend cannot be reached.</p>
+                <p style={{ color: "#000", textAlign: "center" }}>
+                  An error has occurred
+                  <br />
+                  The backend cannot be reached.
+                </p>
               </div>
               <div>
                 <Button
@@ -622,7 +626,11 @@ const Login = ({
               <div className="text-line3">Multi-Cloud Object Storage</div>
             </div>
           </Grid>
-          <Grid item className={`right-items ${classes.loginComponentContainer}`} xs={12}>
+          <Grid
+            item
+            className={`right-items ${classes.loginComponentContainer}`}
+            xs={12}
+          >
             {loginComponent}
             <div className={classes.learnMore}>
               <a
@@ -677,7 +685,7 @@ const Login = ({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  marginBottom: 20
+                  marginBottom: 20,
                 }}
               >
                 <MinIOTierIconXs /> Latest Version{" "}