pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Set overlay opacity based on theme

Browse source
This commit is contained in:
jeffvli 2023-01-02 18:54:48 -08:00
parent 26e6f479b7
commit 4dc8920ff4
1 changed files with 8 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/renderer/components/page-header/index.tsx
View file

@ -2,7 +2,7 @@ import { Flex, FlexProps } from '@mantine/core';
import { AnimatePresence, motion, Variants } from 'framer-motion'; import { AnimatePresence, motion, Variants } from 'framer-motion';
import { useRef } from 'react'; import { useRef } from 'react';
import styled from 'styled-components'; import styled from 'styled-components';
import { useShouldPadTitlebar } from '/@/renderer/hooks'; import { useShouldPadTitlebar, useTheme } from '/@/renderer/hooks';
const Container = styled(motion(Flex))<{ const Container = styled(motion(Flex))<{
height?: string; height?: string;
@ -42,14 +42,17 @@ const BackgroundImage = styled.div<{ background: string }>`
background: ${(props) => props.background || 'var(--titlebar-bg)'}; background: ${(props) => props.background || 'var(--titlebar-bg)'};
`; `;
const BackgroundImageOverlay = styled.div` const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>`
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 10; z-index: 10;
width: 100%; width: 100%;
height: 100%; height: 100%;
background: linear-gradient(rgba(0, 0, 0, 30%), rgba(0, 0, 0, 30%)); background: ${(props) =>
props.theme === 'light'
? 'linear-gradient(rgba(0, 0, 0, 20%), rgba(0, 0, 0, 20%))'
: 'linear-gradient(rgba(0, 0, 0, 50%), rgba(0, 0, 0, 50%))'};
`; `;
export interface PageHeaderProps export interface PageHeaderProps
@ -82,6 +85,7 @@ export const PageHeader = ({
}: PageHeaderProps) => { }: PageHeaderProps) => {
const ref = useRef(null); const ref = useRef(null);
const padRight = useShouldPadTitlebar(); const padRight = useShouldPadTitlebar();
const theme = useTheme();
return ( return (
<Container <Container
@ -110,7 +114,7 @@ export const PageHeader = ({
{backgroundColor && ( {backgroundColor && (
<> <>
<BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} /> <BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
<BackgroundImageOverlay /> <BackgroundImageOverlay theme={theme} />
</> </>
)} )}
</Container> </Container>