web/satellite/v2: fixed style-src CSP error

Made inline styles to be loaded from file to resolve CSP error Issue: #6701 Change-Id: I0d15475d61bf4d0a499ca884b5a4b77decb6de56
storj · Jan 19, 2024 · 577546a · 577546a
1 parent 0741205
commit 577546a
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 30 deletions.
diff --git a/web/satellite/index-vuetify.html b/web/satellite/index-vuetify.html
@@ -5,36 +5,8 @@
         <link rel="icon" href="/favicon.ico" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <link rel="dns-prefetch" href="https://js.stripe.com">
+        <link rel="stylesheet" href="/vuetify-poc/src/styles/app-preloader.scss">
         <title>Storj</title>
-
-        <style>
-            #pre-app-loader {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                height: 100vh;
-            }
-
-            #pre-app-loader div {
-                border: 4px solid rgb(1,73,255);
-                border-top: 4px solid transparent;
-                border-radius: 50%;
-                width: 90px;
-                height: 90px;
-                animation: spin .7s linear infinite;
-            }
-
-            #pre-app-loader img {
-                position: absolute;
-                inset: 0;
-                margin: auto;
-            }
-
-            @keyframes spin {
-                0% { transform: rotate(0deg); }
-                100% { transform: rotate(360deg); }
-            }
-        </style>
     </head>
     <body>
         <div id="pre-app-loader">

diff --git a/web/satellite/vuetify-poc/src/components/ErrorPage.vue b/web/satellite/vuetify-poc/src/components/ErrorPage.vue
@@ -117,7 +117,7 @@ onMounted(() => {
             content: '';
             position: fixed;
             inset: 0;
-            background: url('../../static/images/errors/world.svg') no-repeat center;
+            background: url('../../../static/images/errors/world.svg') no-repeat center;
             background-size: auto 75%;
             z-index: -1;
             opacity: 0.15;

diff --git a/web/satellite/vuetify-poc/src/styles/app-preloader.scss b/web/satellite/vuetify-poc/src/styles/app-preloader.scss
@@ -0,0 +1,29 @@
+// Copyright (C) 2024 Storj Labs, Inc.
+// See LICENSE for copying information.
+
+#pre-app-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100vh;
+}
+
+#pre-app-loader div {
+    border: 4px solid rgb(1,73,255);
+    border-top: 4px solid transparent;
+    border-radius: 50%;
+    width: 90px;
+    height: 90px;
+    animation: spin .7s linear infinite;
+}
+
+#pre-app-loader img {
+    position: absolute;
+    inset: 0;
+    margin: auto;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}