Update logo and loading screen

.idea/codeStyles/Project.xml

@@ -0,0 +1,15 @@
+<component name="ProjectCodeStyleConfiguration">
+  <code_scheme name="Project" version="173">
+    <option name="LINE_SEPARATOR" value="&#13;&#10;" />
+    <JSCodeStyleSettings version="0">
+      <option name="USE_SEMICOLON_AFTER_STATEMENT" value="false" />
+      <option name="FORCE_SEMICOLON_STYLE" value="true" />
+      <option name="USE_DOUBLE_QUOTES" value="false" />
+      <option name="FORCE_QUOTE_STYlE" value="true" />
+    </JSCodeStyleSettings>
+    <codeStyleSettings language="JavaScript">
+      <option name="ALIGN_MULTILINE_PARAMETERS" value="false" />
+      <option name="ALIGN_MULTILINE_FOR" value="false" />
+    </codeStyleSettings>
+  </code_scheme>
+</component>

.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="USE_PER_PROJECT_SETTINGS" value="true" />
+  </state>
+</component>

.idea/inspectionProfiles/Project_Default.xml

@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -4,12 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="c7fc7215-5a14-4d6e-8a38-d34bcd9137f5" name="Changes" comment="">
+    <list default="true" id="c7fc7215-5a14-4d6e-8a38-d34bcd9137f5" name="Changes" comment="Editing ico">
+      <change afterPath="$PROJECT_DIR$/build/logo.png" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/app/app.ejs" beforeDir="false" afterPath="$PROJECT_DIR$/app/app.ejs" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/assets/images/LoadingSeal.png" beforeDir="false" afterPath="$PROJECT_DIR$/app/assets/images/LoadingSeal.png" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/assets/css/launcher.css" beforeDir="false" afterPath="$PROJECT_DIR$/app/assets/css/launcher.css" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/assets/images/LoadingText.png" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/assets/images/SealCircle.ico" beforeDir="false" afterPath="$PROJECT_DIR$/app/assets/images/SealCircle.ico" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/app/assets/images/SealCircle.png" beforeDir="false" afterPath="$PROJECT_DIR$/app/assets/images/SealCircle.png" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/app/assets/images/logo.png" beforeDir="false" afterPath="$PROJECT_DIR$/app/assets/images/logo.png" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -80,8 +81,17 @@
       <workItem from="1680264149059" duration="598000" />
       <workItem from="1682597151301" duration="1539000" />
       <workItem from="1682599215708" duration="3000" />
-      <workItem from="1682599222418" duration="2742000" />
+      <workItem from="1682599222418" duration="3037000" />
+      <workItem from="1682604704565" duration="1274000" />
     </task>
+    <task id="LOCAL-00001" summary="Editing ico">
+      <created>1682604080148</created>
+      <option name="number" value="00001" />
+      <option name="presentableId" value="LOCAL-00001" />
+      <option name="project" value="LOCAL" />
+      <updated>1682604080148</updated>
+    </task>
+    <option name="localTasksCounter" value="2" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -89,5 +99,7 @@
   </component>
   <component name="VcsManagerConfiguration">
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
+    <MESSAGE value="Editing ico" />
+    <option name="LAST_COMMIT_MESSAGE" value="Editing ico" />
   </component>
 </project>

app/app.ejs

@@ -40,7 +40,11 @@
     <div id="loadingContainer">
         <div id="loadingContent">
             <div id="loadSpinnerContainer">
-                <img id="loadCenterImage" class="rotating" src="assets/images/LoadingSeal.png">
+                <div class="loader-container">
+                    <div class="progress float shadow">
+                        <div class="progress__item"></div>
+                    </div>
+                </div>
             </div>
         </div>
     </div>

app/assets/css/launcher.css

@@ -2858,9 +2858,7 @@ input:checked + .toggleSwitchSlider:before {
     height: 70px;
     width: auto;
     position: relative;
-    border: 2px solid white;
     box-sizing: border-box;
-    border-radius: 50%;
 }
 
 /* Logo container styles. */
@@ -3962,7 +3960,138 @@ input:checked + .toggleSwitchSlider:before {
     }
 }
 
-/* Class which is applied when the spinner image is spinning. */
+.loader-container {
-.rotating {
+    position: absolute;
-    animation: rotating 10s linear infinite;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+.loader-container:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    background: #2ec079;
+    z-index: -1;
+    transition: top 1.2s linear 3.1s;
+}
+.loader-container:after {
+    content: "";
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 50%;
+    background: #2ec079;
+    z-index: -1;
+    transition: bottom 1.2s linear 3.1s;
+}
+.loader-container.done:before {
+    top: -50%;
+}
+.loader-container.done:after {
+    bottom: -50%;
+}
+
+.progress {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+    transform-origin: center;
+}
+.progress.float .progress__item:before {
+    border-top-width: 2px;
+    margin-top: 0px;
+    height: 50px;
+}
+.progress.float.shadow:before {
+    border-top-width: 2px;
+    margin-top: -41px;
+    height: 50px;
+}
+.progress.shadow:before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -43px 0 0 12px;
+    width: 45px;
+    height: 45px;
+    border-top: solid 10px #F5BA01;
+    border-right: solid 10px #F5BA01;
+    border-top-right-radius: 100%;
+    z-index: -1;
+    transform-origin: left bottom;
+    -webkit-animation: spin 3s linear infinite;
+}
+.progress.shadow:after {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    color: #F5BA01;
+    text-align: center;
+    line-height: 100px;
+    border: 2px solid #F5BA01;
+    border-radius: 50%;
+    margin: -40px 0 0 -40px;
+    z-index: -1;
+    transform-origin: center;
+}
+.progress.done .progress__item {
+    opacity: 0;
+    -webkit-animation: done 3.1s;
+    transition: opacity 0.3s linear 3.1s;
+}
+.progress.done .progress__item:before {
+    display: none;
+}
+.progress.done:before {
+    display: none;
+}
+.progress.done:after {
+    opacity: 0;
+    -webkit-animation: done 3.1s;
+    transition: opacity 0.15s linear 3.1s;
+}
+
+@-webkit-keyframes done {
+    10% {
+        transform: scale(1.1);
+    }
+    20% {
+        transform: scale(0.9);
+    }
+    30% {
+        transform: scale(1.07);
+    }
+    40% {
+        transform: scale(0.93);
+    }
+    50% {
+        transform: scale(1.04);
+    }
+    60% {
+        transform: scale(0.97);
+    }
+    80% {
+        transform: scale(1.01);
+    }
+    90% {
+        transform: scale(0.99);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@-webkit-keyframes spin {
+    100% {
+        -webkit-transform: rotate(360deg);
+    }
 }