fix build

.prettierignore

@@ -1 +0,0 @@
-src/ui/scss/component/_splash.scss

src/ui/component/splash/view.jsx

@@ -211,12 +211,46 @@ export default class SplashScreen extends React.PureComponent<Props, State> {
 
     return (
       <div className="splash">
-        <css-doodle use="var(--rule)" />
+        <css-doodle>
+          {`
+            --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
+            :doodle {
+              @grid: 30x1 / 18vmin;
+              --deg: @p(-180deg, 180deg);
+            }
+            :container {
+              perspective: 30vmin;
+            }
+          
+            @place-cell: center;
+            @size: 100%;
+          
+            box-shadow: @m2(0 0 50px var(--color));            
+            will-change: transform, opacity;
+            animation: scale-up 12s linear infinite;
+            animation-delay: calc(-12s / @size() * @i());
+
+            @keyframes scale-up {
+              0%, 95.01%, 100% {
+                transform: translateZ(0) rotate(0);
+                opacity: 0;
+              }
+              10% { 
+                opacity: 1; 
+              }
+              95% {
+                transform: 
+                  translateZ(35vmin) rotateZ(@var(--deg));
+              }
+            }
+          )
+          `}
+        </css-doodle>
         <h1 className="splash__title">LBRY</h1>
         {error && (
           <div className="splash__error card card--section">
             <h3>{__('Uh oh. The flux in our Retro Encabulator must be out of whack. Try refreshing to fix it.')}</h3>
-            <div className="splash__actions">
+            <div className="card__actions--top-space card__actions--center">
               <Button button="primary" label={__('Refresh')} onClick={() => window.location.reload()} />
             </div>
             <div className="help">

src/ui/scss/component/_splash.scss

@@ -1,6 +1,3 @@
-//
-// Formatting is ignored for this file because css-doodle requires that the styles be in a specific shape 
-//
 .splash {
   width: 100vw;
   height: 100vh;
@@ -10,54 +7,12 @@
   display: flex;
   justify-content: center;
   overflow: hidden;
-
-  css-doodle {
-    z-index: 0;
-    
-    --color: @p(var(--lbry-teal-1), var(--lbry-orange-1), var(--lbry-cyan-3), var(--lbry-pink-5));
-    --rule: (
-      :doodle {
-        @grid: 30x1 / 18vmin;
-        --deg: @p(-180deg, 180deg);
-      }
-      :container {
-        perspective: 30vmin;
-      }
-    
-      @place-cell: center;
-      @size: 100%;
-    
-      box-shadow: @m2(0 0 50px var(--color));
-      background: @m100(
-        radial-gradient(var(--color) 50%, transparent 0) 
-        @r(-20%, 120%) @r(-20%, 100%) / 1px 1px
-        no-repeat
-      );
-    
-      will-change: transform, opacity;
-      animation: scale-up 12s linear infinite;
-      animation-delay: calc(-12s / @size() * @i());
-
-      @keyframes scale-up {
-        0%, 95.01%, 100% {
-          transform: translateZ(0) rotate(0);
-          opacity: 0;
-        }
-        10% { 
-          opacity: 1; 
-        }
-        95% {
-          transform: 
-            translateZ(35vmin) rotateZ(@var(--deg));
-        }
-      }
-    )
-  }
 }
 
-.splash__actions {
-  margin-top: var(--spacing-vertical-medium);
-}
+// .splash__actions {
+//   margin-top: var(--spacing-vertical-medium);
+//   align-items: center;
+// }
 
 .splash__button {
   border-bottom: 1px solid $lbry-white;
@@ -88,4 +43,4 @@
   position: absolute;
   margin-top: 25rem;
   box-shadow: var(--card-box-shadow) $lbry-gray-5;
-}
+}