From 4304a2ae84ee615279a8617f5d8ff3a82e83c8d4 Mon Sep 17 00:00:00 2001 From: jeffvli Date: Sun, 6 Nov 2022 00:46:51 -0700 Subject: [PATCH] Various updates --- src/renderer/app.tsx | 6 ++-- .../player/components/center-controls.tsx | 22 ++++++--------- .../player/components/player-button.tsx | 28 +++++++++++++------ .../player/components/right-controls.tsx | 4 +-- .../titlebar/components/activity-menu.tsx | 15 +++++----- .../features/titlebar/components/app-menu.tsx | 21 ++++---------- src/renderer/index.tsx | 2 ++ src/renderer/layouts/default-layout.tsx | 3 +- src/renderer/router/routes.ts | 5 +++- 9 files changed, 55 insertions(+), 51 deletions(-) diff --git a/src/renderer/app.tsx b/src/renderer/app.tsx index 375e55c3e..615a88d76 100644 --- a/src/renderer/app.tsx +++ b/src/renderer/app.tsx @@ -39,13 +39,13 @@ export const App = () => { defaultRadius: 'xs', dir: 'ltr', focusRing: 'never', - fontFamily: 'Poppins, sans-serif', + fontFamily: 'Sora, sans-serif', fontSizes: { lg: 16, md: 14, - sm: 12, + sm: 13, xl: 18, - xs: 10, + xs: 12, }, other: {}, spacing: { diff --git a/src/renderer/features/player/components/center-controls.tsx b/src/renderer/features/player/components/center-controls.tsx index 066b6497d..c4a9e051f 100644 --- a/src/renderer/features/player/components/center-controls.tsx +++ b/src/renderer/features/player/components/center-controls.tsx @@ -2,9 +2,8 @@ import { useEffect, useState } from 'react'; import styled from '@emotion/styled'; import format from 'format-duration'; import isElectron from 'is-electron'; -import { useTranslation } from 'react-i18next'; +import { IoIosPause } from 'react-icons/io'; import { - RiPauseLine, RiPlayFill, RiRepeat2Fill, RiShuffleFill, @@ -55,7 +54,6 @@ const SliderWrapper = styled.div` `; export const CenterControls = ({ playersRef }: CenterControlsProps) => { - const { t } = useTranslation(); const [isSeeking, setIsSeeking] = useState(false); const playerData = usePlayerStore((state) => state.getPlayerData()); const player1 = playersRef?.current?.player1?.player; @@ -94,17 +92,17 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => { return ( <> - console.log(e)}> + } - tooltip={{ label: `${t('player.shuffle')}` }} + tooltip={{ label: `Shuffle`, openDelay: 500 }} variant="secondary" onClick={handlePrevTrack} /> } - tooltip={{ label: `${t('player.previous')}` }} + tooltip={{ label: `Previous track`, openDelay: 500 }} variant="secondary" onClick={handlePrevTrack} /> @@ -113,27 +111,25 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => { status === PlayerStatus.PAUSED ? ( ) : ( - + ) } tooltip={{ - label: - status === PlayerStatus.PAUSED - ? `${t('player.play')}` - : `${t('player.pause')}`, + label: status === PlayerStatus.PAUSED ? 'Play' : 'Pause', + openDelay: 500, }} variant="main" onClick={handlePlayPause} /> } - tooltip={{ label: `${t('player.next')}` }} + tooltip={{ label: 'Next track', openDelay: 500 }} variant="secondary" onClick={handleNextTrack} /> } - tooltip={{ label: `${t('player.repeat')}` }} + tooltip={{ label: 'Repeat', openDelay: 500 }} variant="secondary" onClick={handleNextTrack} /> diff --git a/src/renderer/features/player/components/player-button.tsx b/src/renderer/features/player/components/player-button.tsx index 1c5a3f709..6cf7c5308 100644 --- a/src/renderer/features/player/components/player-button.tsx +++ b/src/renderer/features/player/components/player-button.tsx @@ -1,3 +1,4 @@ +/* stylelint-disable no-descending-specificity */ import { ComponentPropsWithoutRef, ReactNode } from 'react'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; @@ -7,7 +8,7 @@ import { UnstyledButtonProps, } from '@mantine/core'; import { motion } from 'framer-motion'; -import { Tooltip } from '../../../components'; +import { Tooltip } from '@/renderer/components'; type MantineButtonProps = UnstyledButtonProps & ComponentPropsWithoutRef<'button'>; @@ -33,15 +34,24 @@ const MotionWrapper = styled(motion.div)` const ButtonMainVariant = css` padding: 0.5rem; - border: 2px solid var(--playerbar-btn-color); + background-color: var(--playerbar-btn-bg); border-radius: 50%; svg { display: flex; + fill: var(--playerbar-btn-fg); } &:focus-visible { - background: var(--playerbar-btn-color-hover); + background: var(--playerbar-btn-bg-hover); + } + + &:hover { + background: var(--playerbar-btn-bg-hover); + + svg { + fill: var(--playerbar-btn-fg-hover); + } } `; @@ -50,21 +60,21 @@ const ButtonSecondaryVariant = css` svg { display: flex; - fill: var(--playerbar-btn-color); - stroke: var(--playerbar-btn-color); + fill: var(--playerbar-btn-bg); + stroke: var(--playerbar-btn-bg); } &:hover { svg { - fill: var(--playerbar-btn-color-hover); - stroke: var(--playerbar-btn-color-hover); + fill: var(--playerbar-btn-bg-hover); + stroke: var(--playerbar-btn-bg-hover); } } &:focus-visible { svg { - fill: var(--playerbar-btn-color-hover); - stroke: var(--playerbar-btn-color-hover); + fill: var(--playerbar-btn-bg-hover); + stroke: var(--playerbar-btn-bg-hover); } } `; diff --git a/src/renderer/features/player/components/right-controls.tsx b/src/renderer/features/player/components/right-controls.tsx index 100d63979..a8f3888f5 100644 --- a/src/renderer/features/player/components/right-controls.tsx +++ b/src/renderer/features/player/components/right-controls.tsx @@ -48,7 +48,7 @@ export const RightControls = () => { } - tooltip={{ label: 'View queue' }} + tooltip={{ label: 'View queue', openDelay: 500 }} variant="secondary" onClick={() => setSidebar({ rightExpanded: !isQueueExpanded })} /> @@ -63,7 +63,7 @@ export const RightControls = () => { ) } - tooltip={{ label: muted ? 'Muted' : volume }} + tooltip={{ label: muted ? 'Muted' : volume, openDelay: 500 }} variant="secondary" onClick={handleMute} /> diff --git a/src/renderer/features/titlebar/components/activity-menu.tsx b/src/renderer/features/titlebar/components/activity-menu.tsx index aa8eacab1..9a058a01f 100644 --- a/src/renderer/features/titlebar/components/activity-menu.tsx +++ b/src/renderer/features/titlebar/components/activity-menu.tsx @@ -1,11 +1,14 @@ import { useEffect, useState } from 'react'; import styled from '@emotion/styled'; import { Group } from '@mantine/core'; +import { useQueryClient } from '@tanstack/react-query'; import { FiActivity } from 'react-icons/fi'; import { RiRefreshLine } from 'react-icons/ri'; import { socket } from '@/renderer/api'; +import { queryKeys } from '@/renderer/api/query-keys'; import { Button, Popover, Text } from '@/renderer/components'; import { useTaskList } from '@/renderer/features/tasks'; +import { useAuthStore } from '@/renderer/store'; import { rotating } from '@/renderer/styles'; const StyledActivitySvg = styled(RiRefreshLine)` @@ -14,10 +17,13 @@ const StyledActivitySvg = styled(RiRefreshLine)` `; export const ActivityMenu = () => { + const queryClient = useQueryClient(); + const serverId = useAuthStore((state) => state.currentServer?.id) || ''; const [isTaskRunning, setIsTaskRunning] = useState(false); const { data: tasks, refetch } = useTaskList({ onSuccess: (data) => { if (data.data.length === 0) { + queryClient.invalidateQueries(queryKeys.server.root(serverId)); return setIsTaskRunning(false); } @@ -63,14 +69,9 @@ export const ActivityMenu = () => { <> -