Merge pull request #5097 from naturalcrit/fit-listpage-into-vault

Dark Mode for the userpage

client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx

@@ -4,7 +4,8 @@ import moment from 'moment';
 import request from '../../../../utils/request-middleware.js';
 
 import googleDriveIcon from '../../../../googleDrive.svg';
-import homebreweryIcon from '../../../../thumbnail.svg';
+import homebreweryIconWhite from '@themes/assets/naturalCritLogoWhite.svg';
+import homebreweryIconBlack from '@themes/assets/naturalCritLogoBlack.svg';
 import dedent from 'dedent';
 
 const BrewItem = ({
@@ -16,6 +17,7 @@ const BrewItem = ({
 	},
 	updateListFilter = ()=>{},
 	reportError = ()=>{},
+	theme,
 	renderStorage = true,
 })=>{
 
@@ -101,10 +103,9 @@ const BrewItem = ({
 				</span>
 			);
 		}
-
 		return (
 			<span className='storage' title='Homebrewery Storage'>
-				<img className='homebreweryIcon' src={homebreweryIcon} alt='Homebrewery Storage' />
+				<img className='homebreweryIcon' src={theme === 'light' ? homebreweryIconBlack : homebreweryIconWhite} alt='Homebrewery Storage' />
 			</span>
 		);
 	};

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -7,6 +7,7 @@
 	--bg-image                  : @backgroundImageAlt;
 	--text-clr                  : black;
 	--text-shadow-clr           : white;
+	--hb-logo: url('@themes/assets/naturalCritLogoBlack.svg');
 
 	position                    : relative;
 	display                     : flex;
@@ -57,9 +58,11 @@
 		font-weight      : bold;
 		white-space      : nowrap;
 		cursor           : pointer;
-		background-color : rgba(from var(--tag-base) r g b / 0.1);
+		color:black;
+		background : hsl(from currentColor h 20% 80%);
 		border           : 1px solid currentColor;
 		border-radius    : 4px;
+
 		&::before {
 			margin-right : 3px;
 			font-family  : 'Font Awesome 6 Free';
@@ -72,22 +75,18 @@
 		--tag-system     : #800000;
 		&.type {
 			color            : var(--tag-type);
-			background-color : rgba(from var(--tag-type) r g b / 0.2);
 			&::before { content : '\f0ad'; }
 		}
 		&.group {
 			color            : var(--tag-group);
-			background-color : rgba(from var(--tag-group) r g b / 0.1);
 			&::before { content : '\f500'; }
 		}
 		&.meta {
 			color            : var(--tag-meta);
-			background-color : rgba(from var(--tag-meta) r g b / 0.2);
 			&::before { content : '\f05a'; }
 		}
 		&.system {
 			color            : var(--tag-system);
-			background-color : rgba(from var(--tag-system) r g b / 0.2);
 			&::before { content : '\f518'; }
 		}
 	}
@@ -127,11 +126,20 @@
 		.deleteLink { color : @red; }
 	}
 }
+
+.darkMode .brewItem {
+	--bg-clr                    : #444;
+	--bg-image                  : @backgroundImageAltDark;
+	--text-clr                  : #ddd;
+	--text-shadow-clr           : black;
+	--hb-logo: url('@themes/assets/naturalCritLogoWhite.svg');
+}
+
 .grid > .brewItem {
 	justify-content  : space-between;
 	width            : clamp(300px, 48%, 500px);
 	min-height       : 125px;
-	padding          : 5px 15px 5px 6px;
+	padding          : 7px 17px 7px 8px;
 	padding-right    : 30px;
 	border-radius    : 5px;
 	box-shadow       : 0 4px 5px 0 #333333;
@@ -160,7 +168,7 @@
 	width                 : 300px;
 	height                : 400px;
 	padding               : 100px 10px 50px;
-	background-image      : url('@themes/assets/naturalCritLogoBlack.svg'), var(--bg-image);
+	background-image      : var(--hb-logo), var(--bg-image);
 	background-repeat     : no-repeat;
 	background-position   : center 20%, center;
 	background-size       : 50%, cover;
@@ -194,7 +202,7 @@
 		width               : 100%;
 		height              : 100%;
 		background-repeat   : no-repeat;
-		background-position : right top;
+		background-position : center top;
 		background-size     : cover;
 		opacity             : 1;
 		mask-image          : unset;
@@ -221,7 +229,6 @@
 			grid-area : tags;
 			color     : inherit;
 			i { color : inherit;}
-			> span { background : hsl(from currentColor h 20% 80%); }
 		}
 		.brewAuthors { grid-area : authors; }
 		.brewPages { grid-area : pages; }
