Skip to content

Commit 438786d

Browse files
create-issue-branch[bot]loiswells97patch0
authored
Settings persistence across pages (#329)
# What's Changed? - Fixed settings persistence across all pages by giving the related cookies a path of `/` - Fixed persistence of dismissing the beta banner closes #313 Co-authored-by: loiswells97 <[email protected]> Co-authored-by: Lois Wells <[email protected]> Co-authored-by: Lois Wells <[email protected]> Co-authored-by: Patrick Cherry <[email protected]>
1 parent 65e2f49 commit 438786d

File tree

4 files changed

+33
-8
lines changed

4 files changed

+33
-8
lines changed

CHANGELOG.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
2525

2626
### Fixed
2727
- Make sure button text is always centered (#328)
28+
- Make theme and font size persist across all pages of the app (#329)
29+
- Make dismissing the Beta banner persist across all pages of the app (#329)
2830
- Touch area of icon-only buttons (#330, #336)
2931
- Delete project action on project index page (#330)
3032
- Refactored project list loading to allow loading states to be shown (#330)

src/components/BetaBanner/BetaBanner.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const BetaBanner = () => {
1515
const [cookies, setCookie] = useCookies(['betaBannerDismissed'])
1616

1717
const closeBanner = () => {
18-
setCookie('betaBannerDismissed', 'true')
18+
setCookie('betaBannerDismissed', 'true', { path: '/' })
1919
}
2020
const showModal = () => { dispatch(showBetaModal()) }
2121
const isShowing = !cookies.betaBannerDismissed

src/components/Editor/FontSizeSelector/FontSizeSelector.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,25 +4,37 @@ import { useTranslation } from "react-i18next";
44
import { FontIcon } from "../../../Icons";
55
import './FontSizeSelector.scss'
66

7+
const COOKIE_PATHS = ['/', '/projects', '/python']
8+
79
const FontSizeSelector = () => {
8-
const [ cookies , setCookie] = useCookies(['fontSize'])
10+
const [ cookies , setCookie, removeCookie] = useCookies(['fontSize'])
911
const fontSize = cookies.fontSize || "small"
1012
const { t } = useTranslation()
13+
14+
const setFontSize = (fontSize) => {
15+
if (cookies.fontSize) {
16+
COOKIE_PATHS.forEach((path) => {
17+
removeCookie('fontSize', {path})
18+
})
19+
}
20+
setCookie('fontSize', fontSize, { path: '/' })
21+
}
22+
1123
return (
1224
<div className='font-size-selector'>
13-
<div className='font-btn font-btn--small' onClick={() => setCookie('fontSize', 'small')}>
25+
<div className='font-btn font-btn--small' onClick={() => setFontSize('small')}>
1426
<div className={`font-btn__icon font-btn__icon--small ${fontSize==='small' ? 'font-btn__icon--active' : ''}`}>
1527
<FontIcon size={15}/>
1628
</div>
1729
<p>{t('header.settingsMenu.textSizeOptions.small')}</p>
1830
</div>
19-
<div className='font-btn font-btn--medium' onClick={() => setCookie('fontSize', 'medium')}>
31+
<div className='font-btn font-btn--medium' onClick={() => setFontSize('medium')}>
2032
<div className={`font-btn__icon font-btn__icon--medium ${fontSize==='medium' ? 'font-btn__icon--active' : ''}`}>
2133
<FontIcon size={23}/>
2234
</div>
2335
<p>{t('header.settingsMenu.textSizeOptions.medium')}</p>
2436
</div>
25-
<div className='font-btn font-btn--large' onClick={() => setCookie('fontSize', 'large')}>
37+
<div className='font-btn font-btn--large' onClick={() => setFontSize('large')}>
2638
<div className={`font-btn__icon font-btn__icon--large ${fontSize==='large' ? 'font-btn__icon--active' : ''}`}>
2739
<FontIcon size={36}/>
2840
</div>

src/components/ThemeToggle/ThemeToggle.js

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,31 @@ import { useTranslation } from 'react-i18next';
55
import './ThemeToggle.scss'
66
import { MoonIcon, SunIcon } from '../../Icons';
77

8+
const COOKIE_PATHS = ['/', '/projects', '/python']
9+
810
const ThemeToggle = () => {
9-
const [ cookies, setCookie ] = useCookies(['theme'])
11+
const [ cookies, setCookie, removeCookie ] = useCookies(['theme'])
1012
const isDarkMode = cookies.theme==="dark" || (!cookies.theme && window.matchMedia("(prefers-color-scheme:dark)").matches)
1113
const { t } = useTranslation()
1214

15+
const setTheme = (theme) => {
16+
if (cookies.theme) {
17+
COOKIE_PATHS.forEach((path) => {
18+
removeCookie('theme', {path})
19+
})
20+
}
21+
setCookie('theme', theme, { path: '/' })
22+
}
23+
1324
return (
1425
<div className='theme-toggle'>
15-
<div className='theme-btn theme-btn--light' onClick={() => setCookie('theme', 'light')}>
26+
<div className='theme-btn theme-btn--light' onClick={() => setTheme('light')}>
1627
<div className={`theme-btn__icon theme-btn__icon--light ${!isDarkMode ? 'theme-btn__icon--active' : null}`}>
1728
<SunIcon />
1829
</div>
1930
<p>{t('header.settingsMenu.themeOptions.light')}</p>
2031
</div>
21-
<div className='theme-btn theme-btn--dark' onClick={() => setCookie('theme', 'dark')}>
32+
<div className='theme-btn theme-btn--dark' onClick={() => setTheme('dark')}>
2233
<div className={`theme-btn__icon theme-btn__icon--dark ${isDarkMode ? 'theme-btn__icon--active' : null}`}>
2334
<MoonIcon />
2435
</div>

0 commit comments

Comments
 (0)