Use grid for frontend width (#932)

* Use grid to limit width of frontend components

* Remove page titles

* Remove page title from peer address page

* Use grid width for more pages

* Update static build

frontend/src/pages/channel/Channel.js

@@ -210,7 +210,6 @@ export default function LightningNodePage() {
 
   return (
     <>
-      <PageTitle title={'Channel'} />
       {ChannelTabs()}
       {CloseChannelDialogContent()}
     </>

frontend/src/pages/lightningnode/LightningNode.js

@@ -448,7 +448,6 @@ export default function LightningNodePage() {
 
   return (
     <>
-      <PageTitle title={'Lightning Node: ' + pubkey} />
       {pubkey
         ? LightningNodeTabs()
         : NoPubkeyContent()

frontend/src/pages/liked/Liked.js

@@ -30,6 +30,7 @@ import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
+import Paper from '@material-ui/core/Paper';
 
 import FaceIcon from '@material-ui/icons/Face';
 
@@ -135,13 +136,28 @@ export default function LikedPage() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        <Paper className={classes.paper}>
+        {(squeaks)
+          ? SqueaksContent()
+          : NoSqueaksContent()
+        }
+        </Paper>
+      </Grid>
+      <Grid item xs={12} sm={3}>
+        <Paper className={classes.paper}>
+        </Paper>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-      <PageTitle title="Liked" />
-      {(squeaks)
-        ? SqueaksContent()
-        : NoSqueaksContent()
-      }
+      {GridContent()}
     </>
   );
 }

frontend/src/pages/payments/Payments.js

@@ -159,9 +159,20 @@ export default function Payments() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        {paymentSummary && PaymentSummaryContent()}
+      </Grid>
+      <Grid item xs={12} sm={3}>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-     < PageTitle title = "Payments" />
-     {paymentSummary && PaymentSummaryContent()}
-   < />);
+    {GridContent()}
+    </>);
 }

frontend/src/pages/peeraddress/PeerAddress.js

@@ -11,7 +11,6 @@ import {
 import useStyles from "./styles";
 
 // components
-import PageTitle from "../../components/PageTitle";
 import Widget from "../../components/Widget";
 import SqueakThreadItem from "../../components/SqueakThreadItem";
 import CreateContactProfileDialog from "../../components/CreateContactProfileDialog";
@@ -23,6 +22,7 @@ import TimelineSeparator from '@material-ui/lab/TimelineSeparator';
 import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
+import Typography from '@material-ui/core/Typography';
 
 import FaceIcon from '@material-ui/icons/Face';
 
@@ -179,9 +179,20 @@ export default function PeerAddressPage() {
     )
   }
 
+  function AddressContent() {
+    console.log(connectedPeer);
+    return (
+      <>
+      <Typography variant="h2" component="h2">
+        {'Peer Address: ' + host + ":" + port}
+      </Typography>
+      </>
+    )
+  }
+
   return (
     <>
-      <PageTitle title={'Peer Address: ' + host + ":" + port} />
+      {AddressContent()}
       {ConnectionStatusContent()}
       {ConnectionActionContent()}
     </>

frontend/src/pages/peers/Peers.js

@@ -258,10 +258,21 @@ export default function Peers() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        {PeersTabs()}
+      </Grid>
+      <Grid item xs={12} sm={3}>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-     < PageTitle title = "Peers" />
-    {PeersTabs()}
+    {GridContent()}
     {CreatePeerDialogContent()}
     {ConnectPeerDialogContent()}
    < />);

frontend/src/pages/profile/Profile.js

@@ -115,11 +115,8 @@ export default function ProfilePage() {
 
   return (
     <>
-      <PageTitle title={'Squeak Profile: ' + (squeakProfile ? squeakProfile.getProfileName() : null)} />
-      <div>
       {squeakProfile &&
         ProfileContent()}
-      </div>
     </>
   );
 }

frontend/src/pages/profiles/Profiles.js

@@ -275,10 +275,21 @@ export default function Profiles() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        {ProfilesTabs()}
+      </Grid>
+      <Grid item xs={12} sm={3}>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-     < PageTitle title = "Profiles" />
-    {ProfilesTabs()}
+    {GridContent()}
     {CreateSigningProfileDialogContent()}
     {ImportSigningProfileDialogContent()}
     {CreateContactProfileDialogContent()}

frontend/src/pages/receivedpayments/ReceivedPayments.js

@@ -152,9 +152,20 @@ export default function ReceivedPayments() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        {PaymentsTabs()}
+      </Grid>
+      <Grid item xs={12} sm={3}>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-     < PageTitle title = "Payments" />
-     {PaymentsTabs()}
+     {GridContent()}
    < />);
 }

frontend/src/pages/sentpayments/SentPayments.js

