Merge pull request #292 from ryohey/minor-update

Minor tweaks

.vscode/settings.json

@@ -9,6 +9,6 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true
+    "source.organizeImports": "explicit"
   }
 }

src/common/theme/Theme.ts

@@ -2,6 +2,7 @@ export interface Theme {
   font: string
   canvasFont: string
   themeColor: string
+  darkBackgroundColor: string
   backgroundColor: string
   secondaryBackgroundColor: string
   dividerColor: string
@@ -10,6 +11,7 @@ export interface Theme {
   tertiaryTextColor: string
   pianoKeyBlack: string
   pianoKeyWhite: string
+  pianoWhiteKeyLaneColor: string
   pianoBlackKeyLaneColor: string
   ghostNoteColor: string
   recordColor: string
@@ -25,14 +27,16 @@ export const defaultTheme: Theme = {
   canvasFont: "Arial",
   themeColor: "hsl(230, 70%, 55%)",
   textColor: "#ffffff",
-  secondaryTextColor: "#8e96ab",
+  secondaryTextColor: "hsl(223, 12%, 60%)",
   tertiaryTextColor: "#5a6173",
-  dividerColor: "#454a58",
-  backgroundColor: "hsl(228, 16%, 18%)",
-  secondaryBackgroundColor: "hsl(227, 16%, 22%)",
+  dividerColor: "hsl(224, 12%, 24%)",
+  darkBackgroundColor: "hsl(228, 10%, 13%)",
+  backgroundColor: "hsl(228, 10%, 16%)",
+  secondaryBackgroundColor: "hsl(227, 10%, 22%)",
   pianoKeyBlack: "#272a36",
   pianoKeyWhite: "#fbfcff",
-  pianoBlackKeyLaneColor: "hsl(228, 16%, 15%)",
+  pianoWhiteKeyLaneColor: "hsl(228, 10%, 16%)",
+  pianoBlackKeyLaneColor: "hsl(228, 10%, 13%)",
   ghostNoteColor: "#444444",
   recordColor: "#dd3c3c",
   shadowColor: "rgba(0, 0, 0, 0.2)",

src/main/components/ArrangeView/ArrangeView.tsx

@@ -1,7 +1,6 @@
 import styled from "@emotion/styled"
 import useComponentSize from "@rehooks/component-size"
 import { IPoint } from "@ryohey/webgl-react"
-import Color from "color"
 import { clamp } from "lodash"
 import { observer } from "mobx-react-lite"
 import { FC, useCallback, useEffect, useRef } from "react"
@@ -264,7 +263,7 @@ export const ArrangeView: FC = observer(() => {
             flexDirection: "column",
             position: "relative",
             overflow: "hidden",
-            background: Color(theme.backgroundColor).darken(0.1).hex(),
+            background: theme.darkBackgroundColor,
           }}
         >
           <CanvasPianoRuler

src/main/components/ControlPane/ControlPane.tsx

@@ -11,7 +11,7 @@ import { ValueEventGraph } from "./Graph/ValueEventGraph"
 import PianoVelocityControl from "./VelocityControl/VelocityControl"
 
 interface TabBarProps {
-  onClick: (mode: ControlMode) => void
+  onSelect: (mode: ControlMode) => void
   selectedMode: ControlMode
 }
 
@@ -50,7 +50,6 @@ const NoWrap = styled.span`
 `
 
 const Toolbar = styled.div`
-  border-bottom: 1px solid ${({ theme }) => theme.dividerColor};
   box-sizing: border-box;
   display: flex;
   margin-left: ${Layout.keyWidth}px;
@@ -65,7 +64,7 @@ const Toolbar = styled.div`
 `
 
 const TabBar: FC<TabBarProps> = React.memo(
-  observer(({ onClick, selectedMode }) => {
+  observer(({ onSelect, selectedMode }) => {
     const { controlStore, rootViewStore } = useStores()
     const { controlModes } = controlStore
 
@@ -74,7 +73,7 @@ const TabBar: FC<TabBarProps> = React.memo(
         {controlModes.map((mode, i) => (
           <TabButton
             selected={isEqualControlMode(selectedMode, mode)}
-            onClick={() => onClick(mode)}
+            onMouseDown={() => onSelect(mode)}
             key={i}
           >
             <NoWrap>
@@ -97,7 +96,7 @@ const Parent = styled.div`
   height: 100%;
   display: flex;
   flex-direction: column;
-  background: ${({ theme }) => theme.backgroundColor};
+  background: ${({ theme }) => theme.darkBackgroundColor};
 `
 
 const Content = styled.div`
@@ -142,7 +141,7 @@ const ControlPane: FC = observer(() => {
 
   return (
     <Parent ref={ref}>
-      <TabBar onClick={onSelectTab} selectedMode={mode} />
+      <TabBar onSelect={onSelectTab} selectedMode={mode} />
       <Content>{control}</Content>
     </Parent>
   )

src/main/components/ControlPane/LineGraph/GraphAxis.tsx

@@ -5,7 +5,6 @@ import { Layout } from "../../../Constants"
 const Parent = styled.div`
   text-align: right;
   width: ${Layout.keyWidth}px;
-  border-right: 1px solid ${({ theme }) => theme.dividerColor};
   padding-right: 0.3em;
   box-sizing: border-box;
 `

src/main/components/EventEditor/EventList.tsx

@@ -101,15 +101,15 @@ const Row = styled.div`
   outline: none;
 
   &:focus {
-    background: ${({ theme }) => theme.secondaryBackgroundColor};
+    background: ${({ theme }) => theme.highlightColor};
   }
 `
 
 const Cell = styled.div`
   padding: 0.5rem;
 
   &:focus-within {
-    background: ${({ theme }) => theme.secondaryBackgroundColor};
+    background: ${({ theme }) => theme.highlightColor};
   }
 `
 

src/main/components/Navigation/Navigation.tsx

@@ -1,5 +1,4 @@
 import styled from "@emotion/styled"
-import Color from "color"
 import Forum from "mdi-react/ForumIcon"
 import Help from "mdi-react/HelpCircleIcon"
 import Settings from "mdi-react/SettingsIcon"
@@ -37,7 +36,7 @@ const LogoIcon = styled(Logo)`
 const Container = styled.div`
   display: flex;
   flex-direction: row;
-  background: ${({ theme }) => Color(theme.backgroundColor).darken(0.2).hex()};
+  background: ${({ theme }) => theme.darkBackgroundColor};
   height: 3rem;
   flex-shrink: 0;
 `
@@ -108,7 +107,7 @@ export const Navigation: FC = observer(() => {
       >
         <Tab
           className={router.path === "/track" ? "active" : undefined}
-          onClick={useCallback(() => (router.path = "/track"), [])}
+          onMouseDown={useCallback(() => (router.path = "/track"), [])}
         >
           <PianoIcon style={IconStyle} viewBox="0 0 128 128" />
           <TabTitle>
@@ -128,7 +127,7 @@ export const Navigation: FC = observer(() => {
       >
         <Tab
           className={router.path === "/arrange" ? "active" : undefined}
-          onClick={useCallback(() => (router.path = "/arrange"), [])}
+          onMouseDown={useCallback(() => (router.path = "/arrange"), [])}
         >
           <ArrangeIcon style={IconStyle} viewBox="0 0 128 128" />
           <TabTitle>
@@ -148,7 +147,7 @@ export const Navigation: FC = observer(() => {
       >
         <Tab
           className={router.path === "/tempo" ? "active" : undefined}
-          onClick={useCallback(() => (router.path = "/tempo"), [])}
+          onMouseDown={useCallback(() => (router.path = "/tempo"), [])}
         >
           <TempoIcon style={IconStyle} viewBox="0 0 128 128" />
           <TabTitle>

src/main/components/PianoRoll/PianoRollCanvas/PianoRollCanvas.tsx

@@ -11,6 +11,7 @@ import {
 import { matrixFromTranslation } from "../../../helpers/matrix"
 import { useContextMenu } from "../../../hooks/useContextMenu"
 import { useStores } from "../../../hooks/useStores"
+import { useTheme } from "../../../hooks/useTheme"
 import { Beats } from "../../GLNodes/Beats"
 import { Cursor } from "../../GLNodes/Cursor"
 import { Selection } from "../../GLNodes/Selection"
@@ -40,6 +41,8 @@ export const PianoRollCanvas: FC<PianoRollStageProps> = observer(
 
     const { onContextMenu, menuProps } = useContextMenu()
 
+    const theme = useTheme()
+
     const handleContextMenu: MouseEventHandler = useCallback((e) => {
       if (pianoRollStore.mouseMode === "selection") {
         e.stopPropagation()
@@ -76,7 +79,10 @@ export const PianoRollCanvas: FC<PianoRollStageProps> = observer(
         <GLCanvas
           width={width}
           height={height}
-          style={{ cursor: notesCursor }}
+          style={{
+            cursor: notesCursor,
+            background: theme.pianoWhiteKeyLaneColor,
+          }}
           onContextMenu={handleContextMenu}
           onMouseDown={mouseHandler.onMouseDown}
           onMouseMove={mouseHandler.onMouseMove}

src/main/components/PianoRollToolbar/EventListButton.tsx

@@ -1,5 +1,5 @@
 import FormatListBulleted from "mdi-react/FormatListBulletedIcon"
-import { FC, useCallback } from "react"
+import { FC, MouseEvent, useCallback } from "react"
 import { Localized } from "../../../components/Localized"
 import { Tooltip } from "../../../components/Tooltip"
 import { useStores } from "../../hooks/useStores"
@@ -11,11 +11,17 @@ export const EventListButton: FC = () => {
   return (
     <Tooltip title={<Localized default="Event List">event-list</Localized>}>
       <ToolbarButton
-        onClick={useCallback(() => {
+        onMouseDown={useCallback((e: MouseEvent) => {
+          e.preventDefault()
           pianoRollStore.showEventList = !pianoRollStore.showEventList
         }, [])}
       >
-        <FormatListBulleted />
+        <FormatListBulleted
+          style={{
+            width: "1.2rem",
+            fill: "currentColor",
+          }}
+        />
       </ToolbarButton>
     </Tooltip>
   )

src/main/components/PianoRollToolbar/InstrumentButton.tsx

@@ -32,7 +32,12 @@ export const InstrumentButton: FC = observer(() => {
   }, [pianoRollStore])
 
   return (
-    <ToolbarButton onClick={onClickInstrument}>
+    <ToolbarButton
+      onMouseDown={(e) => {
+        e.preventDefault()
+        onClickInstrument()
+      }}
+    >
       <span style={{ marginRight: "0.5rem" }}>{emoji}</span>
       <span>
         <TrackInstrumentName track={selectedTrack} />

src/main/components/PianoRollToolbar/PanSlider.tsx

@@ -46,6 +46,7 @@ const _PanSlider: FC<PanSliderProps> = observer(({ trackId }) => {
       <Slider
         value={pan}
         onChange={(value) => onChange(value as number)}
+        onDoubleClick={() => onChange(PAN_CENTER)}
         min={0}
         max={127}
         defaultValue={PAN_CENTER}

src/main/components/Toolbar/AutoScrollButton.tsx

@@ -6,8 +6,8 @@ import { Tooltip } from "../../../components/Tooltip"
 import { ToolbarButton } from "./ToolbarButton"
 
 const AutoScrollIcon = styled(KeyboardTab)`
-  height: 2rem;
-  font-size: 1.3rem;
+  width: 1.2rem;
+  fill: currentColor;
 `
 
 export interface AutoScrollButtonProps {
@@ -20,7 +20,13 @@ export const AutoScrollButton: FC<AutoScrollButtonProps> = ({
   selected,
 }) => (
   <Tooltip title={<Localized default="Auto-Scroll">auto-scroll</Localized>}>
-    <ToolbarButton onClick={onClick} selected={selected}>
+    <ToolbarButton
+      onMouseDown={(e) => {
+        e.preventDefault()
+        onClick()
+      }}
+      selected={selected}
+    >
       <AutoScrollIcon />
     </ToolbarButton>
   </Tooltip>

src/main/components/Toolbar/QuantizeSelector/QuantizeSelector.tsx

@@ -92,7 +92,7 @@ function QuantizeSelector({
       <Tooltip
         title={<Localized default="Snap to Grid">snap-to-grid</Localized>}
       >
-        <Switch selected={enabled} onClick={onClickSwitch}>
+        <Switch selected={enabled} onMouseDown={onClickSwitch}>
           <Note />
         </Switch>
       </Tooltip>
@@ -106,7 +106,6 @@ function QuantizeSelector({
         onChangeTriplet={(t) => onSelect(calcQuantize(denominator, false, t))}
         trigger={
           <Content
-            tabIndex={-1}
             onWheel={(e) => {
               const currentIndex = list.indexOf(denominator)
               const delta = e.deltaY < 0 ? 1 : -1

src/main/components/Toolbar/ToolSelector.tsx

@@ -31,9 +31,7 @@ export const ToolSelector: FC<ToolSelectorProps> = ({
   return (
     <ButtonGroup>
       <ToolbarButtonGroupItem
-        onMouseDown={(e) => e.preventDefault()}
-        tabIndex={-1}
-        onClick={useCallback(() => onSelect("pencil"), [])}
+        onMouseDown={useCallback(() => onSelect("pencil"), [])}
         selected={mouseMode === "pencil"}
       >
         <Tooltip
@@ -56,9 +54,7 @@ export const ToolSelector: FC<ToolSelectorProps> = ({
         </Tooltip>
       </ToolbarButtonGroupItem>
       <ToolbarButtonGroupItem
-        onMouseDown={(e) => e.preventDefault()}
-        tabIndex={-1}
-        onClick={useCallback(() => onSelect("selection"), [])}
+        onMouseDown={useCallback(() => onSelect("selection"), [])}
         selected={mouseMode === "selection"}
       >
         <Tooltip

src/main/components/Toolbar/Toolbar.tsx

@@ -9,5 +9,4 @@ export const Toolbar: FC<React.PropsWithChildren<unknown>> = styled.div`
   box-sizing: border-box;
 
   background: ${({ theme }) => theme.backgroundColor};
-  border-bottom: 1px solid ${({ theme }) => theme.dividerColor};
 `

src/main/components/Toolbar/ToolbarButton.tsx

@@ -4,28 +4,24 @@ import { ComponentProps, forwardRef } from "react"
 const _ToolbarButton = styled.button<{ selected?: boolean }>`
   -webkit-appearance: none;
   min-width: auto;
-  padding: 0 0.75rem;
+  padding: 0 0.8rem;
   color: inherit;
-  border: 1px solid ${({ theme }) => theme.dividerColor};
+  border: none;
   background: ${({ theme, selected }) =>
-    selected ? theme.themeColor : "inherit"};
+    selected ? theme.themeColor : theme.darkBackgroundColor};
   text-transform: none;
   height: 2rem;
   overflow: hidden;
   white-space: nowrap;
   display: flex;
   align-items: center;
-  border-radius: 4px;
+  border-radius: 999px;
   cursor: pointer;
   outline: none;
 
   &:hover {
-    background: ${({ theme }) => theme.highlightColor};
-  }
-
-  svg {
-    width: 1.3rem;
-    fill: currentColor;
+    background: ${({ theme, selected }) =>
+      selected ? theme.themeColor : theme.highlightColor};
   }
 `
 
@@ -34,10 +30,13 @@ export const ToolbarButton = forwardRef<
   React.PropsWithChildren<
     Omit<ComponentProps<typeof _ToolbarButton>, "tabIndex">
   >
->(({ children, ...props }, ref) => (
+>(({ children, onMouseDown, ...props }, ref) => (
   <_ToolbarButton
     {...props}
-    onMouseDown={(e) => e.preventDefault()}
+    onMouseDown={(e) => {
+      e.preventDefault()
+      onMouseDown?.(e)
+    }}
     tabIndex={-1}
     ref={ref}
   >