web/satellite: update and optimize error page (#6391)

Use 3x smaller size background image and update styles. Update button.

web/satellite/src/views/ErrorPage.vue

@@ -14,7 +14,7 @@
                 :label="'Go ' + (isFatal ? 'to homepage' : 'back')"
                 width="auto"
                 height="auto"
-                border-radius="26px"
+                border-radius="6px"
                 :on-press="onButtonClick"
             />
         </div>
@@ -96,11 +96,20 @@ onMounted(() => {
         padding: 52px 24px;
         box-sizing: border-box;
         display: flex;
-        background: url('../../static/images/errors/dotWorld.png') no-repeat center 178px;
         flex-direction: column;
         justify-content: center;
         overflow-y: auto;
 
+        &:before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background: url('../../static/images/errors/world.svg') no-repeat center;
+            background-size: auto 75%;
+            z-index: -1;
+            opacity: 0.15;
+        }
+
         &__logo-wrapper {
             height: 30.89px;
             display: flex;

web/satellite/static/errors/error.css

@@ -27,12 +27,24 @@
     padding: 52px 24px;
     box-sizing: border-box;
     display: flex;
-    background: url("/static/static/images/errors/dotWorld.png") no-repeat center 178px;
     flex-direction: column;
     justify-content: center;
     overflow-y: auto;
 }
 
+.error-area::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url("/static/static/images/errors/world.svg") no-repeat center;
+    background-size: auto 75%;
+    z-index: -1;
+    opacity: 0.15;
+}
+
 .logo-wrapper {
     height: 30.89px;
     display: flex;
@@ -71,7 +83,7 @@
 .button {
     margin-top: 32px;
     padding: 16px 37.5px;
-    border-radius: 26px;
+    border-radius: 6px;
     background-color: #0149ff;
     color: white;
     line-height: 20px;