diff --git a/desktop/app/src/sandy-chrome/SandyApp.tsx b/desktop/app/src/sandy-chrome/SandyApp.tsx index f3509376e..9a0f714d9 100644 --- a/desktop/app/src/sandy-chrome/SandyApp.tsx +++ b/desktop/app/src/sandy-chrome/SandyApp.tsx @@ -18,6 +18,7 @@ import {LeftRail} from './LeftRail'; import {TemporarilyTitlebar} from './TemporarilyTitlebar'; import {registerStartupTime} from '../App'; import {useStore} from '../utils/useStore'; +import {SandyContext} from './SandyContext'; export function SandyApp({logger}: {logger: Logger}) { useEffect(() => { @@ -31,35 +32,37 @@ export function SandyApp({logger}: {logger: Logger}) { ); return ( - - - - - - {mainMenuVisible && ( -
- LeftMenu -
- )} -
- - - - - - - - - - - - - - -
-
+ + + + + + + {mainMenuVisible && ( +
+ LeftMenu +
+ )} +
+ + + + + + + + + + + + + + +
+
+
); } diff --git a/desktop/app/src/sandy-chrome/SandyContext.tsx b/desktop/app/src/sandy-chrome/SandyContext.tsx new file mode 100644 index 000000000..3a263ce21 --- /dev/null +++ b/desktop/app/src/sandy-chrome/SandyContext.tsx @@ -0,0 +1,16 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + */ + +import {createContext, useContext} from 'react'; + +export const SandyContext = createContext(false); + +export function useIsSandy(): boolean { + return useContext(SandyContext); +} diff --git a/desktop/app/src/ui/components/Button.tsx b/desktop/app/src/ui/components/Button.tsx index cca6759df..dfcb579b7 100644 --- a/desktop/app/src/ui/components/Button.tsx +++ b/desktop/app/src/ui/components/Button.tsx @@ -10,12 +10,16 @@ import React, {useContext, useState, useRef, useCallback} from 'react'; import electron, {MenuItemConstructorOptions} from 'electron'; import styled from '@emotion/styled'; -import {colors} from './colors'; import {findDOMNode} from 'react-dom'; import {keyframes} from 'emotion'; +import {Button as AntdButton} from 'antd'; + +import {colors} from './colors'; import Glyph, {IconSize} from './Glyph'; import {ButtonGroupContext} from './ButtonGroup'; import {useStore} from '../../utils/useStore'; +import {useIsSandy} from '../../sandy-chrome/SandyContext'; +import type {ButtonProps} from 'antd/lib/button'; type ButtonType = 'primary' | 'success' | 'warning' | 'danger'; @@ -254,7 +258,7 @@ type Props = { * Whether the button should have additional padding left and right. */ padded?: boolean; -} & React.HTMLProps; +} & Omit; /** * A simple button, used in many parts of the application. @@ -264,10 +268,11 @@ export default function Button(props: Props) { (state) => state.application.windowIsFocused, ); const inButtonGroup = useContext(ButtonGroupContext); + const isSandy = useIsSandy(); const [active, setActive] = useState(false); const [wasClosed, setWasClosed] = useState(false); - const _ref = useRef>(); + const _ref = useRef(); const onMouseDown = useCallback( (e: React.MouseEvent) => { @@ -354,7 +359,19 @@ export default function Button(props: Props) { ); } - return ( + return isSandy ? ( + + {children} + + ) : (