Add vibrancy effects to sidebar on macOS

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "hyperspace",
-  "version": "1.0.0",
+  "version": "1.0.0-beta4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2159,7 +2159,6 @@
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
       "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
-      "dev": true,
       "requires": {
         "sprintf-js": "~1.0.2"
       }
@@ -3094,14 +3093,12 @@
     "bluebird": {
       "version": "3.5.4",
       "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.5.4.tgz",
-      "integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw==",
+      "integrity": "sha512-FG+nFEZChJrbQ9tIccIfZJBz3J7mLrAhxakAbnrJWn8d7aKOC+LWifa0G+p4ZqKp4y13T7juYvdhq9NzKdsrjw=="
-      "dev": true
     },
     "bluebird-lst": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/bluebird-lst/-/bluebird-lst-1.0.7.tgz",
       "integrity": "sha512-5ix04IbXVIZ6nSRM4aZnwQfk40Td0D57WAl8LfhnICF6XwT4efCZYh0veOHvfDmgpbqE4ju5L5XEAMIcAe13Kw==",
-      "dev": true,
       "requires": {
         "bluebird": "^3.5.3"
       }
@@ -3390,8 +3387,7 @@
     "buffer-from": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz",
-      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A==",
+      "integrity": "sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A=="
-      "dev": true
     },
     "buffer-indexof": {
       "version": "1.1.1",
@@ -6422,7 +6418,6 @@
       "version": "4.0.6",
       "resolved": "https://registry.npmjs.org/electron-updater/-/electron-updater-4.0.6.tgz",
       "integrity": "sha512-JPGLME6fxJcHG8hX7HWFl6Aew6iVm0DkcrENreKa5SUJCHG+uUaAhxDGDt+YGcNkyx1uJ6eBGMvFxDTLUv67pg==",
-      "dev": true,
       "requires": {
         "bluebird-lst": "^1.0.6",
         "builder-util-runtime": "~8.1.0",
@@ -6439,7 +6434,6 @@
           "version": "8.1.1",
           "resolved": "https://registry.npmjs.org/builder-util-runtime/-/builder-util-runtime-8.1.1.tgz",
           "integrity": "sha512-+ieS4PMB33vVE2S3ZNWBEQJ1zKmAs/agrBdh7XadE1lKLjrH4aXYuOh9OOGdxqIRldhlhNBaF+yKMMEFOdNVig==",
-          "dev": true,
           "requires": {
             "bluebird-lst": "^1.0.6",
             "debug": "^4.1.1",
@@ -6451,7 +6445,6 @@
           "version": "4.1.1",
           "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz",
           "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==",
-          "dev": true,
           "requires": {
             "ms": "^2.1.1"
           }
@@ -6459,14 +6452,12 @@
         "source-map": {
           "version": "0.6.1",
           "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
-          "dev": true
         },
         "source-map-support": {
           "version": "0.5.12",
           "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.12.tgz",
           "integrity": "sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==",
-          "dev": true,
           "requires": {
             "buffer-from": "^1.0.0",
             "source-map": "^0.6.0"
@@ -6478,7 +6469,6 @@
       "version": "5.0.3",
       "resolved": "https://registry.npmjs.org/electron-window-state/-/electron-window-state-5.0.3.tgz",
       "integrity": "sha512-1mNTwCfkolXl3kMf50yW3vE2lZj0y92P/HYWFBrb+v2S/pCka5mdwN3cagKm458A7NjndSwijynXgcLWRodsVg==",
-      "dev": true,
       "requires": {
         "jsonfile": "^4.0.0",
         "mkdirp": "^0.5.1"
@@ -7024,8 +7014,7 @@
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
-      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==",
+      "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A=="
-      "dev": true
     },
     "esquery": {
       "version": "1.0.1",
@@ -8332,7 +8321,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-7.0.1.tgz",
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -8343,7 +8331,6 @@
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fs-extra-p/-/fs-extra-p-7.0.1.tgz",
       "integrity": "sha512-yhd2OV0HnHt2oitlp+X9hl2ReX4X/7kQeL7/72qzPHTZj5eUPGzAKOvEglU02Fa1OeG2rSy/aKB4WGVaLiF8tw==",
-      "dev": true,
       "requires": {
         "bluebird-lst": "^1.0.7",
         "fs-extra": "^7.0.1"
@@ -9131,8 +9118,7 @@
     "graceful-fs": {
       "version": "4.1.15",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.15.tgz",
-      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==",
+      "integrity": "sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA=="
-      "dev": true
     },
     "growly": {
       "version": "1.3.0",
@@ -11247,7 +11233,6 @@
       "version": "3.13.1",
       "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz",
       "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==",
-      "dev": true,
       "requires": {
         "argparse": "^1.0.7",
         "esprima": "^4.0.0"
@@ -11371,7 +11356,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
-      "dev": true,
       "requires": {
         "graceful-fs": "^4.1.6"
       }
@@ -11536,8 +11520,7 @@
     "lazy-val": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/lazy-val/-/lazy-val-1.0.4.tgz",
-      "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q==",
+      "integrity": "sha512-u93kb2fPbIrfzBuLjZE+w+fJbUUMhNDXxNmMfaqNgpfQf1CO5ZSe2LfsnBqVAk7i/2NF48OSoRj+Xe2VT+lE8Q=="
-      "dev": true
     },
     "lcid": {
       "version": "1.0.0",
@@ -11704,8 +11687,7 @@
     "lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
-      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA=",
+      "integrity": "sha1-QVxEePK8wwEgwizhDtMib30+GOA="
-      "dev": true
     },
     "lodash.memoize": {
       "version": "4.1.2",
@@ -12229,7 +12211,6 @@
       "version": "0.5.1",
       "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
       "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
       "requires": {
         "minimist": "0.0.8"
       },
@@ -12237,8 +12218,7 @@
         "minimist": {
           "version": "0.0.8",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
-          "dev": true
         }
       }
     },
@@ -12265,8 +12245,7 @@
     "ms": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg==",
+      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
-      "dev": true
     },
     "multicast-dns": {
       "version": "6.2.3",
@@ -12933,8 +12912,7 @@
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
-      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw==",
+      "integrity": "sha512-0DTvPVU3ed8+HNXOu5Bs+o//Mbdj9VNQMUOe9oKCwh8l0GNwpTDMKCWbRjgtD291AWnkAgkqA/LOnQS8AmS1tw=="
-      "dev": true
     },
     "parallel-transform": {
       "version": "1.1.0",
@@ -17888,8 +17866,7 @@
     "sax": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
-      "dev": true
     },
     "scheduler": {
       "version": "0.13.6",
@@ -17930,8 +17907,7 @@
     "semver": {
       "version": "5.7.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.0.tgz",
-      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==",
+      "integrity": "sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA=="
-      "dev": true
     },
     "semver-diff": {
       "version": "2.1.0",
@@ -18529,8 +18505,7 @@
     "sprintf-js": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw="
-      "dev": true
     },
     "sshpk": {
       "version": "1.16.1",
@@ -19595,8 +19570,7 @@
     "universalify": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.2.tgz",
-      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
+      "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg=="
-      "dev": true
     },
     "unpipe": {
       "version": "1.0.0",

public/electron.js

@@ -126,6 +126,7 @@ function createWindow() {
 
             // Set some preferences that are specific to macOS.
             titleBarStyle: 'hidden',
+            vibrancy: systemPreferences.isDarkMode()? "dark": "light"
         }
     );
 
@@ -197,18 +198,18 @@ function createMenubar() {
             submenu: [
                 { role: 'reload' },
                 { role: 'forcereload' },
-                {
+                // {
-                    label: 'Open Dev Tools',
+                //     label: 'Open Dev Tools',
-                    click () {
+                //     click () {
-                        try {
+                //         try {
-                            mainWindow.webContents.openDevTools({mode: 'undocked'});
+                //             mainWindow.webContents.openDevTools({mode: 'undocked'});
-                        } catch (err) {
+                //         } catch (err) {
-                            console.error("Couldn't open dev tools: " + err);
+                //             console.error("Couldn't open dev tools: " + err);
-                        }
+                //         }
                         
-                    },
+                //     },
-                    accelerator: 'Shift+CmdOrCtrl+I'
+                //     accelerator: 'Shift+CmdOrCtrl+I'
-                },
+                // },
                 { type: 'separator' },
                 { role: 'togglefullscreen' }
             ]

src/App.styles.tsx

@@ -1,10 +1,13 @@
 import { Theme, createStyles } from "@material-ui/core";
+import { isDarwinApp } from './utilities/desktop';
 
 export const styles = (theme: Theme) => createStyles({
     root: {
       width: '100%',
       display: 'flex',
-      height: '100%'
+      height: '100%',
+      minHeight: '100vh',
+      backgroundColor: isDarwinApp()? "transparent": theme.palette.background.default,
     },
     content: {
       marginTop: 72,
@@ -14,5 +17,5 @@ export const styles = (theme: Theme) => createStyles({
         marginLeft: 250,
         marginTop: 88,
       },
-    }
+    },
   });

src/App.tsx

@@ -23,6 +23,7 @@ import You from './pages/You';
 import {withSnackbar} from 'notistack';
 import {PrivateRoute} from './interfaces/overrides';
 import { userLoggedIn } from './utilities/accounts';
+import { isDarwinApp } from './utilities/desktop';
 let theme = setHyperspaceTheme(getUserDefaultTheme());
 
 class App extends Component<any, any> {
@@ -42,9 +43,27 @@ class App extends Component<any, any> {
     this.setState({ theme: newTheme });
   }
 
+  componentDidMount() {
+    this.removeBodyBackground()
+  }
+
+  componentDidUpdate() {
+    this.removeBodyBackground()
+  }
+
+  removeBodyBackground() {
+    if (isDarwinApp()) {
+      document.body.style.backgroundColor = "transparent";
+      console.log("Changed!")
+      console.log(`New color: ${document.body.style.backgroundColor}`)
+    }
+  }
+
   render() {
     const { classes } = this.props;
 
+    this.removeBodyBackground()
+    
     return (
       <MuiThemeProvider theme={this.state.theme}>
         <CssBaseline/>

src/components/AppLayout/AppLayout.styles.tsx

@@ -116,12 +116,14 @@ export const styles = (theme: Theme) => createStyles({
     drawerPaperWithAppBar: {
       width: 250,
       zIndex: -1,
-      marginTop: 64
+      marginTop: 64,
+      backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
     },
     drawerPaperWithTitleAndAppBar: {
       width: 250,
       zIndex: -1,
-      marginTop: 88
+      marginTop: 88,
+      backgroundColor: isDarwinApp()? "transparent": theme.palette.background.paper
     },
     drawerDisplayMobile: {
       [theme.breakpoints.up('md')]: {

src/pages/PageLayout.styles.tsx

@@ -1,4 +1,5 @@
 import { Theme, createStyles } from "@material-ui/core";
+import { isDarwinApp } from "../utilities/desktop";
 
 export const styles = (theme: Theme) => createStyles({
     root: {
@@ -18,6 +19,8 @@ export const styles = (theme: Theme) => createStyles({
         paddingLeft: theme.spacing.unit * 24,
         paddingRight: theme.spacing.unit * 24
       },
+      backgroundColor: theme.palette.background.default,
+      minHeight: isDarwinApp()? "100vh": 'auto',
     },
     pageLayoutMaxConstraints: {
       marginTop: 72,
@@ -45,12 +48,16 @@ export const styles = (theme: Theme) => createStyles({
         paddingLeft: theme.spacing.unit * 40,
         paddingRight: theme.spacing.unit * 40,
       },
+      backgroundColor: theme.palette.background.default,
+      minHeight: isDarwinApp()? "100vh": 'auto',
     },
     pageLayoutMinimalConstraints: {
       flexGrow: 1,
       [theme.breakpoints.up('md')]: {
         marginLeft: 250,
       },
+      backgroundColor: theme.palette.background.default,
+      minHeight: isDarwinApp()? "100vh": 'auto',
     },
     pageLayoutEmptyTextConstraints: {
       paddingLeft: theme.spacing.unit * 2,
@@ -100,7 +107,8 @@ export const styles = (theme: Theme) => createStyles({
         [theme.breakpoints.up('sm')]: {
             paddingLeft: theme.spacing.unit * 2,
             paddingRight: theme.spacing.unit * 2
-        }
+        },
+        //backgroundColor: theme.palette.background.default
     },
     pageProfileAvatar: {
       width: 128,
@@ -137,6 +145,7 @@ export const styles = (theme: Theme) => createStyles({
         paddingLeft: theme.spacing.unit * 32,
         paddingRight: theme.spacing.unit * 32
       },
+      //backgroundColor: theme.palette.background.default,
     },
     errorCard: {
       padding: theme.spacing.unit * 4,