@@ -124,9 +124,20 @@ export default function SentPayments() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        {PaymentsTabs()}
+      </Grid>
+      <Grid item xs={12} sm={3}>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-     < PageTitle title = "Sent Payments" />
-     {PaymentsTabs()}
+     {GridContent()}
    < />);
 }

frontend/src/pages/squeak/Squeak.js

@@ -16,6 +16,7 @@ import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
+import Paper from '@material-ui/core/Paper';
 
 import FaceIcon from '@material-ui/icons/Face';
 
@@ -257,10 +258,25 @@ export default function SqueakPage() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        <Paper className={classes.paper}>
+        {SqueakContent()}
+        </Paper>
+      </Grid>
+      <Grid item xs={12} sm={3}>
+        <Paper className={classes.paper}>
+        </Paper>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-      <PageTitle title="Squeak" />
-      {SqueakContent()}
+      {GridContent()}
     </>
   );
 }

frontend/src/pages/squeakaddress/SqueakAddress.js

@@ -24,6 +24,7 @@ import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
+import Paper from '@material-ui/core/Paper';
 
 import FaceIcon from '@material-ui/icons/Face';
 
@@ -169,17 +170,32 @@ export default function SqueakAddressPage() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        <Paper className={classes.paper}>
+        {(squeaks)
+          ? SqueaksContent()
+          : NoSqueaksContent()
+        }
+        </Paper>
+      </Grid>
+      <Grid item xs={12} sm={3}>
+        <Paper className={classes.paper}>
+        </Paper>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-      <PageTitle title={'Squeak Address: ' + address} />
       {squeakProfile
         ? ProfileContent()
         : NoProfileContent()
       }
-      {(squeaks)
-        ? SqueaksContent()
-        : NoSqueaksContent()
-      }
+      {GridContent()}
       {CreateContactProfileDialogContent()}
     </>
   );

frontend/src/pages/timeline/Timeline.js

@@ -30,6 +30,7 @@ import TimelineConnector from '@material-ui/lab/TimelineConnector';
 import TimelineContent from '@material-ui/lab/TimelineContent';
 import TimelineOppositeContent from '@material-ui/lab/TimelineOppositeContent';
 import TimelineDot from '@material-ui/lab/TimelineDot';
+import Paper from '@material-ui/core/Paper';
 
 import FaceIcon from '@material-ui/icons/Face';
 
@@ -155,13 +156,29 @@ export default function TimelinePage() {
     )
   }
 
