diff --git a/js/component/load_screen.js b/js/component/load_screen.js
index 57d8e4f50..c06864d7e 100644
--- a/js/component/load_screen.js
+++ b/js/component/load_screen.js
@@ -2,22 +2,6 @@ import React from 'react';
import lbry from '../lbry.js';
import {BusyMessage, Icon} from './common.js';
-var loadScreenStyle = {
- color: 'white',
- backgroundImage: 'url(' + lbry.imagePath('lbry-bg.png') + ')',
- backgroundSize: 'cover',
- minHeight: '100vh',
- minWidth: '100vw',
- display: 'flex',
- flexDirection: 'column',
- alignItems: 'center',
- justifyContent: 'center'
-}, loadScreenMessageStyle = {
- marginTop: '24px',
- width: '325px',
- textAlign: 'center',
-};
-
var LoadScreen = React.createClass({
propTypes: {
message: React.PropTypes.string.isRequired,
@@ -39,13 +23,13 @@ var LoadScreen = React.createClass({
render: function() {
var imgSrc = lbry.imagePath('lbry-white-485x160.png');
return (
-
+
-
+
- {this.props.details}
+ {this.props.isWarning ? : null} {this.props.details}
);
diff --git a/scss/_global.scss b/scss/_global.scss
index 5997470d7..9977c7e98 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -10,6 +10,7 @@ $color-light-alt: hsl(hue($color-primary), 15, 85);
$color-text-dark: #000;
$color-help: rgba(0,0,0,.6);
$color-notice: #921010;
+$color-warning: #c3c3c3;
$color-canvas: #f5f5f5;
$color-bg: #ffffff;
$color-bg-alt: #D9D9D9;
diff --git a/scss/all.scss b/scss/all.scss
index 5193fe5e1..452cbbcac 100644
--- a/scss/all.scss
+++ b/scss/all.scss
@@ -9,4 +9,5 @@
@import "component/_file-tile.scss";
@import "component/_menu.scss";
@import "component/_tooltip.scss";
+@import "component/_load-screen.scss";
@import "page/_developer.scss";
\ No newline at end of file
diff --git a/scss/component/_load-screen.scss b/scss/component/_load-screen.scss
new file mode 100644
index 000000000..feb0b5427
--- /dev/null
+++ b/scss/component/_load-screen.scss
@@ -0,0 +1,27 @@
+@import "../global";
+
+.load-screen {
+ color: white;
+ background-image: url("/img/lbry-bg.png");
+ background-size: cover;
+ min-height: 100vh;
+ min-width: 100vw;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
+.load-screen__message {
+ margin-top: 24px;
+ width: 325px;
+ text-align: center;
+}
+
+.load-screen__details--warning {
+ color: $color-warning;
+}
+
+.load-screen__cancel-link {
+ color: white;
+}