girineko/YesPlayMusic
1
0
Fork 0
mirror of https://github.com/GiriNeko/YesPlayMusic.git synced 2025-12-18 06:07:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: updates

Browse source
This commit is contained in:
qier222 2022-07-12 22:42:50 +08:00
parent 222fb02355
commit 47e41dea9b
No known key found for this signature in database
GPG key ID: 9C85007ED905F14D
24 changed files with 380 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

8
packages/web/components/New/Topbar/NavigationButtons.tsx
View file

@ -18,10 +18,10 @@ const NavigationButtons = () => {
await controlsBack.start({ x: -5 })
await controlsBack.start({ x: 0 })
}}
className='app-region-no-drag rounded-full bg-day-600 p-2.5 dark:bg-night-600'
className='app-region-no-drag rounded-full bg-white/10 p-2.5 text-white/40 backdrop-blur-3xl'
>
<motion.div animate={controlsBack} transition={transition}>
<Icon name='back' className='h-7 w-7 text-neutral-500' />
<Icon name='back' className='h-7 w-7 ' />
</motion.div>
</button>
<button
@ -32,10 +32,10 @@ const NavigationButtons = () => {
await controlsForward.start({ x: 5 })
await controlsForward.start({ x: 0 })
}}
className='app-region-no-drag ml-2.5 rounded-full bg-day-600 p-2.5 dark:bg-night-600'
className='app-region-no-drag ml-2.5 rounded-full bg-white/10 p-2.5 text-white/40 backdrop-blur-3xl'
>
<motion.div animate={controlsForward} transition={transition}>
<Icon name='forward' className='h-7 w-7 text-neutral-500' />
<Icon name='forward' className='h-7 w-7' />
</motion.div>
</button>
</>

4
packages/web/components/New/Topbar/SearchBox.tsx
View file

@ -11,7 +11,7 @@ const SearchBox = () => {
return (
<div
className={cx(
'app-region-no-drag flex items-center rounded-full bg-day-600 p-2.5 text-neutral-500 dark:bg-night-600',
'app-region-no-drag flex items-center rounded-full bg-white/10 p-2.5 text-white/40 backdrop-blur-3xl',
css`
${bp.lg} {
min-width: 284px;
@ -23,7 +23,7 @@ const SearchBox = () => {
<input
placeholder='Search'
className={cx(
'flex-shrink bg-transparent font-medium placeholder:text-neutral-500 dark:text-neutral-200',
'flex-shrink bg-transparent font-medium placeholder:text-white/40 dark:text-white/80',
css`
@media (max-width: 420px) {
width: 142px;

9
packages/web/components/New/Topbar/TopbarDesktop.tsx
View file

@ -8,14 +8,21 @@ import uiStates from '@/web/states/uiStates'
import { useSnapshot } from 'valtio'
import { AnimatePresence, motion } from 'framer-motion'
import { ease } from '@/web/utils/const'
import { useLocation } from 'react-router-dom'
const Background = () => {
const { hideTopbarBackground } = useSnapshot(uiStates)
const location = useLocation()
const isPageHaveBlurBG =
location.pathname.startsWith('/album/') ||
location.pathname.startsWith('/artist/') ||
location.pathname.startsWith('/playlist/')
const show = !hideTopbarBackground || !isPageHaveBlurBG
return (
<>
<AnimatePresence>
{!hideTopbarBackground && (
{show && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}