From 42d0e14b98a3242cefbe02ca726e47b5af483e1c Mon Sep 17 00:00:00 2001 From: Amruth Pillai Date: Wed, 23 Nov 2022 15:20:04 +0100 Subject: [PATCH] fix styling issues and theme cascades across all templates --- client/components/shared/Markdown.tsx | 3 +- .../templates/Castform/widgets/Masthead.tsx | 35 +++++++++++++++---- client/templates/Castform/widgets/Section.tsx | 16 ++++++--- client/templates/Gengar/widgets/Masthead.tsx | 35 +++++++++++++++---- .../templates/Glalie/widgets/BadgeDisplay.tsx | 11 ++---- .../templates/Kakuna/widgets/BadgeDisplay.tsx | 11 ++---- client/templates/Leafish/Leafish.module.scss | 2 +- client/templates/Pikachu/widgets/Masthead.tsx | 5 +-- client/templates/shared/DataDisplay.tsx | 7 ++-- client/utils/styles.ts | 32 ++++++++++------- 10 files changed, 100 insertions(+), 57 deletions(-) diff --git a/client/components/shared/Markdown.tsx b/client/components/shared/Markdown.tsx index 2db7a604..60dcd332 100644 --- a/client/components/shared/Markdown.tsx +++ b/client/components/shared/Markdown.tsx @@ -1,7 +1,6 @@ import clsx from 'clsx'; import { isEmpty } from 'lodash'; import ReactMarkdown from 'react-markdown'; -import remarkGfm from 'remark-gfm'; type Props = { children?: string; @@ -12,7 +11,7 @@ const Markdown: React.FC = ({ className, children }) => { if (!children || isEmpty(children)) return null; return ( - + {children} ); diff --git a/client/templates/Castform/widgets/Masthead.tsx b/client/templates/Castform/widgets/Masthead.tsx index 0c1f3856..cddfa0f4 100644 --- a/client/templates/Castform/widgets/Masthead.tsx +++ b/client/templates/Castform/widgets/Masthead.tsx @@ -35,34 +35,55 @@ export const MastheadSidebar: React.FC = () => { /> )} -
+

{name}

{headline}

- } className="!gap-2 text-xs"> + } className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}> {formatLocation(location)} - } className="!gap-2 text-xs"> + } className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}> {formatDateString(birthdate, dateFormat)} - } className="!gap-2 text-xs" link={`mailto:${email}`}> + } + className="!gap-2 text-xs" + link={`mailto:${email}`} + textClassName={clsx({ invert: contrast === 'light' })} + > {email} - } className="!gap-2 text-xs" link={`tel:${phone}`}> + } + className="!gap-2 text-xs" + link={`tel:${phone}`} + textClassName={clsx({ invert: contrast === 'light' })} + > {phone} - } link={website && addHttp(website)} className="!gap-2 text-xs"> + } + link={website && addHttp(website)} + className="!gap-2 text-xs" + textClassName={clsx({ invert: contrast === 'light' })} + > {website} {profiles.map(({ id, username, network, url }) => ( - + {username} ))} diff --git a/client/templates/Castform/widgets/Section.tsx b/client/templates/Castform/widgets/Section.tsx index cdb6df41..347394f6 100644 --- a/client/templates/Castform/widgets/Section.tsx +++ b/client/templates/Castform/widgets/Section.tsx @@ -1,5 +1,6 @@ import { Email, Link, Phone } from '@mui/icons-material'; import { ListItem, Section as SectionType } from '@reactive-resume/schema'; +import clsx from 'clsx'; import get from 'lodash/get'; import isArray from 'lodash/isArray'; import isEmpty from 'lodash/isEmpty'; @@ -23,8 +24,10 @@ const Section: React.FC = ({ }) => { const section: SectionType = useAppSelector((state) => get(state.resume.present, path, {} as SectionType)); const dateFormat: string = useAppSelector((state) => get(state.resume.present, 'metadata.date.format')); + const layout: string[][][] = useAppSelector((state) => get(state.resume.present, 'metadata.layout')); const sectionId = useMemo(() => section.id || path.replace('sections.', ''), [path, section]); + const isSidebarSection = useMemo(() => layout.some((row) => row[1].includes(sectionId)), [layout, sectionId]); if (!section.visible) return null; @@ -35,7 +38,7 @@ const Section: React.FC = ({ {section.name}
{section.items.map((item: ListItem) => { @@ -76,8 +79,13 @@ const Section: React.FC = ({ key={index} className="mr-2 h-3 w-3 rounded-full border" style={{ - borderColor: 'var(--primary-color)', - backgroundColor: levelNum / (10 / 5) > index ? 'var(--primary-color)' : '', + borderColor: isSidebarSection ? 'var(--text-color)' : 'var(--primary-color)', + backgroundColor: + levelNum / (10 / 5) > index + ? isSidebarSection + ? 'var(--text-color)' + : 'var(--primary-color)' + : '', }} /> ))} @@ -94,7 +102,7 @@ const Section: React.FC = ({ )} - {keywords &&
{keywords.join(', ')}
} + {keywords && {keywords.join(', ')}} {(phone || email) && (
diff --git a/client/templates/Gengar/widgets/Masthead.tsx b/client/templates/Gengar/widgets/Masthead.tsx index f4452632..8b41edc8 100644 --- a/client/templates/Gengar/widgets/Masthead.tsx +++ b/client/templates/Gengar/widgets/Masthead.tsx @@ -36,34 +36,55 @@ export const MastheadSidebar: React.FC = () => { /> )} -
+

{name}

{headline}

- } className="!gap-2 text-xs"> + } className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}> {formatLocation(location)} - } className="!gap-2 text-xs"> + } className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}> {formatDateString(birthdate, dateFormat)} - } className="!gap-2 text-xs" link={`mailto:${email}`}> + } + className="!gap-2 text-xs" + link={`mailto:${email}`} + textClassName={clsx({ invert: contrast === 'light' })} + > {email} - } className="!gap-2 text-xs" link={`tel:${phone}`}> + } + className="!gap-2 text-xs" + link={`tel:${phone}`} + textClassName={clsx({ invert: contrast === 'light' })} + > {phone} - } link={website && addHttp(website)} className="!gap-2 text-xs"> + } + link={website && addHttp(website)} + className="!gap-2 text-xs" + textClassName={clsx({ invert: contrast === 'light' })} + > {website} {profiles.map(({ id, username, network, url }) => ( - + {username} ))} diff --git a/client/templates/Glalie/widgets/BadgeDisplay.tsx b/client/templates/Glalie/widgets/BadgeDisplay.tsx index 6a19b276..d62bce89 100644 --- a/client/templates/Glalie/widgets/BadgeDisplay.tsx +++ b/client/templates/Glalie/widgets/BadgeDisplay.tsx @@ -21,15 +21,8 @@ const BadgeDisplay: React.FC = ({ items }) => { return (
    {items.map((item) => ( -
  • - {item} +
  • + {item}
    • ))}
diff --git a/client/templates/Kakuna/widgets/BadgeDisplay.tsx b/client/templates/Kakuna/widgets/BadgeDisplay.tsx index d2c00d26..4af70775 100644 --- a/client/templates/Kakuna/widgets/BadgeDisplay.tsx +++ b/client/templates/Kakuna/widgets/BadgeDisplay.tsx @@ -20,15 +20,8 @@ const BadgeDisplay: React.FC = ({ items }) => { return (
    {items.map((item) => ( -
  • - {item} +
  • + {item}
    • ))}
diff --git a/client/templates/Leafish/Leafish.module.scss b/client/templates/Leafish/Leafish.module.scss index 1c88fbed..81ea0f52 100644 --- a/client/templates/Leafish/Leafish.module.scss +++ b/client/templates/Leafish/Leafish.module.scss @@ -1,5 +1,5 @@ .container { - @apply grid grid-cols-2 gap-4 px-6 py-4; + @apply grid grid-cols-2 gap-4 px-6 py-4 items-start; .main { @apply grid gap-4; diff --git a/client/templates/Pikachu/widgets/Masthead.tsx b/client/templates/Pikachu/widgets/Masthead.tsx index bf54e57e..eb4ad6dd 100644 --- a/client/templates/Pikachu/widgets/Masthead.tsx +++ b/client/templates/Pikachu/widgets/Masthead.tsx @@ -1,5 +1,6 @@ import { Cake, Email, Phone, Public, Room } from '@mui/icons-material'; import { ThemeConfig } from '@reactive-resume/schema'; +import clsx from 'clsx'; import get from 'lodash/get'; import isEmpty from 'lodash/isEmpty'; import { useMemo } from 'react'; @@ -72,14 +73,14 @@ export const MastheadMain: React.FC = () => { className="grid gap-2 p-4" style={{ color: contrast === 'dark' ? theme.text : theme.background, backgroundColor: theme.primary }} > -
+

{name}

{headline}

- {summary} + {summary}
); }; diff --git a/client/templates/shared/DataDisplay.tsx b/client/templates/shared/DataDisplay.tsx index e5126c53..f085a131 100644 --- a/client/templates/shared/DataDisplay.tsx +++ b/client/templates/shared/DataDisplay.tsx @@ -5,16 +5,17 @@ type Props = { icon?: JSX.Element; link?: string; className?: string; + textClassName?: string; }; -const DataDisplay: React.FC> = ({ icon, link, className, children }) => { +const DataDisplay: React.FC> = ({ icon, link, className, textClassName, children }) => { if (isEmpty(children)) return null; if (!isEmpty(link)) { return ( @@ -24,7 +25,7 @@ const DataDisplay: React.FC> = ({ icon, link, cla return (
{icon} - {children} + {children}
); }; diff --git a/client/utils/styles.ts b/client/utils/styles.ts index 064e0e08..67bd6ef7 100644 --- a/client/utils/styles.ts +++ b/client/utils/styles.ts @@ -7,7 +7,7 @@ export const generateTypographyStyles = ({ family, size }: Typography): string = font-size: ${size.body}px !important; font-family: ${family.body} !important; - svg { font-size: ${size.body}px !important; } + p, li, svg { font-size: ${size.body}px !important; line-height: ${size.body * 1.5}px !important; } h1, h2, @@ -25,25 +25,31 @@ export const generateTypographyStyles = ({ family, size }: Typography): string = h4 { font-size: ${size.heading / 2.5}px !important; line-height: ${size.heading / 2.5}px !important; } h5 { font-size: ${size.heading / 3}px !important; line-height: ${size.heading / 3}px !important; } h6 { font-size: ${size.heading / 3.5}px !important; line-height: ${size.heading / 3.5}px !important; } - - .markdown p, - .markdown li { - font-size: ${size.body}px !important; - } `; export const generateThemeStyles = ({ text, background, primary }: ThemeConfig): string => ` - color: ${text} !important; - background-color: ${background} !important; + --text-color: ${text} !important; --primary-color: ${primary} !important; + --background-color: ${background} !important; - svg { - color: var(--primary-color) !important; + color: var(--text-color); + background-color: var(--background-color); + + span, + h1, + h2, + h3, + h4, + h5, + h6, + li, + p, + a { + color: var(--text-color); } - .markdown p, - .markdown li { - color: ${text} !important; + svg { + color: var(--primary-color); } `;