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);

static/app-strings.json

@@ -804,4 +804,4 @@
   "This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.": "This app will automatically download new free content from channels you are subscribed to. You may configure this in Settings or on the Subscriptions page.",
   "(Only available on the desktop app.)": "(Only available on the desktop app.)",
   "If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page.": "If we have your email address, we will send you notifications related to new content. You may configure these emails from the Help page."
-}
+}