Make watch page full width (override 800px page width)

js/app.js

@@ -1,8 +1,3 @@
-var appStyles = {
-  width: '800px',
-  marginLeft: 'auto',
-  marginRight: 'auto',
-};
 var App = React.createClass({
   getInitialState: function() {
     // For now, routes are in format ?page or ?page=args
@@ -46,24 +41,19 @@ var App = React.createClass({
   },
   render: function() {
     if (this.state.viewingPage == 'home') {
-      var content = <HomePage />;
+      return <HomePage />;
     } else if (this.state.viewingPage == 'settings') {
-      var content = <SettingsPage />;
+      return <SettingsPage />;
     } else if (this.state.viewingPage == 'help') {
-      var content = <HelpPage />;
+      return <HelpPage />;
     } else if (this.state.viewingPage == 'watch') {
-      var content = <WatchPage name={this.state.pageArgs}/>;
+      return <WatchPage name={this.state.pageArgs}/>;
     } else if (this.state.viewingPage == 'report') {
-      var content = <ReportPage />;
+      return <ReportPage />;
     } else if (this.state.viewingPage == 'files') {
-      var content = <MyFilesPage />;
+      return <MyFilesPage />;
     } else if (this.state.viewingPage == 'start') {
-      var content = <StartPage />;
+      return <StartPage />;
     }
-    return (
-      <div style={appStyles}>
-        {content}
-      </div>
-    );
   }
 });

js/page/help.js

@@ -3,7 +3,7 @@
 var HelpPage = React.createClass({
   render: function() {
     return (
-      <main>
+      <main className="page">
         <h1>Troubleshooting</h1>
         <p>Here are the most commonly encountered problems and what to try doing about them</p>
 

js/page/home.js

@@ -281,7 +281,7 @@ var HomePage = React.createClass({
   },
   render: function() {
     return (
-      <div>
+      <div className="page">
         <Header />
         <Discover />
       </div>

js/page/my_files.js

@@ -125,7 +125,7 @@ var MyFilesPage = React.createClass({
       }
     }
     return (
-      <main>
+      <main className="page">
       <h1>My files</h1>
       {content}
       <section>

js/page/report.js

@@ -20,7 +20,7 @@ var ReportPage = React.createClass({
   },
   render: function() {
     return (
-      <main>
+      <main className="page">
         <h1>Report a bug</h1>
         <section>
         <p>Please describe the problem you experienced and any information you think might be useful to us. Links to screenshots are great!</p>

js/page/settings.js

@@ -73,7 +73,7 @@ var SettingsPage = React.createClass({
     }
 
     return (
-      <main>
+      <main className="page">
         <h1>Settings</h1>
         <section>
           <h4>Run on startup</h4>

js/page/start.js

@@ -4,7 +4,7 @@ var StartPage = React.createClass({
   },
   render: function() {
     return (
-      <main>
+      <main className="page">
         <h1>LBRY has closed</h1>
         <Link href="lbry://lbry" label="Click here to start LBRY" />
       </main>

js/page/watch.js

@@ -1,6 +1,6 @@
 var videoStyle = {
   width: '100%',
-  height: '100%',
+//  height: '100%',
   backgroundColor: '#000'
 };
 
@@ -39,7 +39,7 @@ var WatchPage = React.createClass({
   },
   render: function() {
     return (
-      <main>
+      <main className="page full-width">
       <div className={this.state.readyToPlay ? 'hidden' : ''}>
         <h3>Loading lbry://{this.props.name}</h3>
         {this.state.loadStatusMessage}...

scss/_gui.scss

@@ -13,6 +13,16 @@ body
     position: relative;
 }
 
+.page {
+  margin-left: auto;
+  margin-right: auto;
+  width: 800px;
+
+  &.full-width {
+    width: 100%;
+  }
+}
+
 section
 {
   margin-bottom: $spacing-vertical;