+  function GridContent() {
+    return (
+      <Grid container spacing={0}>
+      <Grid item xs={12} sm={9}>
+        <Paper className={classes.paper}>
+        {(squeaks)
+          ? SqueaksContent()
+          : NoSqueaksContent()
+        }
+        </Paper>
+      </Grid>
+      <Grid item xs={12} sm={3}>
+        <Paper className={classes.paper}>
+
+        </Paper>
+      </Grid>
+      </Grid>
+    )
+  }
+
   return (
     <>
-      <PageTitle title="Timeline" />
-      {(squeaks)
-        ? SqueaksContent()
-        : NoSqueaksContent()
-      }
+      {GridContent()}
       <Fab color="secondary" aria-label="edit" className={classes.fab} onClick={handleClickOpen}>
         <EditIcon />
       </Fab>

frontend/src/pages/wallet/Wallet.js

@@ -454,7 +454,6 @@ export default function WalletPage() {
 
   return (
     <>
-      <PageTitle title="Wallet" />
       {lndAvailable()
         ? LightningTabs()
         : NoBalanceContent()

squeaknode/admin/webapp/static/build/asset-manifest.json

@@ -1,17 +1,17 @@
 {
   "files": {
-    "main.js": "/static/js/main.731801c8.chunk.js",
-    "main.js.map": "/static/js/main.731801c8.chunk.js.map",
+    "main.js": "/static/js/main.567e5ed0.chunk.js",
+    "main.js.map": "/static/js/main.567e5ed0.chunk.js.map",
     "runtime-main.js": "/static/js/runtime-main.9f0ba400.js",
     "runtime-main.js.map": "/static/js/runtime-main.9f0ba400.js.map",
     "static/css/2.ea4ba2f0.chunk.css": "/static/css/2.ea4ba2f0.chunk.css",
-    "static/js/2.5f141017.chunk.js": "/static/js/2.5f141017.chunk.js",
-    "static/js/2.5f141017.chunk.js.map": "/static/js/2.5f141017.chunk.js.map",
+    "static/js/2.9730688a.chunk.js": "/static/js/2.9730688a.chunk.js",
+    "static/js/2.9730688a.chunk.js.map": "/static/js/2.9730688a.chunk.js.map",
     "index.html": "/index.html",
-    "precache-manifest.7b90a7f7b67b51dc1116265964aa70e8.js": "/precache-manifest.7b90a7f7b67b51dc1116265964aa70e8.js",
+    "precache-manifest.5370d5360f994f6a8f6a6f0a5fb965fd.js": "/precache-manifest.5370d5360f994f6a8f6a6f0a5fb965fd.js",
     "service-worker.js": "/service-worker.js",
     "static/css/2.ea4ba2f0.chunk.css.map": "/static/css/2.ea4ba2f0.chunk.css.map",
-    "static/js/2.5f141017.chunk.js.LICENSE.txt": "/static/js/2.5f141017.chunk.js.LICENSE.txt",
+    "static/js/2.9730688a.chunk.js.LICENSE.txt": "/static/js/2.9730688a.chunk.js.LICENSE.txt",
     "static/media/font-awesome.min.css": "/static/media/fontawesome-webfont.fee66e71.woff",
     "static/media/google.svg": "/static/media/google.695a3160.svg",
     "static/media/logo.svg": "/static/media/logo.a0185b04.svg"
@@ -19,7 +19,7 @@
   "entrypoints": [
     "static/js/runtime-main.9f0ba400.js",
     "static/css/2.ea4ba2f0.chunk.css",
-    "static/js/2.5f141017.chunk.js",
-    "static/js/main.731801c8.chunk.js"
+    "static/js/2.9730688a.chunk.js",
+    "static/js/main.567e5ed0.chunk.js"
   ]
 }

squeaknode/admin/webapp/static/build/index.html

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.5f141017.chunk.js"></script><script src="/static/js/main.731801c8.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="shortcut icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/><meta name="theme-color" content="#000000"/><link rel="manifest" href="/manifest.json"/><title>Squeak Node</title><meta name="description" content="Squeak Node is a frontend for accessing a squeak node"><meta name="keywords" content="squeak, bitcoin, lightning"><meta name="author" content="Flatlogic LLC."><link href="/static/css/2.ea4ba2f0.chunk.css" rel="stylesheet"></head><body style="font-family:Roboto,sans-serif"><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function r(r){for(var n,f,l=r[0],a=r[1],i=r[2],c=0,s=[];c<l.length;c++)f=l[c],Object.prototype.hasOwnProperty.call(o,f)&&o[f]&&s.push(o[f][0]),o[f]=0;for(n in a)Object.prototype.hasOwnProperty.call(a,n)&&(e[n]=a[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,i||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,l=1;l<t.length;l++){var a=t[l];0!==o[a]&&(n=!1)}n&&(u.splice(r--,1),e=f(f.s=t[0]))}return e}var n={},o={1:0},u=[];function f(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,f),t.l=!0,t.exports}f.m=e,f.c=n,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(e,r){if(1&r&&(e=f(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)f.d(t,n,function(r){return e[r]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var l=this["webpackJsonpsqueak-node-frontend"]=this["webpackJsonpsqueak-node-frontend"]||[],a=l.push.bind(l);l.push=r,l=l.slice();for(var i=0;i<l.length;i++)r(l[i]);var p=a;t()}([])</script><script src="/static/js/2.9730688a.chunk.js"></script><script src="/static/js/main.567e5ed0.chunk.js"></script></body></html>

squeaknode/admin/webapp/static/build/precache-manifest.5370d5360f994f6a8f6a6f0a5fb965fd.js

@@ -1,23 +1,23 @@
 self.__precacheManifest = (self.__precacheManifest || []).concat([
   {
-    "revision": "40f4ec895353f04ee91dc90b7ec05668",
+    "revision": "746661bdd186ed0ecbf8a192460db429",
     "url": "/index.html"
   },
   {
-    "revision": "82816855ef13d12de539",
+    "revision": "de2597d66eae0798c929",
     "url": "/static/css/2.ea4ba2f0.chunk.css"
   },
   {
-    "revision": "82816855ef13d12de539",
-    "url": "/static/js/2.5f141017.chunk.js"
+    "revision": "de2597d66eae0798c929",
+    "url": "/static/js/2.9730688a.chunk.js"
   },
   {
     "revision": "7156b2c9571000777b9be03b3c6006ee",
-    "url": "/static/js/2.5f141017.chunk.js.LICENSE.txt"
+    "url": "/static/js/2.9730688a.chunk.js.LICENSE.txt"
   },
   {
-    "revision": "52137e175ebaf8cc7cd5",
-    "url": "/static/js/main.731801c8.chunk.js"
+    "revision": "4042141c87696a664b9f",
+    "url": "/static/js/main.567e5ed0.chunk.js"
   },
   {
     "revision": "cc9816de5a8639d377ea",

squeaknode/admin/webapp/static/build/service-worker.js

@@ -14,7 +14,7 @@
 importScripts("https://storage.googleapis.com/workbox-cdn/releases/4.3.1/workbox-sw.js");
 
 importScripts(
-  "/precache-manifest.7b90a7f7b67b51dc1116265964aa70e8.js"
+  "/precache-manifest.5370d5360f994f6a8f6a6f0a5fb965fd.js"
 );
 
 self.addEventListener('message', (event) => {