Ryan/Reactive-Resume
1
0
Fork 0
mirror of https://github.com/AmruthPillai/Reactive-Resume.git synced 2025-11-16 01:32:02 +10:00
Code Issues Packages Projects Releases Wiki Activity

Fix-Gengar Theme MastHead Icons Disappear on Theme Change

Browse Source
This commit is contained in:
Aadhar Chandiwala
2022-03-13 12:47:57 +05:30
parent ebd9253038
commit e7a8596456
1 changed files with 7 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
client/templates/Gengar/Gengar.tsx
View File

@ -1,5 +1,7 @@
import { css } from '@emotion/css';
import { alpha } from '@mui/material'; import { alpha } from '@mui/material';
import { Theme } from '@reactive-resume/schema'; import { Theme } from '@reactive-resume/schema';
import clsx from 'clsx';
import get from 'lodash/get'; import get from 'lodash/get';
import { useMemo } from 'react'; import { useMemo } from 'react';
@ -19,12 +21,16 @@ const Gengar: React.FC<PageProps> = ({ page }) => {
const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {})); const theme: Theme = useAppSelector((state) => get(state.resume, 'metadata.theme', {}));
const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]); const contrast = useMemo(() => getContrastColor(theme.primary), [theme.primary]);
const backgroundColor: string = useMemo(() => alpha(theme.primary, 0.15), [theme.primary]); const backgroundColor: string = useMemo(() => alpha(theme.primary, 0.15), [theme.primary]);
const color = useMemo(() => (contrast === 'dark' ? theme.text : theme.background), [theme, contrast]);
return ( return (
<div className={styles.page}> <div className={styles.page}>
<div className={styles.container}> <div className={styles.container}>
<div className={styles.sidebar}> <div className={styles.sidebar}>
<div style={{ color: contrast === 'dark' ? theme.text : theme.background, backgroundColor: theme.primary }}> <div
className={clsx(css(`svg { color: ${color} } --primary-color: ${color}`))}
style={{ color: contrast === 'dark' ? theme.text : theme.background, backgroundColor: theme.primary }}
>
{isFirstPage && <MastheadSidebar />} {isFirstPage && <MastheadSidebar />}
</div> </div>