@@ -235,6 +242,9 @@
 		height   : 40px;
 	}
 }
+.darkMode .card .brewItem {
+	border-width:2px;
+}
 .list > .brewItem {
 	display               : grid;
 	grid-template-columns : 35% 3fr 150px;

client/homebrew/pages/basePages/listPage/listPage.jsx

@@ -10,10 +10,12 @@ const USERPAGE_SORT_DIR = 'HB_listPage_sortDir';
 const USERPAGE_SORT_TYPE = 'HB_listPage_sortType';
 const USERPAGE_GROUP_VISIBILITY_PREFIX = 'HB_listPage_visibility_group';
 const USERPAGE_LAYOUT_MODE = 'HB_listPage_layout_mode';
+const USERPAGE_THEME_MODE = 'HB_listPage_theme_mode';
 
 const DEFAULT_SORT_TYPE = 'alpha';
 const DEFAULT_SORT_DIR = 'asc';
 const DEFAULT_LAYOUT_MODE = 'grid';
+const DEFAULT_THEME_MODE = 'light';
 
 const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navItems = <></>, reportError = null, query })=>{
 	const [filterString, setFilterString] = useState(query?.filter || '');
@@ -22,6 +24,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	const [sortDir, setSortDir] = useState(query?.dir || null);
 	const [groupVisibility, setGroupVisibility] = useState({});
 	const [layoutMode, setLayoutMode] = useState(DEFAULT_LAYOUT_MODE);
+	const [themeMode, setThemeMode] = useState(DEFAULT_THEME_MODE);
 
 	const groupVisibilityRef = useRef(groupVisibility);
 	const sortTypeRef = useRef(sortType);
@@ -53,11 +56,13 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 		}, {});
 
 		const newLayoutMode = localStorage.getItem(USERPAGE_LAYOUT_MODE) || DEFAULT_LAYOUT_MODE;
+		const newThemeMode = localStorage.getItem(USERPAGE_THEME_MODE) || DEFAULT_THEME_MODE;
 
 		setGroupVisibility(namedBrewCollection);
 		setSortType(newSortType);
 		setSortDir(newSortDir);
 		setLayoutMode(newLayoutMode);
+		setThemeMode(newThemeMode);
 
 		return ()=>{
 			window.onbeforeunload = null;
@@ -80,6 +85,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 				brew={brew}
 				key={idx}
 				reportError={reportError}
+				theme={themeMode}
 				updateListFilter={(tag)=>{
 					updateUrl(filterString, sortType, sortDir, tag);
 				}}
@@ -113,12 +119,12 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 	const renderSortOption = (sortTitle, sortValue)=>{
 		return (
-			<div className={`sort-option ${sortType == sortValue ? 'active' : ''}`}>
+			<label className={`option ${sortType == sortValue ? 'active' : ''}`}>
 				<button value={`${sortValue}`} onClick={sortType == sortValue ? handleSortDirChange : handleSortOptionChange}>
 					{`${sortTitle}`}
 				</button>
 				{sortType == sortValue && <i className={`sortDir fas ${sortDir == 'asc' ? 'fa-sort-up' : 'fa-sort-down'}`}></i>}
-			</div>
+			</label>
 		);
 	};
 
@@ -201,7 +207,7 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 
 	const renderSortOptions = ()=>{
 		return (
-			<div className='sort-container'>
+			<div className='radio-toggle sort-container'>
 				<h6>Sort by :</h6>
 				{renderSortOption('Title', 'alpha')}
 				{renderSortOption('Created Date', 'created')}
@@ -282,57 +288,73 @@ const ListPage = ({ brewCollection = [{ title: '', class: '', brews: [] }], navI
 	};
 
 	const handleLayoutChange = (e, mode)=>{
-		setLayoutMode(e.target.checked ? mode : 'grid');
-		localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : 'grid');
+		setLayoutMode(e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
+		localStorage.setItem(USERPAGE_LAYOUT_MODE, e.target.checked ? mode : DEFAULT_LAYOUT_MODE);
 		return;
 	};
 
 	const renderLayoutModeOptions = ()=>{
 		return (
-			<div className='layout-container'>
-				View:
-				<div className='layout-option' title='grid'>
-					<label>
+			<div className='radio-toggle layout-container'>
+				<h6>View:</h6>
+				<label className='option' title='grid'>
 						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'grid')} checked={layoutMode === 'grid'} />
 						<i className='fac compressed-grid'></i>
-					</label>
-				</div>
-				<div className='layout-option' title='list'>
-					<label>
-						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
-						<i className='fas fa-bars'></i>
-					</label>
-				</div>
-				<div className='layout-option' title='card'>
-					<label>
-						<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
-						<i className='fac format-card'></i>
-					</label>
-				</div>
+				</label>
+				<label className='option' title='list'>
+					<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'list')} checked={layoutMode === 'list'} />
+					<i className='fas fa-bars'></i>
+				</label>
+				<label className='option' title='card'>
+					<input name='layout-mode' type='radio' onChange={(e)=>handleLayoutChange(e, 'card')} checked={layoutMode === 'card'} />
+					<i className='fac format-card'></i>
+				</label>
 			</div>
 		);
 	};
 
