feat: custom tilebar on mac

src/platforms/electron/createWindow.js

@@ -21,6 +21,7 @@ export default appState => {
     minWidth: 950,
     minHeight: 600,
     autoHideMenuBar: true,
+    titleBarStyle: 'hiddenInset',
     show: false,
     // Create the window using the state information.
     x: windowState.x,

src/ui/component/app/view.jsx

@@ -1,6 +1,7 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import React, { useEffect, useRef } from 'react';
+import classnames from 'classnames';
 import analytics from 'analytics';
 import { buildURI, parseURI } from 'lbry-redux';
 import Router from 'component/router/index';
@@ -15,6 +16,7 @@ import usePrevious from 'effects/use-previous';
 import Button from 'component/button';
 
 export const MAIN_WRAPPER_CLASS = 'main-wrapper';
+const IS_MAC = process.platform === 'darwin';
 
 type Props = {
   alertError: (string | {}) => void,
@@ -120,7 +122,11 @@ function App(props: Props) {
   }
 
   return (
-    <div className={MAIN_WRAPPER_CLASS} ref={appRef} onContextMenu={e => openContextMenu(e)}>
+    <div
+      className={classnames(MAIN_WRAPPER_CLASS, { [`${MAIN_WRAPPER_CLASS}--mac`]: IS_MAC })}
+      ref={appRef}
+      onContextMenu={e => openContextMenu(e)}
+    >
       <Router />
       <ModalRouter />
       <FileViewer pageUri={uri} />

src/ui/component/header/view.jsx

@@ -12,6 +12,8 @@ import Icon from 'component/common/icon';
 import { Menu, MenuList, MenuButton, MenuItem } from '@reach/menu-button';
 import Tooltip from 'component/common/tooltip';
 
+const IS_MAC = process.platform === 'darwin';
+
 type Props = {
   balance: string,
   roundedBalance: number,
@@ -62,7 +64,7 @@ const Header = (props: Props) => {
   }
 
   return (
-    <header className={classnames('header', { 'header--minimal': minimal })}>
+    <header className={classnames('header', { 'header--minimal': minimal, 'header--mac': IS_MAC })}>
       <div className="header__contents">
         <div className="header__navigation">
           <Button

src/ui/scss/component/_header.scss

@@ -7,6 +7,8 @@
   border-bottom: 1px solid $lbry-gray-1;
   box-shadow: var(--card-box-shadow) $lbry-gray-1;
   font-size: var(--font-body);
+  -webkit-user-select: none;
+  -webkit-app-region: drag;
 
   [data-mode='dark'] & {
     background-color: var(--dm-color-05);
@@ -26,6 +28,10 @@
   border-bottom: none;
 }
 
+.header--mac {
+  padding-top: var(--mac-titlebar-height);
+}
+
 .header__contents {
   max-width: var(--page-max-width);
   height: calc(var(--header-height) - 1px);

src/ui/scss/component/_main.scss

@@ -6,6 +6,10 @@
   }
 }
 
+.main-wrapper--mac {
+  margin-top: calc(var(--header-height) + var(--mac-titlebar-height));
+}
+
 .main-wrapper__inner {
   display: flex;
   align-items: flex-start;

src/ui/scss/init/_vars.scss

@@ -8,6 +8,7 @@ $large-breakpoint: 1921px;
 :root {
   // Width & spacing
   --page-max-width: 1420px;
+  --mac-titlebar-height: 1.5rem;
   --mobile: 600px;
   --side-nav-width: 170px;
   --spacing-miniscule: calc(2rem / 5);