Cool_Tools/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2024-11-20 06:27:09 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

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 { useRef } from 'react';
import styled from 'styled-components';
import { useShouldPadTitlebar } from '/@/renderer/hooks';
import { useShouldPadTitlebar, useTheme } from '/@/renderer/hooks';
const Container = styled(motion(Flex))<{
height?: string;
@ -42,14 +42,17 @@ const BackgroundImage = styled.div<{ background: string }>`
background: ${(props) => props.background || 'var(--titlebar-bg)'};
`;
const BackgroundImageOverlay = styled.div`
const BackgroundImageOverlay = styled.div<{ theme: 'light' | 'dark' }>`
position: absolute;
top: 0;
left: 0;
z-index: 10;
width: 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
@ -82,6 +85,7 @@ export const PageHeader = ({
}: PageHeaderProps) => {
const ref = useRef(null);
const padRight = useShouldPadTitlebar();
const theme = useTheme();
return (
<Container
@ -110,7 +114,7 @@ export const PageHeader = ({
{backgroundColor && (
<>
<BackgroundImage background={backgroundColor || 'var(--titlebar-bg)'} />
<BackgroundImageOverlay />
<BackgroundImageOverlay theme={theme} />
</>
)}
</Container>