+	const handleThemeChange = (e, mode)=>{
+		setThemeMode(e.target.checked ? mode : DEFAULT_THEME_MODE);
+		localStorage.setItem(USERPAGE_THEME_MODE, e.target.checked ? mode : DEFAULT_THEME_MODE);
+		return;
+	};
+	const renderThemePicker = ()=>{
+		return (
+			<div className="radio-toggle theme-container">
+				<h6>Theme:</h6>
+				<label className="option">
+					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'light')} checked={themeMode === 'light'}/>
+					<i className="fas fa-sun"/>
+				</label>
+				<label className="option">
+					<input type="radio" name="theme" onChange={(e)=>handleThemeChange(e, 'dark')}  checked={themeMode === 'dark'}/>
+					<i className="fas fa-moon"/>
+				</label>
+			</div>
+		)
+	};
+
 	const renderNav = () =>{
 
 		return (
 			<div className="listPageNav">
+				{renderLayoutModeOptions()}
+				{renderThemePicker()}
 				{renderSortOptions()}
 				{renderFilterOption()}
 				{renderTagsOptions()}
-				{renderLayoutModeOptions()}
 			</div>
 		);
 			
 	} 
 
 	return (
-		<div className='listPage sitePage'>
+		<div className='sitePage listPage'>
 			{navItems}
 
 			{renderNav()}
 
-			<div className='content V3'>
+			<div className={`content V3 ${themeMode + 'Mode'}`}>
 				<div className='brewCollection'>{renderBrewCollection(brewCollection)}</div>
 			</div>
 		</div>

client/homebrew/pages/basePages/listPage/listPage.less

@@ -105,7 +105,6 @@
 					&:not(:has(.brewItem:last-child:nth-child(3n))) {
 						.brewItem:last-child {
 							margin-right : auto;
-							background   : green;
 						}
 					}
 				}
@@ -136,53 +135,49 @@
 			padding-inline : 10px;
 		}
 
-		.sort-container {
+		.radio-toggle {
 			z-index         : 1;
 			display         : flex;
 			flex-wrap       : wrap;
 			row-gap         : 5px;
-			column-gap      : 15px;
-			align-items     : baseline;
+			align-items     : center;
 			justify-content : center;
-
 			text-align      : center;
-
 			h6 {
-				font-size      : 11px;
-				font-weight    : bold;
-				text-transform : uppercase;
+				font-size      : 14px;
+				margin-right:5px;
 			}
-			.sort-option {
+
+			.option {
 				display     : flex;
 				align-items : center;
 				height      : 100%;
 				padding     : 0 8px;
 				color       : #CCCCCC;
 
+				input[type='radio'] { display : none; }
+
+				button {
+					padding          : 0;
+					font-size        : 11px;
+					font-weight      : normal;
+					text-transform   : uppercase;
+					background-color : transparent;
+				}
 				&:hover { background-color : #444444; }
 				
-				&.active {
+				&.active, &:has(input:checked) {
 					font-weight      : bold;
-					color            : #DDDDDD;
+					color            : white;
 					background-color : #333333;
 
 					button {
 						height      : 100%;
 						font-weight : 800;
-						color       : white;
 						& + .sortDir { padding-left : 5px; }
 					}
 				}
 			}
-
-			button {
-				padding          : 0;
-				font-size        : 11px;
-				font-weight      : normal;
-				color            : #CCCCCC;
-				text-transform   : uppercase;
-				background-color : transparent;
-			}
 		}
 
 		.filter-option {
@@ -242,21 +237,5 @@
 				}
 			}
 		}
-		.layout-container {
-			z-index         : 1;
-			display         : flex;
-			flex-wrap       : wrap;
-			row-gap         : 5px;
-			column-gap      : 15px;
-			align-items     : center;
-			justify-content : center;
-			text-align      : center;
-
-			input[type='radio'] { display : none; }
-
-			i { transition : color 0.2s; }
-
-			input:checked + i { color : @blueLight; }
-		}
 	}
 }