ekzyis/stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Minor tweaks to the page footer (#452)

Browse Source 
1. Use an ActionTooltip to explain what the light/dark mode and lightning buttons are for
2. Open the current commit github link in a new tab
This commit is contained in:
SatsAllDay 2023-08-28 20:35:25 -04:00 committed by GitHub
parent e77bc819bb
commit b24b06eeee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
components/footer.js
View File

@ -14,6 +14,7 @@ import Amboss from '../svgs/amboss.svg'
import { useEffect, useState } from 'react' import { useEffect, useState } from 'react'
import Rewards from './footer-rewards' import Rewards from './footer-rewards'
import useDarkMode from './dark-mode' import useDarkMode from './dark-mode'
import ActionTooltip from './action-tooltip'
const RssPopover = ( const RssPopover = (
<Popover> <Popover>
@ -156,8 +157,12 @@ export default function Footer ({ links = true }) {
{links && {links &&
<> <>
<div className='mb-1'> <div className='mb-1'>
<DarkModeIcon onClick={darkModeToggle} width={20} height={20} className='fill-grey theme' suppressHydrationWarning /> <ActionTooltip notForm overlayText={`${darkMode ? 'disable' : 'enable'} dark mode`}>
<LnIcon onClick={toggleLightning} width={20} height={20} className='ms-2 fill-grey theme' suppressHydrationWarning /> <DarkModeIcon onClick={darkModeToggle} width={20} height={20} className='fill-grey theme' suppressHydrationWarning />
</ActionTooltip>
<ActionTooltip notForm overlayText={`${lightning === 'yes' ? 'disable' : 'enable'} lightning animations`}>
<LnIcon onClick={toggleLightning} width={20} height={20} className='ms-2 fill-grey theme' suppressHydrationWarning />
</ActionTooltip>
</div> </div>
<div className='mb-0' style={{ fontWeight: 500 }}> <div className='mb-0' style={{ fontWeight: 500 }}>
<Rewards /> <Rewards />
@ -252,7 +257,7 @@ export default function Footer ({ links = true }) {
</small> </small>
{version && {version &&
<div className={styles.version}> <div className={styles.version}>
running <a className='text-reset' href={`https://github.com/stackernews/stacker.news/commit/${version}`}>{version}</a> running <a className='text-reset' href={`https://github.com/stackernews/stacker.news/commit/${version}`} target='_blank' rel='noreferrer'>{version}</a>
</div>} </div>}
</Container> </Container>
</footer> </footer>