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

fix styling issues and theme cascades across all templates

Browse Source
This commit is contained in:
Amruth Pillai
2022-11-23 15:20:04 +01:00
parent 9a42d684fb
commit 42d0e14b98
10 changed files with 100 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
client/templates/Castform/widgets/Masthead.tsx
View File

@ -35,34 +35,55 @@ export const MastheadSidebar: React.FC = () => {
/>
)}
<div>
<div className={clsx({ invert: contrast === 'light' })}>
<h1 className="mb-1">{name}</h1>
<p className="opacity-75">{headline}</p>
</div>
<div className={clsx('flex flex-col gap-2.5', css(`svg { color: ${color} }`))}>
<DataDisplay icon={<Room />} className="!gap-2 text-xs">
<DataDisplay icon={<Room />} className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}>
{formatLocation(location)}
</DataDisplay>
<DataDisplay icon={<Cake />} className="!gap-2 text-xs">
<DataDisplay icon={<Cake />} className="!gap-2 text-xs" textClassName={clsx({ invert: contrast === 'light' })}>
{formatDateString(birthdate, dateFormat)}
</DataDisplay>
<DataDisplay icon={<Email />} className="!gap-2 text-xs" link={`mailto:${email}`}>
<DataDisplay
icon={<Email />}
className="!gap-2 text-xs"
link={`mailto:${email}`}
textClassName={clsx({ invert: contrast === 'light' })}
>
{email}
</DataDisplay>
<DataDisplay icon={<Phone />} className="!gap-2 text-xs" link={`tel:${phone}`}>
<DataDisplay
icon={<Phone />}
className="!gap-2 text-xs"
link={`tel:${phone}`}
textClassName={clsx({ invert: contrast === 'light' })}
>
{phone}
</DataDisplay>
<DataDisplay icon={<Public />} link={website && addHttp(website)} className="!gap-2 text-xs">
<DataDisplay
icon={<Public />}
link={website && addHttp(website)}
className="!gap-2 text-xs"
textClassName={clsx({ invert: contrast === 'light' })}
>
{website}
</DataDisplay>
{profiles.map(({ id, username, network, url }) => (
<DataDisplay key={id} icon={getProfileIcon(network)} link={url && addHttp(url)} className="!gap-2 text-xs">
<DataDisplay
key={id}
icon={getProfileIcon(network)}
link={url && addHttp(url)}
className="!gap-2 text-xs"
textClassName={clsx({ invert: contrast === 'light' })}
>
{username}
</DataDisplay>
))}