From e01d8bc10ea03b03f634ee99c90dafcea6e886b1 Mon Sep 17 00:00:00 2001
From: Alex <33497058+bexsoft@users.noreply.github.com>
Date: Thu, 10 Mar 2022 14:53:32 -0700
Subject: [PATCH] Replaced main loader for index.html (#1694)

Signed-off-by: Benjamin Perez <benjamin@bexsoft.net>
---
 portal-ui/public/Loader.svg                   | 42 +++++++++++++++++++
 portal-ui/public/index.html                   | 11 +----
 portal-ui/public/styles/root-styles.css       | 39 -----------------
 portal-ui/src/screens/LoginPage/LoginPage.tsx | 14 +++++--
 4 files changed, 54 insertions(+), 52 deletions(-)
 create mode 100644 portal-ui/public/Loader.svg

diff --git a/portal-ui/public/Loader.svg b/portal-ui/public/Loader.svg
new file mode 100644
index 000000000..85076a0f8
--- /dev/null
+++ b/portal-ui/public/Loader.svg
@@ -0,0 +1,42 @@
+<svg id="eB8dk2fHKWC1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 280 280" width="40px" height="40px" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
+    <style>
+        <![CDATA[#eB8dk2fHKWC2_tr {animation: eB8dk2fHKWC2_tr__tr 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC2_tr__tr { 0% {transform: translate(139.785027px,140.086989px) rotate(45.236493deg);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 10% {transform: translate(139.785027px,140.086989px) rotate(-197.740907deg);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 20% {transform: translate(139.785027px,140.086989px) rotate(-108.6deg);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 30% {transform: translate(139.785027px,140.086989px) rotate(-17.484014deg);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 33.333333% {transform: translate(139.785027px,140.086989px) rotate(-17.48deg);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 43.333333% {transform: translate(139.785027px,140.086989px) rotate(160.887995deg)} 100% {transform: translate(139.785027px,140.086989px) rotate(160.887995deg)}} #eB8dk2fHKWC2_ts {animation: eB8dk2fHKWC2_ts__ts 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC2_ts__ts { 0% {transform: scale(1,0.995019)} 33.333333% {transform: scale(1,0.995019);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 43.333333% {transform: scale(0.101121,0.102033);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 50% {transform: scale(0.1,0.1);animation-timing-function: cubic-bezier(0.42,0,0.58,1)} 60% {transform: scale(1,1)} 100% {transform: scale(1,1)}} #eB8dk2fHKWC2 {animation: eB8dk2fHKWC2_c_o 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC2_c_o { 0% {opacity: 1} 6.666667% {opacity: 1} 10% {opacity: 0} 13.333333% {opacity: 0} 20% {opacity: 1} 30% {opacity: 1} 36.666667% {opacity: 1} 40% {opacity: 0} 100% {opacity: 0}} #eB8dk2fHKWC4 {animation: eB8dk2fHKWC4__m 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC4__m { 0% {d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')} 10% {d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')} 20% {d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')} 30% {d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')} 33.333333% {d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z')} 43.333333% {d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z')} 100% {d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z')}} #eB8dk2fHKWC6 {animation: eB8dk2fHKWC6__m 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC6__m { 0% {d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')} 10% {d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z')} 20% {d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z')} 30% {d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')} 33.333333% {d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z')} 43.333333% {d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z')} 100% {d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z')}} #eB8dk2fHKWC8 {animation: eB8dk2fHKWC8__m 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC8__m { 0% {d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')} 10% {d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z')} 20% {d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z')} 30% {d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')} 33.333333% {d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z')} 43.333333% {d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z')} 100% {d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z')}} #eB8dk2fHKWC10 {animation: eB8dk2fHKWC10__m 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC10__m { 0% {d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')} 3.333333% {d: path('M4.90273,88.748028C1.236063,104.534694,0.694614,122.375568,4.181281,138.328902C7.119767,155.82704,18.329955,178.442148,31.722495,188.944182C39.448991,194.869945,48.960631,181.919808,35.808325,167.974185C27.053341,155.46954,26.778713,144.786038,23.180834,130.168643C19.139468,114.899686,18.114526,100.786543,20.952073,87.411869C21.572437,79.045425,6.897064,77.595457,4.916661,86.915441L4.90273,88.748028Z')} 10% {d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z')} 20% {d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z')} 30% {d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')} 33.333333% {d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z')} 43.333333% {d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z')} 100% {d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z')}} #eB8dk2fHKWC11_ts {animation: eB8dk2fHKWC11_ts__ts 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC11_ts__ts { 0% {transform: translate(139.784999px,140.086986px) scale(1,1)} 30% {transform: translate(139.784999px,140.086986px) scale(1,1)} 43.333333% {transform: translate(139.784999px,140.086986px) scale(0.102813,0.102813)} 50% {transform: translate(139.784999px,140.086986px) scale(0.102813,0.102813)} 60% {transform: translate(139.784999px,140.086986px) scale(1.001075,1.001075)} 100% {transform: translate(139.784999px,140.086986px) scale(1.001075,1.001075)}} #eB8dk2fHKWC11 {animation: eB8dk2fHKWC11_c_o 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC11_c_o { 0% {opacity: 0} 30% {opacity: 0} 36.666667% {opacity: 0} 40% {opacity: 1} 100% {opacity: 1}} #eB8dk2fHKWC13_tr {animation: eB8dk2fHKWC13_tr__tr 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC13_tr__tr { 0% {transform: translate(139.785004px,140.086979px) rotate(0deg)} 10% {transform: translate(139.785004px,140.086979px) rotate(0deg)} 20% {transform: translate(139.785004px,140.086979px) rotate(90.041277deg)} 100% {transform: translate(139.785004px,140.086979px) rotate(90.041277deg)}} #eB8dk2fHKWC13 {animation: eB8dk2fHKWC13_c_o 3000ms linear infinite normal forwards}@keyframes eB8dk2fHKWC13_c_o { 0% {opacity: 0} 6.666667% {opacity: 0} 10% {opacity: 1} 13.333333% {opacity: 1} 20% {opacity: 0} 100% {opacity: 0}}]]></style>
+    <g id="eB8dk2fHKWC2_tr" transform="translate(139.785027,140.086989) rotate(45.236493)"><g id="eB8dk2fHKWC2_ts" transform="scale(1,0.995019)">
+            <g id="eB8dk2fHKWC2" transform="translate(-127.784998,-128.086989)">
+                <g>
+                    <path id="eB8dk2fHKWC4"
+                          d="M85.4,249.8c23.68,5.5,48.32,7.57,72.25,2.34c24-5.25,45.3-18.59,61.62-36.79c8.57-9.56-5.53-23.75-14.14-14.14-14.23,15.89-31.86,27.05-52.79,31.65-20.31,4.46-41.55,2.33-61.61-2.34-12.54-2.91-17.88,16.36-5.33,19.28c0,0,0,0,0,0Z"
+                          fill="#113053"/>
+                </g>
+                <g>
+                    <path id="eB8dk2fHKWC6"
+                          d="M249.74,169.63c5.5-23.68,7.57-48.32,2.34-72.25-5.25-24-18.59-45.3-36.79-61.62-9.56-8.57-23.75,5.53-14.14,14.14c15.89,14.23,27.05,31.86,31.65,52.79c4.46,20.31,2.33,41.55-2.34,61.61-2.92,12.54,16.36,17.88,19.28,5.33c0,0,0,0,0,0Z"
+                          fill="#113053"/>
+                </g>
+                <g>
+                    <path id="eB8dk2fHKWC8"
+                          d="M171.68,7.71c-23.51-6.2-48.07-8.99-72.15-4.46C75.39,7.79,53.7,20.49,36.85,38.21c-8.84,9.31,4.83,23.9,13.72,14.55c14.7-15.46,32.65-26.1,53.7-30.08c20.43-3.86,41.6-1.1,61.52,4.15c12.43,3.28,18.35-15.83,5.89-19.12c0,0,0,0,0,0Z"
+                          fill="#113053"/>
+                </g>
+                <g>
+                    <path id="eB8dk2fHKWC10"
+                          d="M5.83,85.46c-5.5,23.68-7.57,48.32-2.34,72.25c5.25,24,18.59,45.3,36.79,61.62c9.56,8.57,23.75-5.53,14.14-14.14-15.89-14.23-27.05-31.86-31.65-52.79-4.46-20.31-2.33-41.55,2.34-61.61C28.03,78.25,8.75,72.91,5.83,85.46v0Z"
+                          transform="translate(.194904 0.217549)" fill="#113053"/>
+                </g>
+            </g>
+        </g>
+    </g>
+    <g id="eB8dk2fHKWC11_ts" transform="translate(139.784999,140.086986) scale(1,1)">
+        <g id="eB8dk2fHKWC11" transform="translate(-127.999996,-128.000003)" opacity="0">
+            <path d="M234.23,128c0-58.67-47.56-106.23-106.23-106.23s-106.23,47.56-106.23,106.23s47.56,106.23,106.23,106.23c58.64-.06,106.17-47.59,106.23-106.23m21.25,0c0,70.4-57.07,127.48-127.48,127.48s-127.48-57.08-127.48-127.48s57.08-127.48,127.48-127.48s127.48,57.08,127.48,127.48Z"
+                  fill="#113053"/>
+        </g>
+    </g>
+    <g id="eB8dk2fHKWC13_tr" transform="translate(139.785004,140.086979) rotate(0)">
+        <g id="eB8dk2fHKWC13" transform="translate(-127.999968,-127.995139)" opacity="0">
+            <path d="M128,0.47h.33c.36,0,.73,0,1.09.01h.17c5.45.09,9.79,4.57,9.73,10.02-.07,5.51-4.57,9.93-10.07,9.91h-1.24c-5.51-.04-9.96-4.51-9.96-10.02-.01-5.45,4.39-9.88,9.84-9.91h.11ZM245.62,118.39h.03c5.45.01,9.86,4.42,9.88,9.87c0,.04,0,.08,0,.12v0c0,.12,0,.24,0,.36v0c0,.01,0,.03,0,.04v.09c0,.37,0,.73-.01,1.09-.11,5.45-4.6,9.78-10.05,9.7-5.51-.08-9.92-4.6-9.88-10.1l.01-1.24c.06-5.49,4.52-9.92,10.02-9.93ZM126.01,235.58h.12l1.24.01c5.51.07,9.93,4.57,9.9,10.08-.04,5.48-4.51,9.89-9.99,9.85-.01,0-.02,0-.03,0h-.46-.19l-.82-.01h-.12c-5.45-.12-9.77-4.63-9.67-10.07.09-5.47,4.55-9.85,10.02-9.86ZM10.4,115.63h.2c5.51.12,9.89,4.65,9.82,10.16l-.02,1.24c-.09,5.5-4.59,9.91-10.1,9.88-5.45-.04-9.85-4.47-9.83-9.93c0-.04,0-.08,0-.12v0c0-.36,0-.73.01-1.09v-.09v0c0-.13,0-.27.01-.41.14-5.37,4.54-9.64,9.91-9.64Z"
+                  fill="#113053"/>
+        </g>
+    </g>
+</svg>
diff --git a/portal-ui/public/index.html b/portal-ui/public/index.html
index bcb8bd467..5ed8e2c40 100644
--- a/portal-ui/public/index.html
+++ b/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>
     <!--
diff --git a/portal-ui/public/styles/root-styles.css b/portal-ui/public/styles/root-styles.css
index 570c14984..2ee804a50 100644
--- a/portal-ui/public/styles/root-styles.css
+++ b/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);
-  }
-}
diff --git a/portal-ui/src/screens/LoginPage/LoginPage.tsx b/portal-ui/src/screens/LoginPage/LoginPage.tsx
index 20bc2bba2..f2d4b4bdf 100644
--- a/portal-ui/src/screens/LoginPage/LoginPage.tsx
+++ b/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{" "}